/* ============================================================
   Z-VU — foglio unico.
   Il sistema e' quello di Tigo Sanchez (design system v1,
   10/09/2026), portato qui: un carattere solo e nessun webfont,
   maiuscolo stretto sui titoli, pastiglie a 22.5px, la griglia da
   1px al posto delle schede, quattro fondi che si toccano, nessuna
   ombra, nessun grigio fuori dalla rampa.
   Quello che Z-VU aggiunge di suo: il marchio (la stella) e il
   CODICE COLORE — dieci colori-famiglia, uno per gruppo del
   catalogo, che qui sotto vivono accanto ai tre accenti di sistema
   invece di sostituirli.
   ============================================================ */

/* ---------- 1. token ---------- */
:root{
  /* i colori di sistema */
  --carta:#F5F5F1; --nero:#0E100E; --nerissimo:#000;
  --rosso:#F5402B; --verde:#00FF47; --giallo:#FFFF00;

  /* la rampa dei grigi: nessun grigio fuori da qui */
  --linea:#D6D9D2; --su-scuro:#DCDCD6; --fioco-scuro:#8F948C;
  --fioco-chiaro:#6B716A; --grigio:#4A4E48; --linea-scuro:#2A2E29;
  --pelle:#151815; --campo:#4C514A;

  --sans:'Helvetica Neue',Helvetica,Arial,'Inter',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s9:9px; --s14:14px; --s24:24px; --s45:45px; --s68:68px;
  --pad:clamp(20px,4.4vw,64px);
  --fondo:env(safe-area-inset-bottom, 0px);
  --colonna:clamp(280px,74vw,1360px);
  --testa:64px;
  --rail:104px;

  --segno-xs:clamp(20px,2.6vh,26px);
  --segno-s:clamp(44px,5.6vw,68px);
  --segno-m:clamp(80px,min(11vw,13vh),140px);

  --pend-monster:13vw;  --tetto-monster:190px;
  --pend-display:6.4vw; --tetto-display:104px;
  --pend-claim:3.1vw;   --tetto-claim:52px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* tema di partenza: scuro. Z-VU e' scuro come il sistema. */
  --fondo-pagina:var(--nero); --testo:var(--carta);
  --fioco:var(--fioco-scuro); --linea-tema:var(--linea-scuro);
  --bordo-tema:var(--grigio);
  --accento:var(--giallo); --accento-2:var(--verde); --su-accento:var(--nero);
  --selezione:var(--verde); --fuoco:var(--verde);
  --segnaposto:var(--campo);
  --sotto:var(--pelle);          /* il fondo di una cella sotto il mouse */
  /* Il colore-famiglia quando deve fare TESTO. Su fondo scuro e' il
     colore stesso (>=4.8:1). Su carta, rosso o verde no: li' i dieci
     colori stanno fra 1,0 e 3,4:1, e il gruppo lo dicono gia' il
     pieno della pastiglia e il binario. Regola sola, un token. */
  --fc-testo:var(--fc,var(--fioco));
}
@media (max-width:900px){ :root{ --colonna:100vw; --rail:34px } }
@media (max-width:640px){ :root{ --rail:0px } }

/* ---------- 2. base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--testa) + 24px)}
body{background:var(--fondo-pagina);color:var(--testo);font-family:var(--sans);
  font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--selezione);color:var(--nero)}
:focus-visible{outline:2px solid var(--fuoco);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

.salta{position:absolute;left:-9999px;z-index:300;
  background:var(--giallo);color:var(--nero);padding:13px 22px;border-radius:22.5px}
.salta:focus{left:var(--pad);top:14px}

/* ---------- 3. la scala ---------- */
.t-monster{font-size:clamp(44px,var(--pend-monster),var(--tetto-monster));font-weight:700;
  line-height:.8;letter-spacing:-.04em;text-transform:uppercase}
.t-display,h1{font-size:clamp(38px,var(--pend-display),var(--tetto-display));font-weight:700;
  line-height:.88;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.t-claim,h2{font-size:clamp(22px,var(--pend-claim),var(--tetto-claim));font-weight:700;
  line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
h3{font-size:clamp(16px,1.7vw,22px);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;text-transform:uppercase}
.t-body,p{font-size:clamp(15px,1.05vw,17px);font-weight:400;line-height:1.62;
  text-wrap:pretty}
.t-body{max-width:56ch;color:var(--su-scuro)}
.t-label,.label{font-size:11px;font-weight:500;line-height:1;text-transform:uppercase;
  letter-spacing:.14em}
.t-num{font-size:12px;font-weight:500;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.t-fioco,.muted{color:var(--fioco)}
sup{font-size:.42em;vertical-align:super;line-height:0}

/* il marchio: la stella. Sta in uno sprite in linea, prende il colore
   del testo che ha intorno e non porta mai un colore suo. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.star{width:1em;height:1em;flex:none;fill:currentColor;color:inherit}
code{font-family:var(--mono);font-size:.92em;letter-spacing:0;color:var(--accento)}

/* ---------- 4. la pastiglia ---------- */
.btn,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:22.5px;border:1px solid currentColor;padding:9px 22px;min-height:44px;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .18s linear,color .18s linear,border-color .18s linear}
.btn:hover,.ghost:hover{background:var(--testo);color:var(--fondo-pagina);border-color:var(--testo)}
.btn--filled,.ghost.acceso{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
.btn--filled:hover,.ghost.acceso:hover{background:var(--accento-2);border-color:var(--accento-2);color:var(--nero)}
.btn--ghost,.ghost.spento{border-color:var(--bordo-tema);color:var(--testo)}
.btn--ghost:hover,.ghost.spento:hover{background:var(--giallo);border-color:var(--giallo);color:var(--nero)}
.ghost.pieno{background:var(--testo);color:var(--fondo-pagina);border-color:var(--testo)}
.ghost.pieno:hover{background:var(--rosso);border-color:var(--rosso);color:var(--carta)}
.atti{display:flex;flex-wrap:wrap;gap:var(--s14);align-items:center}

.filtro{display:inline-flex;align-items:center;min-height:40px;
  border:1px solid var(--linea-tema);border-radius:20px;padding:8px 14px;font-size:12px;
  color:var(--su-scuro);cursor:pointer;
  transition:color .16s linear,border-color .16s linear,background-color .16s linear}
.filtro:hover{border-color:var(--testo);color:var(--testo)}
.filtro[aria-pressed="true"]{border-color:var(--rosso);color:var(--rosso)}
.tratto{border:1px solid var(--linea-tema);border-radius:20px;padding:7px 14px;font-size:12px;
  color:var(--su-scuro)}
.stato{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fioco)}
.stato::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.stato.viva{color:var(--verde)} .stato.forgia{color:var(--giallo)}
.stato.tenuta{color:var(--carta)} .stato.chiusa{color:var(--fioco-scuro)}

/* ---------- 5. IL CODICE COLORE Z-VU ----------
   Dieci colori-dato, uno per famiglia, dichiarati in data.js e
   montati come --fc su ogni elemento che appartiene a un gruppo.
   Tre di questi SONO i colori di sistema (rosso, verde, giallo):
   la tavolozza non si affianca al sistema, lo estende.
   Tutti stanno sopra 4.8:1 sul nero e sulla pelle, e reggono il
   nero sopra di se' con lo stesso rapporto — quindi su fondo scuro
   possono fare testo, su carta solo pieni con il nero sopra. */
.fam-dot{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--fc,var(--fioco))}
.fam-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:34px;padding:5px 9px;border-radius:3px;
  background:var(--fc,var(--fioco));color:var(--nero);
  font-size:11px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.fam-testo{color:var(--fc-testo)}

/* ---------- 6. la testata fissa ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--testa);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s14);
  padding:0 var(--pad);background:rgba(14,16,14,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-scuro);
  transition:background-color .32s linear,border-color .32s linear,color .32s linear}
.barra-firma{display:inline-flex;align-items:center;min-height:40px;
  font-size:13px;font-weight:500;letter-spacing:-.01em;text-transform:uppercase}
.barra-firma i{font-style:normal;color:var(--fioco);text-transform:none;
  letter-spacing:.02em;margin-left:.5em}
.barra-sigillo{flex:none;width:var(--segno-xs);height:var(--segno-xs);margin-right:8px;
  color:currentColor}
@media (max-width:720px){ .barra-firma i{display:none} }
.barra-nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.barra-nav a,.barra-piu{display:inline-flex;align-items:center;min-height:40px;
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:var(--fioco);transition:color .16s linear}
.barra-nav a:hover,.barra-nav a[aria-current]{color:var(--carta)}
.barra-piu{font-size:19px;letter-spacing:0;padding-left:2px}
.barra-piu:hover,.barra-piu.aperto{color:var(--giallo)}
@media (max-width:559px){ .barra-nav a.v4{display:none} }
@media (max-width:459px){ .barra-nav a.v3{display:none} }
@media (max-width:379px){ .barra-nav a.v2{display:none} }
/* sopra una sezione chiara la testata si inverte */
/* quasi opaca: all'88% la testata invertita lascia passare il fondo
   scuro che le scorre sotto al confine fra due sezioni, e il testo
   li' scendeva a 2,2:1. A .97 il colore della barra comanda sempre. */
.barra.chiaro{background:rgba(245,245,241,.97);border-bottom-color:var(--linea);color:var(--nero)}
/* la testata invertita non e' opaca: e' carta all'88% sopra quello che
   scorre sotto, quindi il fioco chiaro li' scende a 3,8:1. Sopra la
   barra si usa il grigio della rampa, che tiene 6,6:1 su quel misto. */
.barra.chiaro .barra-firma i,.barra.chiaro .barra-nav a,.barra.chiaro .barra-piu{color:var(--grigio)}
.barra.chiaro .barra-nav a:hover,.barra.chiaro .barra-nav a[aria-current],
.barra.chiaro .barra-piu:hover{color:var(--nero)}

/* ---------- 7. la colonna delle tacche ---------- */
.linea{position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);
  z-index:88;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.linea a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}
.linea .tacca{flex:none;display:block;width:2px;height:18px;overflow:hidden;
  background:rgba(220,220,214,.22)}
