/* ============================================================================
   Zena Web — sistema di design

   Il terreno è la pietra di Genova; l'unico colore lo mettono i lavori.
   È il rovescio della versione precedente, che era chiara con accenti rossi:
   qui il fondo è scuro e le dieci anteprime, ognuna con la sua tavolozza,
   diventano le uniche cose colorate della pagina.

   Ogni colore è stato CALCOLATO per rispettare AA, non scelto e poi verificato.
   I rapporti misurati sono annotati accanto a ciascuno.
   ========================================================================= */

/* ── caratteri ─────────────────────────────────────────────────────────── */
@font-face{font-family:'Bricolage Grotesque';src:url(font/bricolage-400-800.woff2) format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(font/instrument-sans-400-700.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

/* ── i valori ──────────────────────────────────────────────────────────── */
:root{
  /* superfici */
  --ardesia:#10151a;        /* il fondo: ardesia genovese */
  --pietra:#171d23;         /* sezione rialzata */
  --card:#1f272e;           /* scheda */
  --linea:#232c34;          /* filetto decorativo */
  --linea-forte:#5d7385;    /* bordo interattivo — 3,07:1 su card (WCAG 1.4.11) */

  /* testo */
  --calce:#f2efe8;          /* 15,98:1 su ardesia */
  --fumo:#9aa7b0;           /* 7,45:1 su ardesia · 6,14:1 su scheda */
  --rosso:#e5675b;          /* testo d'accento — 5,61:1 su ardesia · 4,63:1 su scheda */
  --rosso-btn:#cb2f20;      /* sfondo bottone — calce sopra a 4,61:1 */
  --rosso-marchio:#b3272d;  /* la croce di San Giorgio: resta il rosso del marchio */

  /* tipografia: due famiglie, tre tagli in tutto.
     Il manuale lo dice: mai più di tre, o il font diventa la causa della lentezza. */
  --display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --testo:'Instrument Sans',system-ui,-apple-system,sans-serif;

  /* scala tipografica.
     La scelta estrema che il manuale indica: a 1440 il titolo arriva a 168px
     con interlinea 0,86. I quindici siti misurati stanno fra 125 e 480px;
     sotto i 100 non ci va nessuno. */
  --t-mega:clamp(2.9rem, .6rem + 7vw, 7.5rem);
     /* 110px a 1440. La prima scelta era 168px: bella, ma il titolo non stava
        sopra la piega e la chiamata all'azione finiva fuori schermo. Fra una
        tipografia estrema e una CTA visibile vince la CTA: e' la regola numero
        uno di tutta la ricerca sulle conversioni. 110px resta nella fascia dei
        siti misurati (Relais 125, Ontier 140) e ci sta. */
  --t-1:clamp(2.4rem, 1.4rem + 3.4vw, 5rem);         /* 80px */
  --t-2:clamp(1.9rem, 1.3rem + 2.1vw, 3.25rem);      /* 52px */
  --t-3:clamp(1.35rem, 1.1rem + .9vw, 1.9rem);       /* 30px */
  --t-4:clamp(1.08rem, 1rem + .3vw, 1.25rem);        /* 20px */
  --t-p:clamp(1rem, .96rem + .2vw, 1.12rem);         /* 18px */
  --t-s:.92rem;
  --t-xs:.78rem;
  --t-occhio:.7rem;

  /* spaziature: scala a passo 1,5 — niente numeri a caso */
  --s1:.5rem; --s2:.75rem; --s3:1.125rem; --s4:1.7rem;
  --s5:2.5rem; --s6:3.75rem; --s7:5.6rem; --s8:8.4rem;
  --sez:clamp(4.5rem, 9vw, 9rem);       /* aria fra le sezioni */

  --largo:min(1280px, 92vw);
  --stretto:min(760px, 92vw);
  /* Il margine dello schermo. Serve dove il contenuto NON sta in una colonna
     centrata ma parte dal bordo: la testa e la hero del filmato. Piccolo di
     proposito — 52px a 1440, 69px a 1920 — perche' li' il protagonista e' il
     video, e ogni pixel di margine e' video che non si vede. */
  --bordo:clamp(1.15rem, 3.6vw, 4.3rem);

  /* movimento.
     La tabella per settore è netta: più il servizio è serio, più le curve sono
     sobrie. Un artigiano che vende ad artigiani usa expo.out, mai elastic. */
  --e:cubic-bezier(.16,1,.3,1);
  --e-veloce:cubic-bezier(.2,.8,.3,1);
  --d:.8s;                               /* 0,8 è il valore centrale misurato */
  --d-corta:.36s;

  --raggio:3px;
}

/* ── azzeramento ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ardesia);color:var(--calce);
  font-family:var(--testo);font-size:var(--t-p);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px;border-radius:2px}
::selection{background:var(--rosso-btn);color:var(--calce)}

/* ── impianto ──────────────────────────────────────────────────────────── */
.wrap{width:var(--largo);margin-inline:auto}
.stretto{width:var(--stretto);margin-inline:auto}
.sez{padding-block:var(--sez)}
.sez-pietra{background:var(--pietra)}
.riga{display:flex;align-items:center;gap:var(--s3)}
.colonna{display:flex;flex-direction:column}

/* ── tipografia ────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.92}
.mega{font-size:var(--t-mega);line-height:.86;letter-spacing:-.045em;font-weight:800}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2);letter-spacing:-.03em}
h3{font-size:var(--t-3);letter-spacing:-.02em;line-height:1.12}
h4{font-size:var(--t-4);letter-spacing:-.015em;line-height:1.2}
p{max-width:62ch}
.guida{font-size:var(--t-4);color:var(--fumo);line-height:1.58;max-width:56ch}
.piccolo{font-size:var(--t-s);color:var(--fumo)}
.mini{font-size:var(--t-xs);color:var(--fumo);line-height:1.5}
.occhio{
  font-size:var(--t-occhio);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosso);display:inline-flex;align-items:center;gap:.6rem;
}
.occhio::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.acc{color:var(--rosso);font-style:normal}
/* Il corsivo NON si usa nei titoli: il woff2 e' ritagliato sul solo tondo e il
   browser lo sintetizzerebbe. A 110px un corsivo finto si vede. */
.num{font-variant-numeric:tabular-nums}

/* ── marchio ───────────────────────────────────────────────────────────── */
.marchio{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;
}
.croce{width:17px;height:17px;position:relative;flex:none}
.croce::before,.croce::after{content:"";position:absolute;background:var(--rosso-marchio);border-radius:1px}
.croce::before{left:6px;top:0;width:5px;height:17px}
.croce::after{top:6px;left:0;height:5px;width:17px}

/* ── bottoni ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.02rem 1.9rem;border:1px solid transparent;border-radius:var(--raggio);
  font-size:var(--t-s);font-weight:600;letter-spacing:.02em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--d-corta) var(--e-veloce),color var(--d-corta) var(--e-veloce),
             border-color var(--d-corta) var(--e-veloce),transform var(--d-corta) var(--e-veloce);
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--rosso-btn);color:var(--calce)}
.btn-p:hover{background:#e03a29}
.btn-s{border-color:var(--linea-forte);color:var(--calce)}
.btn-s:hover{border-color:var(--calce);background:rgba(242,239,232,.06)}
.btn-t{padding:.6rem 0;color:var(--rosso);gap:.45rem}
.btn-t .frecc{transition:transform var(--d-corta) var(--e-veloce)}
.btn-t:hover .frecc{transform:translateX(4px)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ── intestazione ──────────────────────────────────────────────────────── */
.testa{
  position:fixed;inset:0 0 auto;z-index:60;
  background:color-mix(in srgb,var(--ardesia) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-corta) var(--e),background var(--d-corta) var(--e);
}
.testa.giu{border-bottom-color:var(--linea)}
.testa .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:70px}
/* La testa va da bordo a bordo SOLO dove sotto c'e' la hero a schermo pieno.
   Li' il testo e' appoggiato al margine, e un marchio rientrato di 320px sopra
   un titolo rientrato di 52 si legge come un errore di allineamento. Sulle
   altre pagine il contenuto sta nella colonna centrata e la testa ci si
   allinea: la coerenza serve dentro la pagina, non fra pagine diverse.
   Su un browser che non conosce `:has()` la testa resta centrata dappertutto —
   meno bella, mai rotta. */
body:has(.hero-mappa) .testa .wrap{width:100%;max-width:none;margin-inline:0;
  padding-inline:var(--bordo)}
.menu{display:flex;gap:var(--s4);list-style:none;padding:0}
.menu a{font-size:var(--t-s);color:var(--fumo);position:relative;padding:.3rem 0;
  transition:color var(--d-corta) var(--e-veloce)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--rosso);
  transition:width var(--d-corta) var(--e)}
