/* ==========================================================================
   9/11/2026 · Testata «Copertina di rivista» (proposta 2 del confronto dell'8/11, richiesta di Nicolò).
   La vetrina è la copertina: foto a tutto schermo, il titolo e la leva sopra, in basso, come i titoli di una rivista.
   - Foto: originali a 2400 px (nitide anche su iPhone). «Prima» sotto, «dopo» sopra: stessa inquadratura, cambia solo
     l'insegna, quindi la dissolvenza sembra l'insegna che si accende. All'apertura sfarfalla una volta, come la LED.
   - «accesa.» è la parola di copertina: grigia (spenta) finché l'insegna è spenta, bianca quando si accende.
   - Una sola luce gialla: il pomello della leva e le spie dei tre passi. Nessun alone sulla pagina.
   - Le due velature nere (in alto per il logo, in basso per i testi) servono a leggere, non decorano.
   File caricato per ultimo, insieme a copertina.js. Per tornare indietro: copia
   FOTO_vere_prima_dopo/lavoro/backup/index-prima-della-copertina-9-11.html (rimette testata.css, cta.css, scena.js, prima3d.js).
   ========================================================================== */

.hero.cv{--cv-ease:cubic-bezier(.23,1,.32,1);--cv-pos:50% 18%;--cv-ink:#0B0B0C;
  position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  overflow:hidden;background:var(--cv-ink);color:#FFFFFF}
.hero.cv::before,.hero.cv::after{display:none}

/* ---------- 1. La foto di copertina ---------- */
.hero.cv .cv-ba{position:absolute;inset:0;z-index:0;width:auto;max-width:none;height:auto;aspect-ratio:auto;margin:0;border:0;border-radius:0;
  box-shadow:none;background:var(--cv-ink);cursor:auto;touch-action:auto;user-select:auto;-webkit-user-select:auto}
.hero.cv .cv-ba:focus-within{outline:none}
.cv-pic{position:absolute;inset:0;display:block}
.cv-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--cv-pos);-webkit-user-drag:none;pointer-events:none}
.cv-dopo{opacity:0;transition:opacity .45s var(--cv-ease),filter .15s ease}
.cv-ba[data-stato="dopo"] .cv-dopo{opacity:1}
/* dalla mano (tasti): una sfocatura leggera fonde i due stati in un solo passaggio (main.js mette ba-x per 150 ms) */
.cv-ba.ba-x .cv-pic{filter:blur(3px)}
/* apertura: la camera si assesta piano sulla vetrina; quando l'insegna si accende, sfarfalla una volta */
.cv-ba.intro .cv-pic img{animation:cv-assesta 2.2s var(--cv-ease) both}
.cv-ba.intro[data-stato="dopo"] .cv-dopo{animation:cv-accendi .8s steps(1,end) both}
@keyframes cv-assesta{from{transform:scale(1.06)}to{transform:none}}
@keyframes cv-accendi{0%{opacity:0}9%{opacity:.85}16%{opacity:.1}32%{opacity:1}40%{opacity:.35}54%,100%{opacity:1}}