.linea .tacca i{display:block;width:100%;height:0;background:var(--carta);transition:height .12s linear}
.linea .nome{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(220,220,214,.66);white-space:nowrap;transition:color .25s linear}
.linea a.qui .nome{color:var(--carta)}
.linea.su-chiaro .tacca{background:rgba(14,16,14,.18)}
.linea.su-chiaro .tacca i{background:var(--nero)}
.linea.su-chiaro .nome{color:rgba(14,16,14,.64)}
.linea.su-chiaro a.qui .nome{color:var(--nero)}
@media (max-width:900px){ .linea .nome{display:none} }
@media (max-width:640px){ .linea{display:none} }

/* ---------- 8. il menu a schermo pieno ---------- */
.menu-overlay{position:fixed;inset:0;z-index:260;background:var(--nero);color:var(--carta);
  overflow:hidden;pointer-events:none;transform:translateY(-100%);visibility:hidden;
  transition:transform .55s var(--ease-io)}
.menu-overlay.open{pointer-events:auto;transform:translateY(0);visibility:visible}
.menu-in{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,2.2svh,26px);padding:clamp(14px,2.6svh,30px) var(--pad)}
.menu-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:clamp(10px,1.8svh,20px);border-bottom:1px solid var(--linea-scuro)}
.menu-x{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linea-scuro);border-radius:50%;font-size:20px;line-height:1;color:var(--carta);
  transition:background-color .18s linear,color .18s linear,border-color .18s linear}
.menu-x:hover{background:var(--giallo);color:var(--nero);border-color:var(--giallo)}
.menu-body{min-height:0;display:grid;grid-template-columns:1.28fr .72fr;
  gap:clamp(28px,4.4vw,80px);align-items:stretch;overflow:hidden}
.menu-nav{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.menu-nav a{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s24);min-height:clamp(34px,4.4svh,52px);
  font-size:clamp(15px,min(2.6vw,3.4svh),28px);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;text-transform:uppercase;padding:clamp(3px,.7svh,10px) 0;
  border-bottom:1px solid var(--linea-scuro);transition:color .2s linear}
.menu-nav a:first-child{border-top:1px solid var(--linea-scuro)}
.menu-nav a:hover{color:var(--giallo)}
.menu-nav a i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fioco-scuro);white-space:nowrap}
.menu-side{display:flex;flex-direction:column;gap:clamp(10px,1.8svh,20px);min-height:0}
.menu-box{flex:1 1 0;min-height:0;border:1px solid var(--linea-scuro);border-radius:12px;
  padding:clamp(13px,2svh,22px);display:flex;flex-direction:column;
  gap:clamp(8px,1.3svh,14px);align-items:stretch;text-align:left}
.menu-intro{font-size:clamp(12px,1.55svh,14px);line-height:1.5;max-width:42ch;
  margin-bottom:auto;color:var(--su-scuro)}
.menu-box .btn{width:100%;min-height:clamp(40px,5.2svh,46px);padding:9px 18px;
  border-color:var(--grigio);color:var(--carta);margin-top:clamp(4px,.8svh,8px)}
.menu-box .btn:hover{background:var(--giallo);color:var(--nero);border-color:var(--giallo)}
.menu-box .menu-apri{background:var(--giallo);border-color:var(--giallo);color:var(--nero)}
.menu-box .menu-apri:hover{background:var(--verde);border-color:var(--verde);color:var(--nero)}
.menu-foot{display:flex;flex-wrap:wrap;gap:var(--s14) var(--s24);align-items:center;
  justify-content:space-between;padding-top:clamp(10px,1.8svh,20px);
  border-top:1px solid var(--linea-scuro);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fioco-scuro)}
.menu-foot a{color:var(--su-scuro)} .menu-foot a:hover{color:var(--giallo)}
@media (max-width:820px){
  .menu-body{grid-template-columns:1fr;gap:clamp(14px,2.6svh,28px);align-content:center}
  .menu-side{flex-direction:row;align-items:stretch;flex:none}
  .menu-box{flex:1 1 0;min-width:0;height:auto}
  .menu-intro{display:none}
}

/* ---------- 9. il corpo e i quattro fondi ----------
   La sezione porta il proprio fondo a tutta finestra con uno
   pseudo-elemento: il contenuto resta dentro --colonna, il colore
   no. Le sezioni chiare rimappano i token come qualunque altra
   isola di tema. */
main{padding-top:var(--testa)}
.dentro,.shell{width:100%;max-width:var(--colonna);margin-inline:auto;
  padding-inline:var(--pad);padding-right:calc(var(--pad) + var(--rail))}
@media (max-width:640px){ .dentro,.shell{padding-right:var(--pad)} }

.band{position:relative;background:transparent;color:var(--testo);
  padding:clamp(48px,8vh,104px) 0;border-bottom:1px solid var(--linea-tema)}
.band::before{content:'';position:absolute;inset:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--fondo-sez,var(--nero));z-index:-1}

.band[data-fondo="carta"],.chiara{
  --fc-testo:var(--nero);
  --fondo-sez:var(--carta);--fondo-pagina:var(--carta);--testo:var(--nero);
  --fioco:var(--fioco-chiaro);--linea-tema:var(--linea);--bordo-tema:var(--linea);
  --accento:var(--nero);--accento-2:var(--giallo);--su-accento:var(--carta);
  --selezione:var(--giallo);--fuoco:var(--nero);--segnaposto:var(--campo);
  --sotto:#ECECE6}
.band[data-fondo="rosso"]{
  --fc-testo:var(--nero);
  --fondo-sez:var(--rosso);--fondo-pagina:var(--rosso);--testo:#fff;
  --fioco:#FFD8D2;--linea-tema:rgba(255,255,255,.35);--bordo-tema:rgba(255,255,255,.6);
  --accento:#fff;--accento-2:var(--nero);--su-accento:var(--rosso);
  --selezione:#fff;--fuoco:#fff;--segnaposto:#FFD9D4;--sotto:rgba(0,0,0,.12)}
.band[data-fondo="verde"]{
  --fc-testo:var(--nero);
  --fondo-sez:var(--verde);--fondo-pagina:var(--verde);--testo:var(--nero);
  --fioco:#0A5B2B;--linea-tema:rgba(14,16,14,.28);--bordo-tema:rgba(14,16,14,.5);
  --accento:var(--nero);--accento-2:var(--carta);--su-accento:var(--verde);
  --selezione:var(--nero);--fuoco:var(--nero);--segnaposto:#0E7A3C;--sotto:rgba(0,0,0,.08)}
.band[data-fondo="pelle"]{--fondo-sez:var(--pelle);--sotto:#1E221E}
.band[data-fondo="carta"] .t-body,.chiara .t-body{color:var(--grigio)}
/* sul rosso il bianco regge solo il titolo (grande): il corpo va in
   nero, 5,1:1. La gerarchia la fanno peso e corpo, non la tinta. */
.band[data-fondo="rosso"]{--fioco:var(--nero)}
.band[data-fondo="rosso"] .t-body,.band[data-fondo="rosso"] p,
.band[data-fondo="rosso"] li,.band[data-fondo="rosso"] .label{color:var(--nero)}
.band[data-fondo="rosso"] h1,.band[data-fondo="rosso"] h2,
.band[data-fondo="rosso"] .t-display,.band[data-fondo="rosso"] .t-claim{color:#fff}
/* h3 sul rosso scende a 16px sul telefono, dove il bianco (3,7:1) non
   basta piu': i titoli piccoli vanno in nero, i grandi restano bianchi */
.band[data-fondo="rosso"] h3{color:var(--nero)}
.band[data-fondo="rosso"] .btn{color:var(--nero);border-color:var(--nero)}
.band[data-fondo="rosso"] .btn:hover{background:var(--nero);color:#fff}
.band[data-fondo="rosso"] .btn--filled{background:var(--nero);color:#fff;border-color:var(--nero)}
.band[data-fondo="rosso"] .btn--filled:hover{background:var(--carta);color:var(--nero);border-color:var(--carta)}
.band[data-fondo="verde"] .t-body{color:#083F1F}

/* testata di sezione */
.sec-head{display:grid;gap:var(--s14);margin-bottom:var(--s45);max-width:none}
.sec-head__title{min-width:0}
.sec-head__lede{max-width:64ch;font-size:clamp(15px,1.05vw,17px);line-height:1.62;
  color:var(--fioco)}
.band[data-fondo="carta"] .sec-head__lede{color:var(--grigio)}
.band[data-fondo="rosso"] .sec-head__lede{color:var(--nero)}
.band[data-fondo="verde"] .sec-head__lede{color:#083F1F}
.sec-num{display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--s9);
  color:var(--fioco)}
.sec-num .star{width:12px;height:12px;flex:none}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:var(--s24) clamp(24px,4vw,64px);align-items:start}
}

/* ---------- 10. la griglia da 1px ----------
   La forma la fa la griglia, non la scheda: nessun bordo per
   cella, una riga sola di 1px che le separa tutte. */
/* ---------- 10. LA RIGA ----------
   Il catalogo non e' fatto di scatole: e' fatto di righe. Una riga
   per voce, tutte della stessa altezza tipografica, il numero a
   sinistra e la coda a destra. Sotto il mouse rientra di dodici
   pixel e prende il colore della sua famiglia: e' l'unico movimento
   e serve a dire "questa". */
.righe{display:block;border-top:1px solid var(--linea-tema)}
.riga{position:relative;display:grid;
  grid-template-columns:clamp(38px,4vw,58px) minmax(0,1fr) auto;
  gap:var(--s9) clamp(16px,2.4vw,34px);align-items:baseline;width:100%;text-align:left;
  padding:clamp(15px,2.1vw,26px) 0;border-bottom:1px solid var(--linea-tema);
  color:inherit;
  transition:padding-left .22s var(--ease),color .16s linear}
.riga:hover,.riga:focus-visible{padding-left:12px}
.riga:hover .riga__nome,.riga:focus-visible .riga__nome{color:var(--fc-testo)}
.riga[hidden]{display:none}
.riga__n{color:var(--fioco);font-size:11px;font-weight:500;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;padding-top:.35em}
.riga__corpo{min-width:0;display:grid;gap:7px}
.riga__nome{font-size:clamp(19px,2.6vw,38px);font-weight:700;letter-spacing:-.03em;
  line-height:1;text-transform:uppercase;transition:color .16s linear}
.riga__nome sup{font-size:.34em}
.riga__claim{font-size:clamp(13px,1.1vw,15px);font-weight:500;letter-spacing:.01em;
  color:var(--fc-testo)}
.riga__desc{font-size:14px;line-height:1.55;color:var(--fioco);max-width:62ch}
.riga__coda{display:grid;gap:6px;justify-items:end;text-align:right;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fioco);white-space:nowrap}
.riga__coda b{font-weight:500;color:var(--testo);letter-spacing:.06em}
.riga__coda a{border-bottom:1px solid currentColor;text-transform:none;letter-spacing:.02em}
.riga__tag{display:inline-flex;align-items:center;gap:7px}
@media (max-width:720px){
  .riga{grid-template-columns:clamp(32px,9vw,44px) minmax(0,1fr);gap:7px var(--s14)}
  .riga__coda{grid-column:2;justify-items:start;text-align:left;white-space:normal}
}

/* la riga di famiglia: una barra piena, il colore la nomina */
.riga-fam{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s14);
  padding:var(--s14) var(--s14) var(--s14) 0;
  border-top:2px solid var(--fc,var(--testo));border-bottom:1px solid var(--linea-tema);
  margin-top:var(--s45)}
.riga-fam:first-child{margin-top:0}
.riga-fam__l{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:42px;padding:7px 11px;border-radius:3px;
  background:var(--fc,var(--testo));color:var(--nero);
  font-size:15px;font-weight:700;letter-spacing:.04em}
.riga-fam__n{font-size:clamp(15px,1.5vw,20px);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase}
.riga-fam__c{margin-left:auto;color:var(--fioco);font-size:11px;font-weight:500;
  letter-spacing:.14em;font-variant-numeric:tabular-nums}

/* ---------- 10b. IL MONDO — la sezione a tutto schermo ----------
   Fondo proprio, velo sopra, testo appoggiato in basso. Il fondo si
   allarga piano quando la sezione entra: e' l'unica animazione che
   costa qualcosa, e sta solo qui. */
.mondo{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;
  min-height:100svh;padding:clamp(72px,12vh,160px) 0 clamp(44px,8vh,96px);
  border-bottom:1px solid var(--linea-scuro);color:var(--carta)}
main > .mondo:first-child{margin-top:calc(-1 * var(--testa));
  padding-top:calc(var(--testa) + clamp(24px,5vh,64px))}
.sfondo,.velo{position:absolute;inset:0;z-index:-1}
.sfondo{overflow:hidden;background:var(--nerissimo)}
.sfondo img,.sfondo video{width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 1.4s var(--ease)}
.mondo.visto .sfondo img,.mondo.visto .sfondo video{transform:none}
.velo{background:linear-gradient(rgba(14,16,14,.42) 0%,rgba(14,16,14,.62) 46%,rgba(14,16,14,.94) 100%)}
.mondo-testo{display:grid;gap:var(--s24);justify-items:start}
.mondo-testo .t-body{color:var(--carta);max-width:52ch}
.mondo-riga{color:var(--su-scuro);letter-spacing:.16em}
.mondo .righe{border-top-color:rgba(220,220,214,.24)}
.mondo .riga{border-bottom-color:rgba(220,220,214,.24)}
.mondo .riga__desc,.mondo .riga__n,.mondo .riga__coda{color:var(--su-scuro)}
.mondo .riga__coda b{color:var(--carta)}
@media (prefers-reduced-motion:reduce){
  .sfondo img,.sfondo video{transform:none;transition:none}
}

/* ---------- 11. la soglia (hero) ---------- */
.soglia{position:relative;padding:clamp(56px,11vh,140px) 0 clamp(36px,6vh,72px);
  border-bottom:1px solid var(--linea-scuro)}
.soglia::before{content:'';position:absolute;inset:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--nero);z-index:-1}
.soglia-occhio{display:flex;align-items:center;gap:10px;margin-bottom:var(--s24);
  color:var(--fioco)}
.soglia-occhio .star{width:13px;height:13px;flex:none}
.soglia h1{margin-bottom:var(--s24)}
.soglia .t-body{margin-bottom:var(--s14)}
.soglia-coda{display:flex;flex-wrap:wrap;gap:var(--s14);align-items:center;margin-top:var(--s45)}
.soglia-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,150px),1fr));
  gap:1px;background:var(--linea-scuro);border:1px solid var(--linea-scuro);margin-top:var(--s45)}