.menu a:hover,.menu a[aria-current=page]{color:var(--calce)}
.menu a:hover::after,.menu a[aria-current=page]::after{width:100%}
.testa-azioni{display:flex;align-items:center;gap:var(--s3)}
.apri-menu{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.apri-menu span{display:block;width:22px;height:1.5px;background:var(--calce);margin:5px 0;
  transition:transform var(--d-corta) var(--e),opacity var(--d-corta) var(--e)}
.apri-menu[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.apri-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.apri-menu[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── comparsa allo scorrimento ─────────────────────────────────────────────
   Si nasconde SOLO se il JavaScript c'è: senza, la pagina resta leggibile
   tutta. È la lezione più cara imparata sulla versione precedente. */
.js .cp{opacity:0;transform:translateY(26px);
  transition:opacity var(--d) var(--e),transform var(--d) var(--e)}
.js .cp.vista{opacity:1;transform:none}
.js .cp[data-r="1"]{transition-delay:.09s}
.js .cp[data-r="2"]{transition-delay:.18s}
.js .cp[data-r="3"]{transition-delay:.27s}
.js .cp[data-r="4"]{transition-delay:.36s}

/* righe del titolo che salgono da sotto una maschera */
.linea-m{display:block;overflow:hidden;padding-bottom:.06em}
.js .linea-m>span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--e)}
.js .vista .linea-m>span,.js .linea-m.vista>span{transform:none}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding:calc(70px + var(--s7)) 0 var(--s7);position:relative;overflow:hidden}
.hero-griglia{position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 0%,transparent 72%)}
.hero>.wrap{position:relative;z-index:1}
.hero .mega{max-width:15ch;margin-block:var(--s4) var(--s4)}
.hero .guida{max-width:52ch}
.hero-azioni{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.hero-sotto{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);
  font-size:var(--t-s);color:var(--fumo);align-items:center}
/* il separatore sparisce quando le due parti vanno a capo, o resta appeso */
@media(max-width:640px){.hero-sotto>span:nth-child(2){display:none}}
.hero-sotto a{color:var(--calce);border-bottom:1px solid var(--linea-forte);padding-bottom:1px;
  transition:border-color var(--d-corta) var(--e-veloce)}
.hero-sotto a:hover{border-color:var(--rosso)}
.pallino{width:6px;height:6px;border-radius:50%;background:var(--rosso);flex:none;
  animation:respiro 2.6s var(--e) infinite}
@keyframes respiro{0%,100%{opacity:1}50%{opacity:.25}}

/* ── nastro ────────────────────────────────────────────────────────────── */
.nastro{border-block:1px solid var(--linea);overflow:hidden;padding:var(--s3) 0;
  --v:38s;background:var(--pietra)}
.nastro-p{display:flex;width:max-content;animation:scorri var(--v) linear infinite}
.nastro-p>span{padding-inline:var(--s4);font-size:var(--t-s);color:var(--fumo);white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--s4)}
.nastro-p>span::after{content:"✦";color:var(--rosso);font-size:.7em}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ── schede numeriche ──────────────────────────────────────────────────── */
.cifre{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea);
  border-radius:var(--raggio);overflow:hidden;background:var(--pietra)}
.cifra{padding:var(--s4) var(--s3);border-right:1px solid var(--linea)}
.cifra:last-child{border-right:0}
.cifra b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3vw,2.9rem);
  line-height:1;letter-spacing:-.03em}
.cifra span{display:block;font-size:var(--t-xs);color:var(--fumo);margin-top:.55rem;line-height:1.4}

/* ── calcolatore ───────────────────────────────────────────────────────── */
.calc{background:var(--card);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(var(--s4),4vw,var(--s6))}
.calc-riga{display:block;font-size:var(--t-3);font-family:var(--display);
  letter-spacing:-.02em;line-height:1.35;max-width:18ch}
.calc-riga strong{font-weight:800}
/* Il cursore dei coperti era alto 2px COME ELEMENTO: si vedeva una pallina da
   22px, ma il riquadro che riceve il dito era la riga sottile. Chrome allarga
   la zona sensibile fino alla pallina e quindi in prova funzionava lo stesso —
   ma e' una cortesia di un browser, non una regola: su un altro il dito
   sarebbe finito nel vuoto. Adesso l'elemento e' alto 26px davvero, con lo
   sfondo trasparente, e la riga da 2px la disegna la traccia. Identico a
   vedersi, 13 volte piu' grande da toccare. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:none;margin:calc(var(--s4) - 12px) 0 calc(var(--s2) - 12px);cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:var(--linea-forte)}
.calc input[type=range]::-moz-range-track{height:2px;border-radius:2px;
  background:var(--linea-forte)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  margin-top:-10px;border-radius:50%;background:var(--rosso-btn);
  border:2px solid var(--calce);cursor:grab}
.calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--rosso-btn);border:2px solid var(--calce);cursor:grab}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.calc-out div{border-top:2px solid var(--linea);padding-top:var(--s3)}
.calc-out b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em}
.calc-out .acc{color:var(--rosso);font-style:normal}
/* Il corsivo NON si usa nei titoli: il woff2 e' ritagliato sul solo tondo e il
   browser lo sintetizzerebbe. A 110px un corsivo finto si vede. */
.calc-out span{display:block;font-size:var(--t-xs);color:var(--fumo);margin-top:.5rem}

/* ── prima / dopo ──────────────────────────────────────────────────────── */
/* La scheda Google è l'elemento largo, il telefono è un telefono: dargli la
   stessa colonna faceva un'immagine alta 1200px che schiacciava il confronto. */
.pd{display:grid;grid-template-columns:1fr minmax(0,430px);
  gap:clamp(var(--s4),4vw,var(--s6));align-items:center}
.pd + .pd{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--linea)}
.pd-prima{background:var(--card);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(var(--s4),3vw,var(--s5));position:relative}
.pd-eti{position:absolute;top:0;left:var(--s4);transform:translateY(-50%);
  background:var(--ardesia);padding:0 .7rem;font-size:var(--t-occhio);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fumo)}
.pd-dopo{position:relative;padding-top:var(--s2)}
.pd-dopo .pd-eti{background:var(--ardesia);color:var(--rosso);left:var(--s3);z-index:2}
.pd-g{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s3)}
.pd-stelle{color:#e8b73a;letter-spacing:.08em;font-size:.95rem}
.pd-riga{display:flex;justify-content:space-between;gap:var(--s3);padding:.7rem 0;
  border-bottom:1px solid var(--linea);font-size:var(--t-s)}
.pd-riga:last-of-type{border-bottom:0}
.pd-riga dt{color:var(--fumo)}
.pd-riga dd{margin:0;text-align:right;font-weight:600}
.pd-manca{color:var(--rosso);font-weight:700}
.pd-schermo{display:block;border:1px solid var(--linea-forte);border-radius:12px;overflow:hidden;
  background:var(--card);box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
  aspect-ratio:430/600;transition:transform var(--d) var(--e)}
.pd-schermo picture{display:block;height:100%}
.pd-schermo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pd-dopo:hover .pd-schermo{transform:translateY(-6px)}
.pd-nota{font-size:var(--t-xs);color:var(--fumo);margin-top:var(--s3)}

/* ── griglia dei lavori ────────────────────────────────────────────────── */
.lavori{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s4)}
/* gli esempi di fantasia sono nove: tre per riga, cosi' non resta una scheda da sola */
@media(min-width:1000px){.lavori.tre{grid-template-columns:repeat(3,1fr)}}
.lavoro{display:block;border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;
  background:var(--card);transition:border-color var(--d-corta) var(--e),transform var(--d) var(--e)}
.lavoro:hover{border-color:var(--linea-forte);transform:translateY(-4px)}
.lavoro-img{aspect-ratio:430/560;overflow:hidden;background:var(--pietra)}
.lavoro-img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.3s var(--e)}
.lavoro:hover .lavoro-img img{transform:scale(1.04)}
.lavoro-t{padding:var(--s3) var(--s3) var(--s4)}
.lavoro-t h3{font-size:1.06rem;margin-bottom:.3rem}
.lavoro-m{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-xs);color:var(--fumo);
  margin-top:.55rem;flex-wrap:wrap}
.eti{font-size:var(--t-occhio);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--fumo);border:1px solid var(--linea);padding:.28rem .6rem;border-radius:99px}

/* ── i clienti: la home vera che scorre, e il telefono accanto ─────────────── */
.salti{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s4)}
.salti a{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid var(--linea-forte);
  border-radius:99px;color:var(--calce);text-decoration:none;font-size:var(--t-s);transition:border-color var(--d-corta) var(--e)}
.salti a:hover{border-color:var(--rosso)}
.salti .num{color:var(--fumo)}
.cliente{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(var(--s5),5vw,var(--s7));align-items:center}
.cliente + .cliente{margin-top:var(--s8)}
.cl-destra{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.cl-destra .cl-schermi{order:2}
.cl-schermi{position:relative;margin-bottom:var(--s5)}
.cl-desk{border:1px solid var(--linea-forte);border-radius:10px;overflow:hidden;background:var(--card);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.cl-barra{margin:0;padding:.45rem .9rem;font-size:var(--t-xs);color:var(--fumo);background:var(--pietra);
  border-bottom:1px solid var(--linea);text-align:center;letter-spacing:.02em}
.cl-desk video,.cl-desk img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--pietra)}
.filmato{position:relative}
.ferma{position:absolute;right:.7rem;bottom:.7rem;font:600 var(--t-xs)/1 var(--testo);color:var(--calce);
  background:rgba(16,21,26,.8);border:1px solid var(--linea-forte);border-radius:99px;padding:.5rem .85rem;cursor:pointer}
