/* ==========================================================================
   v2 «Il quadro di bottega»
   La pagina è un pannello nero di bottega: ogni sezione è un modulo con la sua spia,
   il pulsante principale è una leva a pillola, la luce gialla (il prodotto) esce
   dallo schermo e inonda il pannello. Solo Manrope, solo bianco e nero, più il giallo LED.
   Deroga del giallo fuori dallo schermo: scelta di Nicolò, 5 novembre 2026 (PRODUCT.md).
   Si carica dopo gli altri file: per tornare alla versione precedente togliere questo file
   e quadro.js da index.html.
   ========================================================================== */

:root{
  --q-panel:#111113; --q-line:#232326; --q-off:#8E8E94; --q-glow:255,210,74;
  --q-dots:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.5px);
}

/* ---------- Primo schermo: il pannello è nero, la scritta HORIZON diventa bianca ---------- */
.hero,.final,footer{--band:#0B0B0C;--on-band:#FFFFFF;--on-band-muted:#A1A1A6;--on-band-line:rgba(255,255,255,.16);--focus:#FFFFFF}
.hero{overflow:hidden}
.hero .logo img,footer .lgo img{filter:brightness(0) invert(1)} /* i file del kit sono neri: qui si usano nella versione bianca ammessa dal manuale */
.hero .call{border-color:#3A3A3C;color:#fff;background:transparent}

/* alone: sale dal pannello quando la vetrina si accende */
.hero::before,.final-in::before{content:"";position:absolute;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.3s cubic-bezier(.16,1,.3,1)}
.hero::before{inset:0;background:radial-gradient(ellipse 62% 32% at 50% 72%,rgba(var(--q-glow),.62),rgba(var(--q-glow),.16) 46%,transparent 68%)}
.final-in::before{inset:-90px -60px -70px;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(var(--q-glow),.3),rgba(var(--q-glow),.08) 55%,transparent 75%)}
.final-in{isolation:isolate}
.hero.q-on::before,.final.q-lit .final-in::before{opacity:1}
.final{position:relative;overflow:hidden}
.hero-in,.final>.wrap{position:relative;z-index:1}
.top{position:relative;z-index:3}

/* titolo: manifesto a sinistra, la seconda frase in grigio */
.hero-copy{text-align:left}
.hero h1{font-size:clamp(2.3rem,10vw,4.2rem);line-height:.98;letter-spacing:-.03em;text-align:left;text-wrap:balance}
.hero h1 em{color:#A1A1A6;font-style:normal}
.hero .sub{text-align:left;margin-left:0;color:#A1A1A6}
.hero-in{gap:14px;padding-top:6px}

/* ---------- Il modulo-pannello ---------- */
.q-panel{display:grid;justify-items:stretch;text-align:left;gap:10px;padding:12px;border:1px solid var(--q-line);border-radius:22px;background:var(--q-panel) var(--q-dots);background-size:auto,5px 5px}
.q-panel .ba{border-radius:14px}
.q-status{margin:2px 4px 0;text-align:left;justify-self:start;font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;color:#A1A1A6}
.q-status b{font-weight:800;transition:color .5s ease,text-shadow .5s ease}
.q-status .q-off{color:#fff}
.q-status .q-on-w{color:#8E8E94}
.hero.q-on .q-status .q-off{color:#8E8E94}
.hero.q-on .q-status .q-on-w{color:#FFD24A;text-shadow:0 0 6px rgba(var(--q-glow),.9),0 0 22px rgba(var(--q-glow),.6)}

/* la leva: il pulsante principale è una pillola bianca col pomello che si accende */
.q-panel .cta-wrap{display:block;width:100%;max-width:none;margin:0;padding:0}
.q-panel .btn,.final .btn{max-width:none;min-height:76px;padding:8px 76px;justify-content:center;text-align:center;border-radius:999px;background:#FFFFFF;color:#0B0B0C;font-size:1rem;white-space:nowrap;box-shadow:none}
.q-panel .btn .ico,.final .btn .ico{display:none}
.q-panel .btn::before,.final .btn::before{content:"";position:absolute;left:12px;top:12px;width:52px;height:52px;inset:12px auto 12px 12px;border-radius:50%;background:var(--q-off);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18);transition:background .6s ease,box-shadow .6s ease,transform .25s cubic-bezier(.16,1,.3,1);animation:none;width:52px;pointer-events:none}
.hero.q-on .q-panel .btn::before,.final.q-lit .btn::before{background:#FFD24A;box-shadow:0 0 24px 6px rgba(var(--q-glow),.7),inset 0 -3px 6px rgba(0,0,0,.12)}
.q-panel .btn:active::before,.final .btn:active::before{transform:scale(.9)}
.q-panel .btn:active,.final .btn:active{transform:none}
.q-panel .hero-micro{justify-content:flex-start;justify-self:start;margin:0 6px;color:#A1A1A6}
.q-panel .hero-micro span::before{color:#FFD24A}
.q-panel .alt{justify-self:start;margin-left:2px;color:#A1A1A6}
.q-panel .alt-a,.q-panel .alt-a b{color:#fff}
.q-panel .alt-a b{text-decoration-color:rgba(255,255,255,.4)}
.q-panel .ba-tag.l{background:rgba(11,11,12,.86)}

/* ---------- Spie e targhette: ogni modulo ha la sua spia, che si accende quando arriva ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.eyebrow::before,.head .eyebrow::before,.ask-head .eyebrow::before,.pr-head .eyebrow::before,.fears .head .eyebrow::before,.final-about .eyebrow::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#3A3A3C;opacity:1;transition:background .5s ease,box-shadow .5s ease}
.q-lit .eyebrow::before,.q-lit .head .eyebrow::before,.q-lit .ask-head .eyebrow::before,.q-lit .pr-head .eyebrow::before,.q-lit .fears .head .eyebrow::before,.q-lit .final-about .eyebrow::before{background:#FFD24A;box-shadow:0 0 10px 2px rgba(var(--q-glow),.75)}
.ask .eyebrow::before{background:#C9C9CE}
.ask.q-lit .ask-head .eyebrow::before{background:#FFD24A;box-shadow:0 0 0 1.5px #0B0B0C}
.final-about .eyebrow{color:var(--on-band-muted)}

/* titoli di sezione: grandi, a sinistra, una sola idea per schermata */
.head,.ask-head{text-align:left;margin-left:0;margin-right:0;max-width:none}
.head h2,.ask-head h2,.final h2{font-size:clamp(2.1rem,9.2vw,3.8rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.head p,.pr-sub{color:var(--muted)}
.ask-head>p{color:var(--muted)}

/* ---------- Prodotti: ogni video è una finestra del pannello ---------- */
.pr-media{border:1px solid var(--q-line);background:var(--q-panel);box-shadow:none}
.pr-card figcaption b{font-weight:800}
.pr-card figcaption .pr-f{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- Modulo: la scheda resta bianca (si scrive meglio) ma con gli angoli del manuale ---------- */
.card{border-radius:22px}

/* ---------- Chiusura: torna il pannello nero, la leva e la luce ---------- */
.final{text-align:left;background:#0B0B0C}
.final-in{justify-items:start;max-width:none}
.final .btn{max-width:440px;margin-top:10px}
.final .alt{color:var(--on-band-muted)}
.final .alt b{color:#fff}
.final-in>p:not(.final-led){color:var(--on-band-muted)}
.final-about{max-width:none;border-top-color:var(--on-band-line)}
.final .nums div{border-color:var(--on-band-line);background:var(--q-panel)}

footer{background:#0B0B0C;color:var(--on-band-muted)}
footer .wrap{justify-items:start;text-align:left}
footer nav a{color:#fff}

/* ---------- Desktop: titolo a sinistra, pannello a destra ---------- */
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(32px,5vw,80px);max-width:1240px;margin:0 auto;padding:clamp(24px,4vw,56px) clamp(24px,4vw,56px) clamp(40px,6vw,80px)}
  .hero h1{font-size:clamp(3rem,4.4vw,4.3rem)}
  .hero .sub{display:block;font-size:1.2rem;max-width:30em}
  .hero::before{background:radial-gradient(ellipse 34% 52% at 72% 52%,rgba(var(--q-glow),.42),rgba(var(--q-glow),.1) 50%,transparent 72%)}
}

/* ---------- Movimento ridotto: tutto già acceso, niente transizioni ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::before,.final-in::before,.eyebrow::before,.q-status b,.q-panel .btn::before,.final .btn::before{transition:none}
}

/* ---------- Prodotti: ogni installazione è un modulo del pannello, con la sua spia ---------- */
.pr-list{padding-left:var(--gutter);padding-right:var(--gutter-r)}
.pr-card figure{padding:10px 10px 4px;border:1px solid var(--q-line);border-radius:22px;background:var(--q-panel) var(--q-dots);background-size:auto,5px 5px}
.pr-media{border:0;border-radius:14px}
.pr-card figcaption{margin:0;padding:12px 6px 8px;border-top:0}
.pr-card figcaption b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#3A3A3C;vertical-align:1px;transition:background .5s ease,box-shadow .5s ease}
.pr.q-lit .pr-card figcaption b::before{background:#FFD24A;box-shadow:0 0 8px 2px rgba(var(--q-glow),.7)}

/* ---------- Barra fissa in basso: la leva segue il visitatore ---------- */
.dock .btn{min-height:60px;padding:6px 18px 6px 68px;justify-content:flex-start;text-align:left;border-radius:999px;background:#FFFFFF;color:#0B0B0C}
.dock .btn::before{content:"";position:absolute;left:7px;top:7px;width:46px;height:46px;border-radius:50%;background:#FFD24A;box-shadow:0 0 18px 4px rgba(var(--q-glow),.6),inset 0 -3px 6px rgba(0,0,0,.12);pointer-events:none}

/* ---------- Testata su telefono: solo l'icona del telefono, la leva resta la protagonista ---------- */
@media (max-width:899px){
  .hero .call{width:44px;min-width:44px;padding:0;justify-content:center;border-color:#2E2E32}
  .hero .call span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Testata su computer: stessa larghezza e stessi margini del primo schermo ---------- */
@media (min-width:900px){
  .top{max-width:1240px;margin-inline:auto;padding-inline:clamp(24px,4vw,56px)}
}

/* ==========================================================================
   Sprint grafica (6/11): leva di invio, dettagli del browser, barra fissa
   ========================================================================== */

/* Superfici del browser che portano il marchio: selezione, cursore, barra di scorrimento */
::selection{background:#FFD24A;color:#0B0B0C}
input,textarea{caret-color:#FFD24A}
.ask input,.ask textarea{caret-color:#0B0B0C}
html{scrollbar-color:#3A3A3C #0B0B0C;scrollbar-width:thin}

/* Invio del modulo: la stessa leva della pagina, nera sul foglio bianco */
#send{position:relative;justify-content:flex-start;min-height:68px;padding:8px 16px 8px 72px;border-radius:999px;background:#0B0B0C;color:#FFFFFF;font-size:.95rem;text-align:left}
#send .send-l{white-space:nowrap}
#send::before{content:"";position:absolute;left:10px;top:10px;width:48px;height:48px;border-radius:50%;background:#8E8E94;box-shadow:inset 0 -3px 6px rgba(0,0,0,.2);transition:background .6s ease,box-shadow .6s ease,transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
.ask.q-lit #send::before{background:#FFD24A;box-shadow:0 0 18px 4px rgba(var(--q-glow),.55),inset 0 -3px 6px rgba(0,0,0,.12)}
#send:active::before{transform:scale(.9)}
#send .arrow{margin-left:auto}

/* Barra fissa: il tasto del telefono è un cerchio, come il pomello */
.dock{grid-template-columns:60px 1fr}
.dock .tel{width:60px;height:60px;border-radius:50%}

@media (prefers-reduced-motion:reduce){#send::before{transition:none}}

/* Schede tecniche dei prodotti: mai tagliate, vanno a capo dentro il modulo */
.pr-card figcaption,.pr-card figcaption span{white-space:normal;overflow-wrap:anywhere;min-width:0}
.pr-card figcaption .pr-f{display:block}

/* telefono: titolo e pulsante più piccoli, così il prima/dopo con l'animazione si vede già nel primo schermo (6 novembre 2026) */
@media (max-width:899px){
  .hero h1{font-size:clamp(1.55rem,7vw,2.2rem);line-height:1.04}
  .hero-in{gap:10px}
  .q-panel{gap:8px;padding:10px}
  .q-panel .btn,.final .btn{min-height:54px;padding:6px 56px;font-size:.95rem}
  .q-panel .btn::before,.final .btn::before{left:9px;inset:9px auto 9px 9px;width:36px;height:36px}
  .hero.q-on .q-panel .btn::before,.final.q-lit .btn::before{box-shadow:0 0 16px 4px rgba(var(--q-glow),.7),inset 0 -2px 4px rgba(0,0,0,.12)}
}

/* ==========================================================================
   Riquadro prima/dopo «luce viva» (solo telefono, 6/11)
   DA INCOLLARE IN CODA a quadro.css, dopo l'ultimo blocco @media (max-width:899px).
   Deroga di Nicolò: le sfumature sono LUCE (giallo LED 255,210,74 che si dissolve nel nero
   #0B0B0C / #111113). Niente viola, niente blu, giallo mai su testo.
   Anima solo transform (scale), opacity e background-position. Altezza invariata.
   ========================================================================== */
@media (max-width:899px){

  /* 1. Pannello smussato: raggio 28px, finestra interna 18px (28 - 10 di padding), fondo che scende
        nel nero con un velo di luce in alto, filo da 1px che sfuma (il bordo resta di 1px: nessun pixel in più).
        isolation: l'alone (::before, z-index -1) sta sopra lo sfondo del pannello e sotto i contenuti. */
  .q-panel{
    position:relative;isolation:isolate;
    border:1px solid transparent;border-radius:28px;
    background:
      var(--q-dots) 0 0/5px 5px padding-box,
      radial-gradient(120% 55% at 50% 0,rgba(255,255,255,.055),transparent 70%) padding-box,
      linear-gradient(180deg,#0F0F11,#111113 45%,#0E0E10) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 55%,rgba(255,255,255,.09)) border-box;
  }

  /* 2. Finestra prima/dopo: angoli concentrici e luce che versa sul pannello quando la vetrina si accende */
  .q-panel .ba{
    border-radius:18px;
    box-shadow:0 0 0 0 rgba(255,210,74,0);
    transition:box-shadow 1.3s cubic-bezier(.16,1,.3,1);
  }
  .hero.q-on .q-panel .ba{box-shadow:0 0 30px -2px rgba(255,210,74,.34)}

  /* 3. Bordi della finestra che si sciolgono nel pannello: velo interno scuro, sopra foto e video,
        sotto etichette e linea (niente mask-image: su un video in riproduzione costerebbe a ogni fotogramma) */
  .q-panel .ba::after{
    content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 16px 1px rgba(15,15,17,.6);
  }
  .q-panel .ba .ba-tag{z-index:3}            /* le etichette restano sopra il velo (prima erano a 2) */

  /* 4. Divisorio: la linea sfuma ai capi, il pomello ha un alone bianco morbido (si muovono col translate esistente) */
  .q-panel .ba-line::before{left:-1px;width:2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 14%,#fff 86%,rgba(255,255,255,0))}
  .q-panel .ba-knob{box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px 2px rgba(255,255,255,.22)}

  /* 5. Alone giallo che respira dietro e dentro il pannello: da appena accennato (spento) a pieno (.q-on).
        Il respiro è solo scale; l'opacity passa solo con l'accensione. Il bordo alto è a -10px:
        non arriva al sottotitolo (distanza 10px), quindi non tinge il testo. */
  .q-panel::before{
    content:"";position:absolute;z-index:-1;inset:-10px -16px -22px;border-radius:44px;pointer-events:none;
    background:radial-gradient(ellipse 80% 62% at 50% 52%,rgba(var(--q-glow),.34),rgba(var(--q-glow),.10) 55%,transparent 78%);
    opacity:.25;transition:opacity 1.3s cubic-bezier(.16,1,.3,1);
    animation:q-respiro 5.5s ease-in-out infinite alternate;
  }
  .hero.q-on .q-panel::before{opacity:1}

  /* 6. Filo luminoso che gira sul bordo: anello di 1,5px (maschera) con una fascia calda che lo attraversa.
        Parte solo all'accensione (0,6 s dopo), 8 s a passaggio, 6 passaggi poi si ferma da solo (risparmio batteria).
        Fuori dalla fascia l'anello è trasparente. */
  .q-panel::after{
    content:"";position:absolute;inset:-1px;border-radius:28px;padding:1.5px;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(255,226,150,.95) 50%,transparent 60%) 100% 0/300% 100% no-repeat;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity 1.3s ease;
  }
  .hero.q-on .q-panel::after{opacity:1;animation:q-giro 8s ease-in-out .6s 6}

  /* 7. Stesso linguaggio sulle schede prodotto: 26px fuori, 16px sul video (26 - 10 di padding), stesso fondo e filo */
  .pr-card figure{
    border:1px solid transparent;border-radius:26px;
    background:
      var(--q-dots) 0 0/5px 5px padding-box,
      radial-gradient(120% 40% at 50% 0,rgba(255,255,255,.05),transparent 70%) padding-box,
      linear-gradient(180deg,#0F0F11,#111113 45%,#0E0E10) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.08)) border-box;
  }
  .pr-card .pr-media{border-radius:16px}
}

@keyframes q-respiro{from{scale:.94}to{scale:1.05}}
@keyframes q-giro{from{background-position:100% 0}to{background-position:0 0}}

/* Movimento ridotto: alone fermo e già acceso, filo che gira nascosto, nessuna animazione.
   (main.css ha già animation:none!important per tutti gli pseudo-elementi; qui è ripetuto per chiarezza.) */
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .q-panel::before,.q-panel::after{animation:none;transition:none}
  .q-panel::after{display:none}
}
/* telefono: il riquadro che racchiude il prima/dopo sparisce (niente bordo, niente fondo, niente filo che gira).
   Restano l'alone giallo dietro e la sfumatura sulla foto. Richiesta di Nicolò, 6 novembre 2026 */
@media (max-width:899px){
  .q-panel{border-color:transparent;background:none;padding:0;border-radius:0}
  .q-panel::after{display:none}
  .q-panel::before{inset:-10px -4px -22px}
}

/* 6/11 · Barra fissa in basso sui telefoni stretti: «Ricevi il render gratis» (175 px) andava su due righe sotto i 390 px
   (iPhone mini e SE a 375, Android a 360). Margini interni e carattere un po' più piccoli; sotto i 345 px anche il tasto
   del telefono si stringe. Sopra i 390 px non cambia niente. */
@media (max-width:389px){
  .dock .btn{padding:6px 12px 6px 62px;font-size:15.5px;white-space:nowrap}
}
@media (max-width:345px){
  .dock{grid-template-columns:52px 1fr;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .dock .tel{width:52px;height:52px;align-self:center}
  .dock .btn{padding:6px 10px 6px 56px;font-size:14.5px}
  .dock .btn::before{left:8px;top:10px;width:40px;height:40px}
}

/* 6/11 · Pulsanti «Ricevi il tuo render» (primo schermo, fine della scena, chiusura): la scritta sta al centro del pulsante
   (stesso margine ai due lati, il pallino resta a sinistra: sopra, nelle regole .q-panel/.final/.sp .btn). Nella chiusura,
   da computer, anche il pulsante va al centro, in asse con «Preferisci parlarne?» sotto. */
.final-in>.btn{justify-self:center}

/* ==========================================================================
   6/11 · Leva «Ricevi il tuo render» rifinita (primo schermo, fine della scena, chiusura: è lo stesso componente)
   - scritta più grande (17 px su telefono, come il testo corrente) e freccia disegnata dopo il testo, come nell'invio;
   - il pallino è una lampadina: ::before è il vetro spento, ::after la luce. All'accensione la luce sfarfalla una volta
     come l'insegna LED (lv-accendi), poi resta accesa. Si animano solo opacità, ombra e transform;
   - col mouse la luce cresce, la pillola si scalda appena e la leva scorre di 4 px; premendo scatta di 8 px.
   Senza movimento è tutto già acceso e fermo.
   ========================================================================== */
.q-panel .btn,.final .btn{gap:10px;font-size:1.1rem;letter-spacing:-.01em;transition:transform .18s var(--ease-out),background-color .4s ease}
.q-panel .btn .go,.final .btn .go{flex:none;width:1.05em;height:1.05em;margin-right:-.15em;transition:transform .22s var(--ease-out)}
.q-panel .btn::before,.final .btn::before,
.hero.q-on .q-panel .btn::before,.final.q-lit .btn::before{
  background:radial-gradient(circle at 36% 30%,#C4C4C9 0,#9C9CA2 40%,#76767C 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.22),inset 0 2px 3px rgba(255,255,255,.4);
  transition:transform .22s var(--ease-out)}
.q-panel .btn::after,.final .btn::after{content:"";position:absolute;left:12px;top:12px;width:52px;height:52px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 30%,#FFF8DC 0,#FFE48A 24%,#FFD24A 58%,#EFB62E 100%);
  box-shadow:0 0 22px 5px rgba(var(--q-glow),.6),inset 0 -3px 5px rgba(150,96,0,.22),inset 0 2px 3px rgba(255,255,255,.65);
  opacity:0;transition:opacity .35s ease,box-shadow .3s ease,transform .22s var(--ease-out)}
.hero.q-on .q-panel .btn::after,.final.q-lit .btn::after{opacity:1;animation:lv-accendi .75s steps(1,end) both}
@keyframes lv-accendi{0%{opacity:0}9%{opacity:.85}16%{opacity:.08}32%{opacity:1}40%{opacity:.3}54%,100%{opacity:1}}
.q-panel .btn:focus-visible,.final .btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px}
.q-panel .btn:active,.final .btn:active{transform:scale(.985);transition-duration:.1s}
.q-panel .btn:active::before,.final .btn:active::before,
.q-panel .btn:active::after,.final .btn:active::after{transform:translateX(8px) scale(.92);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){
  .q-panel .btn:hover,.final .btn:hover{transform:none;box-shadow:none;background-color:#FFFCF1}
  .q-panel .btn:hover::before,.final .btn:hover::before,
  .q-panel .btn:hover::after,.final .btn:hover::after{transform:translateX(4px)}
  .hero.q-on .q-panel .btn:hover::after,.final.q-lit .btn:hover::after{box-shadow:0 0 30px 9px rgba(var(--q-glow),.78),inset 0 -3px 5px rgba(150,96,0,.22),inset 0 2px 3px rgba(255,255,255,.65)}
  .q-panel .btn:hover .go,.final .btn:hover .go{transform:translateX(3px)}
  .q-panel .btn:active,.final .btn:active{transform:scale(.985)}
}
@media (max-width:899px){
  .q-panel .btn,.final .btn{min-height:58px;padding:6px 58px;font-size:1.06rem}
  .q-panel .btn::before,.final .btn::before{inset:9px auto 9px 9px;width:40px}
  .q-panel .btn::after,.final .btn::after{left:9px;top:9px;width:40px;height:40px;box-shadow:0 0 16px 4px rgba(var(--q-glow),.6),inset 0 -2px 4px rgba(150,96,0,.22),inset 0 2px 3px rgba(255,255,255,.65)}
}
@media (max-width:345px){
  .q-panel .btn,.final .btn{padding:6px 48px;font-size:.97rem;gap:7px}
  .q-panel .btn::before,.final .btn::before{inset:11px auto 11px 9px;width:36px}
  .q-panel .btn::after,.final .btn::after{top:11px;width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .q-panel .btn,.final .btn,.q-panel .btn .go,.final .btn .go,
  .q-panel .btn::before,.final .btn::before,.q-panel .btn::after,.final .btn::after{transition:none;animation:none}
}

/* ==========================================================================
   6/11 · Prima e dopo con il video vero (MaKè Pizza): foto «prima» sotto, video «dopo» sopra, tasti «Prima» / «Dopo».
   Niente tendina: il video è ripreso da un altro punto. Durante l'apertura (.intro) il canvas di scena.js sta sopra
   tutto e i tasti non si vedono; nel lampo il video compare di colpo (il lampo copre il cambio di punto di vista),
   poi i passaggi Prima/Dopo sono dissolvenze di 0,45 s. Il video tiene l'insegna dentro il riquadro 4:3 (object-position).
   ========================================================================== */
.ba-vs{cursor:default;touch-action:auto}
.ba-vs:focus-within{outline:none}
.ba-vs .ba-vid{z-index:1;opacity:0;object-position:30% 50%;background:#0B0B0C;transition:opacity .45s var(--ease-out)}
.ba-vs[data-stato="dopo"] .ba-vid{opacity:1}
.ba-vs.intro .ba-vid{transition-duration:.12s}
.ba-vs .scene{z-index:3;clip-path:none}
.ba-sw{position:absolute;left:10px;bottom:10px;z-index:4;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(11,11,12,.78);box-shadow:0 0 0 1px rgba(255,255,255,.14);transition:opacity .4s ease}
.ba-vs.intro .ba-sw{opacity:0;pointer-events:none}
.ba-sw-b{min-height:38px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:#F5F5F7;font:700 .82rem/1 var(--font);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s ease,color .25s ease}
.ba-sw-b[aria-pressed="true"]{background:#FFFFFF;color:#0B0B0C}
.ba-sw-b:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ba-sw-b[aria-pressed="false"]:hover{background:rgba(255,255,255,.14)}}
@media (max-width:345px){.ba-sw{left:8px;bottom:8px}.ba-sw-b{padding:0 10px;font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.ba-vs .ba-vid,.ba-sw,.ba-sw-b{transition:none}}

/* 6/11 · Decisione di Nicolò: anche il primo schermo si anima con «riduci movimento» attivo (volo d'apertura, lampo,
   video che parte da solo, leva che sfarfalla, alone che si accende). Qui si rimettono, con !important, le animazioni e
   le transizioni che le regole di movimento ridotto (main.css, fable.css e i blocchi sopra) toglierebbero. */
@media (prefers-reduced-motion:reduce){
  .hero-ba{animation:fb-up .5s var(--ease-out) .1s both!important}
  .hero::before{transition:opacity 1.3s cubic-bezier(.16,1,.3,1)!important}
  .hero .q-status b{transition:color .5s ease,text-shadow .5s ease!important}
  .q-panel .btn::before{transition:transform .22s var(--ease-out)!important}
  .q-panel .btn::after{transition:opacity .35s ease,box-shadow .3s ease,transform .22s var(--ease-out)!important}
  .hero.q-on .q-panel .btn::after{animation:lv-accendi .75s steps(1,end) both!important}
  .ba-vs .ba-vid{transition:opacity .45s var(--ease-out)!important}
  .ba-vs.intro .ba-vid{transition-duration:.12s!important}
  .ba-sw{transition:opacity .4s ease!important}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .q-panel::before{animation:q-respiro 5.5s ease-in-out infinite alternate!important;transition:opacity 1.3s cubic-bezier(.16,1,.3,1)!important}
  .q-panel::after{display:block!important;transition:opacity 1.3s ease!important}
  .hero.q-on .q-panel::after{animation:q-giro 8s ease-in-out .6s 6!important}
}

/* 7/11 · Video Blender MaKè nella chiusura, prima di «ACCENDILA»: finestra video da 14 px con il filo da 1 px dei moduli scuri
   (DESIGN.md). Lo spazio è riservato dall'aspect-ratio 4:5, quindi la pagina non salta quando arriva il video. */
.final-vid{width:min(100%,420px);aspect-ratio:4/5;margin:0 0 6px;overflow:hidden;border:1px solid var(--q-line);border-radius:14px;background:var(--q-panel)}
.final-vid video{display:block;width:100%;height:100%;object-fit:cover}
/* allineato a sinistra come «ACCENDILA» e il titolo (da computer la chiusura è a sinistra; solo il pulsante sta al centro) */

/* ==========================================================================
   7/11 · Richieste di Nicolò: anteprima della guida, chiusura centrata, «Preferisci parlarne?» in evidenza,
   riga «Vetrina: spenta → accesa» più viva.
   ========================================================================== */

/* Anteprima della guida nella sezione del modulo: tre pagine a ventaglio (copertina davanti) e una riga che dice
   che si scarica dopo l'invio. Compatta: sul telefono non spinge giù il modulo più di circa 130 px. */
.g-peek{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:18px 0 0}
.g-pages{position:relative;width:122px;height:118px}
.g-pages img{position:absolute;bottom:2px;width:78px;height:auto;aspect-ratio:3/4;border-radius:5px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,11,12,.1),0 8px 18px -10px rgba(11,11,12,.55);transform-origin:50% 100%}
.g-pages img:nth-child(1){left:42px;transform:rotate(10deg)}
.g-pages img:nth-child(2){left:22px;transform:rotate(4deg)}
.g-pages img:nth-child(3){left:0;transform:rotate(-4deg)}
.g-peek figcaption{font-size:.95rem;line-height:1.45;color:var(--muted)}
.g-peek figcaption b{display:block;margin-bottom:2px;color:var(--ink);font-weight:800}
/* conferma: la copertina vera della guida */
.guide-box .g-cov{width:84px;height:auto;aspect-ratio:3/4;border-radius:5px;box-shadow:0 0 0 1px rgba(11,11,12,.1),0 8px 18px -10px rgba(11,11,12,.55);transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.guide-box:hover .g-cov{transform:rotate(-2deg) translateY(-3px)}}

/* Chiusura: le frasi tra «ACCENDILA» e il pulsante stanno al centro */
.final-in>h2,.final-in>p:not(.final-led){justify-self:center;text-align:center}

/* «Preferisci parlarne? Chiamaci…»: riquadro in evidenza ma sotto il pulsante nella gerarchia
   (fondo scuro e bordo sottile contro la pillola bianca piena; più basso della leva). */
.final .alt-call{justify-self:center;display:inline-flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:56px;margin-top:2px;padding:6px 22px 6px 7px;width:auto;max-width:100%;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;background:#151517 var(--q-dots);background-size:auto,5px 5px;
  color:#D1D1D6;font-size:1rem;line-height:1.3;text-align:left;text-decoration:none}
.final .alt-call b{color:#FFFFFF;font-weight:800;white-space:nowrap}
.alt-call .ac-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#FFFFFF}
.alt-call .ac-ico svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.final .alt-call:hover{border-color:#FFFFFF}}

/* Riga «Vetrina: spenta → accesa»: una spia che si accende, un filo che si riempie di luce da sinistra,
   «spenta» che si barra e «accesa» che si illumina come una targhetta. Stesse parole di prima. */
.q-status{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;font-size:1rem}
.q-spia{flex:none;width:9px;height:9px;border-radius:50%;background:#3A3A3C;box-shadow:inset 0 1px 1px rgba(255,255,255,.18);transition:background-color .4s ease,box-shadow .4s ease}
.q-lab{color:#A1A1A6;font-weight:600}
.q-status .q-off{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px;transition:color .4s ease,text-decoration-color .4s ease}
.q-wire{position:relative;flex:none;width:34px;height:2px;margin-right:4px;border-radius:2px;background:#3A3A3C}
.q-wire i{position:absolute;inset:0;border-radius:inherit;background:#FFD24A;box-shadow:0 0 8px rgba(var(--q-glow),.85);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out) .1s}
.q-wire::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:2px solid #3A3A3C;border-right:2px solid #3A3A3C;transform:translateY(-50%) rotate(45deg);transition:border-color .2s ease .55s}
.q-status .q-on-w{padding:3px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px #3A3A3C;transition:color .4s ease .55s,text-shadow .4s ease .55s,background-color .4s ease .55s,box-shadow .4s ease .55s}
.hero.q-on .q-spia{background:#FFD24A;box-shadow:0 0 10px 2px rgba(var(--q-glow),.75)}
.hero.q-on .q-status .q-off{text-decoration-color:rgba(142,142,148,.7)}
.hero.q-on .q-wire i{transform:scaleX(1)}
.hero.q-on .q-wire::after{border-color:#FFD24A}
.hero.q-on .q-status .q-on-w{background:rgba(var(--q-glow),.12);box-shadow:inset 0 0 0 1px rgba(var(--q-glow),.55),0 0 18px -2px rgba(var(--q-glow),.45)}
/* con «riduci movimento» il primo schermo si anima lo stesso (decisione di Nicolò, 6/11) */
@media (prefers-reduced-motion:reduce){
  .q-spia{transition:background-color .4s ease,box-shadow .4s ease!important}
  .hero .q-status .q-off{transition:color .4s ease,text-decoration-color .4s ease!important}
  .q-wire i{transition:transform .55s var(--ease-out) .1s!important}
  .q-wire::after{transition:border-color .2s ease .55s!important}
  .hero .q-status .q-on-w{transition:color .4s ease .55s,text-shadow .4s ease .55s,background-color .4s ease .55s,box-shadow .4s ease .55s!important}
}

/* 7/11 · «Preferisci parlarne? / Chiamaci al …» su due righe: il riquadro si stringe sul testo e resta al centro sotto
   «Ricevi il tuo render» (sul telefono e da computer). */
.final .alt-call .ac-t{display:grid;gap:1px;justify-items:center;text-align:center}
.final .alt-call .ac-t>span{display:block;white-space:nowrap;font-size:.88rem;color:#A1A1A6}
/* 7/11: il numero va a capo, da solo e al centro (richiesta di Nicolò) */
/* 7/11: tre righe al centro: «Preferisci parlarne?», «Chiamaci al», il numero */
.final .alt-call .ac-t>span:first-child{color:#D1D1D6;font-weight:600}
.final .alt-call .ac-t>b{display:block;font-size:1.05rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* 7/11 · «ACCENDILA» video Blender (1584×360). Il fondo del video è il nero della pagina: con mix-blend-mode:screen il nero
   sparisce e sotto resta la luce gialla della chiusura, senza rettangolo visibile intorno al pannello. */
.final-led-v{width:min(100%,560px);aspect-ratio:1584/360;margin:0 0 6px}
.final-led-v video{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}

/* 7/11 · Da computer la chiusura è un'unica colonna al centro: video MaKè, «ACCENDILA», frasi, pulsante, «Preferisci parlarne?»
   (scelta di Nicolò). Sul telefono non cambia. */
@media (min-width:900px){
  .final-in{justify-items:center}
  .final-in>.final-vid,.final-in>.final-led-v{justify-self:center}
}