.soglia-dato{background:var(--nero);padding:var(--s14) var(--s24);display:flex;
  flex-direction:column;gap:6px;min-width:0}
.soglia-dato b{font-size:clamp(18px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.soglia-dato span{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fioco-scuro)}
.grounds{display:grid;grid-template-columns:repeat(4,1fr);height:10px;margin-top:var(--s24)}
.grounds i{display:block}

/* ---------- 12. il teaser ---------- */
.teaser{position:relative;padding:clamp(40px,7vh,88px) 0;border-bottom:1px solid var(--linea-scuro)}
.teaser::before{content:'';position:absolute;inset:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--nerissimo);z-index:-1}
.teaser__head{display:flex;flex-wrap:wrap;gap:var(--s14) var(--s24);
  align-items:baseline;justify-content:space-between;margin-bottom:var(--s24);color:var(--fioco)}
.teaser__frame{position:relative;overflow:hidden;border-radius:12px;background:var(--nerissimo);
  border:1px solid var(--linea-scuro)}
.teaser__frame video{width:100%;height:auto;display:block}
.teaser__cap{margin-top:var(--s14);color:var(--fioco)}

/* ---------- 14. i bunch ---------- */
.cuts{display:block}
.cut{padding:clamp(28px,4vw,56px) 0;border-top:2px solid var(--testo);min-width:0}
.cut:first-child{border-top-width:1px}
.cut__head{display:flex;flex-wrap:wrap;gap:var(--s14) var(--s24);
  align-items:flex-start;justify-content:space-between;margin-bottom:var(--s24)}
.cut__n{color:var(--fioco);margin-bottom:var(--s9);display:block}
.cut__name{font-size:clamp(20px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1;text-transform:uppercase;margin-bottom:var(--s9)}
.cut__what{font-size:15px;line-height:1.6;color:var(--fioco);max-width:52ch}
.grains{display:block;border-top:1px solid var(--linea-tema)}
.grain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px var(--s24);
  align-items:baseline;padding:var(--s14) 0;border-bottom:1px solid var(--linea-tema);
  min-width:0;transition:padding-left .22s var(--ease)}
.grain:hover{padding-left:12px}
.grain b{grid-column:2;font-size:clamp(16px,1.8vw,24px);font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;line-height:1.05}
.grain p{grid-column:2;font-size:14px;line-height:1.55;color:var(--fioco);max-width:64ch}
.grain__mark{grid-row:span 2}
.grain__mark{display:inline-flex;align-items:center;align-self:start;
  border:1px solid var(--linea-tema);border-radius:20px;padding:5px 11px;
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fioco)}
.grain__mark--whole{border-color:var(--verde);color:var(--verde)}
.band[data-fondo="carta"] .grain__mark--whole{border-color:#0A5B2B;color:#0A5B2B}
.cut__state{margin-top:var(--s14);color:var(--fioco)}
/* il blocco sotto i tre bunch: a sinistra una nota su come leggerli
   (piccola, col filo a margine), a destra l'invito a comporne uno — con
   il suo titolo, il suo testo e i suoi bottoni. Due cose, due pesi */
.compose{margin-top:var(--s68);padding-top:var(--s45);border-top:1px solid var(--linea-tema);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s45) var(--s68);align-items:start}
.compose__nota{display:grid;gap:var(--s14);padding-left:var(--s24);border-left:1px solid var(--linea-tema)}
.compose__nota .t-label{color:var(--fioco)}
.compose__nota p{font-size:15px;line-height:1.6;color:var(--fioco);max-width:44ch}
.compose__nota b{display:block;margin-bottom:6px;color:var(--testo);font-weight:700}
.compose__invito{display:grid;gap:var(--s14);justify-items:start}
.compose__invito h3{font-size:clamp(24px,2.8vw,38px);line-height:.98;letter-spacing:-.025em}
.compose__invito .muted{font-size:15px;line-height:1.6;max-width:52ch}
.compose__invito .atti{margin-top:var(--s14)}
@media (max-width:767px){
  .compose{grid-template-columns:1fr;gap:0;margin-top:var(--s45);padding-top:var(--s24)}
  .compose__invito{margin-top:var(--s45);padding-top:var(--s45);border-top:1px solid var(--linea-tema)}
}

/* ---------- 15. il catalogo ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--s45)}
.filters button{display:inline-flex;align-items:center;min-height:40px;
  border:1px solid var(--linea-tema);border-radius:20px;padding:8px 14px;font-size:12px;
  color:var(--fioco);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:color .16s linear,border-color .16s linear,background-color .16s linear}
.filters button:hover{border-color:var(--testo);color:var(--testo)}
.filters button[aria-pressed="true"]{border-color:var(--testo);color:var(--testo)}
/* Le pastiglie di famiglia sono sempre piene: cosi' la fila di filtri
   e' anche la legenda del codice colore, e funziona su qualunque
   fondo — il nero sopra ogni tinta tiene almeno 4,8:1, mentre la
   tinta come testo su carta scenderebbe a 1,0. */
.filters button[data-f]:not([data-f="all"]):not([data-f="new"]){
  background:var(--fc);border-color:var(--fc);color:var(--nero);font-weight:700}
.filters button[data-f]:not([data-f="all"]):not([data-f="new"]):hover{
  outline:2px solid var(--testo);outline-offset:2px}
.filters button[data-f][aria-pressed="true"]:not([data-f="all"]):not([data-f="new"]){
  outline:3px solid var(--testo);outline-offset:2px}
.filters button[data-f="new"][aria-pressed="true"]{background:var(--testo);
  border-color:var(--testo);color:var(--fondo-sez,var(--nero))}

.family{margin-bottom:var(--s45)}
.family[hidden]{display:none}
.family__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s14);
  padding:0 0 var(--s14) var(--s14);margin-bottom:1px;
  border-left:3px solid var(--fc,var(--testo));border-bottom:1px solid var(--linea-tema)}