.ferma:hover{background:var(--ardesia)}
/* nei clienti l'angolo a destra e' del telefono: il comando va a sinistra */
.cl-desk .ferma{right:auto;left:.7rem}
.cl-tel{position:absolute;right:-3%;bottom:-12%;width:23%;display:block;border:1px solid var(--linea-forte);border-radius:16px;
  overflow:hidden;background:var(--card);box-shadow:0 24px 50px -20px rgba(0,0,0,.85)}
.cl-tel img{display:block;width:100%;height:auto}
.cl-testo .piccolo{max-width:38ch}
@media(max-width:900px){
  .cliente,.cl-destra{grid-template-columns:1fr}
  .cl-destra .cl-schermi{order:0}
  .cl-tel{width:28%;right:2%;bottom:-14%}
  .cl-schermi{margin-bottom:var(--s6)}
}

/* ── passi ─────────────────────────────────────────────────────────────── */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);counter-reset:p}
.passo{counter-increment:p;position:relative;padding-top:var(--s5)}
.passo::before{content:counter(p,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--display);font-weight:800;font-size:var(--t-2);color:var(--linea-forte);
  line-height:1;letter-spacing:-.04em}
.passo h3{margin-bottom:var(--s2)}

/* ── prezzi ────────────────────────────────────────────────────────────── */
.prezzi{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.piano{border:1px solid var(--linea);border-radius:var(--raggio);padding:clamp(var(--s4),3vw,var(--s5));
  background:var(--card);position:relative;height:100%;display:flex;flex-direction:column}
.piano.spicca{border-color:var(--rosso);background:linear-gradient(180deg,rgba(203,47,32,.09),transparent 45%)}
.piano-tag{position:absolute;top:0;right:var(--s4);transform:translateY(-50%);
  background:var(--rosso-btn);color:var(--calce);font-size:var(--t-occhio);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem .8rem;border-radius:99px}
.piano-p{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1;letter-spacing:-.04em;margin:var(--s3) 0 .4rem}
.piano-p small{font-family:var(--testo);font-weight:400;font-size:var(--t-p);color:var(--fumo);
  letter-spacing:normal}
.piano ul{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:.85rem;flex:1}
.piano li{display:flex;gap:.7rem;font-size:var(--t-s);line-height:1.5}
.piano li svg{flex:none;margin-top:4px;width:14px;stroke:var(--rosso);fill:none;stroke-width:2.2}
.piano .btn{width:100%;margin-top:var(--s3)}

/* ── domande ───────────────────────────────────────────────────────────── */
.dom{border-top:1px solid var(--linea)}
.dom:last-child{border-bottom:1px solid var(--linea)}
.dom summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);
  padding:var(--s4) 0;cursor:pointer;list-style:none;font-family:var(--display);
  font-weight:700;font-size:var(--t-4);letter-spacing:-.015em;line-height:1.3}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after{content:"";flex:none;width:13px;height:13px;margin-top:6px;
  border-right:2px solid var(--rosso);border-bottom:2px solid var(--rosso);
  transform:rotate(45deg);transition:transform var(--d-corta) var(--e)}
.dom[open] summary::after{transform:rotate(-135deg)}
.dom-c{padding-bottom:var(--s4);color:var(--fumo);max-width:70ch}
.dom-c p + p{margin-top:var(--s2)}

/* ── modulo ────────────────────────────────────────────────────────────── */
.modulo{display:grid;gap:var(--s3)}
.campo label{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fumo);margin-bottom:.5rem;font-weight:600}
.campo input,.campo textarea{width:100%;padding:.95rem 1.05rem;background:var(--card);
  border:1px solid var(--linea-forte);border-radius:var(--raggio);color:var(--calce);
  transition:border-color var(--d-corta) var(--e-veloce),background var(--d-corta) var(--e-veloce)}
.campo input::placeholder,.campo textarea::placeholder{color:#6d7a84}
/* Il fuoco sui campi era segnato SOLO dal bordo che diventa rosso, con
   `outline:none` a spegnere l'anello del resto del sito. Il bordo rosso si
   vede — 4,37:1 sul fondo del campo — quindi la 2.4.7 era rispettata, ma un
   filetto da 1px e' il segnale piu' debole che si possa dare a chi naviga
   col Tab, e chi non distingue bene il rosso resta senza. Adesso il campo
   fa tutte e tre le cose: bordo, fondo piu' chiaro e l'anello che hanno gia'
   tutti gli altri comandi della pagina. */
.campo input:focus,.campo textarea:focus{border-color:var(--rosso);background:#232c34}
.due{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
/* `min-height` sulla riga del consenso: su un tablet il testo ci sta su una
   riga sola e la label veniva alta 23px — uno sotto la soglia. Un pixel, ma
   la soglia e' una soglia. */
.consenso{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--t-s);color:var(--fumo);
  line-height:1.55;min-height:26px;padding-block:1px}
/* La casella e' dentro alla sua <label>, quindi il bersaglio vero e' tutta la
   riga e la 2.5.8 e' rispettata gia' cosi'. Ma 18px sono scomodi lo stesso da
   centrare col pollice: 22 costano niente e si vedono meglio. */
.consenso input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--rosso-btn)}
.consenso a{color:var(--calce);border-bottom:1px solid var(--linea-forte)}
.esito{font-size:var(--t-s);color:var(--fumo);min-height:1.5em}
.esito[data-stato=errore]{color:#ff9d90}
.esito[data-stato=attesa]{color:var(--calce)}
.esito a{color:inherit;border-bottom:1px solid currentColor}
.esca{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── piede ─────────────────────────────────────────────────────────────── */
.piede{border-top:1px solid var(--linea);padding:var(--s6) 0 var(--s5);background:var(--pietra)}
.piede-g{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s5)}
.piede h2{font-size:var(--t-s);letter-spacing:.1em;text-transform:uppercase;color:var(--fumo);
  font-family:var(--testo);font-weight:600;margin-bottom:var(--s3)}
.piede a{display:block;padding:.3rem 0;font-size:var(--t-s);color:var(--fumo);
  transition:color var(--d-corta) var(--e-veloce),transform var(--d-corta) var(--e-veloce)}
.piede a:hover{color:var(--calce);transform:translateX(3px)}
.piede-b{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--fumo)}
.sigillo{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linea);
  padding:.45rem .85rem;border-radius:99px;font-size:var(--t-xs);color:var(--fumo)}
.sigillo svg{width:13px;stroke:var(--rosso);fill:none;stroke-width:2}

/* ── responsive ────────────────────────────────────────────────────────────
   Il telefono non è il desktop stretto: cambia la gerarchia, non solo la
   larghezza. Il titolo scende di scala prima delle altre cose, le griglie a
   più colonne diventano scorrimenti orizzontali dove ha senso, e il menu
   diventa un pannello a tutto schermo. */
@media (max-width:1024px){
  .pd{grid-template-columns:1fr;gap:var(--s4)}
  .pd-dopo{max-width:420px}
  .passi{grid-template-columns:1fr;gap:var(--s5)}
  .piede-g{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menu,.testa-azioni .btn{display:none}
  .apri-menu{display:block}
  /* Il pannello del menu era alto ZERO, e le voci uscivano di sopra sopra al
     marchio. Non e' colpa di `inset`: `.testa` ha un `backdrop-filter`, e un
     elemento con backdrop-filter diventa il contenitore di riferimento per i
     discendenti `position:fixed`. Quindi `inset:70px 0 0` non si misurava
     sullo schermo ma sulla testa, che e' alta 70px: sopra 70, sotto 0, in
     mezzo niente. L'altezza si dichiara in unita' dello schermo, che restano
     dello schermo qualunque sia il contenitore. */
  .menu.aperto{display:flex;position:fixed;top:70px;left:0;width:100%;
    height:calc(100vh - 70px);height:calc(100svh - 70px);background:var(--ardesia);
    flex-direction:column;justify-content:center;gap:var(--s4);padding:0 8vw;z-index:59}
  .menu.aperto a{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,7vw,2.4rem);
    color:var(--calce);letter-spacing:-.03em}
  .menu.aperto a::after{display:none}
  .cifre{grid-template-columns:1fr 1fr}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .prezzi{grid-template-columns:1fr}
  .due{grid-template-columns:1fr}
  .piede-g{grid-template-columns:1fr;gap:var(--s4)}
  .calc-out{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero{padding-top:calc(70px + var(--s6))}
  .hero-azioni{flex-direction:column;align-items:stretch}
  .hero-azioni .btn{width:100%}
  .lavori{grid-template-columns:1fr}
  .cifre{grid-template-columns:1fr}
  .cifra{border-right:0;border-bottom:1px solid var(--linea)}
  .cifra:last-child{border-bottom:0}
}

/* ── moto ridotto ──────────────────────────────────────────────────────────
   Otto siti premiati su quindici la ignorano. Costa tre righe. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .cp{opacity:1;transform:none}
  .js .linea-m>span{transform:none}
  .nastro-p{animation:none}
  .pallino{animation:none}
}

/* ── dettagli ──────────────────────────────────────────────────────────── */
/* Un titolo che c'è per chi legge con lo screen reader e non per chi guarda.
   Serve a non saltare un livello nella gerarchia: la pagina dei lavori andava
   da H1 direttamente agli H3 delle dieci schede, e chi naviga per titoli si
   trovava un gradino mancante. Il disegno non cambia di un pixel. */
.salta-lettura{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.salta{position:absolute;left:-9999px;z-index:100;padding:.8rem 1.2rem;background:var(--rosso-btn);
  color:var(--calce);border-radius:0 0 var(--raggio) 0}
.salta:focus{left:0;top:0}
.piede-claim{margin:var(--s3) 0 var(--s2);max-width:34ch}
.piede .marchio{font-size:1.05rem}
/* Il link della posta nel piede stava in un paragrafo tutto suo ed era alto
   19px: la 2.5.8 (AA) ne vuole 24. Non si allarga il testo — la riga andrebbe
   a spostarsi — e nemmeno si mette padding, che sposterebbe il filetto sotto.
   Si allarga la ZONA che riceve il clic con un pezzo invisibile che sborda di
   4px sopra e sotto: 27px di bersaglio, zero pixel cambiati a vedersi. */
.piede p a{display:inline;padding:0;border-bottom:1px solid var(--linea-forte);
  position:relative}
.piede p a::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.piede .sigillo{margin-top:var(--s3)}
.mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)}
.mt6{margin-top:var(--s6)} .mb3{margin-bottom:var(--s3)} .mb4{margin-bottom:var(--s4)}
.mb5{margin-bottom:var(--s5)}
.testa-sez{max-width:min(780px,92%);margin-bottom:var(--s5)}
.testa-sez h2{max-width:20ch}
.testa-sez h2{margin-top:var(--s3)}
.testa-sez .guida{margin-top:var(--s3);max-width:52ch}
.centro{text-align:center;margin-inline:auto}
.centro .guida,.centro p{margin-inline:auto}
.due-col{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--s4),5vw,var(--s7));align-items:start}
@media(max-width:1024px){.due-col{grid-template-columns:1fr;gap:var(--s5)}}