/* velature per leggere: in alto sotto il logo, in basso sotto il titolo (finisce nel nero della pagina, senza bordo) */
.cv-ba::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.66) 0,rgba(11,11,12,.28) 9%,rgba(11,11,12,0) 17%),
             linear-gradient(0deg,#0B0B0C 0,rgba(11,11,12,.93) 34%,rgba(11,11,12,.6) 47%,rgba(11,11,12,0) 60%)}

/* ---------- 2. Tasti Prima / Dopo: un'etichetta sulla foto, in alto a destra sotto la testata ---------- */
.hero.cv .ba-sw{left:auto;right:var(--gutter-r);bottom:auto;top:calc(max(10px,env(safe-area-inset-top,0px)) + 62px);z-index:4;
  transform-origin:100% 0;background:rgba(11,11,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero.cv .ba-sw-b,.hero.cv .ba-sw-on>span{min-height:40px;padding:0 13px;font-size:.8rem}
.hero.cv .ba-sw-b{position:relative}
.hero.cv .ba-sw-b::after{content:"";position:absolute;inset:-3px -1px}   /* area di tocco da 46 px senza ingrandire l'etichetta */
.cv-ba.intro .ba-sw{opacity:0;pointer-events:none}

/* ---------- 3. Testata sopra la foto ---------- */
.hero.cv .top{position:relative;z-index:3;flex:none}
.hero.cv .t-run{display:none}
.hero.cv .call,.hero.cv .call:hover{width:auto;min-width:0;height:44px;padding:0;border:0;border-radius:0;background:none;gap:7px;
  font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;color:#FFFFFF;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero.cv .call span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap;
  padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .2s ease}
.hero.cv .call svg{width:17px;height:17px;margin-top:-3px;color:#FFFFFF}
@media (hover:hover) and (pointer:fine){.hero.cv .call:hover span{border-bottom-color:#FFFFFF}}
@media (max-width:330px){.hero.cv .call span{display:none}.hero.cv .call{width:44px;justify-content:center}}

/* ---------- 4. Il sommario: titolo, frase, leva, tre passi, link ---------- */
.cv-in{position:relative;z-index:3;display:grid;justify-items:start;margin-top:auto;width:100%;
  padding:0 var(--gutter-r) calc(18px + env(safe-area-inset-bottom,0px)) var(--gutter)}

.hero.cv h1.cv-h{margin:0;font-size:1rem;line-height:1;letter-spacing:0;text-align:left;text-wrap:initial;color:#FFFFFF}
.cv-h>span,.cv-h>em{display:block}
/* due righe che parlano… */
.cv-a,.cv-b{font-size:clamp(1.4rem,6.4vw,1.9rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-shadow:0 1px 14px rgba(0,0,0,.35)}
/* …e la parola di copertina, larga quanto la colonna (la riga è circa 3,45 volte la sua altezza) */
/* margine negativo in alto: «accesa» non ha lettere alte, senza di esso resta un vuoto sopra la parola */
.cv-w{--cv-g:min(calc((100vw - 40px) / 3.45),13.5svh,9.5rem);margin:-.1em 0 0 -.05em;font-size:var(--cv-g);font-weight:800;line-height:.9;letter-spacing:-.055em;
  color:#8E8E94;transition:color .5s ease}
.hero.q-on .cv-w{color:#FFFFFF;animation:cv-parola .75s steps(1,end) both}
@keyframes cv-parola{0%{color:#8E8E94}9%{color:#FFFFFF}16%{color:#8E8E94}32%,100%{color:#FFFFFF}}
/* con «Prima» la parola si rispegne, con «Dopo» si riaccende */
.hero.q-on:has(#ba[data-stato="prima"]) .cv-w{color:#8E8E94;animation:none}
.hero.cv h1 em.cv-e{margin-top:.5em;font-size:clamp(1.05rem,4.6vw,1.35rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;font-style:normal;color:#C7C7CC}

.hero.cv .sub{display:none}

/* la leva: stesso componente del resto della pagina (quadro.css), solo senza il pannello attorno */
.hero.cv .cv-act{display:block;width:100%;margin:18px 0 0;padding:0;border:0;border-radius:0;background:none;gap:0;animation:none}
.hero.cv .cv-act::before,.hero.cv .cv-act::after{display:none}
.hero.cv .cv-act .btn{width:100%}

/* tre passi come i titoletti in fondo a una copertina: un filo con tre spie che si accendono in fila */
.cv-passi{position:relative;display:grid;grid-template-columns:.95fr 1.2fr .85fr;gap:0 14px;width:100%;margin:18px 0 0;padding:14px 0 0;list-style:none;
  font-size:.84rem;line-height:1.3;color:#C7C7CC}
.cv-passi::before{content:"";position:absolute;left:4px;right:0;top:4px;height:1px;background:rgba(255,255,255,.22)}
.cv-passi li{position:relative;min-width:0}
.cv-passi li::before{content:"";position:absolute;left:0;top:-14px;width:9px;height:9px;border-radius:50%;background:#3A3A3C;
  box-shadow:0 0 0 3px #0B0B0C;transition:background-color .3s ease,box-shadow .3s ease}
.cv-passi b{display:block;color:#FFFFFF;font-weight:700}
.hero.q-on .cv-passi li::before{background:#FFD24A;box-shadow:0 0 0 3px #0B0B0C,0 0 6px 0 rgba(255,210,74,.65)}
.hero.q-on .cv-passi li:nth-child(2)::before{transition-delay:.12s}
.hero.q-on .cv-passi li:nth-child(3)::before{transition-delay:.24s}

/* link «Non hai la foto adesso?»: testo, non un secondo pulsante */
.hero.cv .cv-alt{justify-self:start;display:inline-flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2px 6px;min-height:44px;margin:8px 0 0;padding:0;
  border:0;border-radius:0;background:none;font-size:.92rem;line-height:1.3;color:#A1A1A6;text-align:left;text-decoration:none}
.hero.cv .cv-alt:hover{border:0}
.hero.cv .cv-alt:active{transform:none}
.hero.cv .cv-alt:active .alt-a svg{transform:translateX(3px)}
.cv-alt .alt-a{display:inline-flex;align-items:center;gap:5px}
.cv-alt .alt-a b{color:#FFFFFF;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .2s ease}
.cv-alt .alt-a svg{width:16px;height:16px;transition:transform .2s var(--cv-ease)}
.cv-alt:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
  .cv-alt:hover .alt-a b{text-decoration-color:#FFFFFF}
  .cv-alt:hover .alt-a svg{transform:translateX(3px)}
}

/* telefono basso (360×640, Safari con le barre): tutto un filo più stretto, la leva resta nella prima schermata */
@media (max-width:899px) and (max-height:700px){
  .cv-a,.cv-b{font-size:clamp(1.3rem,5.8vw,1.6rem)}
  .hero.cv .cv-act{margin-top:14px}
  .cv-passi{margin-top:14px}
  .cv-alt{margin-top:4px}
}
@media (max-width:345px){.cv-passi{gap:0 10px;font-size:.78rem}}

/* ---------- 5. Computer: titolo a sinistra, leva e passi a destra, sulla stessa linea di base ---------- */
@media (min-width:900px){
  .hero.cv{--cv-pos:33% 22%;min-height:min(100svh,1080px)}
  .hero.cv .top{display:flex;align-items:center;gap:32px;width:100%;max-width:1240px;margin-inline:auto;padding:22px clamp(24px,4vw,56px) 10px}
  .hero.cv .t-run{display:block;margin:0 0 0 auto;font-size:.9rem;font-weight:500;color:#F5F5F7;text-shadow:0 1px 8px rgba(0,0,0,.45)}
  .hero.cv .call{margin-left:0}
  /* in asse con il bordo destro della colonna (testata e leva) */
  .hero.cv .ba-sw{right:calc(max(0px,(100% - 1240px) / 2) + clamp(24px,4vw,56px));top:96px}

  /* la colonna destra (frase, leva, passi) sale fin sopra le vetrofanie chiare: velatura più piena fino a metà */
  .cv-ba::after{background:linear-gradient(180deg,rgba(11,11,12,.62) 0,rgba(11,11,12,0) 16%),
                           linear-gradient(0deg,#0B0B0C 0,rgba(11,11,12,.92) 30%,rgba(11,11,12,.8) 44%,rgba(11,11,12,.42) 56%,rgba(11,11,12,0) 68%)}

  .cv-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:clamp(40px,6vw,96px);align-items:end;
    max-width:1240px;margin-inline:auto;padding:0 clamp(24px,4vw,56px) clamp(36px,6vh,64px)}
  .hero.cv h1.cv-h{grid-column:1;grid-row:1/5;align-self:end}
  .cv-a,.cv-b{font-size:clamp(1.9rem,2.6vw,2.5rem)}
  .cv-w{--cv-g:clamp(6rem,min(10.5vw,19vh),11rem)}
  .hero.cv h1 em.cv-e{font-size:clamp(1.3rem,1.7vw,1.6rem)}
  .hero.cv .sub{grid-column:2;grid-row:1;display:block;max-width:30em;margin:0;font-size:1.1rem;line-height:1.5;color:#D1D1D6;text-align:left}
  .hero.cv .cv-act{grid-column:2;grid-row:2;margin-top:26px}
  .cv-passi{grid-column:2;grid-row:3;margin-top:24px;font-size:.9rem}
  .cv-alt{grid-column:2;grid-row:4;margin-top:10px}
}

/* ---------- 6. Movimento ridotto: niente movimento della foto, l'insegna si accende con una dissolvenza ---------- */
@media (prefers-reduced-motion:reduce){
  .cv-ba.intro .cv-pic img{animation:none}
  .cv-ba.intro[data-stato="dopo"] .cv-dopo{animation:none;transition:opacity .6s ease}
  .hero.q-on .cv-w{animation:none}
  .cv-dopo,.cv-w,.cv-passi li::before{transition-duration:.3s}
}

/* tablet (600-899 px): leva e passi non più larghi di una colonna comoda */
@media (min-width:600px) and (max-width:899px){
  .hero.cv .cv-act{max-width:520px}
  .cv-passi{max-width:560px}
}

/* ---------- 7. 9/11 · «Sbirciata» sui prodotti (richiesta di Nicolò: nella prima schermata si deve intravedere la sezione
   prodotti). La copertina è un po' più bassa dello schermo: in fondo spuntano «I nostri prodotti» e l'inizio della prima scheda.
   Telefono alto 96 px, telefono basso 64 px (l'insegna deve restare sopra il titolo), computer 120 px. La leva resta intera. ---------- */
.hero.cv{--cv-peek:64px;min-height:calc(100vh - var(--cv-peek));min-height:calc(100svh - var(--cv-peek))}
@media (min-height:740px){.hero.cv{--cv-peek:96px}}
@media (min-width:900px){.hero.cv{--cv-peek:120px;min-height:min(calc(100svh - var(--cv-peek)),1080px)}}
/* meno aria sopra il titolo dei prodotti, così sale nella fessura */
.hero.cv ~ main #prodotti{padding-top:20px}
@media (min-width:900px){.hero.cv ~ main #prodotti{padding-top:44px}}
@media (max-width:899px){.hero.cv ~ main .pr-head{margin-bottom:16px}}

/* ---------- 8. 9/11 · Passi e link più curati (richiesta di Nicolò, foto «MODIFICHE»: «migliora l'appetibilità grafica»).
   - I tre passi sono un modulo del quadro: fondo scuro a puntini, filo da 1 px, tre caselle separate da un filo.
   - Ogni passo ha la sua cifra LED (come i numeri di «Chi siamo»): spenta con la vetrina spenta, si accende in fila con l'insegna.
   - «Lasciaci solo il WhatsApp» ha il fumetto in un cerchio, come «Preferisci parlarne?».
   Testi invariati. Per tornare indietro: backup/copertina-prima-dei-passi-led-9-11.css e index-prima-dei-passi-led-9-11.html. ---------- */
.cv-passi{counter-reset:passo;gap:0;padding:0;margin-top:16px;border:1px solid #232326;border-radius:14px;overflow:hidden;
  background:rgba(17,17,19,.78) radial-gradient(rgba(255,255,255,.05) .8px,transparent 1.2px) 0 0/5px 5px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cv-passi::before{display:none}
.cv-passi li{counter-increment:passo;padding:11px 10px 12px 11px}
.cv-passi li+li{border-left:1px solid #232326}
/* la cifra LED: cornice, puntini e luce come in «Chi siamo» */
.cv-passi li::before{content:counter(passo);position:static;display:grid;place-items:center;width:28px;height:28px;margin:0 0 9px;
  border:2px solid #1C1C1E;border-radius:7px;box-shadow:none;
  background:#0B0B0C radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/3px 3px;
  font-size:.95rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#3A3A3C;
  transition:color .35s ease,text-shadow .35s ease,border-color .35s ease}
.hero.q-on .cv-passi li::before{background:#0B0B0C radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/3px 3px;box-shadow:none;
  color:#FFD24A;border-color:#26262A;text-shadow:0 0 6px rgba(255,210,74,.75),0 0 14px rgba(255,210,74,.35)}
.cv-passi b{margin-bottom:1px}
.cv-passi{font-size:.82rem;line-height:1.32}

/* link: fumetto in un cerchio a sinistra, due righe a destra */
.hero.cv .cv-alt{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;margin-top:14px}
.cv-alt-ico{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#FFFFFF}
.cv-alt-ico svg{width:18px;height:18px}
.hero.cv .cv-alt>span:nth-child(2){grid-column:2;font-size:.86rem;color:#A1A1A6}
.hero.cv .cv-alt .alt-a{grid-column:2}
@media (max-width:899px) and (max-height:700px){.cv-passi{margin-top:12px}.hero.cv .cv-alt{margin-top:10px}}
@media (max-width:345px){.cv-passi li{padding:10px 7px 11px 8px}.cv-passi{font-size:.76rem}}
@media (min-width:900px){
  .cv-passi{margin-top:22px;font-size:.88rem}
  .cv-passi li{padding:14px 14px 15px}
  .hero.cv .cv-alt{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.cv-passi li::before{transition-duration:.2s}}
/* prima casella un filo più larga: «Mandi una foto» resta su una riga */
.cv-passi{grid-template-columns:1.05fr 1.15fr .8fr}
.cv-passi li{padding-left:10px;padding-right:8px}
/* schermi bassi (360×640, Safari con le barre): stesso pannello, cifra un po' più piccola e titolo un filo più basso,
   così il titolo resta sotto l'insegna */
@media (max-width:899px) and (max-height:700px){
  .cv-passi li::before{width:22px;height:22px;margin-bottom:6px;border-radius:6px;font-size:.8rem}
  .cv-passi li{padding-top:9px;padding-bottom:10px}
  .cv-w{--cv-g:min(calc((100vw - 40px) / 3.45),11svh,9.5rem)}
  .cv-a,.cv-b{font-size:clamp(1.15rem,5.2vw,1.4rem)}
  .hero.cv h1 em.cv-e{font-size:1rem}
  .hero.cv .cv-act{margin-top:12px}
}

/* ---------- 9. 9/11 · Leva e tre passi in un blocco unico (richiesta di Nicolò: «maggiore linearità»).
   Una sola cornice del quadro (fondo a puntini, filo #232326); dentro la leva in alto e i passi sotto, divisi da un filo.
   Angoli in alto concentrici alla leva (raggio della leva + 8 px di margine), in basso quelli dei moduli. ---------- */
.cv-blocco{--cb-pad:8px;--cb-r:37px;width:100%;margin-top:18px;padding:var(--cb-pad);border:1px solid #2A2A2E;
  border-radius:var(--cb-r) var(--cb-r) 22px 22px;
  background:rgba(17,17,19,.8) radial-gradient(rgba(255,255,255,.05) .8px,transparent 1.2px) 0 0/5px 5px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero.cv .cv-blocco .cv-act{margin:0}
.cv-blocco .cv-passi{margin:var(--cb-pad) calc(var(--cb-pad) * -1) calc(var(--cb-pad) * -1);border:0;border-top:1px solid #232326;border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:899px) and (max-height:700px){
  .cv-blocco{margin-top:12px}
  .hero.cv .cv-blocco .cv-act{margin:0}
}
@media (min-width:900px){
  .cv-blocco{--cb-pad:10px;--cb-r:48px;grid-column:2;grid-row:2/4;margin-top:26px}
  .cv-blocco .cv-passi{margin-top:var(--cb-pad)}
}
/* telefoni stretti (≤ 375 px): l'ultima casella un po' più larga, «Decidi tu.» resta su una riga */
@media (max-width:375px){
  .cv-passi{grid-template-columns:1fr 1.08fr .92fr}
  .cv-passi li{padding-left:8px;padding-right:6px}
}