.family__letter{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:38px;padding:6px 10px;border-radius:3px;
  background:var(--fc,var(--testo));color:var(--nero);
  font-size:14px;font-weight:700;letter-spacing:.04em}
.family__name{color:var(--fioco)}
.family__count{margin-left:auto;color:var(--fioco);font-variant-numeric:tabular-nums}

/* il catalogo e le ultime entrate sono righe: le monta il JS come
   .riga, le scatole non esistono piu' (sezione 10). */
.tag-new{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 4px;border-radius:20px;
  background:var(--testo);color:var(--fondo-sez,var(--nero));
  font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.tag-new .star{width:9px;height:9px}
/* la voce che vende oggi: il rosso di sistema, una riga sola in pagina */
.riga--viva{background:var(--rosso);color:var(--nero);
  padding-left:var(--s14);padding-right:var(--s14);margin-inline:calc(-1 * var(--s14))}
.riga--viva:hover{padding-left:26px}
.riga--viva .riga__n,.riga--viva .riga__desc,.riga--viva .riga__coda,
.riga--viva .riga__claim,.riga--viva .riga__nome{color:var(--nero)}
.riga--viva:hover .riga__nome{color:var(--carta)}
.riga--viva .riga__coda b{color:var(--nero)}
.riga--viva .tag-new{background:var(--nero);color:var(--rosso)}
/* il marchio non prende mai colore: anche nel tag rosso la stella resta carta */
.riga--viva .tag-new .star{color:var(--carta)}

/* ---------- 16. blocchi feature / access / stax ---------- */
/* feature, tier e stax: righe, non colonne di scatole. Il titolo a
   sinistra, il corpo a destra, un filo di 1px in mezzo. Sotto i
   760px la riga diventa una colonna sola, non una scatola. */
.features,.tiers,.stax{display:block;border-top:1px solid var(--linea-tema)}
.feature,.tier,.stax__item{display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--s9) clamp(24px,4vw,68px);align-items:start;
  padding:clamp(20px,2.8vw,38px) 0;border-bottom:1px solid var(--linea-tema);
  transition:padding-left .22s var(--ease)}
.feature:hover,.tier:hover,.stax__item:hover{padding-left:12px}
.feature h3,.tier h3,.stax__item h3{font-size:clamp(19px,2.4vw,34px);letter-spacing:-.03em;
  line-height:1.02;max-width:22ch}
.feature > .label,.tier > .label,.stax__item > .label{grid-column:1;color:var(--fioco);
  margin-bottom:9px}
.feature p,.tier p,.stax__item p{grid-column:2;font-size:15px;line-height:1.62;
  color:var(--fioco);max-width:60ch}
.feature ul,.tier ul{grid-column:2;display:grid;gap:9px}
.feature li,.tier li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;
  color:var(--fioco)}
.feature li::before,.tier li::before{content:'';position:absolute;left:0;top:.66em;
  width:9px;height:1px;background:var(--rosso)}
.feature .btn,.tier .btn,.stax__item .btn{grid-column:2;justify-self:start;margin-top:var(--s9)}
.tier__price{grid-column:1;font-size:clamp(22px,2.8vw,38px);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;margin-top:9px}
@media (max-width:760px){
  .feature,.tier,.stax__item{grid-template-columns:1fr;gap:11px}
  .feature p,.tier p,.stax__item p,.feature ul,.tier ul,
  .feature .btn,.tier .btn,.stax__item .btn,.tier__price{grid-column:1}
}

/* ---------- 17. i contatti ---------- */
.contact{display:grid;gap:var(--s45);align-items:start}
@media (min-width:900px){ .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.campo,.field{display:grid;gap:7px;margin-bottom:var(--s24)}
.campo > span,.field > label{color:var(--fioco);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.campo input,.campo textarea,.field input,.field textarea{
  width:100%;display:block;background:transparent;color:var(--testo);
  border:none;border-bottom:1px solid var(--bordo-tema);padding:11px 0;font:inherit;font-size:16px;
  border-radius:0;transition:border-color .16s linear}
.field textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo textarea:focus,
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--fuoco)}
.campo input::placeholder,.field input::placeholder,
.field textarea::placeholder{color:var(--segnaposto)}
/* la trappola per i robot: fuori dallo schermo, mai visibile */
.trappola,.trap{position:absolute!important;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}
#cSubmit{margin-top:var(--s14)}
.form-status,#cStatus{margin-top:var(--s14);color:var(--rosso);font-size:14px}
.form-status:empty{margin:0}
.form-status a,#cStatus a{border-bottom:1px solid currentColor}
/* il pannello "ricevuto" esiste solo dopo l'invio */
.sent,.contact__done{display:none}
.contact.done form{display:none}
.contact.done .sent,.contact.done .contact__done{display:grid;gap:var(--s14)}

/* ---------- 18. il richiamo e il piede ---------- */
.activate{position:relative;padding:clamp(56px,10vh,120px) 0;text-align:center;
  border-bottom:1px solid var(--linea-scuro)}
.activate::before{content:'';position:absolute;inset:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--verde);z-index:-1}
/* niente rientro per la colonna delle tacche qui: e' un blocco centrato,
   e quel padding-right lo spingeva fuori schermo a destra */
.activate .dentro,.activate .shell{padding-right:var(--pad);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s24);color:var(--nero);text-align:center}
.activate .atti{justify-content:center}
.activate .label{color:#0A5B2B;letter-spacing:.2em}
.activate__star{width:var(--segno-m);height:var(--segno-m);color:var(--nero)}
.activate__line{font-size:clamp(30px,6.4vw,88px);font-weight:700;letter-spacing:-.04em;
  line-height:.9;text-transform:uppercase}
.activate .btn{border-color:var(--nero);color:var(--nero)}
.activate .btn:hover{background:var(--nero);color:var(--verde)}
.activate .btn--filled{background:var(--nero);color:var(--verde);border-color:var(--nero)}
.activate .btn--filled:hover{background:var(--carta);color:var(--nero);border-color:var(--carta)}
.activate p{color:#083F1F}
.activate a[href^="mailto"]{color:var(--nero);border-bottom:1px solid currentColor}

.foot,.piede{position:relative;z-index:100;background:var(--nero);color:var(--carta);
  padding:clamp(40px,7vh,96px) 0 calc(clamp(32px,6vh,64px) + var(--fondo))}
.foot .dentro,.foot .shell{max-width:none;padding-right:var(--pad);
  display:flex;flex-direction:column;align-items:flex-start}
.costruiamo{display:flex;align-items:center;gap:var(--s14);text-align:left;
  transition:color .2s linear;margin-bottom:var(--s24);color:var(--fioco-scuro)}
.costruiamo:hover{color:var(--giallo)}
.costruiamo-sigillo{flex:none;width:var(--segno-s);height:var(--segno-s)}
.costruiamo-frecce{display:inline-flex;gap:1px;font-size:16px}
.costruiamo-frecce i{font-style:normal;display:inline-block;opacity:.3;
  animation:spingi 1.8s var(--ease-io) infinite}
.costruiamo-frecce i:nth-child(2){animation-delay:.12s}
.costruiamo-frecce i:nth-child(3){animation-delay:.24s}
@keyframes spingi{0%,55%,100%{opacity:.3;transform:translateX(0)}25%{opacity:1;transform:translateX(4px)}}
.foot__mark{overflow:hidden;white-space:nowrap;
  font-size:clamp(40px,calc((100vw - 2 * var(--pad)) / 4.2),240px);
  font-weight:700;line-height:.8;letter-spacing:-.04em;text-transform:uppercase}
.foot__mail{margin-top:clamp(18px,3.4vh,45px)}
.foot__mail a{display:inline-block;font-size:clamp(18px,3.2vw,44px);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;transition:color .2s linear;
  overflow-wrap:anywhere}
.foot__mail a:hover{color:var(--giallo)}
.foot__riga{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s14) var(--s24);
  margin-top:clamp(18px,3.4vh,45px)}
.foot__verde{display:inline-flex;align-items:center;gap:8px;border-radius:22.5px;
  padding:10px 22px;min-height:44px;background:var(--verde);color:var(--nero);
  font-weight:700;letter-spacing:.1em;font-size:11px;text-transform:uppercase;
  transition:background .2s linear}
.foot__verde:hover{background:var(--giallo)}
.foot__grid{display:grid;gap:var(--s24) var(--s45);width:100%;
  margin-top:clamp(18px,3.4vh,45px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.foot__col{display:flex;flex-direction:column;gap:9px;min-width:0}
.foot__col span.label{color:var(--fioco-scuro);margin-bottom:5px}
.foot__col a{font-size:13px;color:var(--su-scuro);min-height:28px;display:inline-flex;
  align-items:center;transition:color .16s linear}
.foot__col a:hover{color:var(--giallo)}
.foot__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;
  gap:var(--s14) var(--s24);width:100%;margin-top:clamp(18px,3.4vh,45px);
  padding-top:var(--s24);border-top:1px solid var(--linea-scuro);color:var(--fioco-scuro)}
@media (max-width:900px){
  .foot__bottom{justify-content:flex-start;gap:var(--s9) var(--s24)}
  .foot__bottom span{display:inline-flex;align-items:center;min-height:40px}
}

/* ---------- 19. la rivelazione allo scorrimento ---------- */
.rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){ .rise,.rise.in{opacity:1;transform:none;transition:none} }

/* ---------- 20. disciplina del min-width ----------
   Un figlio di griglia ha min-width:auto: il suo min-content
   diventa il minimo della traccia. Un nastro o un nome lungo
   dentro una cella risale fino alla griglia e sfonda lo schermo,
   overflow:hidden compreso. Si dichiara una volta per tutti. */
.griglia,.cella,.latest,.fresh,.cuts,.cut,.grains,.grain,.cards,.card,
.features,.feature,.tiers,.tier,.stax,.stax__item,.sec-head,.sec-head__title,
.contact,.foot__grid,.foot__col,.soglia-meta,.soglia-dato,.menu-body,.menu-nav,
.menu-side,.menu-box,.board,.brief,.term__body,.term__index,.term__panel{min-width:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ============================================================
   21. IL TERMINALE — /stock/
   L'unica pagina che non alterna fondi: e' uno strumento, sta sul
   nero e si muove per pannelli. Stesso sistema: un carattere,
   maiuscolo stretto, pastiglie, la riga da 1px, nessuna ombra.
   ============================================================ */
body.term{background:var(--nero);color:var(--carta);
  height:100svh;overflow:hidden;display:flex;flex-direction:column}
.term__bar{flex:none;display:flex;align-items:center;gap:var(--s14);
  padding:0 var(--pad);height:var(--testa);border-bottom:1px solid var(--linea-scuro)}
.term__burger{width:38px;height:38px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--linea-scuro);border-radius:50%;
  color:var(--carta);font-size:18px;line-height:1;
  transition:background-color .18s linear,color .18s linear,border-color .18s linear}
.term__burger:hover,.term__burger.aperto{background:var(--giallo);color:var(--nero);border-color:var(--giallo)}
.term__mark{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  font-size:13px;font-weight:500;letter-spacing:-.01em;text-transform:uppercase}
.term__mark .star{width:var(--segno-xs);height:var(--segno-xs);flex:none}
.term__tag{color:var(--fioco-scuro);border-left:1px solid var(--linea-scuro);
  padding-left:var(--s14)}
.term__bar-end{margin-left:auto;display:flex;align-items:center;gap:clamp(8px,1.6vw,22px)}
.term__link{display:inline-flex;align-items:center;min-height:40px;
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:var(--fioco-scuro);white-space:nowrap;transition:color .16s linear}
.term__link:hover,.term__link[aria-current]{color:var(--carta)}
.term__wallet{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea-scuro);border-radius:22.5px;padding:9px 20px;min-height:44px;
  color:var(--carta);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  transition:background-color .18s linear,color .18s linear,border-color .18s linear}