/* ── elenchi ───────────────────────────────────────────────────────────── */
.lista-spunte{list-style:none;padding:0;display:grid;gap:var(--s3)}
.lista-spunte li{display:flex;gap:.8rem;font-size:var(--t-s);line-height:1.55;color:var(--fumo)}
.lista-spunte li strong{color:var(--calce)}
.lista-spunte svg{flex:none;margin-top:5px;width:15px;stroke:var(--rosso);fill:none;stroke-width:2.4}
.lista-no{list-style:none;padding:0;display:grid;gap:var(--s4)}
.lista-no li{border-left:2px solid var(--linea-forte);padding-left:var(--s3);
  font-size:var(--t-s);line-height:1.6;color:var(--fumo)}
.lista-no strong{color:var(--calce);display:block;margin-bottom:.2rem;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.passi-num{padding-left:1.15rem;display:grid;gap:var(--s3);color:var(--fumo);max-width:56ch}
.passi-num li{padding-left:.3rem;line-height:1.6}
.passi-num strong{color:var(--calce)}

/* ── passi lunghi ──────────────────────────────────────────────────────── */
.passi-lunghi{display:grid;gap:var(--s7)}
.passo-l{display:grid;grid-template-columns:auto 1fr;gap:clamp(var(--s4),4vw,var(--s6));
  align-items:start;padding-top:var(--s5);border-top:1px solid var(--linea)}
.passo-l:first-child{border-top:0;padding-top:0}
.passo-n{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,5rem);
  line-height:.8;letter-spacing:-.05em;color:var(--linea-forte)}
.passo-l h2{margin-bottom:var(--s3)}
.passo-l .piccolo{margin-top:var(--s3)}
@media(max-width:720px){.passo-l{grid-template-columns:1fr;gap:var(--s3)}}

/* ── tempi ─────────────────────────────────────────────────────────────── */
.tempi{display:grid;gap:0;border:1px solid var(--linea);border-radius:var(--raggio);
  background:var(--card)}
.tempi>div{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--linea)}
.tempi>div:last-child{border-bottom:0}
.tempi dt{color:var(--fumo);font-size:var(--t-s)}
.tempi dd{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t-4);
  letter-spacing:-.02em;white-space:nowrap}

/* ── varianti ──────────────────────────────────────────────────────────── */
.hero-corto{padding-bottom:var(--s5)}
.hero-corto .mega{max-width:16ch}
.stretto-largo{width:min(920px,92vw);margin-inline:auto}

/* ── prosa lunga (informativa) ─────────────────────────────────────────── */
.prosa h1{font-size:var(--t-1);margin-bottom:var(--s4)}
.prosa h2{font-size:var(--t-3);margin:var(--s6) 0 var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--linea)}
.prosa h2:first-of-type{border-top:0;padding-top:0}
.prosa p{color:var(--fumo);margin-bottom:var(--s3);max-width:70ch}
.prosa strong{color:var(--calce)}
.prosa a{color:var(--rosso);border-bottom:1px solid currentColor}
.prosa ul,.prosa ol{color:var(--fumo);padding-left:1.2rem;margin-bottom:var(--s3);max-width:70ch}
.prosa li{margin-bottom:.5rem}
.prosa table{width:100%;border-collapse:collapse;font-size:var(--t-s);margin:var(--s3) 0;min-width:520px}
.prosa .tw{overflow-x:auto;margin:var(--s4) 0;-webkit-overflow-scrolling:touch}
.prosa th{text-align:left;padding:.7rem .8rem;background:var(--card);color:var(--calce);
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--linea)}
.prosa td{padding:.7rem .8rem;border-bottom:1px solid var(--linea);color:var(--fumo);vertical-align:top}

/* ── la bandiera di Genova ─────────────────────────────────────────────────
   Il marchio prima aveva una croce rossa nuda: la bandiera di Genova è la
   croce di San Giorgio su campo bianco, e senza il campo non è una bandiera. */
.bandiera{width:26px;height:17px;flex:none;border-radius:1.5px;
  box-shadow:0 0 0 1px rgba(242,239,232,.14)}
.piede .bandiera,.testa .bandiera{width:24px;height:16px}

/* ── la mappa dei caruggi ──────────────────────────────────────────────────
   Non è una decorazione: è la forma vera del centro storico di Genova, presa
   da OpenStreetMap, con i dieci locali nei punti dove stanno davvero.
   Una fotografia di repertorio l'avrebbe potuta comprare chiunque; questa no. */
/* La hero della home e' uno schermo intero di filmato con le parole appoggiate
   al bordo sinistro. Non e' una decisione estetica: un video dentro una
   fascia alta 600px, con sopra un velo al 97%, non e' un video — e' uno
   sfondo. Se il filmato deve valere qualcosa deve occupare tutto, e il testo
   deve stare da una parte sola per lasciargli il resto.

   `min-height` e non `height`: se il testo cresce (traduzioni, zoom del
   browser, caratteri piu' grandi impostati dall'utente) la sezione si allunga
   invece di tagliare le righe. `svh` e' l'altezza dello schermo col browser
   mobile aperto al massimo: con `vh` la prima schermata finisce sotto la
   barra degli indirizzi e la chiamata all'azione non si vede.

   La sezione e' a schermo pieno SEMPRE, non solo col video acceso: se il
   contenitore cambiasse altezza al partire del filmato, la pagina sotto
   salterebbe. CLS misurato 0,000, e li' deve restare. */
.hero-mappa{position:relative;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding-block:calc(70px + var(--s5)) var(--s6)}

/* La colonna del testo: parte dal margine dello schermo e non supera i 45rem,
   cosi' su un monitor largo non si allarga a inseguire lo spazio — e' il video
   che si prende lo spazio in piu'. */
.hero-mappa>.wrap{width:clamp(17rem, 47vw, 45rem);max-width:none;
  margin-inline:var(--bordo) 0}

/* Sopra al filmato il grigio non si usa.
   `--fumo` (#9aa7b0) ha luminanza 0,377: per stargli sopra a 4,5:1 il fondo
   deve scendere a 60 su 255, cioe' il velo deve coprire il 71% della luce del
   video. Il colore calce, che di luminanza ne ha 0,864, si accontenta di 109 —
   e il velo scende al 47%. Cambiare il colore del testo fa vedere il doppio
   della luce rispetto a scurire lo sfondo. La strada giusta era questa, non
   alzare l'opacita' finche' non passava. */
.hero-mappa .occhio{color:var(--calce)}
.hero-mappa .occhio::before{background:var(--rosso)}
.hero-mappa .guida{color:var(--calce);max-width:38ch;
  font-size:clamp(1.06rem,.92rem + .5vw,1.4rem);line-height:1.52}
.hero-mappa .hero-sotto{color:var(--calce)}
.hero-mappa .hero-sotto a{border-bottom-color:rgba(242,239,232,.5)}

/* Il titolo si accorcia rispetto al resto del sito: a 110px la riga piu' lunga
   («costruito prima») sarebbe larga 57vw e mangerebbe il video invece di
   stargli accanto. 83px a 1440 restano nella fascia dei siti misurati. */
.hero-mappa .mega{font-size:clamp(2.5rem,.3rem + 5vw,5.6rem);max-width:none;
  margin-block:var(--s3) var(--s4)}

/* «prima» era rosso. Il rosso #e5675b ha luminanza 0,273: per reggere anche
   solo 3:1 vuole un fondo a 68 su 255, piu' scuro di quanto serva a tutto il
   resto del titolo — una parola sola avrebbe deciso quanto velo mettere su
   tutta la schermata. Adesso la parola e' calce come le altre e il rosso resta
   dov'e' utile: una barra sotto, che e' un segno grafico e non deve leggersi. */