.term__wallet:hover{background:var(--giallo);color:var(--nero);border-color:var(--giallo)}
.term__wallet.is-on{border-color:var(--verde);color:var(--verde)}

.term__ticker{flex:none;overflow:hidden;height:40px;background:var(--pelle);
  border-bottom:1px solid var(--linea-scuro);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.term__ticker ul{display:flex;align-items:center;gap:var(--s45);height:100%;
  width:max-content;white-space:nowrap;animation:scorri 42s linear infinite}
.term__ticker li{display:flex;align-items:center;gap:9px;color:var(--fioco-scuro);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.term__ticker b{color:var(--carta);font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .term__ticker ul{animation:none} }
.dot{width:7px;height:7px;border-radius:50%;background:var(--fc,var(--verde));flex:none}

.term__drawer{position:fixed;inset:var(--testa) auto auto 0;z-index:120;
  width:min(360px,calc(100vw - 24px));padding:var(--s14);
  border:1px solid var(--linea-scuro);border-top:0;background:var(--pelle);
  display:flex;flex-direction:column;gap:2px}
.term__drawer[hidden]{display:none}
.term__drawer a{display:flex;align-items:center;min-height:44px;padding:0 var(--s14);
  border-radius:22.5px;font-size:13px;font-weight:500;letter-spacing:.02em;
  transition:background-color .16s linear,color .16s linear}
.term__drawer a:hover{background:var(--giallo);color:var(--nero)}
.term__drawer hr{border:0;border-top:1px solid var(--linea-scuro);margin:7px 0}

.term__body{flex:1;display:grid;grid-template-columns:392px 1fr;min-height:0}
.term__index{display:flex;flex-direction:column;min-height:0;background:var(--pelle);
  border-right:1px solid var(--linea-scuro)}
.term__tools{flex:none;padding:var(--s14) var(--s24);border-bottom:1px solid var(--linea-scuro)}
.term__tools-top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s14);margin-bottom:var(--s14)}
.term__tools h2{font-size:20px}
.term__sorts{display:flex;gap:6px}
.term__sorts button,.term__fams button{display:inline-flex;align-items:center;min-height:36px;
  border:1px solid var(--linea-scuro);border-radius:20px;padding:6px 12px;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fioco-scuro);font-variant-numeric:tabular-nums;
  transition:color .16s linear,border-color .16s linear,background-color .16s linear}
.term__sorts button:hover,.term__fams button:hover{border-color:var(--carta);color:var(--carta)}
.term__sorts button[aria-pressed="true"]{background:var(--carta);border-color:var(--carta);color:var(--nero)}
.term__fams{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s14)}
.term__fams button[data-f]:not([data-f="all"]){border-color:var(--fc);color:var(--fc)}
.term__fams button[data-f][aria-pressed="true"]{background:var(--fc,var(--carta));
  border-color:var(--fc,var(--carta));color:var(--nero)}
.term__fams button[data-f="all"][aria-pressed="true"]{background:var(--carta);border-color:var(--carta)}
.pill-input{width:100%;background:transparent;color:var(--carta);
  border:none;border-bottom:1px solid var(--linea-scuro);padding:11px 0;font:inherit;
  font-size:16px;border-radius:0;transition:border-color .16s linear}
.pill-input::placeholder{color:var(--campo)}
.pill-input:focus{outline:none;border-bottom-color:var(--verde)}