.hero-mappa .acc{color:inherit;position:relative;white-space:nowrap}
.hero-mappa .acc::after{content:"";position:absolute;left:0;right:0;bottom:.055em;
  height:.075em;background:var(--rosso);border-radius:2px}

/* Il filo che dice che sotto c'e' dell'altro.
   Uno schermo intero di filmato non lo dice: non c'e' un bordo, non c'e' una
   riga tagliata a meta', niente che suggerisca di scorrere. Quaranta pixel di
   filo in fondo bastano. E' `content:""`, quindi nessuno screen reader lo
   annuncia: e' un suggerimento visivo, non un'informazione. */
.hero-mappa::before,.hero-mappa::after{content:"";position:absolute;left:50%;
  z-index:3;pointer-events:none;width:1px;transform:translateX(-50%)}
.hero-mappa::before{bottom:var(--s4);height:42px;background:rgba(242,239,232,.22)}
.hero-mappa::after{bottom:calc(var(--s4) + 30px);height:12px;background:rgba(242,239,232,.8)}
.js .hero-mappa::after{animation:filo-giu 2.9s var(--e-veloce) infinite}
@keyframes filo-giu{
  0%{transform:translateX(-50%) translateY(0);opacity:0}
  20%{opacity:1}
  78%{opacity:1}
  100%{transform:translateX(-50%) translateY(30px);opacity:0}
}
@media(prefers-reduced-motion:reduce){.js .hero-mappa::after{animation:none;opacity:.55}}

/* Il bottone secondario aveva il bordo `--linea-forte` (#5d7385): nato per
   stare su una scheda ferma, non su un cielo che cambia. Sopra al filmato si
   porta il suo fondo. */
.hero-mappa .btn-s{border-color:rgba(242,239,232,.62);background:rgba(8,12,16,.55)}
.hero-mappa .btn-s:hover{border-color:var(--calce);background:rgba(8,12,16,.72)}
.cg-sfondo{position:absolute;inset:-8% -8% -8% -8%;z-index:0;color:#5b7488;pointer-events:none}
.cg{width:100%;height:100%;display:block}
.cg-fini{opacity:.62}
.cg-medie{color:#7791a4;opacity:.92}
.cg-grosse{color:#9db3c2}
.cg-punti circle{fill:#ff5a49;stroke:none}
.cg-punti .cg-p>circle:first-child{filter:drop-shadow(0 0 7px rgba(255,90,73,.85))}
.cg-punti .cg-alone{opacity:.45;transform-box:fill-box;transform-origin:center}

/* il velo: la mappa resta leggibile come trama, il testo resta leggibile come
   testo. L'opacità è quella che serve, non quella che sembra giusta. */
/* Il velo copre solo la colonna del testo. Al di là la mappa si deve vedere:
   se non si riconosce Genova, tanto valeva non metterla. */
/* Senza il filmato dietro c'e' la mappa: linee chiare su ardesia, molta meno
   luce delle nuvole. Stessa forma del velo del video, valori piu' bassi —
   quello che cambia e' cosa c'e' sotto, non il disegno. */
.cg-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(16,21,26,.90) 0%,rgba(16,21,26,.84) 22%,
    rgba(16,21,26,.66) 40%,rgba(16,21,26,.36) 54%,rgba(16,21,26,.12) 68%,
    rgba(16,21,26,.06) 100%)}
/* Col volo acceso dietro c'e' molta piu' luce che sotto la mappa SVG — i tetti
   in cotto sono la cosa piu' chiara della pagina. La velatura si adegua a cosa
   ha sotto: questi valori sono quelli che fanno passare la misura del
   contrasto su tutto il giro di camera, non quelli che sembravano giusti. */
.in-volo .cg-velo{background:linear-gradient(95deg,var(--ardesia) 0%,
  rgba(16,21,26,.99) 33%,rgba(16,21,26,.93) 47%,rgba(16,21,26,.60) 60%,
  rgba(16,21,26,.20) 76%,rgba(16,21,26,.30) 100%)}
.hero-mappa>.wrap{position:relative;z-index:2}

.cg-nota{position:absolute;right:var(--bordo);bottom:var(--s3);z-index:2;
  font-size:var(--t-xs);color:#a7bac7;max-width:32ch;text-align:right;line-height:1.5;
  /* Un pannello pieno, non una sfumatura che si apre: sotto ci passano i
     tetti in cotto, che sono la cosa piu' chiara della scena, e due righe di
     nota legale non possono dipendere da dove si trova la camera. */
  background:rgba(16,21,26,.92);
  padding:.7rem .9rem;border-radius:var(--raggio)}
.cg-attrib{display:block;margin-top:.25rem;opacity:.8}
.cg-attrib a{border-bottom:1px solid currentColor}

/* Il movimento: una deriva lentissima, come una ripresa aerea che scorre.
   26 secondi, lineare, senza scatti — un ciclo infinito vuole `linear`,
   dice il manuale, o il ritmo si sente. */
@keyframes cg-deriva{
  0%{transform:scale(1.04) translate(0,0)}
  50%{transform:scale(1.1) translate(-1.6%,-1.2%)}
  100%{transform:scale(1.04) translate(0,0)}
}
@keyframes cg-pulsa{
  0%{transform:scale(1);opacity:.45}
  70%{transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}
.js .cg{animation:cg-deriva 46s linear infinite}
.js .cg-punti .cg-alone{animation:cg-pulsa 3.2s var(--e) infinite}
.js .cg-punti .cg-p:nth-child(2n) .cg-alone{animation-delay:.7s}
.js .cg-punti .cg-p:nth-child(3n) .cg-alone{animation-delay:1.4s}
.js .cg-punti .cg-p:nth-child(5n) .cg-alone{animation-delay:2.1s}

@media (max-width:860px){
  .cg-sfondo{inset:-14% -30% -14% -30%}
  /* Sul telefono non c'e' una colonna libera di lato: il testo prende tutta la
     larghezza. Allora lo spazio per il filmato si prende in alto — il blocco
     scende in fondo allo schermo e sopra restano tre decimi di video pulito.
     Non e' la stessa hero rimpicciolita: e' girata di novanta gradi. */
  /* In colonna, non in riga: sul telefono la nota torna nel flusso (sotto sta
     l'attribuzione a OpenStreetMap, che la licenza vuole visibile) e in
     `flex-direction:row` finirebbe affiancata al testo invece che sotto. */
  .hero-mappa{flex-direction:column;align-items:stretch;justify-content:flex-end;
    padding-block:calc(70px + var(--s4)) var(--s4)}
  .hero-mappa>.wrap{width:var(--largo);margin-inline:auto}
  /* Spaziature strette, sul telefono. Non per gusto: ogni pixel risparmiato
     dal blocco di testo e' un pixel di filmato che si vede in cima. Misurato:
     55px recuperati, che su uno schermo da 740 sono un decimo di schermata. */
  .hero-mappa .guida{max-width:none;line-height:1.46}
  .hero-mappa .mega{margin-block:var(--s2) var(--s3)}
  .hero-mappa .hero-azioni{margin-top:var(--s4)}
  .hero-mappa .hero-sotto{margin-top:var(--s3);gap:var(--s1) var(--s3)}
  /* Sul telefono il filo non serve — si scorre per istinto — e in fondo c'e'
     gia' la nota. Toglierlo e' meglio che infilarlo dove non ci sta. */
  .hero-mappa::before,.hero-mappa::after{display:none}
  /* Sul telefono non c'e' una colonna del testo e una colonna libera: il testo
     sta su tutta la larghezza. Quindi la velatura non puo' essere orizzontale.
     Scende dall'alto verso il basso e si apre solo in fondo, dove non c'e'
     scritto niente: la citta' resta una trama, e la trama basta. */
  /* Il velo resta pieno fin dove arriva l'ultima riga di testo (l'82% dell'hero,
     misurato) e si apre solo sotto: li' c'e' la nota, che ha un pannello suo, e
     la citta' puo' finalmente vedersi invece di essere una macchia. */
  .in-volo .cg-velo{background:linear-gradient(180deg,rgba(16,21,26,.97) 0%,
    rgba(16,21,26,.95) 55%,rgba(16,21,26,.92) 82%,rgba(16,21,26,.30) 90%,
    rgba(16,21,26,.18) 100%)}
  /* Il velo del telefono sale dal basso invece di scendere dall'alto: il testo
     sta in fondo, quindi il buio serve in fondo. Sopra al 26% non c'e' velo
     per niente — un terzo di schermo di filmato pulito, che prima era zero.
       a 36% velo 0,55 -> 206x0,45 =  93 -> 5,3:1  (prima riga: l'occhiello)
       a 58% velo 0,84 -> 206x0,16 =  33 -> 12,7:1 (il grosso del testo)
     Il conto e' lo stesso del desktop: cambia da dove arriva il buio. */
  /* In pixel dal basso, non in percentuale.
     La prima versione aveva le tappe in percentuale ed e' crollata a 2,28:1 su
     uno schermo da 360x740: il blocco di testo e' alto quello che e' alto —
     dipende da quante righe fa il testo, non da quanto e' alto lo schermo — e
     in percentuale la sua posizione cambia con ogni telefono. Misurato dal
     basso invece sta fermo: l'occhiello e' a 607px su 360x740, su 390x844 e
     su 430x932. Tre schermi diversi, stesso numero. Le tappe si agganciano
     li'.
       occhiello  607px  velo 0,57 -> 206x0,43 = 89 ->  5,6:1
       titolo     577px  velo 0,63 -> 206x0,37 = 77 ->  6,7:1
       360x640    533px  velo 0,68 -> 206x0,32 = 66 ->  8,0:1
     Oltre gli 830px dal basso velo non ce n'e' per niente. */
  .in-video .cg-velo{background:linear-gradient(to top,
    rgba(8,12,16,.90) 0,rgba(8,12,16,.84) 260px,rgba(8,12,16,.76) 430px,
    rgba(8,12,16,.66) 560px,rgba(8,12,16,.50) 640px,rgba(8,12,16,.26) 700px,
    rgba(8,12,16,.07) 760px,rgba(8,12,16,0) 830px)}
  /* Sul telefono il testo occupa tutta la larghezza, quindi il velo non puo'
     ritirarsi di lato: si ritira in basso, dove ci sono i bottoni (che hanno
     sfondo proprio) e la mappa puo' respirare. */
  .cg-velo{background:linear-gradient(to top,rgba(16,21,26,.94) 0,rgba(16,21,26,.90) 430px,
    rgba(16,21,26,.80) 560px,rgba(16,21,26,.62) 660px,rgba(16,21,26,.30) 740px,
    rgba(16,21,26,.10) 820px)}
  .cg-sfondo{color:#6c8699}
  /* In colonna la nota torna nel flusso, ma NON puo' tornare `static`: un
     elemento non posizionato viene dipinto prima di quelli posizionati, e la
     tela del volo — che e' opaca — le passava sopra. Sul telefono spariva del
     tutto, e con lei l'attribuzione a OpenStreetMap, che la licenza ODbL
     impone di tenere visibile. `relative` la rimette davanti.
     Il pannello se lo porta dietro e va da bordo a bordo: sotto ci passano i
     tetti in cotto, che sono la cosa piu' chiara della scena. */
  .cg-nota{position:relative;z-index:3;width:auto;margin-top:var(--s5);
    text-align:left;max-width:none;background:rgba(16,21,26,.94)}
}
@media (prefers-reduced-motion:reduce){
  .js .cg,.js .cg-punti .cg-alone{animation:none}
  .cg-punti .cg-alone{opacity:0}
}

/* Lo spazio per un video vero di Genova, quando ci sarà.
   Girato da Tommy, non comprato: il repertorio ce l'hanno tutti. */
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}                       /* resta il poster, fermo */
  .cg-sfondo:has(.hero-video){background:var(--pietra) center/cover no-repeat}
}
.piede-zena{max-width:32ch;margin-top:-.4rem;margin-bottom:var(--s2)}
.piede-zena strong{color:var(--calce)}
.piede-zena em{font-style:normal;color:var(--rosso)}

/* ── il volo su Genova ────────────────────────────────────────────────────────
   La tela sta sopra la mappa SVG e ci si accende sopra. Se il WebGL manca, se
   l'utente ha chiesto meno movimento o se il telefono e' in risparmio dati, la
   tela non arriva mai e sotto resta la mappa: nessun buco, nessuna attesa. */
.volo{position:absolute;inset:0;z-index:0;pointer-events:none}
.volo-tela{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.6s cubic-bezier(.22,.61,.36,1)}
.volo-tela.acceso{opacity:1}
/* quando il volo e' acceso la mappa si spegne, ma resta: e' il fondo su cui
   la tela si dissolve, e senza si vedrebbe il salto */
.hero-mappa.in-volo .cg-sfondo{opacity:.18;transition:opacity 1.6s ease}
@media(prefers-reduced-motion:reduce){.volo-tela{transition:none}}

/* ── lo sfondo dell'hero: il filmato ──────────────────────────────────────
   Il video non ha filtri sopra e non passa da nessun canvas: il browser lo
   decodifica e lo mostra alla sua misura, e ogni pixel arriva sullo schermo
   com'è. Qualunque filter o backdrop-filter qui sopra obbligherebbe il
   browser a ricomporlo, ed è il primo modo di perderci nitidezza senza
   accorgersene. Quello che si muove — la luce, l'ologramma, la barra — sta
   su livelli separati. */
/* Le due note, e quale si vede.
   Senza JavaScript (o se il filmato non parte) dietro c'è la mappa dei
   caruggi, e la licenza ODbL vuole l'attribuzione a OpenStreetMap: quindi
   quella è la nota che sta nell'HTML, visibile per difetto. Appena il video
   prende il posto della mappa, la nota giusta diventa l'altra. Dichiarare
   quello che si vede, non quello che si sperava di far vedere. */
.nota-video{display:none}
.in-video .nota-mappa{display:none}
.in-video .nota-video{display:block;font-size:.7rem;letter-spacing:.02em;max-width:none;
  padding:.3rem 0;border-radius:0;color:#c0ccd5;text-align:right;background:none}
/* La nota non ha piu' un pannello suo. Ce l'aveva, ed era il problema: un
   rettangolo col bordo netto appoggiato sopra al filmato, che si vedeva piu'
   della nota. Il buio che le serve adesso arriva dal velo — una sfumatura
   larga nell'angolo, 620x230, che su 1440x900 e' quasi mezza larghezza: a
   quella scala non si legge come un riquadro, si legge come la vignettatura
   di una ripresa. Un pannello di 20px si vede, una sfumatura di 620 no. */

.vhero{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* il poster scritto nella pagina (vedi gen_v2.py): sotto al filmato, che ci
   si dissolve sopra; solo con JavaScript, perche' senza c'e' la mappa */
.vh-poster{display:none}
.js .vh-poster,.js .vh-poster img{display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
/* Il poster comincia dove finisce l'intestazione (70px, opaca all'82%).
   Non per estetica — la' sotto non si vedeva comunque — ma perche' Chrome non
   conta come LCP un'immagine grande quanto tutto lo schermo: la tratta da
   sfondo. Misurato: a schermo intero l'LCP restava il paragrafo, a 1,1 s;
   tagliata sotto l'intestazione e' il poster, a 0,09 s. Si taglia con
   clip-path e non accorciando il riquadro: cosi' resta allineato al pixel col
   filmato che ci si dissolve sopra, e non c'e' salto. */
.js .vh-poster img{clip-path:inset(70px 0 0 0)}
.vh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:var(--ardesia);opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
.vhero.acceso .vh-video{opacity:1}
/* col filmato acceso la mappa dei caruggi si spegne, ma resta: è il fondo su
   cui il video si dissolve, e senza si vedrebbe il salto */
.hero-mappa.in-video .cg-sfondo{opacity:.10;transition:opacity 1.1s ease}

/* La velatura sopra al filmato.
   Quella pensata per la mappa dei caruggi qui non basta: il video ha le
   nuvole, che sono la cosa più chiara che questa pagina abbia mai avuto
   sotto al testo. Misurato, il rosso di «prima» scendeva a 1,50:1 dove ne
   servono 3. Questi valori sono quelli che fanno passare la misura su tutto
   il giro del filmato, non quelli che sembravano giusti. */
/* Chiusa dentro la sua soglia, non lasciata libera: questo blocco sta in
   fondo al foglio, e senza il @media scavalcherebbe la regola del telefono —
   che sta più in alto e quindi perde. È il modo più silenzioso di rompere il
   contrasto su metà dei visitatori. */
@media(min-width:861px){
  /* Ogni tappa e' un conto, non un'impressione.
     Il filmato, misurato banda per banda su tutti i 10,125 secondi: nel 46%
     di sinistra le zone chiare arrivano a 206 su 255 (percentile alto, non il
     pixel singolo). Il testo e' calce, luminanza 0,864: per stargli sopra a
     4,5:1 il fondo non deve superare 109, e per il titolo — testo grande,
     soglia 3:1 — non deve superare 138.
       a 25% velo 0,68 -> 206x0,32 =  66 ->  6,6:1   (regge il testo piccolo)
       a 48% velo 0,48 -> 206x0,52 = 107 ->  4,6:1   (l'ultima lettera del titolo)
       a 60% velo 0,26 -> 206x0,74 = 152 ->  2,9:1   (li' non c'e' scritto niente)
     Massimo 0,74 al bordo: passa il 26% della luce del filmato, contro l'1%
     di prima. Le nuvole si vedono muovere anche dietro le parole, ed e' il
     punto di avere un video. */
  .in-video .cg-velo{background:
    radial-gradient(620px 230px at 100% 100%,rgba(8,12,16,.78) 0%,
      rgba(8,12,16,.70) 34%,rgba(8,12,16,.34) 66%,rgba(8,12,16,0) 100%),
    linear-gradient(96deg,
    rgba(8,12,16,.74) 0%,rgba(8,12,16,.70) 20%,rgba(8,12,16,.62) 35%,
    rgba(8,12,16,.48) 48%,rgba(8,12,16,.26) 60%,rgba(8,12,16,.07) 72%,
    rgba(8,12,16,0) 82%)}
}

/* La lampada che segue il puntatore. Prima arrivava a 0,80 ai bordi e si
   sommava al velo: due strati di buio sullo stesso pixel, e il filmato spariva
   sotto tutti e due. Adesso e' quello che dice di essere — una vignettatura,
   non una seconda velatura — e il conto del contrasto resta uno solo. */
.vh-luce{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle var(--r,560px) at var(--x,64%) var(--y,48%),
    rgba(8,12,16,0) 0%,rgba(8,12,16,.03) 52%,rgba(8,12,16,.18) 82%,
    rgba(8,12,16,.28) 100%)}

/* «Il sito che nasce» — la finestra sopra alle riprese di Genova.
   Va con video-hero.js, che la costruisce e la muove col filmato. I colori sono quelli del sito: ardesia, calce, rosso;
   il verde c'e' solo nel lucchetto e in «online», dove tutti lo leggono cosi'.
   Le misure che contano sono due: la finestra sta sotto la meta' dello schermo
   (sopra, nel tramonto, c'e' la Lanterna) e a destra del 60% (a sinistra c'e'
   il testo, con il suo velo).
   Dentro la finestra tutto e' in `cqi`, cioe' in centesimi della larghezza
   della finestra: si rimpicciolisce tutta insieme, come uno screenshot, invece
   di avere un blocco di regole per ogni schermo. */

.sn{--sn-pieno:0;--sn-on:0;container-type:inline-size;
  position:absolute;z-index:2;right:5vw;bottom:12%;
  width:clamp(340px,33vw,580px);
  opacity:0;transform-origin:70% 100%;will-change:transform,opacity;
  border-radius:12px;overflow:hidden;
  background:rgba(14,19,24,.84);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(242,239,232,.18);
  box-shadow:0 1px 0 rgba(242,239,232,.08) inset,0 30px 80px -20px rgba(0,0,0,.7)}
.sn.sn-via{display:none}

/* la barra del browser */
.sn-barra{position:relative;display:flex;align-items:center;gap:1.3cqi;height:6.6cqi;padding:0 2.8cqi;
  border-bottom:1px solid rgba(242,239,232,.09);background:rgba(8,12,16,.4)}
.sn-barra>i{width:1.8cqi;height:1.8cqi;border-radius:50%;background:rgba(242,239,232,.2)}
.sn-url{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.3cqi;height:4.3cqi;padding:0 3cqi;border-radius:99px;
  background:rgba(242,239,232,.07);white-space:nowrap;
  font:500 2.5cqi/1 var(--testo);letter-spacing:.01em;
  color:rgb(242 239 232 / calc(.45 + var(--sn-pieno) * .4))}
.sn-lucchetto{position:relative;width:1.7cqi;height:1.4cqi;margin-top:.8cqi;border-radius:.35cqi;
  background:color-mix(in srgb,#7fd6a0 calc(var(--sn-on) * 100%),rgba(242,239,232,.4))}
.sn-lucchetto::before{content:"";position:absolute;left:.25cqi;right:.25cqi;bottom:100%;height:1cqi;
  border:.35cqi solid color-mix(in srgb,#7fd6a0 calc(var(--sn-on) * 100%),rgba(242,239,232,.4));
  border-bottom:0;border-radius:1cqi 1cqi 0 0}
.sn-stato{margin-left:auto;display:flex;align-items:center;gap:1.2cqi;opacity:var(--sn-on);
  font:600 2.1cqi/1 var(--testo);letter-spacing:.08em;text-transform:uppercase;color:#9fe3b8}
.sn-punto{width:1.5cqi;height:1.5cqi;border-radius:50%;background:#7fd6a0}
.online .sn-punto{animation:sn-batte 1.8s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes sn-batte{from{box-shadow:0 0 0 0 rgba(127,214,160,.55)}to{box-shadow:0 0 0 1.6cqi rgba(127,214,160,0)}}

/* la pagina */
.sn-pagina{position:relative;display:grid;gap:2.4cqi;padding:2.8cqi}

.sn-nav{display:flex;align-items:center;gap:3.2cqi;height:3.4cqi}
.sn-nav>span{display:block;transform-origin:left;transform:scaleX(0)}
.sn-logo{width:15%;height:2.6cqi;margin-right:auto;border-radius:.6cqi;
  background:color-mix(in srgb,var(--rosso-marchio) calc(var(--sn-pieno) * 100%),rgba(242,239,232,.2))}
/* la voce del menu: prima una barretta, poi la parola */
.sn-voce{font:500 2.3cqi/1 var(--testo);color:rgb(242 239 232 / calc(var(--sn-pieno) * .8));
  background:linear-gradient(rgb(242 239 232 / calc(.2 * (1 - var(--sn-pieno)))) 0 0) center/100% 1.2cqi no-repeat}
.sn-voce::after{content:attr(data-t)}

.sn-hero{position:relative;aspect-ratio:16/7.4;border-radius:1.4cqi;overflow:hidden;
  background:rgba(242,239,232,.06)}
.sn-foto{position:absolute;inset:0;width:100%;height:100%;display:block}
.sn-hero>.sn-foto{clip-path:inset(0 100% 0 0)}
/* sotto al nome un po' di buio, come in un sito vero: il bianco sopra una
   foto non si legge da solo */
.sn-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,16,.78),rgba(8,12,16,.1) 75%);
  opacity:var(--sn-pieno)}
.sn-titolo{position:absolute;z-index:1;left:6%;bottom:33%;width:64%;display:grid;gap:1.4cqi}
.sn-titolo>span{display:block;height:2.4cqi;border-radius:.6cqi;transform-origin:left;transform:scaleX(0);
  background:rgba(242,239,232,.2);opacity:calc(1 - var(--sn-pieno))}
.sn-titolo>span+span{width:62%}
.sn-nome{position:absolute;left:0;bottom:0;opacity:0;white-space:nowrap;
  font:700 6.4cqi/1 var(--display);letter-spacing:-.02em;color:var(--calce)}
.sn-cta{position:absolute;z-index:1;left:6%;bottom:11%;opacity:0;
  padding:1.3cqi 3.2cqi;border-radius:99px;background:var(--rosso-btn);
  font:600 2.3cqi/1 var(--testo);color:var(--calce);
  box-shadow:0 1.2cqi 3cqi -1.2cqi rgba(203,47,32,.8)}
.sn-cta>b{font-weight:inherit}

.sn-schede{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi}
.sn-schede>span{position:relative;display:block;height:13cqi;border-radius:1.2cqi;overflow:hidden;opacity:0;
  background:rgba(242,239,232,.08)}
.sn-schede .sn-foto{opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.sn-schede>.piena .sn-foto{opacity:1}

/* l'onda di luce che passa sullo scheletro mentre si monta */
.sn-onda{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.sn-onda::before{content:"";position:absolute;top:0;bottom:0;left:-50%;width:50%;
  background:linear-gradient(100deg,rgba(242,239,232,0),rgba(242,239,232,.10),rgba(242,239,232,0));
  transform:translateX(calc(var(--p,0) * 300%))}

/* Sotto gli 860px il testo sta in basso e il filmato si vede in alto: la
   finestra va a destra sotto il menu, se ci sta (lo decide sito-nasce.js). */
@media(max-width:860px){
  .sn{right:var(--bordo);bottom:auto;top:calc(70px + var(--s3));width:min(56vw,320px);
    border-radius:9px;transform-origin:100% 0}
}
@media(prefers-reduced-motion:reduce){
  .online .sn-punto{animation:none}
}

/* La barra del tempo e il bottone stavano al centro in basso: quando il velo
   copriva mezzo schermo li' non c'era niente da guardare. Adesso li' c'e' il
   filmato, e due comandi piantati in mezzo alla scena la spezzano. La barra
   diventa un filo lungo tutto il bordo inferiore, il bottone va nell'angolo. */
.vh-tempo{position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:2px;background:rgba(242,239,232,.14);pointer-events:none}
.vh-tempo i{display:block;height:100%;background:var(--rosso);border-radius:2px;
  transform-origin:left;transform:scaleX(0)}

/* Il bottone per fermare (o per avviare, su connessione lenta). Compare solo
   dove serve, e in tutti e due i versi si risolve in un clic. */
.vh-ferma{position:absolute;right:var(--bordo);bottom:calc(var(--s3) + 2.5rem);z-index:4;
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  /* Non si vede. Il comando c'e' — nel DOM, nell'ordine di tabulazione,
     annunciato dallo screen reader — ma sulla schermata non compare.
     `opacity:0` e NON `visibility:hidden`: la prima versione usava
     `visibility`, e la prova ha risposto «da tastiera NON raggiungibile».
     Giusto: `visibility:hidden` toglie l'elemento anche dal fuoco e
     dall'albero di accessibilita'. Sarebbe stato un comando tolto, non
     nascosto. Con `opacity:0` resta raggiungibile; `pointer-events:none`
     evita che si possa cliccare una cosa che non si vede. */
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--e-veloce),
             border-color .2s var(--e-veloce),background .2s var(--e-veloce),
             transform .2s var(--e-veloce);
  font-family:var(--testo);font-size:.76rem;font-weight:500;color:var(--calce);
  background:rgba(8,12,16,.45);border:1px solid rgba(242,239,232,.42);border-radius:99px;
  padding:.4rem .9rem}
/* Esce col puntatore sopra alla hero, o col fuoco da tastiera. `hover:hover`
   perche' sul touch il :hover si comporta in modo imprevedibile — e li' non
   serve: col touch e il movimento ridotto il filmato non parte da solo. */
@media(hover:hover){
  .hero-mappa:hover .vh-ferma{opacity:1;pointer-events:auto}
}
/* Il fuoco vale su tutto: `:focus` e non solo `:focus-visible`, perche' un
   comando che si vede solo in certi modi di prendere il fuoco e' un comando
   che a volte non c'e'. E col dito: un tocco sullo sfondo della hero lo fa
   comparire per quattro secondi (la classe la mette video-hero.js). */
.vh-ferma:focus{opacity:1;pointer-events:auto}
.hero-mappa.tocco .vh-ferma{opacity:1;pointer-events:auto}
/* «Riprendi» ha il triangolo, come «Avvia» */
.vh-riprendi>span{width:0;height:0;background:none;border-style:solid;
  border-width:5px 0 5px 9px;border-color:transparent transparent transparent var(--rosso)}
/* «Avvia» e' un'altra cosa e si vede sempre: e' l'unico modo che ha, chi ha
   il risparmio dati acceso o chi sta su un telefono con il movimento ridotto,
   di far partire il filmato. Nasconderlo vorrebbe dire togliergli la scelta. */
.vh-avvia{opacity:1;pointer-events:auto}
.vh-ferma:hover{border-color:var(--calce);background:rgba(8,12,16,.7);transform:translateY(-2px)}
.vh-ferma>span{width:7px;height:9px;flex:none;background:var(--rosso);border-radius:1.5px}
.vh-avvia>span{width:0;height:0;background:none;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--rosso)}

@media(max-width:780px){
  .vh-luce{background:radial-gradient(circle var(--r,380px) at var(--x,50%) var(--y,50%),
    rgba(8,12,16,0) 0%,rgba(8,12,16,.04) 58%,rgba(8,12,16,.16) 88%,
    rgba(8,12,16,.24) 100%)}
  /* In fondo, sul telefono, c'e' gia' la nota: il bottone ci finiva sopra.
     Sale in cima a destra, in colonna con la nota e con il menu, invece che
     piantato in mezzo al cielo — che e' la parte di filmato che si vede meglio.
     Resta `absolute`: messo nel flusso comparirebbe dopo il caricamento e
     farebbe saltare la pagina — lo spostamento misurato deve restare 0,000. */
  .vh-ferma{top:calc(70px + var(--s2));bottom:auto;right:var(--bordo);left:auto;
    font-size:.74rem;padding:.44rem .85rem;background:rgba(8,12,16,.66);
    border-color:rgba(242,239,232,.34)}
  /* «Avvia» non e' la stessa cosa di «Ferma»: e' l'unico modo di far partire
     il filmato per chi ha il risparmio dati acceso. Quello si deve trovare. */
  .vh-avvia{background:rgba(8,12,16,.92);border-color:var(--linea-forte);
    font-size:.82rem;padding:.55rem 1.15rem}
}
@media(prefers-reduced-motion:reduce){
  .vh-video{transition:none}
}

/* ── la fila delle aperture dei venti siti (voce 22/10 (2)) ──────────────────
   scorre di lato mentre si scende (zena.js da' --p da 0 a 1); senza script,
   col movimento ridotto, o quando un collegamento ha il fuoco, e' una fila che
   si scorre a mano */
.striscia-sez{padding:clamp(3rem,7vw,6rem) 0;overflow-x:auto;scrollbar-width:thin}
.striscia{list-style:none;margin:2rem 0 0;padding:0 clamp(1rem,4vw,3rem);display:flex;gap:clamp(.7rem,1.6vw,1.2rem);width:max-content}
.striscia li{flex:0 0 clamp(9.5rem,15vw,13rem)}
.striscia a{display:grid;gap:.25rem;text-decoration:none;color:inherit}
.striscia picture,.striscia img{display:block;width:100%}
.striscia img{aspect-ratio:9/16;height:auto;object-fit:cover;object-position:50% 0;border-radius:14px;
  box-shadow:0 0 0 1px rgb(16 21 26 / .12),0 18px 30px -18px rgb(16 21 26 / .5);transition:transform .35s ease}
.striscia a:hover img,.striscia a:focus-visible img{transform:translateY(-6px)}
.striscia .st-nome{font-weight:600;font-size:.92rem;margin-top:.5rem;line-height:1.25}
.striscia .st-tipo{font-size:.8rem;opacity:.75}
.js-striscia .striscia-sez{overflow:hidden}
.js-striscia .striscia{transform:translateX(calc((100vw - 100%) * var(--p,0)));will-change:transform}
.js-striscia .striscia-sez:focus-within{overflow-x:auto}
.js-striscia .striscia-sez:focus-within .striscia{transform:none}
@media (prefers-reduced-motion:reduce){.js-striscia .striscia-sez{overflow-x:auto}.js-striscia .striscia{transform:none}}

/* ── «I lavori»: il mosaico delle dieci anteprime (voce 22/10 (2)) ───────────
   tessere di misure diverse; sopra, quello che Google mostra oggi; al passaggio
   del puntatore (o col fuoco) parte il video dell'anteprima (zena.js) */
.mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(9rem,13vw,12rem);gap:clamp(.6rem,1.2vw,1rem);grid-auto-flow:dense}
.tessera{position:relative;display:block;overflow:hidden;border-radius:14px;color:#fff;text-decoration:none;background:#10151a;isolation:isolate}
.m-4x2{grid-column:span 4;grid-row:span 2}.m-2x2{grid-column:span 2;grid-row:span 2}.m-3x2{grid-column:span 3;grid-row:span 2}
.m-2x1{grid-column:span 2}.m-3x1{grid-column:span 3}.m-4x1{grid-column:span 4}
.tessera picture,.tessera img,.tessera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tessera img{transition:transform .6s ease}
.tessera:hover img,.tessera:focus-visible img{transform:scale(1.04)}
.tessera video{opacity:0;transition:opacity .5s}
.tessera.gira video{opacity:1}
/* il fuoco orizzontale del video e del suo poster (clip_hero.py, FUOCO): stessa
   object-position per l'immagine e per il video, cosi' la fetta del telefono
   e' la stessa e quando il video parte non salta (voce Cowork 24/10 (3)) */
.tessera.fx-0 img,.tessera.fx-0 video{object-position:0% 50%}.tessera.fx-5 img,.tessera.fx-5 video{object-position:5% 50%}.tessera.fx-10 img,.tessera.fx-10 video{object-position:10% 50%}.tessera.fx-15 img,.tessera.fx-15 video{object-position:15% 50%}.tessera.fx-20 img,.tessera.fx-20 video{object-position:20% 50%}.tessera.fx-25 img,.tessera.fx-25 video{object-position:25% 50%}.tessera.fx-30 img,.tessera.fx-30 video{object-position:30% 50%}.tessera.fx-35 img,.tessera.fx-35 video{object-position:35% 50%}.tessera.fx-40 img,.tessera.fx-40 video{object-position:40% 50%}.tessera.fx-45 img,.tessera.fx-45 video{object-position:45% 50%}.tessera.fx-55 img,.tessera.fx-55 video{object-position:55% 50%}.tessera.fx-60 img,.tessera.fx-60 video{object-position:60% 50%}.tessera.fx-65 img,.tessera.fx-65 video{object-position:65% 50%}.tessera.fx-70 img,.tessera.fx-70 video{object-position:70% 50%}.tessera.fx-75 img,.tessera.fx-75 video{object-position:75% 50%}.tessera.fx-80 img,.tessera.fx-80 video{object-position:80% 50%}.tessera.fx-85 img,.tessera.fx-85 video{object-position:85% 50%}.tessera.fx-90 img,.tessera.fx-90 video{object-position:90% 50%}.tessera.fx-95 img,.tessera.fx-95 video{object-position:95% 50%}.tessera.fx-100 img,.tessera.fx-100 video{object-position:100% 50%}
.ts-velo{position:absolute;inset:0;background:linear-gradient(0deg,rgb(10 12 14 / .9) 0%,rgb(10 12 14 / .45) 45%,rgb(10 12 14 / .05) 75%)}
.ts-testo{position:absolute;left:0;right:0;bottom:0;padding:clamp(.8rem,1.6vw,1.2rem);display:grid;gap:.15rem}
.ts-testo b{font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);line-height:1.15;letter-spacing:-.01em}
.m-4x2 .ts-testo b{font-size:clamp(1.4rem,1rem + 1.4vw,2.3rem)}
.ts-dove{font-size:.85rem;opacity:.85}
.ts-oggi{font-size:.8rem;margin-top:.35rem;padding-top:.35rem;border-top:1px solid rgb(255 255 255 / .3);opacity:.92}
@media (max-width:760px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:11rem}
  .m-4x2,.m-3x2{grid-column:span 2;grid-row:span 2}.m-2x2{grid-column:span 1;grid-row:span 2}
  .m-3x1,.m-4x1{grid-column:span 2}.m-2x1{grid-column:span 1}
  .m-2x1 .ts-oggi,.m-2x2 .ts-oggi{display:none}
}