.term__rows{flex:1;overflow-y:auto;overscroll-behavior:contain}
.trow__sep{padding:var(--s14) var(--s24) 11px;background:var(--nero);
  border-bottom:1px solid var(--linea-scuro);color:var(--fioco-scuro);
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.trow{position:relative;display:block;width:100%;text-align:left;min-width:0;
  padding:var(--s14) var(--s24) var(--s14) calc(var(--s24) - 3px);
  border-bottom:1px solid var(--linea-scuro);
  border-left:3px solid var(--fc);
  background:transparent;color:inherit;font-size:13px;line-height:1.35;
  transition:background-color .18s linear}
.trow:hover,.trow.is-on{background:var(--nero)}
.trow.is-on{border-left-width:5px;padding-left:calc(var(--s24) - 5px)}
.trow__top{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;min-width:0}
.trow__name{font-size:16px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  line-height:1.05;min-width:0}
.trow__new{display:inline-flex;align-items:center;gap:5px;flex:none;padding:3px 8px 4px;
  border-radius:20px;background:var(--carta);color:var(--nero);
  font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.trow__new .star{width:8px;height:8px}
.trow__q{margin-left:auto;font-size:15px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.trow__roles{display:block;margin-top:7px;color:var(--fc);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.trow__foot{display:flex;align-items:center;gap:11px;margin-top:7px;
  color:var(--fioco-scuro);font-size:12px;font-variant-numeric:tabular-nums}
.trow__delta{margin-left:auto;font-weight:500;letter-spacing:.06em}
.up{color:var(--verde)} .down{color:var(--rosso)}
.trow__meter{display:block;height:2px;margin-top:9px;background:rgba(220,220,214,.16)}
.trow__meter i{display:block;height:100%;background:var(--fc)}

.term__panel{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.term__pad{padding:clamp(24px,3.4vw,44px) var(--pad) clamp(48px,7vh,88px);max-width:1440px}

.picker{position:relative;margin-bottom:var(--s24);max-width:440px}
.picker__btn{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;
  padding:11px 20px;border:1px solid var(--linea-scuro);border-radius:24px;
  background:var(--pelle);color:var(--carta);
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .16s linear}
.picker__btn:hover{border-color:var(--carta)}
.picker__btn i{margin-left:auto;font-style:normal;color:var(--fioco-scuro)}
.picker__menu{position:absolute;z-index:60;top:calc(100% + 7px);left:0;
  width:min(440px,calc(100vw - 40px));max-height:62svh;overflow-y:auto;
  border:1px solid var(--linea-scuro);background:var(--pelle)}
.picker__menu[hidden]{display:none}
.picker__menu button{display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 20px;border-bottom:1px solid var(--linea-scuro);text-align:left;
  transition:background-color .16s linear}
.picker__menu button:hover{background:var(--nero)}
.picker__menu b{font-size:13px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.picker__menu span span{display:block;margin-top:4px;color:var(--fc);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

.term__hero{display:flex;flex-wrap:wrap;gap:var(--s24) var(--s45);align-items:flex-end;
  margin-bottom:var(--s24)}
.term__hero h1{font-size:clamp(28px,4.4vw,62px)}
.term__stats{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--s24) var(--s45)}
.term__stat span{display:block;margin-bottom:7px;color:var(--fioco-scuro);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.term__stat b{font-size:clamp(20px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}

.grid{display:grid;gap:1px;background:var(--linea-scuro);border:1px solid var(--linea-scuro);
  grid-template-columns:repeat(12,1fr)}
.tile{grid-column:span 12;background:var(--pelle);padding:clamp(18px,2.4vw,26px);min-width:0}
.tile--half{grid-column:span 6} .tile--third{grid-column:span 4} .tile--twothird{grid-column:span 8}
.tile__head{display:flex;align-items:center;gap:9px;margin-bottom:var(--s24);
  color:var(--fioco-scuro);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase}
.tile__head .star{width:12px;height:12px;color:var(--carta);flex:none}
.tile svg{width:100%;height:auto;display:block}
.tile p{font-size:13px;line-height:1.55;color:var(--fioco-scuro)}
.legend{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:var(--s14)}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  color:var(--fioco-scuro);font-variant-numeric:tabular-nums}

.feed{display:grid;gap:1px;background:var(--linea-scuro);border:1px solid var(--linea-scuro)}
.feed__item{background:var(--nero);padding:var(--s14) var(--s24);
  border-left:3px solid var(--fc);min-width:0}
.feed__kind{color:var(--fc);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase}
.feed__item h3{margin:9px 0 7px;font-size:16px}
.feed__item p{font-size:13px;line-height:1.55;color:var(--fioco-scuro)}
.feed__foot{display:flex;justify-content:space-between;gap:var(--s14);margin-top:11px;
  padding-top:9px;border-top:1px solid var(--linea-scuro);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fioco-scuro)}
.feed__foot b{color:var(--carta);font-variant-numeric:tabular-nums}

.spec{display:grid;gap:var(--s24)}
.spec div span{display:block;margin-bottom:6px;color:var(--fioco-scuro);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.spec div b{font-size:14px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.spec a{color:var(--fc,var(--giallo))}

.sheet__top{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:var(--s24)}
.sheet__fam{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:20px;
  background:var(--fc);color:var(--nero);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.sheet__state{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:20px;
  border:1px solid var(--linea-scuro);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.sheet__state--new{background:var(--carta);color:var(--nero);border-color:var(--carta)}
.sheet__state--new .star{width:11px;height:11px}
.sheet__name{font-size:clamp(34px,6.4vw,96px);font-weight:700;letter-spacing:-.04em;
  line-height:.86;text-transform:uppercase;margin-bottom:var(--s14)}
.sheet__claim{font-size:clamp(16px,1.9vw,24px);font-weight:700;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.15;max-width:24ch;color:var(--fc)}
.sheet__grid{display:grid;gap:var(--s24) clamp(24px,4vw,64px);margin-top:var(--s45);
  grid-template-columns:1fr 1fr}
.sheet__grid h3{margin-bottom:var(--s14);padding-bottom:11px;
  border-bottom:1px solid var(--linea-scuro);font-size:16px}
.sheet__grid p{font-size:14px;line-height:1.6;color:var(--su-scuro)}
.sheet__grid p + p{margin-top:var(--s14);color:var(--fioco-scuro)}

.equity{margin-top:var(--s45);border:1px solid var(--linea-scuro);background:var(--pelle);
  padding:clamp(22px,3vw,34px)}
.equity__grid{display:grid;gap:var(--s45);grid-template-columns:1fr 1fr;align-items:start}
.equity__val{font-size:clamp(44px,7vw,96px);font-weight:700;letter-spacing:-.05em;
  line-height:.9;color:var(--fc);font-variant-numeric:tabular-nums}
.meter{height:4px;background:rgba(220,220,214,.16);margin:11px 0 8px}
.meter i{display:block;height:100%;background:var(--fc)}

/* il registro vive sia in home (banda carta) sia nel terminale (nero):
   prende il fondo della sezione, non un fondo suo */
.registry{display:grid;gap:1px;background:var(--linea-tema);border:1px solid var(--linea-tema)}
.registry div{background:var(--fondo-sez,var(--pelle));display:flex;flex-wrap:wrap;
  gap:9px var(--s24);padding:11px var(--s14);align-items:baseline}
.registry span:last-child{color:var(--fioco);overflow-wrap:anywhere}
.registry span.label{color:var(--fioco)}
.registry a{border-bottom:1px solid currentColor}
body.term .registry{background:var(--linea-scuro);border-color:var(--linea-scuro)}
body.term .registry div{background:var(--pelle)}
body.term .registry span:last-child{color:var(--su-scuro)}
.tx{border:1px solid var(--linea-scuro);padding:0;max-width:560px;width:calc(100% - 32px);
  border-radius:2px;background:var(--pelle);color:var(--carta)}
.tx::backdrop{background:rgba(0,0,0,.78)}
.tx__body{display:grid;gap:var(--s14);padding:clamp(24px,3.4vw,40px)}
.tx__body h2{font-size:clamp(20px,2.6vw,32px)}

/* ============================================================
   22. MAKERS — la bacheca
   ============================================================ */
.board{display:block;border-top:1px solid var(--linea-tema)}
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) auto;
  gap:var(--s14) clamp(20px,3vw,52px);align-items:start;min-width:0;
  padding:clamp(20px,2.8vw,34px) 0;border-bottom:1px solid var(--linea-tema);
  border-left:3px solid var(--fc);padding-left:var(--s14);
  transition:padding-left .22s var(--ease)}
.brief:hover{padding-left:24px}
.brief[hidden]{display:none}
.brief__top{grid-column:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.brief__proj{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fc-testo)}
.brief__seat{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fioco)}
.brief h3{grid-column:1;font-size:clamp(18px,2.2vw,30px);letter-spacing:-.03em;
  line-height:1.02;max-width:20ch}
.brief__need{grid-column:2;font-size:15px;line-height:1.6;color:var(--fioco);max-width:58ch}
.brief__pays{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.pay{display:inline-flex;align-items:center;padding:5px 12px;border-radius:20px;
  border:1px solid currentColor;font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase}
.pay--token{color:var(--verde)}
.pay--cash{color:var(--giallo)}
.band[data-fondo="carta"] .pay--token{color:#0A5B2B}
.band[data-fondo="carta"] .pay--cash{color:#7A5B00}
/* la colonna dei fatti sta in alto a destra, allineata al titolo:
   senza grid-row la griglia la spingeva in fondo alla riga */
.brief__facts{grid-column:3;grid-row:1 / span 6;align-self:start;
  display:grid;gap:11px;min-width:190px;
  padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--linea-tema)}
.brief > .atti{grid-column:2;justify-self:start}
.brief__bar,.brief > p.muted{grid-column:2}
@media (max-width:900px){
  .brief{grid-template-columns:1fr}
  .brief h3,.brief__top,.brief__need,.brief__pays,
  .brief > .atti,.brief__bar,.brief > p.muted{grid-column:1}
  .brief__facts{grid-column:1;grid-row:auto}
  .brief__facts{grid-template-columns:1fr 1fr;padding-left:0;border-left:0;
    padding-top:var(--s14);border-top:1px solid var(--linea-tema)}
}
.brief__facts span{display:block;margin-bottom:5px;color:var(--fioco);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.brief__facts b{font-size:13px;font-weight:500;line-height:1.4}
.brief__bar{height:3px;margin-top:11px;background:rgba(220,220,214,.16)}
.band[data-fondo="carta"] .brief__bar{background:rgba(14,16,14,.13)}
.brief__bar i{display:block;height:100%;background:var(--fc)}
.board-note{display:flex;flex-wrap:wrap;gap:var(--s14) var(--s45);align-items:center;
  justify-content:space-between;margin-top:var(--s24)}
.board-note p{font-size:13px;line-height:1.55;color:var(--fioco);max-width:64ch}

/* ---------- 23. striscia delle ultime entrate nel terminale ---------- */
.fresh-strip{margin-bottom:var(--s24)}
.fresh-strip__row{display:grid;gap:1px;background:var(--linea-scuro);
  border:1px solid var(--linea-scuro);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fcard{background:var(--pelle);padding:var(--s24);display:flex;flex-direction:column;gap:9px;
  text-align:left;min-width:0;border-top:3px solid var(--fc);
  transition:background-color .22s linear}
.fcard:hover{background:var(--nero)}
.fcard__top{display:flex;align-items:center;gap:9px}
.fcard__fam{color:var(--fc);font-size:11px;font-weight:700;letter-spacing:.14em}
.fcard__ord{margin-left:auto;color:var(--fioco-scuro);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.fcard__name{font-size:17px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  line-height:1.05}
.fcard__roles{color:var(--fc);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase}
.fcard__foot{display:flex;justify-content:space-between;gap:var(--s14);margin-top:auto;
  padding-top:11px;border-top:1px solid var(--linea-scuro);
  color:var(--fioco-scuro);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}

/* ---------- 24. pagine interne ---------- */
.pagetop{position:relative;padding:clamp(56px,10vh,120px) 0 clamp(36px,6vh,72px);
  border-bottom:1px solid var(--linea-scuro)}
.pagetop::before{content:'';position:absolute;inset:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--nero);z-index:-1}
.pagetop .label{display:flex;align-items:center;gap:10px;margin-bottom:var(--s24);
  color:var(--fioco-scuro)}
.pagetop .label .star{width:13px;height:13px;flex:none}
.pagetop h1{margin-bottom:var(--s24)}
.pagetop__lede{max-width:60ch;color:var(--su-scuro)}
.pagetop__acts{margin-top:var(--s45)}
.read{margin-top:var(--s24)}
.read summary{list-style:none;cursor:pointer}
.read summary::-webkit-details-marker{display:none}

/* ---------- 25. schermi stretti ---------- */
@media (max-width:1000px){
  body.term{height:auto;overflow:visible}
  .term__body{grid-template-columns:1fr}
  .term__index{border-right:0;border-bottom:1px solid var(--linea-scuro)}
  .term__rows{max-height:60svh}
  .term__tag{display:none}
  .sheet__grid,.equity__grid{grid-template-columns:1fr}
  .tile--half,.tile--third,.tile--twothird{grid-column:span 12}
}
@media (max-width:700px){
  .term__bar-end .term__link{display:none}
  .term__stats{margin-left:0}
  .term__bar{padding-inline:var(--s14);gap:11px}
  .term__wallet{padding:9px 15px;font-size:11px}
  .brief__facts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .soglia-coda .btn{width:100%}
  .cut,.card,.cella,.feature,.tier,.stax__item,.grain,.fresh,.brief{padding:var(--s14)}
  .term__pad{padding-inline:var(--s14)}
  .trow{padding-inline:var(--s14)}
  .term__tools{padding-inline:var(--s14)}
}

/* ============================================================
   26. IL RESPIRO — quattro affermazioni, stile Apple
   Una cosa per schermata, tanta aria, e un marchio appiccicato al
   centro che le attraversa tutte. Il marchio ruota piano con lo
   scorrimento e prende il colore della famiglia dell'affermazione
   che sta passando: il codice colore si impara qui, prima di
   servire nell'elenco.
   Nessuna libreria: sticky per il marchio, una variabile --giro
   aggiornata a ogni frame per la rotazione.
   ============================================================ */
.manifesto{position:relative;background:var(--nero);color:var(--carta);
  border-bottom:1px solid var(--linea-scuro)}


.dichiara{position:relative;z-index:1;min-height:100svh;
  display:grid;align-content:center;
  /* sotto resta posto per la guida e il VU: il blocco non ci finisce mai sopra */
  padding:clamp(64px,12vh,140px) 0 calc(clamp(22px,5svh,44px) + 150px)}
/* come un teaser: tutto al centro della finestra (non della colonna,
   che a destra riserva la colonna delle tacche), con respiro */
.dichiara .dentro{display:grid;gap:clamp(18px,3.2svh,34px);justify-items:center;text-align:center;
  padding-right:var(--pad)}
.dichiara__occhio{color:var(--fc);letter-spacing:.2em}
.dichiara__line{
  font-size:clamp(34px,7vw,112px);font-weight:700;line-height:.92;
  letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance;
  max-width:16ch}
.dichiara .t-body{max-width:44ch;color:var(--su-scuro)}

/* teaser: un blocco alla volta — entra quando e' al centro, se ne va
   quando arriva il successivo (la classe la mette site.js) */
.dichiara .dentro > *{opacity:0;transform:translateY(26px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.dichiara.visto .dentro > *{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.dichiara.visto .dentro > *:nth-child(2){transition-delay:.09s}
.dichiara.visto .dentro > *:nth-child(3){transition-delay:.18s}
.dichiara.visto .dentro > *:nth-child(4){transition-delay:.27s}


/* il sigillo: il marchio a piena pagina, e la consegna all'elenco */
/* il sigillo si centra sulla finestra, non sulla colonna: senza questo
   il nome cadeva 52px a sinistra del centro vero, perche' .dentro
   riserva a destra lo spazio della colonna delle tacche */
.dichiara--sigillo .dentro{padding-right:var(--pad);
  justify-items:center;text-align:center;gap:var(--s14)}
.dichiara__marchio{height:clamp(150px,34svh,320px);display:flex;justify-content:center;
  margin-bottom:var(--s14)}
/* l'arrivo del marchio (zoom in roteante + splash) lo fa GSAP in site.js */
.dichiara__coda{color:var(--fioco-scuro);letter-spacing:.2em}
.dichiara--sigillo .btn{margin-top:var(--s24)}

@media (prefers-reduced-motion:reduce){
  .dichiara .dentro > *{opacity:1;transform:none}
}
@media (max-width:640px){
  .dichiara{min-height:100svh;padding-top:clamp(48px,10vh,96px)}
}

/* ============================================================
   27. IL MARCHIO — la serratura fra la stella e il nome
   Due sole disposizioni, e nessun'altra:
   A. stella a sinistra  -> nome sulla stessa orizzontale, allineato
      all'altezza delle maiuscole, distanza fissa e corta.
   B. stella sopra       -> nome sotto, centrato sulla verticale della
      stella. Il centraggio conta SOLO "Z-VU": il ™ esce dal flusso e
      non sposta il nome di mezzo carattere.
   Il tracciato della stella ora riempie il suo viewBox (bbox reale
   1.6 2.4 742.6 742.6): prima stava nel 68% in alto a sinistra di un
   riquadro 1080, quindi ogni rotazione la faceva orbitare invece di
   girare su se stessa, e ogni allineamento era falso di 167px.
   ============================================================ */

/* Il guscio del nome. Il ™ esce dal flusso e si appende al bordo
   destro della PAROLA: cosi' la larghezza del nome resta quella di
   "Z-VU", e centrare il nome centra "Z-VU", non "Z-VU piu' un ™".
   Senza questo guscio il ™ si agganciava al contenitore piu' vicino
   con una posizione — nella barra finiva in fondo alla riga, a
   duecento pixel dal nome. */
.wm{position:relative;display:inline-block;
  font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.tm{position:absolute;left:100%;top:.02em;
  font-size:.34em;font-weight:500;letter-spacing:.02em;line-height:1;
  vertical-align:baseline;pointer-events:none}

/* A. serratura orizzontale */
.marchio{display:inline-flex;align-items:center;gap:.42em;
  text-decoration:none;white-space:nowrap}
.marchio .star{width:.86em;height:.86em;flex:none;
  /* la stella si allinea al centro delle maiuscole, non al centro
     della riga: senza questo galleggia due punti troppo in basso.
     Si usa la proprieta' translate, non transform: cosi' rotazione e
     pulsazione si compongono con l'allineamento invece di cancellarlo. */
  translate:0 -.045em}
.marchio__nome{display:inline-block;font-weight:700;letter-spacing:-.02em}

/* B. serratura verticale — centrata su "Z-VU", non su "Z-VU™" */
.marchio--alto{flex-direction:column;gap:.3em;align-items:center}
.marchio--alto .star{width:1.9em;height:1.9em;translate:0}

/* le serrature gia' in pagina si allineano con la stessa regola */
.barra-firma{gap:0}
/* in proporzione al nome, non a una misura sua: 1.55em su 13px sono
   20px, e i due centri cadono sulla stessa orizzontale */
.barra-sigillo{width:1.55em;height:1.55em;margin-right:.5em;translate:0 -.045em}
.term__mark{gap:.42em}
.term__mark .star{translate:0 -.045em}

/* ============================================================
   28. IL MOVIMENTO DELLE STELLE
   Una stella o pulsa o gira su se stessa. Nient'altro.
   Comparire: di lato, dall'alto, dal basso, in zoom, in dissolvenza.
   Mai dentro un riquadro, mai con una deformazione.
   ============================================================ */
.star{transform-origin:50% 50%;transform-box:view-box}

/* rotate e scale sono proprieta' a se': non si sovrascrivono fra loro
   ne' cancellano il translate dell'allineamento */
@keyframes zv-gira{from{rotate:0turn}to{rotate:1turn}}
@keyframes zv-pulsa{
  0%,100%{scale:1;opacity:1}
  50%    {scale:1.09;opacity:.82}}

.star--gira{animation:zv-gira 44s linear infinite}
.star--pulsa{animation:zv-pulsa 4.2s var(--ease-io) infinite}
/* il segno nella barra respira appena: e' il battito del sito */
.barra-sigillo{animation:zv-pulsa 6.5s var(--ease-io) infinite}
.costruiamo-sigillo{animation:zv-gira 66s linear infinite}
.activate__star{animation:zv-pulsa 5.4s var(--ease-io) infinite}

@media (prefers-reduced-motion:reduce){
  .star--gira,.star--pulsa,.barra-sigillo,.costruiamo-sigillo,
  .activate__star{animation:none}
}


/* ============================================================
   29. IL FONDO PROFONDO
   Un solo canvas fisso dietro tutto. Le sezioni scure lasciano
   passare, quelle a colore lo coprono: il campo respira solo nel
   buio, e le bande di carta, rosso e verde restano piene come prima.
   ============================================================ */
.profondo{position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;display:block;transition:opacity 1.4s var(--ease)}
/* dopo l'hero il fondo e' l'universo (universo.js): linee, poi stelle */
.universo{position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;display:block}
/* le sezioni scure non dipingono piu' il proprio fondo: sotto c'e' il
   nero del body, e in mezzo il campo */
.band[data-fondo="nero"]{--fondo-sez:transparent}
.manifesto{background:transparent}
/* dove il fondo e' una tinta piena il campo non si deve vedere */
.band[data-fondo="carta"],.band[data-fondo="rosso"],
.band[data-fondo="verde"],.band[data-fondo="pelle"]{isolation:isolate}


/* ============================================================
   30. L'APERTURA — cancello, insegna, quadro fermo
   Tre strati e un marchio che non si sposta mai:
   - .ingresso   il cancello (fotogramma del first cut sfumato a nero)
   - .insegna    il lockup verticale, fisso, sopra a tutto: e' lo
                 stesso punto dal primo pixel alla fine dell'apertura
   - .apertura   la hero: un quadro sticky alto uno schermo dentro
                 una sezione piu' lunga, che GSAP racconta a scrub
   Senza la classe .cine (niente GSAP, moto ridotto) la pagina resta
   ferma e completa: niente cancello, insegna sopra la hero, titolo e
   CTA accesi, testata sempre li'.
   ============================================================ */

/* le misure dell'insegna, una volta sola: centro verticale e altezza.
   L'avanzamento del cancello si appende sotto con le stesse, cosi'
   resta a filo del marchio a qualunque altezza di schermo */
:root{
  --lk-c:41svh;
  --lk-h:clamp(118px,30svh,300px);
}
@media (max-width:767px){ :root{ --lk-c:37svh; --lk-h:clamp(118px,27svh,230px) } }
@media (max-height:520px){ :root{ --lk-c:34svh; --lk-h:clamp(88px,34svh,160px) } }

/* ---- i lockup: un solo SVG per lockup, niente testo vero ----
   Stella, nome e ™ stanno nello stesso sistema di coordinate: la
   loro relazione e' geometria, non CSS, e non puo' scivolare a
   nessuna scala. Si dimensionano per altezza, la larghezza segue. */
.lk{display:block;height:100%;width:auto;overflow:visible;color:inherit}
/* niente transform-origin in CSS sulla stella: GSAP mette gia' il
   centro dentro la matrice, e il CSS lo sommava una seconda volta —
   a 45 gradi la stella scivolava di 18px fuori asse */

.insegna{position:absolute;left:0;right:0;top:calc(var(--lk-c) - var(--lk-h) / 2);
  height:var(--lk-h);z-index:610;display:flex;justify-content:center;
  pointer-events:none;color:var(--carta)}
.cine .insegna{position:fixed}
/* lo scorrimento morbido del CSS spezza l'aggancio magnetico: ogni passo
   del tween di GSAP diventava a sua volta un'animazione, e ScrollTrigger
   lo leggeva come un dito che interrompe. Le ancore restano morbide via JS */
html.cine{scroll-behavior:auto}

/* ---- il cancello ---- */
.ingresso{display:none}
.cine .ingresso{display:block;position:fixed;top:0;left:0;right:0;
  /* sborda sotto e compensa: quando la barra del telefono si ritrae il
     viewport cresce, e un fixed a inset:0 lascerebbe una fascia scoperta */
  bottom:-40vh;padding-bottom:40vh;z-index:600;
  background:var(--nerissimo);cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent}
.cine.gia-dentro .ingresso{display:none}
.ingresso:focus-visible{outline:none}
/* il cursore da click compare solo quando un click fa davvero entrare */
.ingresso.pronto{cursor:pointer}
.ingresso:not(.pronto){cursor:default}
/* il first cut: parte invisibile, sale dal nero quando gira davvero */
.ingresso-film{position:absolute;inset:0 0 40vh;overflow:hidden}
.ingresso-film video{width:100%;height:100%;object-fit:cover;opacity:0}
/* sfumato a nero sopra il filmato: il buio si stringe attorno al
   marchio e cade ai bordi, cosi' la stella resta il soggetto */
.ingresso::after{content:"";position:absolute;inset:0 0 40vh;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 40% at 50% var(--lk-c),rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.92) 100%),
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.2) 40%,rgba(0,0,0,.85))}
.ingresso-info{position:absolute;left:0;right:0;z-index:1;
  top:calc(var(--lk-c) + var(--lk-h) / 2 + clamp(22px,4svh,40px));
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--su-scuro)}
/* ZV-C01 · carico a stelle: nove stelline da 10px, il fleuron del corredo */
.carico{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:14px;color:inherit}
.carico svg{flex:none;width:10px;height:10px;overflow:visible}
.ingresso-carico{margin-top:6px;color:var(--carta)}
/* dentro un bottone prende il posto dell'etichetta, alla stessa altezza */
.btn .carico{gap:7px}
.btn .carico svg{width:8px;height:8px}

/* ---- ZV-C02 · il VU a tacchette (ed e' anche il muto) ----
   Sette tacchette verticali da 2px, ben distanziate, tutte appoggiate
   sulla stessa linea di base: crescono solo verso l'alto. Speculari dal
   centro — le basse al centro, le alte ai bordi — sullo stesso asse del
   carico a stelle. A riposo sono tre pixel: la linea c'e', aspetta.
   Staccato dal fondo quanto basta a respirare (e sopra la barra del
   telefono). Solo cancello e hero: esce con l'insegna. Tocco 64x44 */
.suono{display:none}
.cine .suono{position:fixed;z-index:620;left:50%;translate:-50% 0;
  bottom:calc(clamp(22px,5svh,44px) + var(--fondo));
  width:64px;height:44px;display:flex;align-items:flex-end;justify-content:center;gap:6px;
  padding-bottom:10px;color:rgba(245,245,241,.85);transition:color .2s linear}
/* l'opacita' la governa GSAP (entrata e uscita): qui si lavora sul colore */
.cine .suono:hover{color:var(--carta)}
.suono i{display:block;width:2px;height:20px;background:currentColor;
  transform:scaleY(.15);transform-origin:50% 100%}
.suono[aria-pressed="false"]{color:rgba(245,245,241,.4)}
.suono[aria-pressed="false"] i{transform:scaleY(.1)!important}

/* ---- la hero ---- */
.apertura{position:relative;margin-top:calc(-1 * var(--testa));
  background:var(--nerissimo);color:var(--carta);border-bottom:1px solid var(--linea-scuro)}
.cine .apertura{height:340svh}
.apertura-quadro{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.cine .apertura-quadro{position:sticky;top:0;height:100svh;min-height:0}
.apertura-scena,.apertura-velo{position:absolute;inset:0}
.apertura-scena video{width:100%;height:100%;object-fit:cover}
.cine .apertura-scena video{opacity:0}
/* il velo tiene leggibili insegna e titolo senza spegnere il filmato:
   un'ombra morbida dietro il marchio, e il nero che sale dal fondo */
.apertura-velo{background:
  radial-gradient(ellipse 42% 34% at 50% var(--lk-c),rgba(0,0,0,.42),rgba(0,0,0,0) 100%),
  linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.9) 100%)}
.apertura-testo{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,3svh,30px);text-align:center;
  /* mai sotto l'insegna: parte al piu' in alto dove il marchio finisce */
  max-height:calc(100svh - var(--lk-c) - var(--lk-h) / 2 - 24px);
  padding:0 var(--pad) calc(clamp(40px,10svh,104px) + var(--fondo))}
.apertura-testo h1{margin:0}
.apertura-testo .soglia-coda{margin-top:0;justify-content:center}
/* FREEZE (18/09/2026) — riga tecnica «Transmission soon», nello stile
   delle altre righe tecniche del sito (.ingresso-info): mono, maiuscolo,
   pallino verde di sistema che pulsa piano. Via col disgelo. */
.apertura-testo .tech{display:flex;align-items:center;gap:10px;
  font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--su-scuro)}
.apertura-testo .tech .dot{background:var(--verde);animation:zv-blink 1.6s steps(1) infinite}
@keyframes zv-blink{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.apertura-testo .tech .dot{animation:none}}
@media (max-width:767px){
  .apertura-testo .soglia-coda{width:100%;max-width:340px;flex-direction:column}
}
/* telefono in orizzontale: il titolo scende di taglia, i respiri si
   stringono, le due CTA tornano in riga */
@media (max-height:520px){
  .apertura-testo{gap:12px;padding-bottom:calc(18px + var(--fondo))}
  .apertura-testo h1{font-size:clamp(26px,8.5svh,40px)}
  .apertura-testo .soglia-coda{flex-direction:row;max-width:none;width:auto}
}

/* l'indicazione di scorrere, senza parole: un filo che cade */
.apertura-giu{display:none}
.cine .apertura-giu{display:block;position:absolute;left:50%;
  /* sopra il VU a tacche, sullo stesso asse: il filo cade verso il suono */
  bottom:calc(clamp(22px,5svh,44px) + 44px + 8px + var(--fondo));
  width:1px;height:clamp(36px,6svh,56px);overflow:hidden;
  background:rgba(220,220,214,.16);opacity:0}
.apertura-giu i{position:absolute;left:0;top:0;width:100%;height:40%;
  background:var(--carta);animation:giu 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes giu{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ---- la testata: lockup orizzontale + ENS ---- */
.barra-firma .lk--h{height:clamp(17px,2.3vh,21px)}
.barra-firma i{font-size:11px;letter-spacing:.14em;text-transform:lowercase;margin-left:1.1em}
@media (max-width:720px){ .barra-firma i{display:inline} }
@media (max-width:339px){ .barra-firma i{display:none} }


/* ---- ZV-C03 · il cursore stella (cursore.js, solo mouse) ---- */
.con-cursore,.con-cursore *{cursor:none!important}
.con-cursore input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.con-cursore textarea,.con-cursore [contenteditable="true"]{cursor:text!important}
.cursore{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;
  width:0;height:0;opacity:0;will-change:transform}
.cursore.vivo{opacity:1}
/* max-width:none: la regola base svg{max-width:100%} la schiacciava a
   zero dentro un contenitore largo zero — il cursore c'era ma non si vedeva */
.cursore svg{position:absolute;left:-10px;top:-10px;width:20px;height:20px;max-width:none;overflow:visible;
  fill:#F5F5F1;stroke:#0E100E;stroke-width:6;stroke-linejoin:miter;paint-order:stroke;
  transition:transform .42s cubic-bezier(.7,0,.2,1),opacity .15s linear}
.cursore.su-link svg{transform:rotate(90deg) scale(1.55)}
.cursore.giu svg{transform:scale(.78);transition-duration:.12s}
.cursore.su-link.giu svg{transform:rotate(90deg) scale(1.2)}
.cursore.su-testo svg{opacity:0}
.cursore.scatto:not(.su-link) svg{animation:cursore-scatto .38s cubic-bezier(.7,0,.2,1)}
.cursore.gira svg{animation:cursore-gira 2.3s cubic-bezier(.7,0,.2,1) infinite;transform:scale(1.4)}
/* stesso tempo della stella che pulsa nel cancello: 0,9s dentro, 1,3s fuori */
.cursore.pulsa svg{animation:cursore-pulsa 2.2s ease-in-out infinite}
@keyframes cursore-scatto{50%{transform:rotate(45deg) scale(1.35)}100%{transform:rotate(90deg) scale(1)}}
@keyframes cursore-gira{0%,45%{transform:rotate(0) scale(1.4)}100%{transform:rotate(90deg) scale(1.4)}}
@keyframes cursore-pulsa{0%{transform:scale(1.45)}41%{transform:scale(1.15)}100%{transform:scale(1.45)}}
.cursore.fermo svg{animation:none!important;transition:none}
.btn--filled{transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .16s linear,border-color .16s linear,color .16s linear}


/* ---- la guida del respiro: stelline (ZV-C01) + filo, sopra il VU ---- */
.guida{display:none}
.cine .guida{position:fixed;z-index:615;left:50%;translate:-50% 0;
  bottom:calc(clamp(22px,5svh,44px) + 44px + 8px + var(--fondo));
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--carta);pointer-events:none}
.cine .guida[hidden]{display:none}
.guida-giu{position:relative;display:block;width:1px;height:clamp(34px,5.5svh,52px);
  overflow:hidden;background:rgba(220,220,214,.16)}
.guida-giu i{position:absolute;left:0;top:0;width:100%;height:40%;
  background:var(--carta);animation:giu 2.2s cubic-bezier(.65,0,.35,1) infinite}


/* ============================================================
   31. FRA UNA SEZIONE E L'ALTRA: NIENTE FILETTI, SFUMATURE AL NERO
   Le sezioni non si toccano piu' con una riga: ogni fondo pieno
   (carta, rosso, verde, pelle) si scioglie nel nero ai due bordi, e
   in quelle fasce traspare l'universo che sta sotto. Le sezioni nere
   sono gia' trasparenti sul cielo. Il padding dei fondi pieni cresce
   quanto la sfumatura, cosi' il testo non finisce mai nella fascia
   dove il suo fondo sta sparendo. La parallasse la fa site.js.
   ============================================================ */
:root{ --sfuma:clamp(64px,12vh,150px) }
.band,.mondo,.manifesto,.apertura,.teaser,.activate{border-top:0;border-bottom:0}
.band[data-fondo="carta"]::before,.band[data-fondo="rosso"]::before,
.band[data-fondo="verde"]::before,.band[data-fondo="pelle"]::before,
.activate::before{
  /* una curva, non una rampa: la rampa lineare lasciava un gradino
     visibile dove la sfumatura comincia */
  --curva:linear-gradient(transparent 0,rgba(0,0,0,.06) calc(var(--sfuma) * .25),
    rgba(0,0,0,.3) calc(var(--sfuma) * .5),rgba(0,0,0,.72) calc(var(--sfuma) * .75),#000 var(--sfuma),
    #000 calc(100% - var(--sfuma)),rgba(0,0,0,.72) calc(100% - var(--sfuma) * .75),
    rgba(0,0,0,.3) calc(100% - var(--sfuma) * .5),rgba(0,0,0,.06) calc(100% - var(--sfuma) * .25),transparent 100%);
  -webkit-mask-image:var(--curva);mask-image:var(--curva)}
.band[data-fondo="carta"],.band[data-fondo="rosso"],
.band[data-fondo="verde"],.band[data-fondo="pelle"],.activate{
  padding-block:calc(var(--sfuma) + clamp(24px,4vh,48px))}
/* il piede sale dal nero invece di cominciare con un bordo */
.foot{background:linear-gradient(transparent,var(--nero) var(--sfuma))}