/* ═══════════════════════════════════════════════════════════════
   DANIELA RIGHI — SITO 3 · seconda stesura, 30/08/2026

   🔴 PERCHÉ LA PRIMA È STATA RIFATTA. Misurata dal vivo, faceva questo:
      · 216 px di vuoto fra una sezione e l'altra (108 sopra + 108 sotto)
      · il testo largo 650-790 px dentro una finestra da 1200: da 410 a
        596 px di NIENTE ai lati. Una colonnina persa in mezzo allo schermo.
      · griglia `auto-fit`: a 1280 e 1440 px il blog faceva 4 schede + 1
        orfana. A 820 px 2+2+1. E schede di altezze diverse.
      · la hero: una foto verticale 900×1125 schiacciata dentro 952×536.
      · il percorso da scorrere a mano con le frecce.

   Le regole di questa stesura, in ordine:
   1. LA LARGHEZZA È UNA SOLA: 1180 px. La misura di lettura si ottiene
      con le COLONNE, non stringendo il contenitore e lasciando il vuoto.
   2. NIENTE `auto-fit`: il numero di colonne è dichiarato a ogni soglia,
      e i layout sono disegnati sul numero VERO di elementi (5 articoli,
      4 passaggi, 3 anteprime). Mai un elemento solo in una riga.
   3. Lo spazio fra le sezioni è ritmo, non deserto: da 216 a ~96 px.
   4. Ogni immagine ha il ritaglio dichiarato in base al suo formato.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ══ I COLORI — quinta stesura, 02/09/2026 ═══════════════════
     Cinque palette COMPLETE fra cui scegliere (sezione 38). Qui c'e' la
     prima, che fa anche da ripiego se l'attributo [data-palette] non
     arriva.

     🔴 COSA ERA SBAGLIATO PRIMA. Le palette cambiavano solo i colori
     dichiarati — testo, pulsanti, accenti — mentre 69 colori erano
     scritti a mano dentro alle regole: i veli, le ombre, i bordi sulle
     fasce scure, la grana della carta, la tela del canvas. Quelli
     restavano identici, e le cinque proposte si somigliavano tutte.
     E soprattutto le CARTE erano cinque bianchi quasi uguali: il colore
     che occupa l'85% della pagina era praticamente lo stesso.

     Adesso ogni colore del sito passa da un token, comprese le terne
     `--rgb-*` da cui si costruiscono i veli e le ombre, e ogni palette
     porta il proprio fondo TINTO, il proprio scuro, la propria grana.
     Il testo resta scuro e neutro in tutte: e' l'ultima cosa che deve
     cambiare, non la prima.

     Ognuna e' passata da 18 coppie di contrasto verificate col calcolo.
     ═════════════════════════════════════════════════════════════ */
  --carta:#F6F0E7; --carta-2:#F2EBDF; --carta-3:#ECE4D5;
  --rgb-carta:246,240,231;
  --inchiostro:#2C333A; --inchiostro-cupo:#121A21; --inchiostro-fondo:#19232C;
  --rgb-inchiostro:44,51,58; --rgb-scuro:18,26,33;
  --azione:#2E4F6B; --azione-testo:#3C668B;
  --azione-su:#25394B; --azione-cupa:#1F3447;
  --rgb-azione:46,79,107;
  --accento:#B49650; --accento-testo:#766337; --accento-filo:#9C8349;
  --rgb-accento:180,150,80;
  --osso:#D2CDC1; --rgb-osso:210,205,193;
  --su-inchiostro-tenue:#A29B8B;
  --grigio:#5F666D;
  --su-carta:var(--inchiostro);
  --su-carta-corpo:#434A51;
  --su-carta-tenue:var(--grigio);
  --su-inchiostro:rgba(var(--rgb-carta),.94);
  /* ── I TOKEN DEL RIBALTAMENTO ────────────────────────────────
     Servono perche' la palette 6 e' CHIARA anche dove le altre cinque
     sono scure. Senza di questi, «fascia scura» e «ombra» e «velo sulla
     fotografia» erano la stessa variabile: schiarendo la fascia
     sparivano pure le ombre, e il testo bianco finiva su fondo bianco.
       --rgb-ombra    resta SEMPRE scuro: un'ombra chiara non esiste.
       --rgb-velo     e' il velo sopra alle fotografie: segue la palette.
       --su-fascia    l'inchiostro sopra alla fascia (carta o scuro).
       --marchio-*    il logo bianco va annerito dove il fondo schiarisce.
     Sono dichiarati qui con `var(...)`: si risolvono a lettura, quindi
     ogni palette li eredita gia' giusti senza doverli riscrivere. */
  --rgb-ombra:var(--rgb-scuro);
  --rgb-velo:var(--rgb-scuro);
  --su-fascia:var(--carta);
  --rgb-su-fascia:var(--rgb-carta);
  /* 🔴 SEPARATI DAI PRECEDENTI, e non e' un dettaglio.
     `--su-fascia` e' l'inchiostro sopra a una FASCIA DI COLORE, che la
     palette decide. `--su-velo` e' l'inchiostro sopra a una FOTOGRAFIA,
     che la palette non decide: la fotografia e' scura perche' e' scura.
     Tenerli uniti era il mio errore — sulla palette chiara l'inchiostro
     diventava scuro anche sopra al ritratto, e per farlo leggere serviva
     una patina bianca cosi' fitta da slavare la fotografia. */
  --su-velo:var(--carta);
  --su-velo-tenue:var(--osso);
  --rgb-su-velo:var(--rgb-carta);
  --marchio-su-fascia:none;
  --marchio-su-velo:brightness(0) invert(1);
  --grana:#9B7439; --grana-forza:.09;
  --filo:rgba(var(--rgb-inchiostro),.16);
  --filo-forte:#7C858D;

  /* ── PROFONDITÀ E CALORE ─────────────────────────────────────
     Preso dal sito CORAL, che è dello stesso studio e piace alla
     cliente: angoli morbidi, ombre lunghe e basse, e una carta che
     non è un foglio bianco ma una carta vera. Erano queste tre cose
     a mancare — non gli effetti. Un sito squadrato, senza ombre e
     su fondo piatto resta freddo per quanto sia composto.
     I valori NON sono gli stessi: raggi più stretti, ombre più
     tenui. La parentela si deve sentire, la copia no.            */
  --raggio:    14px;
  --raggio-lg: 26px;
  --ombra-s:  0 2px 10px rgba(var(--rgb-ombra),.05);
  --ombra-m:  0 16px 40px -18px rgba(var(--rgb-ombra),.26);
  --ombra-l:  0 34px 76px -28px rgba(var(--rgb-ombra),.40);

  --inchiostro-fondo: #111615;   /* il fondo dell'apertura */
  --inchiostro-luce:  var(--azione-su);   /* il bagliore */
  --azione-tenue:  var(--azione-su);

  /* 🔴 14/09/2026 — SCELTA FATTA: «Da studio», Spectral + IBM Plex Sans.
     Era l'abbinamento n.4 del selettore. Adesso è il carattere del sito e sta
     qui, in :root, così vale anche prima che il JavaScript parta.
     I blocchi [data-carattere] della sezione 39 NON sono stati cancellati:
     servono al pannello, che può ancora cambiare l'abbinamento.
     La palette è la n.1 «Sabbia e Prussia», che era già il default qui sopra. */
  --display: "Spectral", Georgia, serif;
  --testo:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice: .99;

  /* 🔴 UNA sola larghezza. La misura di lettura la fanno le colonne. */
  --largo:  1180px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);

  /* lo spazio fra le sezioni: ritmo, non deserto */
  --sez:  clamp(3rem, 5.2vw, 5.2rem);
  --tempo:.5s cubic-bezier(.22,.61,.36,1);
}

/* ── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
/* 🔴 Ogni famiglia ha un occhio diverso: il Cormorant a 16 px si legge
   piu' piccolo dell'Instrument, il Fraunces piu' grande. `--su-radice`
   compensa in un punto solo, e siccome quasi tutto il sito e' in rem
   si riscalano insieme corpo e spaziature — che e' quello che serve. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
      font-size:calc(100% * var(--su-radice, 1)); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--carta); color:var(--su-carta-corpo);
  font-family:var(--testo);
  font-size:clamp(1rem,.97rem + .18vw,1.06rem);
  line-height:1.68; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* la grana della carta: costa un dato incorporato, niente richieste.
   Al 2% non si vede — si sente. È la differenza fra un foglio e una carta. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* 🔴 La grana era un SVG col colore scritto dentro: uguale in tutte e
     cinque le palette, per quanto le si cambiasse. Adesso l'SVG fa da
     MASCHERA e il colore arriva dal token, cosi' una carta calda ha una
     grana calda e una fredda una fredda. */
  background-color:var(--grana);
  opacity:var(--grana-forza,.55);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size:160px 160px; mask-size:160px 160px;
}
body > *{ position:relative; z-index:1; }
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.05em; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--azione); outline-offset:3px; }

.salta{ position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--inchiostro); color:var(--carta); padding:.8rem 1.3rem; }
.salta:focus{ left:1rem; top:1rem; }
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ═══ 1 · IL CONTENITORE — uno solo ══════════════════════════ */
.misura{ width:min(var(--largo), 100% - (var(--gutter) * 2)); margin-inline:auto; }
/* le vecchie classi di misura restano dichiarate ma non fanno più niente:
   la larghezza non è più il meccanismo del sito. */

/* ═══ 2 · TIPOGRAFIA ═════════════════════════════════════════ */
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400;
  color:var(--su-carta); line-height:1.08; letter-spacing:-.012em; }
h1{ font-size:clamp(2.4rem, 1.5rem + 3.1vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.1vw, 3rem); }
h3{ font-size:clamp(1.22rem, 1.08rem + .58vw,1.5rem); line-height:1.22; }
em{ font-style:italic; }
h1 em, h2 em{ color:var(--azione-testo); }

.occhiello{
  font-family:var(--testo); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accento-testo); margin:0 0 .9rem;
}
.sul-scuro .occhiello{ color:var(--osso); }

.lede{ font-size:clamp(1.1rem,1.02rem + .38vw,1.3rem); line-height:1.55;
  color:var(--su-carta); margin:0 0 1rem; }
.forte{ font-weight:600; color:var(--su-carta); }
.tenue{ color:var(--su-carta-tenue); font-size:.9rem; }
.prosa > *:last-child{ margin-bottom:0; }
.prosa a{ color:var(--azione-testo); text-underline-offset:.2em; }
/* la misura di lettura la fa la colonna, non il contenitore */
.prosa, .lede{ max-width:62ch; }

.elenco{ display:grid; gap:.7rem; margin:0 0 1.1rem; max-width:62ch; }
.elenco li{ position:relative; padding-left:1.45rem; }
.elenco li::before{ content:""; position:absolute; left:0; top:.7em;
  width:.55rem; height:1px; background:var(--azione); }
.sul-scuro .elenco li::before{ background:var(--osso); }

/* ═══ 3 · LA FIRMA — 🔭 L'APERTURA ═══════════════════════════
   Resta, ma non occupa più mezzo schermo: è un segno sottile,
   largo quanto il contenuto, che si apre mentre si scorre.     */
.apertura{ --apertura:.2; position:relative; height:2.6rem; margin:0; pointer-events:none; }
.apertura i{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--filo-forte); transform-origin:50% 50%;
  transform:translateY(calc((var(--apertura) * -.62rem) - .5px)) scaleX(calc(.3 + var(--apertura) * .7));
  transition:transform .12s linear;
}
.apertura i + i{
  transform:translateY(calc((var(--apertura) * .62rem) - .5px)) scaleX(calc(.3 + var(--apertura) * .7));
}
.apertura b{
  position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px;
  border-radius:50%; background:var(--azione);
  transform:scale(calc(.55 + var(--apertura) * .8)); transition:transform .12s linear;
}
@media (prefers-reduced-motion:reduce){ .apertura i,.apertura b{ transition:none; } }

/* ═══ 4 · TESTATA ════════════════════════════════════════════ */
.testata{ position:sticky; top:0; z-index:100;
  /* 🔴 14/09: qui c'era un backdrop-filter con blur(12px). La barra è sticky,
     quindi il browser risfocava 1425x75 px a OGNI fotogramma di scorrimento, su
     tutte e 16 le pagine. Col fondo già al 92% non si vedeva quasi: portato al
     97% e tolto il filtro, l'aspetto è lo stesso e lo scorrimento è liscio. */
  background:rgba(var(--rgb-carta),.97);
  border-bottom:1px solid transparent; transition:border-color .3s ease; }
.testata.staccata{ border-bottom-color:var(--filo); }
.testata-in{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.2rem);
  padding-block:clamp(.8rem,1.4vw,1.05rem); }
.marchio{ flex:none; line-height:0; }
.marchio img{ width:clamp(126px,12vw,168px); }
.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.7rem); margin-left:auto; }
.nav > a,.nav-bottone{ font-size:.82rem; font-weight:500; letter-spacing:.03em;
  color:var(--su-carta); text-decoration:none; padding:.4rem 0; position:relative; white-space:nowrap; }
.nav > a::after,.nav-bottone::after{ content:""; position:absolute; left:0; right:0; bottom:.1rem;
  height:1px; background:var(--azione); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.nav > a:hover::after,.nav-bottone:hover::after,.nav > a[aria-current]::after{ transform:scaleX(1); }
.nav-gruppo{ position:relative; }
.nav-bottone{ display:inline-flex; align-items:center; gap:.38rem; }
.nav-freccia{ width:.4rem; height:.4rem; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s ease; }
.nav-gruppo:hover .nav-freccia,.nav-gruppo:focus-within .nav-freccia{ transform:translateY(1px) rotate(225deg); }
.nav-sotto{ position:absolute; top:calc(100% + .45rem); left:50%; translate:-50% 0;
  display:grid; gap:.1rem; min-width:11.5rem; padding:.55rem;
  background:var(--carta); border:1px solid var(--filo);
  box-shadow:0 16px 40px -20px rgba(var(--rgb-ombra),.36);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .24s ease, transform .24s ease, visibility .24s; }
.nav-gruppo:hover .nav-sotto,.nav-gruppo:focus-within .nav-sotto{ opacity:1; visibility:visible; transform:none; }
.nav-sotto a{ display:block; padding:.5rem .65rem; font-size:.85rem; text-decoration:none;
  color:var(--su-carta); transition:background .2s ease, color .2s ease; }
.nav-sotto a:hover{ background:var(--carta-3); color:var(--azione-testo); }
.testata-azioni{ display:flex; align-items:center; gap:.55rem; flex:none; }

.azione{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--testo); font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; padding:.88rem 1.45rem;
  border:1px solid transparent; white-space:nowrap;
  transition:background .26s ease,color .26s ease,border-color .26s ease,transform .26s ease; }
.azione:hover{ transform:translateY(-2px); }
.a-piena{ background:var(--azione); color:var(--carta); }
.a-piena:hover{ background:var(--azione-su); }
.a-filo{ border-color:var(--filo-forte); color:var(--su-carta); }
.a-filo:hover{ border-color:var(--inchiostro); background:var(--inchiostro); color:var(--carta); }
.a-carta{ background:var(--carta); color:var(--azione-cupa); }
.a-carta:hover{ background:var(--carta-2); }
.a-piccola{ padding:.6rem 1rem; font-size:.73rem; }
.a-grande{ padding:1rem 1.9rem; }

.freccia{ font-family:var(--testo); font-size:.85rem; font-weight:600;
  color:var(--azione-testo); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; }
.freccia::after{ content:""; width:1.3rem; height:1px; background:currentColor;
  transition:width .3s cubic-bezier(.22,.61,.36,1); }
.freccia:hover::after{ width:2.1rem; }
.sul-scuro .freccia{ color:var(--osso); }

.hamburger{ display:none; width:2.4rem; height:2.4rem; position:relative; flex:none; }
.hamburger span{ position:absolute; left:.45rem; right:.45rem; height:1px; background:var(--su-carta); }
.hamburger span:nth-child(1){ top:.95rem; }
.hamburger span:nth-child(2){ top:1.45rem; }
.tendina{ position:fixed; inset:0; z-index:200; background:var(--carta);
  display:grid; align-content:center; justify-items:center; gap:.2rem;
  padding:2rem var(--gutter); opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s; }
/* 🔴 senza questa riga il pannello resta steso sulla finestra e blocca tutto:
   .tendina{display:grid} vince sull'attributo [hidden] del browser. */
.tendina[hidden]{ display:none; }
.tendina[data-aperta]{ opacity:1; visibility:visible; }
/* il grid della tendina si applica al <nav>, che è UN solo elemento: senza
   questa riga le voci restano in fila sulla stessa riga. */
.tendina nav{ display:grid; justify-items:center; gap:.1rem; width:100%; }
.tendina a{ font-family:var(--display); font-size:clamp(1.5rem,6vw,2.2rem);
  color:var(--su-carta); text-decoration:none; padding:.3rem 0;
  opacity:0; transform:translateY(12px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), color .2s; }
.tendina[data-aperta] a{ opacity:1; transform:none; }
.tendina a:hover{ color:var(--azione-testo); }
.tendina .occhiello{ margin:1.2rem 0 .2rem; }
/* .tendina a vince su .azione per specificità: il pulsante prendeva il serif */
.tendina .azione{ font-family:var(--testo); margin-top:1.6rem; font-size:.76rem; }
.chiudi{ position:absolute; top:1rem; right:var(--gutter); width:2.6rem; height:2.6rem;
  font-size:1.7rem; line-height:1; color:var(--su-carta); }

/* ═══ 5 · IL VARCO — apertura di pagina, a due colonne ════════
   🔴 Era una colonna da 604 px con 596 px di vuoto ai lati, e la foto
   verticale schiacciata in 16:9. Ora il testo sta a sinistra e il
   ritratto a destra, nel suo formato: la finestra è piena.        */
.varco{ padding-block:clamp(2.6rem,4.6vw,4.4rem) 0; }
.varco-doppio{
  --canale:clamp(2rem,4vw,3.6rem);   /* il canale fra le due colonne */
  display:grid; gap:var(--canale);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
}
.varco-doppio > *{ min-width:0; }
.varco h1{ margin-bottom:1.2rem; }
.varco-azioni{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }

.finestra{ overflow:hidden; position:relative; background:var(--carta-3); aspect-ratio:4/5; }
.finestra img{ width:100%; height:100%; object-fit:cover; }
.finestra.larga{ aspect-ratio:3/2; }
.finestra.quadra{ aspect-ratio:1/1; }
html.js .finestra img{ clip-path:inset(0 0 100% 0); transform:scale(1.05);
  transition:clip-path .9s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1); }
html.js .finestra.viva img{ clip-path:inset(0 0 0 0); transform:none; }

/* ═══ 6 · I DATI ═════════════════════════════════════════════ */
.dati{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2.2rem);
  padding-block:clamp(1.8rem,3vw,2.6rem); margin-top:clamp(2rem,4vw,3.4rem);
  border-block:1px solid var(--filo); }
.dato b{ display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem); line-height:1;
  color:var(--inchiostro); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.dato span{ display:block; margin-top:.5rem; font-size:.73rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--su-carta-tenue); line-height:1.4; }
.sul-scuro .dato b{ color:var(--su-fascia); }
.sul-scuro .dato span{ color:var(--su-inchiostro-tenue); }
.sul-scuro .dati{ border-block-color:rgba(var(--rgb-su-fascia),.22); }

/* ═══ 7 · I BRANI — impianto editoriale a due colonne ═════════
   🔴 Prima ogni sezione era una colonna centrata da 650-790 px con
   fino a 596 px di vuoto ai lati. Ora il titolo sta a sinistra e il
   testo a destra: la larghezza si riempie e la lettura resta a 62ch. */
.brano{ padding-block:var(--sez); }
.alterno{ background:var(--carta-2); }
.sul-scuro{ background:var(--inchiostro-cupo); color:var(--su-inchiostro); }
.sul-scuro h1,.sul-scuro h2,.sul-scuro h3{ color:var(--su-fascia); }
.sul-scuro h2 em{ color:var(--osso); }
.sul-scuro .lede,.sul-scuro .forte{ color:var(--su-fascia); }
.sul-scuro .prosa{ color:var(--su-inchiostro); }

.duetto{
  display:grid; gap:clamp(1.6rem,3.4vw,3.4rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.duetto > *{ min-width:0; }

.figura-testo{ display:grid; gap:clamp(1.8rem,3.6vw,3.4rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; }
.figura-testo > *{ min-width:0; }
.figura-testo.rovescia > .finestra{ order:2; }

.scheda{ background:var(--carta); border:1px solid var(--filo);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .3s ease, transform .3s ease; }
.scheda:hover{ border-color:var(--filo-forte); transform:translateY(-3px); }
.scheda p{ font-size:.96rem; margin:0 0 .5rem; }
.scheda p:last-child{ margin-bottom:0; }
.sul-scuro .scheda{ background:transparent; border-color:rgba(var(--rgb-su-fascia),.24); }

/* 🔴 NIENTE auto-fit: le colonne sono dichiarate a ogni soglia, così
   non capita mai una riga con un elemento solo. */
.griglia-2{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(2,1fr); }
.griglia-3{ display:grid; gap:clamp(1rem,2vw,1.6rem); grid-template-columns:repeat(3,1fr); }

.affermazione{ font-family:var(--display);
  font-size:clamp(1.55rem,1.1rem + 1.9vw,2.6rem); line-height:1.16;
  color:var(--su-carta); margin:0; }
.sul-scuro .affermazione{ color:var(--su-fascia); }

/* ═══ 8 · IL PERCORSO — si vede tutto, non si scorre ══════════
   🔴 Prima erano quattro schede da far scorrere a mano con le frecce.
   Daniela chiedeva l'opposto: «mi piacerebbe fosse più in evidenza il
   fatto che è un percorso, e che il percorso passa attraverso quei
   passaggi». Adesso stanno tutti e quattro sotto gli occhi, uniti
   dalla linea che li attraversa.                                   */
.campo{ padding-block:var(--sez); }
.campo-testa{ margin-bottom:clamp(1.8rem,3.4vw,2.8rem); }
.mosse{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.7rem);
  position:relative; padding-top:2.4rem;
}
/* ── LA LINEA DEL TEMPO ──────────────────────────────────────
   Cresce dove passi il puntatore. Non e' un vezzo: e' la stessa
   grammatica della firma — un filetto che si allunga — applicata
   al blocco che racconta un percorso.

   --avanzamento (0→1) lo scrive il JS una volta per fotogramma
   sull'intero elenco; --p (0→1) e' quanto la linea ha superato
   QUEL passaggio. Qui dentro si muovono solo scaleX e opacity.
   Senza JavaScript --avanzamento resta 1: la linea e' piena e
   tutti i punti sono accesi. Non si perde niente.               */
.mosse{ --avanzamento:1; }

/* la traccia: sempre visibile, tenue */
.mosse::before{
  content:""; position:absolute; top:.62rem; left:6%; right:6%; height:1px;
  background:rgba(var(--rgb-su-fascia),.22);
}
/* la linea che cresce */
.mosse::after{
  content:""; position:absolute; top:.62rem; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg, rgba(var(--rgb-osso),.55), var(--osso));
  transform-origin:0 50%;
  transform:scaleX(var(--avanzamento));
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.mosse[data-insegue]::after{ transition:transform .09s linear; }

.mossa{
  --p:1;
  position:relative; display:flex; flex-direction:column; gap:.45rem;
  transition:opacity .35s ease;
}
/* il punto: si accende quando la linea lo raggiunge */
.mossa::before{
  content:""; position:absolute; top:-1.85rem; left:calc(50% - 4px);
  width:8px; height:8px; border-radius:50%;
  background:var(--inchiostro-cupo);
  border:1px solid rgba(var(--rgb-su-fascia),.4);
  box-shadow:0 0 0 0 rgba(var(--rgb-osso),0);
  transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
/* acceso: il JS mette la classe quando la linea ha superato il punto.
   (C'era anche un selettore [style*="--p:1"]: ridondante e fragile —
   bastava un --i:1 vicino per confondere le idee. Tolto.) */
.mossa.acceso::before{
  background:var(--osso); border-color:var(--osso);
  transform:scale(1.25);
}
/* quello su cui sei: il punto respira */
.mossa.puntato::before{
  transform:scale(1.7);
  box-shadow:0 0 0 5px rgba(var(--rgb-osso),.14);
}
/* mentre punti un passaggio, gli altri si fanno da parte */
.mosse[data-insegue] .mossa{ opacity:.5; }
.mosse[data-insegue] .mossa.acceso{ opacity:1; }

/* il numero del passaggio: un filetto che si allunga sotto */
.mossa-n{ position:relative; display:inline-block; padding-bottom:.4rem; }
.mossa-n::after{
  content:""; position:absolute; left:0; bottom:0; width:1.6rem; height:1px;
  background:var(--osso); transform:scaleX(var(--p)); transform-origin:0 50%;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.mossa.puntato .mossa-n::after{ width:2.6rem; }

@media (prefers-reduced-motion:reduce){
  .mosse::after,.mossa::before,.mossa,.mossa-n::after{ transition:none; }
  .mosse[data-insegue] .mossa{ opacity:1; }
}
.mossa-n{ font-family:var(--testo); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; color:var(--osso); margin:0 0 .1rem;
  font-variant-numeric:tabular-nums; }
.mossa h3{ margin:0 0 .3rem; }
.mossa p{ margin:0 0 .6rem; color:var(--su-inchiostro); font-size:.95rem; }
.mossa p:last-child{ margin-bottom:0; }
.mossa .prova{ margin-top:auto; }

/* ═══ 9 · FAQ ════════════════════════════════════════════════ */
.faq{ border-top:1px solid var(--filo); max-width:74ch; }
.faq-voce{ border-bottom:1px solid var(--filo); }
.faq-voce > button{ width:100%; display:flex; align-items:flex-start;
  justify-content:space-between; gap:1.2rem; padding:1.15rem 0; text-align:left;
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .45vw,1.35rem);
  line-height:1.25; color:var(--su-carta); }
.faq-piu{ flex:none; width:.9rem; height:.9rem; position:relative; margin-top:.42em; }
.faq-piu::before,.faq-piu::after{ content:""; position:absolute; inset:50% 0 auto 0;
  height:1px; background:var(--azione); transition:transform .32s cubic-bezier(.22,.61,.36,1); }
.faq-piu::after{ transform:rotate(90deg); }
.faq-voce[data-aperta] .faq-piu::after{ transform:rotate(0deg); }
/* 14/09: 380 ms erano un ricalcolo del layout di tutta la pagina a ogni
   apertura. Accorciato a 220: si apre lo stesso, si sobbalza molto meno. */
.faq-corpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s cubic-bezier(.22,.61,.36,1); }
.faq-voce[data-aperta] .faq-corpo{ grid-template-rows:1fr; }
.faq-corpo > div{ overflow:hidden; }
.faq-corpo p{ padding-bottom:1.2rem; margin:0; max-width:64ch; }

/* ═══ 10 · BLOG ══════════════════════════════════════════════
   🔴 Prima: `auto-fit` su 5 articoli → 4+1 orfano a 1280 e 1440 px,
   2+2+1 a 820. E schede di altezze diverse.
   Adesso l'indice è UN articolo in evidenza a tutta larghezza + una
   griglia 2×2 con gli altri quattro: non avanza mai niente.        */
.post{ display:flex; flex-direction:column; gap:.65rem; text-decoration:none; color:inherit; height:100%; }
.post-img{ display:block; overflow:hidden; background:var(--carta-3); aspect-ratio:4/3; }
.post-img img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.post:hover .post-img img{ transform:scale(1.04); }
.post > span, .post-grande > div > span{ display:block; }
.post-title{ font-family:var(--display); font-size:clamp(1.15rem,1.03rem + .5vw,1.42rem);
  line-height:1.2; color:var(--su-carta); }
.post-hook{ font-size:.94rem; color:var(--su-carta-corpo); }
.post-meta{ font-size:.73rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--su-carta-tenue); margin-top:auto; }
.post-cta{ font-size:.79rem; font-weight:600; color:var(--azione-testo);
  display:inline-flex; align-items:center; gap:.4rem; }
.post-cta::after{ content:""; width:1.1rem; height:1px; background:currentColor;
  transition:width .3s cubic-bezier(.22,.61,.36,1); }
.post:hover .post-cta::after{ width:1.9rem; }
.evidenza{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--azione); border:1px solid var(--azione);
  padding:.26rem .55rem; align-self:flex-start; }

/* l'articolo in evidenza: foto a sinistra, testo a destra.
   🔴 `.post` e' una colonna flex; `.post-grande` la trasforma in griglia a
   due colonne, e dentro alla seconda colonna gli <span> tornavano INLINE:
   badge, titolo, sommario e data finivano tutti sulla stessa riga. Era
   questo il «tutto storto». La seconda colonna deve tornare una colonna. */
.post-grande{ display:grid; gap:clamp(1.4rem,3vw,2.8rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
  padding-bottom:clamp(1.6rem,3vw,2.6rem); border-bottom:1px solid var(--filo); }
.post-grande > div{ min-width:0; }
.post-grande > div:last-child{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.post-grande .post-img{ aspect-ratio:3/2; }
.post-grande .post-title{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem); }
.post-grande .post-hook{ font-size:1.04rem; }
.post-grande .post-meta{ margin-top:0; }

/* la griglia degli altri quattro: sempre 2×2, mai un orfano */
.griglia-post{ display:grid; gap:clamp(1.2rem,2.4vw,2.2rem); grid-template-columns:repeat(2,1fr); }
/* le tre anteprime in home: 3 colonne fisse, mai 2+1 */
.griglia-anteprime{ display:grid; gap:clamp(1.2rem,2.4vw,2rem); grid-template-columns:repeat(3,1fr); }

.briciole{ font-size:.74rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--su-carta-tenue); margin:0 0 1.2rem; }
.briciole a{ color:inherit; text-decoration:none; }
.briciole a:hover{ color:var(--azione-testo); }
.art-meta{ display:flex; gap:1.1rem; font-size:.74rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--su-carta-tenue); margin-bottom:1.2rem; }
.art-corpo{ font-size:clamp(1.03rem,1rem + .25vw,1.13rem); line-height:1.8; }
.art-corpo .prosa{ max-width:68ch; }
.art-corpo h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin:2.2rem 0 .9rem; }
.art-corpo h3{ margin:1.7rem 0 .7rem; }
.art-figura{ margin:2rem 0; max-width:68ch; }

/* ═══ 11 · MODULO ════════════════════════════════════════════ */
.modulo{ display:grid; gap:1rem; max-width:44rem; }
.campo-doppio{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
.campo-modulo{ display:grid; gap:.4rem; }
.campo-modulo label{ font-size:.72rem; font-weight:600; letter-spacing:.09em;
  /* 🔴 Era `--su-carta-tenue`: misurato 3,02:1 sulla carta-2 del modulo,
     sotto la soglia di 4,5 per un testo di 11,5 px. Il token tenue e'
     verificato sulla carta-3, non su questa. Va sul corpo, che tiene
     7:1 in tutte e sei le palette. */
  text-transform:uppercase; color:var(--su-carta-corpo); }
.campo-modulo input,.campo-modulo select,.campo-modulo textarea{
  font:inherit; font-size:1rem; color:var(--su-carta); background:var(--carta);
  border:1px solid var(--filo); padding:.8rem .95rem; width:100%; border-radius:0;
  transition:border-color .25s ease; }
.campo-modulo input:focus,.campo-modulo select:focus,.campo-modulo textarea:focus{
  outline:none; border-color:var(--inchiostro); }
.campo-modulo textarea{ min-height:8.5rem; resize:vertical; }
.consenso{ display:flex; gap:.65rem; align-items:flex-start; font-size:.89rem; }
.consenso input{ margin-top:.3rem; accent-color:var(--azione); }
.nota-campo{ font-size:.84rem; color:var(--su-carta-tenue); }
.esito{ padding:.9rem 1.1rem; border:1px solid var(--filo); font-size:.93rem; }
.esito[data-stato="ok"]{ border-color:var(--inchiostro); }
.esito[data-stato="ko"]{ border-color:var(--azione); }
.news-form{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:flex-end; margin-top:1.2rem; max-width:34rem; }
.news-form .campo-modulo{ flex:1 1 14rem; }

/* ═══ 12 · PIEDE ═════════════════════════════════════════════ */
.piede{ background:var(--inchiostro-cupo); color:var(--su-inchiostro);
  padding-block:clamp(2.8rem,5vw,4.2rem) 1.8rem; }
.piede h2,.piede h3{ color:var(--su-fascia); }
.piede-in{ display:grid; gap:clamp(1.8rem,3.4vw,2.8rem); grid-template-columns:1.3fr 1fr 1fr 1.4fr; }
.piede img{ width:142px; margin-bottom:.9rem; filter:var(--marchio-su-fascia); }
.piede-t{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--su-inchiostro-tenue); margin:0 0 .8rem; }
.piede-col a:not(.piede-social a){ display:block; padding:.25rem 0; font-size:.91rem;
  color:var(--su-inchiostro); text-decoration:none; transition:color .2s ease; }
.piede-col a:not(.piede-social a):hover{ color:var(--su-fascia); }
/* ── LE PIATTAFORME ────────────────────────────────────────────
   🔴 Terza stesura, ed e' la prima misurata.

   Erano cerchi con un filo da 1 px e i glifi ridimensionati a occhio con
   due valori scritti a mano. Il committente: «sono fatte malissimo e
   storte». Aveva ragione, e il difetto era misurabile: preso il
   `getBBox()` di ogni tracciato, LinkedIn ha il suo centro d'inchiostro
   a (12,5 · 12,2) invece che a (12 · 12) — spostato in basso a destra
   dentro al proprio riquadro. Quello era lo storto. E l'area coperta
   andava dal 53% di YouTube al 69% di Facebook: pesi ottici diversi.

   Adesso ogni glifo porta un `transform` CALCOLATO sulla sua geometria:
   lo trasla perche' il centro dell'inchiostro cada a (12 · 12), e lo
   scala perche' tutti abbiano la stessa larghezza ottica — 19 unita',
   21 per YouTube, che essendo largo e basso a parita' di riquadro
   sembrerebbe piu' piccolo.

   La piastrella e' quadrata con gli angoli tondi, piena e senza
   contorno, come il riferimento portato dal committente. I colori pero'
   sono quelli della palette attiva, non quelli della foto.            */
.piede-social{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.3rem; }
.piede-col .piede-social a{
  width:2.9rem; height:2.9rem; border-radius:.85rem; padding:0; border:0;
  display:grid; place-items:center;
  background:rgba(var(--rgb-su-fascia),.085);
  color:var(--osso);
  transition:background .28s ease, color .28s ease,
             transform .28s cubic-bezier(.22,.61,.36,1);
}
.piede-col .piede-social a:hover,.piede-col .piede-social a:focus-visible{
  background:var(--accento); color:var(--inchiostro);
  transform:translateY(-2px);
}
.piede-social svg{
  /* una misura sola per tutti: la differenza la fa il transform del
     tracciato, non un ritocco per icona */
  width:1.45rem; height:1.45rem; fill:currentColor; display:block;
}

.piede-barra{ margin-top:clamp(2.2rem,4vw,3.2rem); padding-top:1.4rem;
  border-top:1px solid rgba(var(--rgb-su-fascia),.14);
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; justify-content:space-between;
  font-size:.78rem; color:var(--su-inchiostro-tenue); }
.piede-barra p{ margin:0; }
.piede-legale a{ color:inherit; text-decoration:none; }
.piede-legale a:hover{ color:var(--su-fascia); }

/* ═══ 13 · PEZZI MINORI ══════════════════════════════════════ */
/* 🔴 14/09/2026 — LE TESTIMONIANZE E LE RECENSIONI SI DEVONO RICONOSCERE.
   La cliente l'ha chiesto due volte nel PDF dell'11/09: «vale la pena creare
   un box o una cornice per far capire che sono testimonianze?». Aveva ragione:
   prima erano distinte solo da un filo da 1 px sopra, e in mezzo al testo non
   si capiva che era qualcun altro a parlare.
   Il riquadro riusa l'idioma che il sito ha gia' (.dopo-invio): fondo appena
   piu' caldo, filo sottile, e una virgoletta grande in alto a sinistra. */
.prova{ margin:1.6rem 0 0; padding:1.35rem 1.5rem 1.15rem; max-width:62ch;
  background:var(--carta-2); border:1px solid var(--filo);
  border-left:3px solid var(--accento); border-radius:0 var(--raggio) var(--raggio) 0; }
.prova p{ font-family:var(--display); font-size:1.08em; line-height:1.32;
  color:var(--su-carta); margin:0 0 .55rem; }
.prova cite{ font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--su-carta-tenue); }
.sul-scuro .prova{ background:rgba(var(--rgb-carta),.07);
  border-color:rgba(var(--rgb-su-fascia),.20); border-left-color:var(--su-fascia); }
.sul-scuro .prova p{ color:var(--su-fascia); }
.sul-scuro .prova cite{ color:var(--su-inchiostro-tenue); }
.piattaforme{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 0; }
.dopo-invio{ margin-top:1.4rem; padding:1.2rem 1.3rem; border:1px solid var(--filo); background:var(--carta-2); }
.dopo-invio h3{ margin-bottom:.4rem; }
.dopo-coral{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--filo); }

/* ═══ 14 · COMPARSA ══════════════════════════════════════════ */
html.js .vieni{ opacity:0; transform:translateY(14px); }
html.js .vieni.viva{ opacity:1; transform:none; transition:opacity var(--tempo), transform var(--tempo); }
html.js .r1.viva{ transition-delay:.07s; }
html.js .r2.viva{ transition-delay:.14s; }
html.js .r3.viva{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){
  html.js .vieni{ opacity:1!important; transform:none!important; transition:none!important; }
  html.js .finestra img{ clip-path:none!important; transform:none!important; transition:none!important; }
}

/* ═══ 15 · RESPONSIVE — soglie dichiarate, niente sorprese ════ */
@media (max-width:1080px){
  .piede-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1000px){
  .nav,.testata-azioni .a-filo{ display:none; }
  .hamburger{ display:block; }
  .testata-azioni{ margin-left:auto; }
  /* il percorso da telefono: vedi la sezione 31, diventa verticale */
  .dati{ grid-template-columns:repeat(2,1fr); gap:1.5rem 1.2rem; }
}
@media (max-width:900px){
  .varco-doppio{ grid-template-columns:1fr; }
  .varco-doppio .finestra{ aspect-ratio:3/2; }
  .duetto,.figura-testo{ grid-template-columns:1fr; }
  .figura-testo.rovescia > .finestra{ order:0; }
  .figura-testo .finestra{ aspect-ratio:3/2; }
  .post-grande{ grid-template-columns:1fr; }
  /* tre anteprime in colonna: mai 2+1 */
  .griglia-anteprime,.griglia-3{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .testata-azioni .azione{ display:none; }
  .testata-in{ justify-content:space-between; }
  .griglia-post,.griglia-2,.campo-doppio{ grid-template-columns:1fr; }
  .piede-in{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .marchio img{ width:118px; }
  .dati{ grid-template-columns:1fr; }
}
@media print{ .testata,.tendina,.apertura{ display:none; } body{ background:#fff; color:#000; } }

/* ═══ 16 · LE SEZIONI DI SOLA PROSA ══════════════════════════
   🔴 Restavano con il titolo a tutta larghezza e sotto una colonna
   di testo da 62ch: metà riga vuota. È l'ultima sacca di «spazio
   vuoto» che restava dopo il rifacimento.

   Qui il titolo va a sinistra e il testo a destra — impaginato
   editoriale — così la larghezza si riempie e la riga di lettura
   resta comunque corta. Si applica da sola a ogni sezione che
   contiene un <h2> e un blocco di testo come figli diretti:
   nessuna classe da ricordare, nessuna pagina da non dimenticare.

   `:has()` non è supportato dai browser molto vecchi: lì la sezione
   resta come prima, leggibile. È un miglioramento, non un requisito. */
@supports selector(:has(*)) {
  .brano > .misura:has(> h2):has(> .prosa),
  .brano > .misura:has(> h2):has(> .elenco),
  .campo > .misura:has(> h2):has(> .prosa){
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    column-gap:clamp(1.8rem,3.6vw,3.6rem);
    row-gap:.4rem;
    align-items:start;
  }
  .brano > .misura:has(> h2):has(> .prosa) > .occhiello,
  .brano > .misura:has(> h2):has(> .prosa) > h2,
  .brano > .misura:has(> h2):has(> .elenco) > .occhiello,
  .brano > .misura:has(> h2):has(> .elenco) > h2{
    grid-column:1; margin-right:0;
  }
  .brano > .misura:has(> h2):has(> .prosa) > h2,
  .brano > .misura:has(> h2):has(> .elenco) > h2{
    position:sticky; top:calc(var(--alt-testata, 4.5rem) + 1.4rem);
  }
  .brano > .misura:has(> h2):has(> .prosa) > *:not(.occhiello):not(h2),
  .brano > .misura:has(> h2):has(> .elenco) > *:not(.occhiello):not(h2){
    grid-column:2;
  }
  /* il testo può respirare: nella colonna destra 62ch non è più un limite
     che lascia vuoto, è la misura giusta */
  .brano > .misura:has(> h2) > .prosa,
  .brano > .misura:has(> h2) > .elenco{ max-width:none; }

  @media (max-width:900px){
    .brano > .misura:has(> h2):has(> .prosa),
    .brano > .misura:has(> h2):has(> .elenco),
    .campo > .misura:has(> h2):has(> .prosa){ grid-template-columns:1fr; }
    .brano > .misura:has(> h2) > *{ grid-column:1 !important; }
    /* 🔴 19/09/2026 — IL TITOLO CHE COPRIVA IL TESTO SU MOBILE.
       Daniela, 14/09, da iPhone: «questo titolo scende e copre il testo».
       Questo reset ESISTEVA GIÀ, ma non si applicava mai: la regola che
       rende il titolo `sticky` (riga ~743) ha un `:has(> .prosa)` in più,
       cioè UNA CLASSE IN PIÙ, e quindi vinceva. Il titolo restava
       appiccicato anche sotto i 900px e galleggiava sopra il paragrafo.
       Misurato su WebKit (il motore di Safari) a iPhone 13: il titolo
       stava a 86→142 e il paragrafo a 55→136, 50px uno sopra l'altro.
       ⚠️ Su Chromium NON si vedeva, e il mio primo controllo automatico
       lo mancava perché escludeva gli elementi sticky.
       La correzione: gli stessi identici selettori della regola sticky,
       così le specificità pareggiano e vince l'ultima, che è questa. */
    .brano > .misura:has(> h2):has(> .prosa) > h2,
    .brano > .misura:has(> h2):has(> .elenco) > h2{
      position:static; top:auto; margin-bottom:1rem;
    }
  }
}

/* ═══ 17 · LA FASCIA DI CHIUSURA ═════════════════════════════
   Il documento del 28/08 §4 chiede che dopo le FAQ resti SOLO il
   pulsante. Un pulsante solo, allineato a sinistra su una fascia
   larga 1180 px, sembrava un pezzo dimenticato: occupava il 23%
   della riga. Centrato, è una chiusura. */
@supports selector(:has(*)) {
  .brano > .misura:has(> .azione:only-child){
    display:flex; justify-content:center; padding-block:.4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   18 · LA GRAMMATICA DELL'INTERAZIONE

   Una sola regola, ripetuta ovunque, invece di tanti effetti diversi:

     ① quando punti una cosa, le altre si fanno da parte
     ② quello che punti risponde con UN FILETTO CHE CRESCE

   È la stessa mossa della firma — i due filetti che si allargano — e
   dello stesso percorso. Il sito ha un solo gesto, e lo fa bene.
   Niente ombre, niente rimbalzi, niente colori nuovi: solo linee,
   opacità e millimetri. È così che resta serio.

   Tutto passa da `transform` e `opacity`. `:has()` non è supportato
   dai browser molto vecchi: lì i blocchi restano fermi e leggibili.
   ═══════════════════════════════════════════════════════════════ */

@supports selector(:has(*)) {

  /* ① — puntare una cosa acquieta le altre ──────────────────── */
  .dati:has(.dato:hover) .dato:not(:hover),
  .griglia-2:has(.scheda:hover) .scheda:not(:hover),
  .griglia-3:has(.scheda:hover) .scheda:not(:hover),
  .griglia-post:has(.post:hover) .post:not(:hover),
  .griglia-anteprime:has(.post:hover) .post:not(:hover),
  .piattaforme:has(.azione:hover) .azione:not(:hover),
  .voci:has(li:hover) li:not(:hover){
    opacity:.45;
  }
  .dati .dato,
  .griglia-2 .scheda,.griglia-3 .scheda,
  .griglia-post .post,.griglia-anteprime .post,
  .piattaforme .azione{
    transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1),
               border-color .34s ease;
  }
}

/* ② — il filetto che cresce ─────────────────────────────────── */

/* i numeri: una linea sotto la cifra, che si allunga */
.dato{ position:relative; padding-bottom:.2rem; }
.dato b{ position:relative; display:inline-block; padding-bottom:.35rem; }
.dato b::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:2.2rem;
  background:var(--azione); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.dato:hover b::after{ transform:scaleX(1); }
.sul-scuro .dato b::after{ background:var(--osso); }

/* le schede: il filetto corre lungo il bordo di sopra */
.scheda{ position:relative; }
.scheda::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; right:0;
  background:var(--azione); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.scheda:hover::before{ transform:scaleX(1); }
.sul-scuro .scheda::before{ background:var(--osso); }
/* il sollevamento resta, ma appena accennato: due pixel, non sei */
.scheda:hover{ transform:translateY(-2px); }

/* le schede del blog: la stessa linea sopra l'immagine */
.post{ position:relative; }
.post-img{ position:relative; }
.post-img::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--azione); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1); z-index:1;
}
.post:hover .post-img::after{ transform:scaleX(1); }

/* le voci del piede e del menu: già rispondono così, si allineano i tempi */
.piede-col a:not(.piede-social a){ position:relative; display:inline-block; padding-bottom:.1rem; }
.piede-col a:not(.piede-social a)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; right:0;
  background:var(--su-fascia); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.piede-col a:not(.piede-social a):hover::after{ transform:scaleX(1); }

/* la fisarmonica: quando una domanda si apre, il filetto sotto si allunga */
.faq-voce{ position:relative; }
.faq-voce::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; right:0;
  background:var(--azione); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.faq-voce[data-aperta]::after{ transform:scaleX(1); }
.faq-voce > button{ transition:padding-left .34s cubic-bezier(.22,.61,.36,1); }
.faq-voce:hover > button{ padding-left:.5rem; }

/* i pulsanti: il colore entra da sinistra invece di accendersi tutto insieme */
.azione{ position:relative; overflow:hidden; isolation:isolate; }
.azione::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:currentColor; opacity:.1;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.azione:hover::before{ transform:scaleX(1); }
.azione:hover{ transform:translateY(-1px); }

/* i richiami a freccia: già crescono. Si allunga anche il passo. */
.freccia{ transition:gap .34s cubic-bezier(.22,.61,.36,1); }
.freccia:hover{ gap:.7rem; }

/* le finestre delle fotografie: il ritratto respira, non zooma */
.finestra img{ transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.figura-testo .finestra:hover img,
.varco-doppio .finestra:hover img{ transform:scale(1.025); }

@media (prefers-reduced-motion:reduce){
  .dato b::after,.scheda::before,.post-img::after,.piede-col a:not(.piede-social a)::after,
  .faq-voce::after,.azione::before,.finestra img,.freccia{ transition:none; }
  .scheda:hover,.azione:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   19 · 🔭 IL CAMPO — e l'arrivo in pagina

   Il sito era «elegante ma spento»: fatto bene, ma non succedeva
   niente. Il difetto era proprio nella firma — due filetti da 1 px
   al 38% di opacità, che nessuno vedeva.

   Qui il campo diventa una cosa che si vede: un reticolo di linee
   sottilissime che ALL'ARRIVO si allarga dall'orizzonte, e che si
   scosta al passaggio del puntatore. È la frase del copy, messa in
   scena. Il disegno lo fa campo.js su canvas.
   ═══════════════════════════════════════════════════════════════ */
[data-campo]{ position:relative; isolation:isolate; }
[data-campo] > *:not(.campo-tela){ position:relative; z-index:1; }
.campo-tela{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  /* si dissolve ai bordi: il campo non ha un contorno netto */
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 100%);
}

/* ── L'ARRIVO ─────────────────────────────────────────────────
   Il titolo non compare: sale da dietro il proprio bordo, come una
   riga di piombo che si alza. Un solo gesto, un secondo, e la pagina
   è successa. Il resto entra dopo, uno alla volta.                */
/* 🔴 `html.js .varco h1` nascondeva QUALUNQUE titolo d'apertura, ma a
   riscoprirlo è il sistema delle comparse, che guarda solo gli elementi
   con `.vieni`. Sulla 404 il titolo non ce l'aveva: restava ritagliato
   al 105%, cioè INVISIBILE, per sempre. Stessa storia per i pulsanti.
   Adesso si nasconde solo quello che qualcuno ha il compito di
   rivelare: chi non ha `.vieni` si vede e basta. */
html.js .varco h1.vieni{
  clip-path:inset(0 0 105% 0);
  transform:translateY(.14em);
}
html.js .varco h1.vieni.viva{
  clip-path:inset(0 0 -12% 0);
  transform:none;
  transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1) .12s,
             transform 1.15s cubic-bezier(.16,.84,.3,1) .12s;
}
/* l'occhiello: le lettere si stringono al loro posto */
html.js .varco > .misura .occhiello,
html.js .varco .varco-doppio .occhiello{
  opacity:0; letter-spacing:.5em;
}
html.js .varco .occhiello.viva{
  opacity:1; letter-spacing:.18em;
  transition:opacity .7s ease, letter-spacing 1.1s cubic-bezier(.16,.84,.3,1);
}
/* i pulsanti entrano per ultimi */
html.js .varco-azioni.vieni{ opacity:0; transform:translateY(10px); }
html.js .varco-azioni.viva{
  opacity:1; transform:none;
  transition:opacity .6s ease .55s, transform .6s cubic-bezier(.22,.61,.36,1) .55s;
}

/* ── il ritratto respira col puntatore ───────────────────────── */
.varco-doppio .finestra{ will-change:transform; }
html.js .varco-doppio .finestra{
  transform:translate3d(calc(var(--mx,0) * 7px), calc(var(--my,0) * 7px), 0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html.js .varco h1,html.js .varco h1.vieni.viva{ clip-path:none; transform:none; transition:none; }
  html.js .varco .occhiello{ opacity:1; letter-spacing:.18em; transition:none; }
  html.js .varco-azioni{ opacity:1; transform:none; transition:none; }
  html.js .varco-doppio .finestra{ transform:none; transition:none; }
}

/* ═══ 20 · IL PASSAGGIO FRA LE PAGINE ════════════════════════
   Il sito diventa un documento solo: il contenuto si dissolve,
   il marchio e la testata restano fermi. Dove l'API non c'è, la
   navigazione è quella di sempre e non manca niente.            */
@view-transition{ navigation:auto; }
/* 🔴 14/09: erano .28s + .42s, cioè fino a sette decimi di secondo in cui,
   dopo il click, la pagina vecchia resta ferma e non risponde. È il «si blocca
   ogni tanto» che si sentiva di più. Adesso è un terzo: si vede ancora il
   passaggio, ma non si aspetta. */
::view-transition-old(root){ animation:esce .10s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:entra .16s cubic-bezier(0,0,.2,1) both; }
@keyframes esce{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } }
.testata{ view-transition-name:testata; }
.piede{ view-transition-name:piede; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

/* le regole generiche di comparsa non devono litigare con l'arrivo:
   sugli elementi della hero comanda il blocco 19, non `.vieni`. */
html.js .varco h1.vieni,
html.js .varco .occhiello.vieni,
html.js .varco-azioni.vieni{ transform:none; }
html.js .varco h1.vieni{ transform:translateY(.14em); }
html.js .varco h1.vieni.viva{ transform:none; }
html.js .varco-azioni.vieni{ transform:translateY(10px); }
html.js .varco-azioni.vieni.viva{ transform:none; }

/* ═══════════════════════════════════════════════════════════════
   21 · L'APERTURA — lo stile di CORAL, non la sua impaginazione

   Da CORAL si prende il MODO: angoli morbidi, ombre lunghe, carta con
   la grana, il inchiostro profondo come materia. Non si prende la scena:
   quella hero è tutta scura, con il ritratto dentro una cupola e il
   marchio che gira. Qui no.

   Qui l'apertura resta AVORIO — è quello che Daniela ha chiesto, e
   quello che distingue il suo sito da quello dell'azienda. Il inchiostro
   non è lo schermo: è una LASTRA che entra da destra, esce dai bordi
   e si ferma a metà. Il ritratto ci sta appoggiato sopra e la scavalca
   in basso. Il campo disegna sull'carta, davanti alla lastra.

   Due siti della stessa mano, non lo stesso sito.
   ═══════════════════════════════════════════════════════════════ */
.varco{
  position:relative; isolation:isolate;
  padding-block:clamp(3rem,6vw,5.4rem) clamp(2.6rem,5vw,4.4rem);
}
.varco-doppio{ position:relative; }

/* LA LASTRA — entra da destra, esce dal bordo, si ferma a metà altezza */
.varco-doppio::before{
  content:""; position:absolute; z-index:-1;
  top:calc(-1 * (var(--alt-testata, 4.6rem) + clamp(3rem,6vw,5.4rem)));
  bottom:22%;
  /* 🔴 Qui c'era `left:46%`, un numero a occhio. A 1280 px la colonna
     del testo arriva al 53,6%: la lastra partiva SOTTO al titolo e
     l'ultima parola di «Quello che hai costruito conta» finiva scura
     su scuro. Adesso il bordo non si indovina, si calcola: la prima
     colonna e' 1,12/2 = 56% di quel che resta tolto il canale, e la
     lastra comincia in mezzo al canale. Vale a ogni larghezza. */
  left:calc((100% - var(--canale)) * .56 + var(--canale) * .5);
  right:calc(50% - 50vw);
  border-radius:0 0 0 var(--raggio-lg);
  background:
    radial-gradient(120% 90% at 88% 0, rgba(var(--rgb-azione),.42), transparent 58%),
    linear-gradient(168deg, var(--inchiostro-fondo), var(--inchiostro-fondo) 78%);
  box-shadow:var(--ombra-m);
}

/* il ritratto: appoggiato sulla lastra, la scavalca in basso */
.varco-doppio .finestra{
  border-radius:var(--raggio-lg);
  box-shadow:var(--ombra-l);
  margin-top:clamp(1rem,3vw,2.6rem);
}
.varco-doppio .finestra::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(var(--rgb-ombra),.10); pointer-events:none;
}

/* il testo resta su carta: nessun contrasto forzato, nessuna inversione */
.varco h1{ color:var(--su-carta); }
.varco h1 em{ color:var(--azione-testo); }

/* i dati chiudono l'apertura, dentro il loro riquadro di carta */
.varco .dati{
  border:1px solid var(--filo); border-radius:var(--raggio-lg);
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.2rem,2.4vw,2rem);
  background:rgba(var(--rgb-carta),.55);
  box-shadow:var(--ombra-s);
}

/* 🔴 Qui c'era una media query scritta male: `left:-var(--gutter)` non è
   CSS valido, e con due `top` in fila la lastra finiva a mezza altezza —
   cioè DIETRO AL TITOLO, testo scuro su fondo scuro, e il ritratto restava
   fuori. Era questo il «colori messi a caso» su telefono.
   Adesso su schermo stretto la lastra sta dove deve: dietro al ritratto. */

/* ═══ 22 · PROFONDITÀ SU TUTTO ══════════════════════════════ */
.scheda{
  border-radius:var(--raggio);
  box-shadow:var(--ombra-s);
  transition:transform .45s var(--tempo), box-shadow .45s ease, border-color .3s ease;
}
.scheda:hover{ transform:translateY(-6px); box-shadow:var(--ombra-m); }
.scheda::before{ border-radius:var(--raggio) var(--raggio) 0 0; }

.finestra{ border-radius:var(--raggio-lg); }
.post-img{ border-radius:var(--raggio); }
.post-img::after{ border-radius:0 0 var(--raggio) var(--raggio); }
.post:hover .post-img{ box-shadow:var(--ombra-m); }
.post-img{ transition:box-shadow .45s ease; }
.campo-modulo input,.campo-modulo select,.campo-modulo textarea{ border-radius:10px; }
.azione{ border-radius:999px; }
.evidenza{ border-radius:999px; }
.nav-sotto{ border-radius:var(--raggio); }
.dopo-invio,.esito{ border-radius:var(--raggio); }

/* i dati diventano riquadri, come le credenziali di CORAL —
   ma senza fondo pieno: solo un filo e l'angolo morbido. */
.brano .dati,.campo .dati{
  border:1px solid var(--filo); border-radius:var(--raggio-lg);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,2rem);
  background:rgba(var(--rgb-carta),.48);
}

/* ═══ 23 · LA FASCIA FOTOGRAFICA ═════════════════════════════
   🔴 Rifatta il 30/08. Ci stava `ritratto-vert.webp`, 900×1349, cioè
   una fotografia VERTICALE dentro una striscia larga 3,4:1. Il ritaglio
   teneva il 14% dell'immagine: usciva una fetta di fronte e di occhi,
   e tutto il resto era cielo. Non era una taratura da correggere, era
   la fotografia sbagliata.

   Adesso c'è `fascia-aperto.webp`, 1600×900 — orizzontale, la forma
   della striscia. Lei sta nel terzo destro, dove l'ha messa il
   fotografo; il vuoto a sinistra non è uno spreco, è dove va la frase.
   Il velo lo accompagna: fitto a sinistra perché il testo si legga,
   sottile a destra perché il viso non affoghi.                        */
.fascia{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(340px,31vw,470px);
  display:grid; align-items:center;
  margin-block:0;
}
.fascia > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 26%; z-index:-2;
}
.fascia::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(var(--rgb-velo),.90) 0%, rgba(var(--rgb-velo),.80) 34%,
                           rgba(var(--rgb-inchiostro),.46) 64%, rgba(var(--rgb-inchiostro),.30) 100%),
    linear-gradient(180deg, rgba(var(--rgb-velo),.26), rgba(var(--rgb-velo),.06));
}
/* ⚠️ niente `width:100%` qui: .misura ha gia' la sua larghezza
   (min(--largo, 100% - gutter*2)). Sovrascriverla mandava la frase
   a filo dello schermo, senza margine. */
.fascia > .misura{ padding-block:clamp(3rem,7vw,5rem); }
.fascia .affermazione{
  color:var(--su-velo); font-style:italic; margin:0;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem);
  max-width:14ch;                 /* resta nel vuoto, non le va addosso */
  text-shadow:0 1px 24px rgba(var(--rgb-velo),.45);
}

/* ═══ 24 · LA CHIUSURA IN CORALLO ════════════════════════════
   L'ultimo richiamo non è una fascia inchiostro come tutte le altre:
   è ottanio. È l'unico posto del sito in cui il ottanio fa da fondo,
   ed è consentito proprio perché è UNO — il documento vieta che
   diventi «un colore di massa», non che esista.                  */
.chiusura{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--azione); color:var(--carta);
}
.chiusura::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 115% at 100% 0, rgba(var(--rgb-carta),.13), transparent 56%),
    linear-gradient(148deg, var(--azione), var(--azione-cupa));
}
.chiusura h2,.chiusura h3{ color:var(--carta); }
.chiusura h2 em{ color:rgba(var(--rgb-carta),.72); }
.chiusura .lede,.chiusura p{ color:rgba(var(--rgb-carta),.92); }
.chiusura .occhiello{ color:rgba(var(--rgb-carta),.8); }
.chiusura .misura{ text-align:center; padding-block:clamp(3.4rem,7vw,5.6rem); }
.chiusura .lede{ margin-inline:auto; }
.chiusura .azione.a-carta{ box-shadow:var(--ombra-m); }
@supports selector(:has(*)) {
  .chiusura > .misura:has(> h2):has(> .prosa){ display:block; }
}

@media (max-width:900px){
  .varco-doppio .finestra::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .scheda:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   25 · TELEFONO — rifatto da capo

   Difetti veri, misurati a 390 px:

   ① LE FACCE TAGLIATE. I ritratti del cliente sono verticali
      (900×1125, 900×1350, 900×1349) e li infilavo in riquadri
      ORIZZONTALI 3/2: il taglio andava dal 47% al 56% dell'immagine,
      e con `object-position:50% 50%` prendeva il centro — cioè
      tagliava la testa. Su telefono un ritratto resta verticale.

   ② LA LASTRA A MEZZA ALTEZZA. Una media query scritta male la
      metteva dietro al titolo invece che dietro al ritratto: testo
      scuro su fondo scuro.
      🔴 30/08, secondo passaggio: al primo giro l'avevo SPENTA sotto
      i 680 px. Sbagliato: il inchiostro dell'apertura c'è da computer e
      quindi deve esserci anche da telefono — andava aggiustato, non
      tolto. Adesso c'è, e sta dove deve: la sua altezza non è più
      indovinata con una percentuale, è misurata sul ritratto vero
      (`--sopra-ritratto`, scritta da main.js in pixel).

   Regola generale che ne esce: **il riquadro segue la fotografia,
   non il contrario.** Dove un taglio serve, si punta al viso, che
   sui ritratti in piedi sta nel terzo alto.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ① i ritratti restano verticali ------------------------------- */
  .varco-doppio .finestra,
  .figura-testo .finestra{ aspect-ratio:4/5; }
  /* il viso sta in alto: il ritaglio parte da lì, non dal centro */
  .varco-doppio .finestra img,
  .figura-testo .finestra img{ object-position:50% 22%; }

  /* le copertine del blog sono quadrate in origine: restano quadrate */
  .post-img{ aspect-ratio:1/1; }
  .post-grande .post-img{ aspect-ratio:4/3; }

  /* 14/09: e anche la COVER DEL PODCAST, che è quadrata in origine (1000x1000).
     Serve la doppia classe: `.varco-doppio .finestra` qui sopra vale quanto
     `.finestra.quadra` della sezione 5 e, venendo dopo, vincerebbe — rimettendo
     il ritaglio 4/5 proprio da telefono, che è dove la cliente guarda.
     L'object-position torna al centro: su un quadrato dentro un quadrato non
     ritaglia niente, ma il 50% 22% della riga sopra sarebbe una trappola muta
     per la prossima immagine quadra che finisce qui. */
  .varco-doppio .finestra.quadra,
  .figura-testo .finestra.quadra{ aspect-ratio:1/1; }
  .varco-doppio .finestra.quadra img,
  .figura-testo .finestra.quadra img{ object-position:50% 50%; }

  /* ② LA LASTRA da telefono non serve più: da qui in avanti l'apertura
     è tutta scura, e la fotografia ci sta dentro. Vedi la sezione 28. */
  .varco-doppio::before{ display:none; }

  /* ③ LA FASCIA su telefono.
     🔴 Rifatta due volte. Prima la frase stava in fondo e centrata, con
     lei al centro dell'inquadratura. Il committente la vuole «leggermente
     più a destra, a limite ma non tagliata», e la frase «in centro a
     sinistra».

     L'accostamento al bordo non è a occhio: il soggetto (giacca e
     capelli) occupa il 51–84% della fotografia, misurato sul file. Con
     un riquadro alto ~400 px su 390 di larghezza, un `object-position`
     al 69% porta il suo fianco destro a una decina di pixel dal bordo:
     al limite, e non oltre. L'altezza qui è una forbice STRETTA apposta
     — da 380 a 420 px — perché quel 69% resti giusto per tutta la
     famiglia dei telefoni invece che solo per uno.

     La frase sta a mezza altezza e allineata a sinistra: il viso resta
     libero sopra, il testo si appoggia sulla giacca scura. E il velo
     torna orizzontale, fitto a sinistra dove c'è da leggere. */
  .fascia{ min-height:clamp(380px,96vw,420px); align-items:center; }
  .fascia > img{ object-position:69% 42%; }
  .fascia::after{
    background:
      linear-gradient(90deg, rgba(var(--rgb-velo),.90) 0%, rgba(var(--rgb-velo),.74) 46%,
                             rgba(var(--rgb-velo),.34) 78%, rgba(var(--rgb-velo),.24) 100%),
      linear-gradient(180deg, rgba(var(--rgb-velo),.34), rgba(var(--rgb-velo),.10) 40%, rgba(var(--rgb-velo),.42));
  }
  .fascia > .misura{ padding-block:0; }
  .fascia .affermazione{ max-width:11ch; text-align:left; }

}

@media (max-width:680px){
  .varco-doppio .finestra{ box-shadow:var(--ombra-m); }
  .varco{ padding-block:clamp(1.8rem,5vw,3rem) clamp(2rem,5vw,3.2rem); }
  .fascia .affermazione{ font-size:clamp(1.45rem,6.4vw,2rem); }
  .chiusura .misura{ padding-block:clamp(2.6rem,8vw,3.6rem); }
  /* i dati, in colonna singola, non hanno bisogno del riquadro */
  .varco .dati,.brano .dati,.campo .dati{ padding-inline:1.1rem; }
}

/* ═══ 26 · RIFINITURE DA TELEFONO ════════════════════════════ */
@media (max-width:560px){
  /* i titoli non devono mai spingere la riga fuori schermo */
  h1{ font-size:clamp(2rem,8.4vw,2.7rem); }
  h2{ font-size:clamp(1.6rem,6.6vw,2.1rem); }
  .affermazione{ font-size:clamp(1.4rem,6.2vw,1.9rem); }
  /* i pulsanti a piena larghezza: sono bersagli, non decorazioni */
  .varco-azioni{ display:grid; gap:.6rem; }
  .varco-azioni .azione{ width:100%; }
  /* il percorso e le griglie in colonna, con più aria fra i blocchi */
  .duetto,.figura-testo{ gap:1.4rem; }
  /* il piede non deve spezzare le parole lunghe */
  .piede-col a,.piede-barra{ overflow-wrap:anywhere; }
}

/* ═══════════════════════════════════════════════════════════════
   27 · I BLOCCHI STRUTTURATI

   Il copy era prosa continua: bello da leggere, faticoso da scorrere.
   Serviva spezzarlo in blocchi — «più da sito web e meno da webinar».

   🔴 PERCHÉ LA PRIMA VERSIONE È STATA BUTTATA. Il riferimento portato
   dal committente è un sito fatto di SCHEDE: rettangoli arrotondati,
   piastrelle piene di colore con l'icona dentro, riquadri evidenziati.
   Li avevo ricostruiti uno per uno, e si riconoscevano. Il committente:
   «usare quello stile, ma non farli identici».

   E aveva ragione due volte, perché quelle forme non sono nemmeno di
   questo sito. Questo sito è fatto di FILETTI: `.elenco` ha il trattino
   ottanio, `.dati` e `.prova` sono chiusi da righe da 1 px, la firma
   sono due filetti che si aprono, il percorso è una linea che cresce.
   Non c'è una sola superficie colorata piena in tutta la pagina, a
   parte l'unica fascia di inchiostro.

   Quindi: si prende il PRINCIPIO del riferimento — l'informazione si
   struttura invece di scorrere in prosa — e si scrive nella lingua di
   qui. Niente scatole, niente piastrelle piene, niente riquadri
   colorati: colonne, filetti e spazio.

     A · .indice   un indice a due colonne, voci divise da filetti
     B · .aspetti  tre colonne separate da filetti verticali
     C · .cifre    i numeri in colonna, allineati a destra, come un libro mastro
     D · .spunte   righe divise da filetti, col trattino ottanio
     E · .offerte  tre colonne su inchiostro, il numerale grande e pallido

   🔴 Tutte parlano LA GRAMMATICA della sezione 18: punti una cosa, le
   altre si acquietano, e quella risponde con un filetto che cresce.
   Solo `transform` e `opacity`.
   🔴 E niente `auto-fit`: 4 voci fanno 2×2 o 1×4, 3 fanno 3 o 1.
   ═══════════════════════════════════════════════════════════════ */

.blocco-testa{ margin-bottom:clamp(1.5rem,2.8vw,2.2rem); }
.blocco-testa .lede{ margin-bottom:0; }

/* ═══ A · L'INDICE — due colonne di voci, nessuna scatola ══════
   L'icona non sta sopra al titolo dentro a un riquadro: sta PRIMA
   del titolo, sulla stessa riga, piccola. Si legge come un indice. */
.indice{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,4.4vw,4rem); row-gap:0;
}
.voce{
  position:relative;
  padding:clamp(1.05rem,2vw,1.4rem) 0 clamp(1.05rem,2vw,1.4rem) 0;
  border-top:1px solid var(--filo);
}
/* le due voci in cima non hanno il filetto sopra: lo prende il blocco */
.indice > .voce:nth-child(1),
.indice > .voce:nth-child(2){ border-top:0; }
.voce-t{
  display:flex; align-items:center; gap:.6rem; margin:0 0 .3rem;
  font-family:var(--testo); font-weight:600; font-size:1.02rem;
  line-height:1.3; color:var(--su-carta);
}
.voce-t i{ flex:none; width:19px; height:19px; color:var(--azione); }
.voce-t i svg{ width:100%; height:100%; }
.voce p{ margin:0; font-size:.95rem; color:var(--su-carta-corpo); }

/* ② il filetto che cresce: quello di sopra si ricolora e corre */
.voce::before{
  content:""; position:absolute; left:0; top:-1px; right:0; height:1px;
  background:var(--accento-filo); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.voce:hover::before{ transform:scaleX(1); }
.indice > .voce:nth-child(-n+2)::before{ top:0; }

.sul-scuro .voce{ border-top-color:rgba(var(--rgb-su-fascia),.20); }
.sul-scuro .voce-t{ color:var(--su-fascia); }
.sul-scuro .voce-t i,
.sul-scuro .voce::before{ color:var(--osso); background:var(--osso); }
.sul-scuro .voce-t i{ background:none; }
.sul-scuro .voce p{ color:var(--su-inchiostro); }

/* ═══ B · GLI ASPETTI — tre colonne, il filetto le divide ══════
   Nessuna piastrella piena: l'icona sta da sola, grande e a filo,
   sopra un trattino ottanio che al passaggio si allunga.          */
.aspetti{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
}
.aspetto{
  position:relative;
  padding:clamp(.4rem,1vw,.8rem) clamp(1.4rem,2.8vw,2.4rem);
}
.aspetto + .aspetto{ border-left:1px solid var(--filo); }
.aspetto:first-child{ padding-left:0; }
.aspetto:last-child{ padding-right:0; }
/* ⚠️ niente `height` fissa qui: il trattino è un `::after` che deve
   stare SOTTO all'icona. Con l'altezza bloccata a 29 px finiva fuori
   dalla scatola, sotto al titolo, e non si vedeva. */
.aspetto-i{ display:block; color:var(--inchiostro); margin-bottom:.95rem; }
.aspetto-i svg{ width:29px; height:29px; }
/* il trattino sotto l'icona: è il segno che cresce */
.aspetto-i::after{
  content:""; display:block; margin-top:.85rem;
  height:1px; width:1.8rem; background:var(--accento-filo);
  transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.aspetto:hover .aspetto-i::after{ transform:scaleX(2.6); }
.aspetto h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.14rem,1rem + .4vw,1.38rem); line-height:1.22;
  color:var(--su-carta); margin:0 0 .45rem;
}
.aspetto p{ margin:0; font-size:.95rem; }

.sul-scuro .aspetto + .aspetto{ border-left-color:rgba(var(--rgb-su-fascia),.20); }
.sul-scuro .aspetto-i{ color:var(--osso); }
.sul-scuro .aspetto-i::after{ background:var(--osso); }
.sul-scuro .aspetto h3{ color:var(--su-fascia); }
.sul-scuro .aspetto p{ color:var(--su-inchiostro); }

/* ═══ C · LE CIFRE — un libro mastro, non una fila di statistiche ══
   Il riferimento mette il numero a sinistra e la frase di fianco, in
   fila orizzontale. Qui i numeri stanno IN COLONNA e allineati a
   DESTRA, con la frase accanto: si leggono come una tabella di conti,
   ed è un gesto da bilancio, non da brochure.
   Diverso anche dai `.dati` dell'apertura, dove il numero sta sopra a
   un'etichetta in maiuscoletto. Due modi, due momenti.              */
.cifre{ display:grid; gap:0; max-width:46rem; }
.cifra{
  position:relative;
  display:grid; grid-template-columns:minmax(0,7.2rem) 1fr;
  column-gap:clamp(1.1rem,2.4vw,2rem); align-items:baseline;
  padding:clamp(.85rem,1.8vw,1.15rem) 0;
  border-top:1px solid var(--filo);
}
.cifra:first-child{ border-top:0; }
.cifra b{
  text-align:right; font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,1.1rem + 1.9vw,2.6rem); line-height:1;
  color:var(--azione-testo); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.cifra-testo{ font-size:.98rem; line-height:1.45; color:var(--su-carta); }
.cifra-testo em{
  display:block; font-style:italic; font-size:.86rem;
  color:var(--su-carta-tenue); margin-top:.1rem;
}
.cifra::before{
  content:""; position:absolute; left:0; top:-1px; right:0; height:1px;
  background:var(--accento-filo); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.cifra:hover::before{ transform:scaleX(1); }
.cifra:first-child::before{ top:0; }

.sul-scuro .cifra{ border-top-color:rgba(var(--rgb-su-fascia),.20); }
.sul-scuro .cifra b{ color:var(--osso); }
.sul-scuro .cifra::before{ background:var(--osso); }
.sul-scuro .cifra-testo{ color:var(--su-fascia); }
.sul-scuro .cifra-testo em{ color:var(--su-inchiostro-tenue); }

/* ═══ D · LE SPUNTE — righe divise da un filetto ═══════════════
   Niente riquadri, niente quadratino colorato con la spunta dentro:
   il segno è il trattino ottanio che `.elenco` usa già in tutto il
   sito, solo più lungo. Al passaggio la riga rientra e il trattino
   diventa una linea che attraversa.                                */
.spunte{ display:grid; gap:0; }
.spunta{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  column-gap:clamp(1.15rem,2.4vw,1.6rem);
  padding:clamp(.9rem,1.8vw,1.15rem) 0;
  border-top:1px solid var(--filo);
  transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease;
}
.spunta:first-child{ border-top:0; }
.spunta-segno{
  position:relative; top:-.25em;
  display:block; width:1.5rem; height:1px; background:var(--accento-filo);
  transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
/* 🔴 Cresceva del 70%: il trattino e' largo 1,5 rem e la colonna di
   griglia misura quella, non la versione cresciuta — quindi lo scarto
   traboccava nel vuoto fra le due colonne e finiva ADDOSSO al testo.
   Su telefono, dove quel vuoto e' 14 px, si toccavano. Adesso cresce
   del 35% e il vuoto e' piu' largo: restano otto pixel di respiro. */
.spunta:hover .spunta-segno{ transform:scaleX(1.35); }
.spunta p{
  margin:0; font-size:1rem; line-height:1.5; font-weight:400;
  color:var(--su-carta-corpo);
}
/* l'etichetta in testa alla riga: il peso sta lì, non su tutta la frase */
.spunta p b{
  display:block; font-weight:600; color:var(--su-carta);
  font-size:1.02rem; line-height:1.4;
}
.sul-scuro .spunta p{ color:var(--su-inchiostro); }
.sul-scuro .spunta p b{ color:var(--su-fascia); }
.spunta:hover{ transform:translateX(4px); }

.sul-scuro .spunta{ border-top-color:rgba(var(--rgb-su-fascia),.20); }
.sul-scuro .spunta-segno{ background:var(--osso); }
.sul-scuro .spunta p{ color:var(--su-fascia); }

/* ═══ E · LE OFFERTE — tre colonne, il numerale grande e pallido ══
   Niente schede bianche appoggiate sul inchiostro, niente numerino nel
   cerchietto, niente riquadro colorato in fondo. Il numerale è grande
   e tenue come un folio di pagina, e l'esito arriva dopo un filetto. */
.offerte{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  align-items:stretch;
}
.offerta{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(.4rem,1vw,.8rem) clamp(1.4rem,2.8vw,2.4rem);
}
.offerta + .offerta{ border-left:1px solid var(--filo); }
.offerta:first-child{ padding-left:0; }
.offerta:last-child{ padding-right:0; }
.offerta-n{
  display:block; margin:0 0 .1rem;
  font-family:var(--display); font-weight:400; font-size:2.6rem; line-height:1;
  color:var(--filo-forte); font-variant-numeric:tabular-nums;
  transition:color .4s ease;
}
.offerta:hover .offerta-n{ color:var(--accento-testo); }
.offerta h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.14rem,1rem + .4vw,1.38rem); line-height:1.22;
  color:var(--su-carta); margin:0 0 .5rem;
}
.offerta > p{ margin:0 0 .9rem; font-size:.95rem; }
/* l'esito si incolla in fondo, così le tre colonne si allineano */
.offerta-esito{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--filo);
  font-size:.93rem; line-height:1.5; color:var(--su-carta-corpo);
}
.offerta-esito b{
  display:block; margin-bottom:.15rem;
  color:var(--azione-testo); font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
}
.offerta .freccia{ margin-top:.85rem; }

.sul-scuro .offerta + .offerta{ border-left-color:rgba(var(--rgb-su-fascia),.20); }
.sul-scuro .offerta-n{ color:rgba(var(--rgb-su-fascia),.30); }
.sul-scuro .offerta:hover .offerta-n{ color:var(--osso); }
.sul-scuro .offerta h3{ color:var(--su-fascia); }
.sul-scuro .offerta > p{ color:var(--su-inchiostro); }
.sul-scuro .offerta-esito{ border-top-color:rgba(var(--rgb-su-fascia),.20); color:var(--su-inchiostro); }
.sul-scuro .offerta-esito b{ color:var(--osso); }

/* ── ① le altre si fanno da parte ─────────────────────────────── */
@supports selector(:has(*)) {
  .indice:has(.voce:hover) .voce:not(:hover),
  .aspetti:has(.aspetto:hover) .aspetto:not(:hover),
  .cifre:has(.cifra:hover) .cifra:not(:hover),
  .spunte:has(.spunta:hover) .spunta:not(:hover),
  .offerte:has(.offerta:hover) .offerta:not(:hover){
    opacity:.45;
  }
}
.voce,.aspetto,.cifra,.offerta{
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.voce:hover{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .voce,.aspetto,.cifra,.spunta,.offerta{ transition:none; }
  .voce:hover,.spunta:hover{ transform:none; }
  .aspetto:hover .aspetto-i::after,
  .spunta:hover .spunta-segno{ transform:none; }
}

/* ── le soglie ────────────────────────────────────────────────── */
@media (max-width:900px){
  /* i filetti verticali non hanno senso in colonna: tornano orizzontali */
  .aspetti,.offerte{ grid-template-columns:1fr; }
  .aspetto,.offerta{ padding:clamp(1.1rem,3vw,1.5rem) 0; }
  .aspetto + .aspetto,
  .offerta + .offerta{ border-left:0; border-top:1px solid var(--filo); }
  .sul-scuro .aspetto + .aspetto,
  .sul-scuro .offerta + .offerta{ border-top-color:rgba(var(--rgb-su-fascia),.20); }
  .offerta-n{ font-size:2.1rem; }
}
@media (max-width:720px){
  .indice{ grid-template-columns:1fr; }
  .indice > .voce:nth-child(2){ border-top:1px solid var(--filo); }
  .indice > .voce:nth-child(2)::before{ top:-1px; }
  .cifra{ grid-template-columns:minmax(0,5.4rem) 1fr; }
  .cifra b{ font-size:clamp(1.5rem,6.4vw,2rem); }
}

/* ═══════════════════════════════════════════════════════════════
   28 · L'APERTURA DA TELEFONO — la fotografia sta dietro

   Il committente ha portato un altro nostro sito dove la hero da
   telefono è una fotografia a tutto schermo con il testo sopra, e ha
   chiesto quella impaginazione qui: «con la foto dietro le scritte»,
   «lo stile fondo blu nella hero e poi diventa normale».

   Non è una copia: là la fotografia è centrata sulla figura e il
   marchio sta in alto a sinistra sopra al vuoto; qui il ritratto è
   verticale e va tenuto alto, il velo è inchiostro (non nero) e il
   testo si appoggia in basso, dove la fotografia è già scura.

   ⚠️ DA COMPUTER NON CAMBIA NIENTE. Il committente: «hero pc va bene
   pure, puoi lasciarla così». Tutto quello che segue vive dentro alla
   soglia dei 900 px.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* la sezione scivola SOTTO alla barra, così la fotografia parte dal
     bordo alto dello schermo e non da sotto un rettangolo di carta */
  .apertura-scura .varco{
    position:relative; isolation:isolate;
    margin-top:calc(-1 * var(--alt-testata, 4.6rem));
    padding-block:0;
  }

  /* ── il blocco della hero: a tutta larghezza e a tutta altezza ── */
  .apertura-scura .varco-doppio{
    display:flex; flex-direction:column; justify-content:flex-end;
    margin-inline:calc(50% - 50vw); width:100vw;
    min-height:100svh;                    /* svh: non salta con la barra di Chrome */
    padding:calc(var(--alt-testata, 4.6rem) + 2rem) var(--gutter) clamp(2.2rem,7vw,3rem);
    color:var(--su-velo);
    overflow:hidden;
  }
  /* ripiego per i browser senza svh */
  @supports not (height:100svh){ .apertura-scura .varco-doppio{ min-height:88vh; } }

  /* ── la fotografia diventa il fondo ─────────────────────────── */
  .apertura-scura .varco-doppio .finestra{
    position:absolute; inset:0; z-index:-2; margin:0;
    aspect-ratio:auto; border-radius:0; box-shadow:none;
  }
  .apertura-scura .varco-doppio .finestra::after{ display:none; }   /* via il filo interno */
  .apertura-scura .varco-doppio .finestra img{
    width:100%; height:100%; object-fit:cover;
    object-position:50% 16%;              /* il viso sta nel terzo alto */
  }

  /* ── il velo: inchiostro, non nero. Denso dove va il testo ────── */
  .apertura-scura .varco-doppio::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      /* 🔴 Era .96 nel punto più fitto. Il «pugno in faccia» che la
         cliente lamentava non veniva dalla tinta: veniva dalla QUANTITÀ
         di scuro. Qui scende a .82 — la carta sul punto più chiaro della
         fotografia tiene comunque oltre 7:1, verificato. */
      linear-gradient(180deg,
        rgba(var(--rgb-velo),.58) 0%,
        rgba(var(--rgb-velo),.20) 28%,
        rgba(var(--rgb-velo),.28) 48%,
        rgba(var(--rgb-velo),.72) 78%,
        rgba(var(--rgb-velo),.82) 100%),
      linear-gradient(90deg, rgba(var(--rgb-velo),.28), transparent 64%);
  }

  /* ── il testo, adesso su fondo scuro ────────────────────────── */
  .apertura-scura .varco .occhiello{ color:var(--su-velo-tenue); }
  .apertura-scura .varco h1{ color:var(--su-velo); }
  .apertura-scura .varco h1 em{ color:var(--su-velo-tenue); }
  .apertura-scura .varco .lede{ color:var(--su-velo-tenue); }
  .apertura-scura .varco-azioni{ margin-top:1.5rem; }
  .apertura-scura .varco-azioni .a-filo{
    border-color:rgba(var(--rgb-su-velo),.55); color:var(--su-velo); background:transparent;
  }
  .apertura-scura .varco-azioni .a-filo:hover{ background:rgba(var(--rgb-su-velo),.12); border-color:var(--su-velo); }

  /* ── e da qui in poi la pagina torna normale ────────────────── */
  .apertura-scura .varco > .misura:not(.varco-doppio){ margin-top:clamp(1.8rem,5vw,2.6rem); }
  .apertura-scura .varco .dati{ margin-top:clamp(1.4rem,4vw,2rem); }

  /* ── LA TESTATA sopra alla fotografia ───────────────────────── */
  /* Finché si è in cima la barra non c'è: si vedono solo il marchio e
     il pulsante del menu, in carta, appoggiati sull'immagine.
     Appena si scende torna la barra di carta di sempre. */
  html:not(.scesa) .apertura-scura .testata{
    background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  }
  /* il marchio è un'immagine a colori: qui diventa bianca senza
     scaricarne una seconda */
  html:not(.scesa) .apertura-scura .marchio img{ filter:var(--marchio-su-velo); }
  html:not(.scesa) .apertura-scura .hamburger span{ background:var(--su-velo); }
  html:not(.scesa) .apertura-scura .testata .azione.a-filo{
    border-color:rgba(var(--rgb-su-velo),.6); color:var(--su-velo);
  }
  .testata,.marchio img,.hamburger span{
    transition:background-color .35s ease, filter .35s ease, border-color .35s ease;
  }

  /* Privacy, Cookie, Blog e 404 non hanno una fotografia nell'apertura:
     non prendono la classe, e per loro qui sopra non vale niente. */
}

/* ── da tenere fuori dal telefono: su schermo largo niente di tutto
   questo. È scritto qui per chi legge, non serve al browser. ───── */

/* ═══════════════════════════════════════════════════════════════
   29 · I RIQUADRI — e come rispondono al dito

   Due richieste in una: «tutti i riquadri devono essere ancora più
   interattivi ed esteticamente più belli, su entrambe le versioni».

   ① L'INTERAZIONE. Il problema non era la quantità di effetti: era che
   da telefono non ne succedeva NESSUNO. Tutta la grammatica della
   sezione 18 è appesa a `:hover`, e su un dito `:hover` non esiste.
   main.js accende adesso il riquadro che passa per il centro dello
   schermo, e qui ogni regola di `:hover` viene ripetuta per `.accesa`.
   Non è un secondo linguaggio: è lo stesso, detto al tatto.

   ② L'ESTETICA. Le schede erano contorni: un filo da 1 px e basta.
   Adesso hanno una superficie — carta appena più chiara del fondo — e
   un'ombra che si alza quando le punti. Restano `transform` e
   `opacity` a muoversi; l'ombra e il fondo cambiano una volta sola,
   su un elemento alla volta, e non costano un fotogramma.
   ═══════════════════════════════════════════════════════════════ */

/* ── ① la stessa grammatica, detta al tatto ─────────────────────
   Ogni cosa che risponde al puntatore risponde anche all'accensione. */
.voce:is(:hover,.accesa)::before,
.cifra:is(:hover,.accesa)::before{ transform:scaleX(1); }
.aspetto:is(:hover,.accesa) .aspetto-i::after{ transform:scaleX(2.6); }
.spunta:is(:hover,.accesa) .spunta-segno{ transform:scaleX(1.35); }
.offerta:is(:hover,.accesa) .offerta-n{ color:var(--accento-testo); }
.sul-scuro .offerta:is(:hover,.accesa) .offerta-n{ color:var(--osso); }
.voce:is(:hover,.accesa){ transform:translateX(3px); }
.spunta:is(:hover,.accesa){ transform:translateX(4px); }
.scheda:is(:hover,.accesa)::before{ transform:scaleX(1); }
.dato:is(:hover,.accesa) b::after{ transform:scaleX(1); }
.post:is(:hover,.accesa) .post-img img{ transform:scale(1.04); }
.post:is(:hover,.accesa) .post-cta::after{ width:1.9rem; }

@supports selector(:has(*)) {
  .indice:has(.voce.accesa) .voce:not(.accesa),
  .aspetti:has(.aspetto.accesa) .aspetto:not(.accesa),
  .cifre:has(.cifra.accesa) .cifra:not(.accesa),
  .spunte:has(.spunta.accesa) .spunta:not(.accesa),
  .offerte:has(.offerta.accesa) .offerta:not(.accesa),
  .dati:has(.dato.accesa) .dato:not(.accesa),
  .griglia-2:has(.scheda.accesa) .scheda:not(.accesa),
  .griglia-3:has(.scheda.accesa) .scheda:not(.accesa),
  .griglia-post:has(.post.accesa) .post:not(.accesa),
  .griglia-anteprime:has(.post.accesa) .post:not(.accesa){
    opacity:.45;
  }
}

/* ── ② le schede: da contorno a oggetto ────────────────────────
   Un filo da 1 px su fondo carta è quasi invisibile. Un foglio di
   carta appena più chiaro, con un'ombra bassa, si vede — e quando lo
   punti si alza davvero, invece di cambiare colore al bordo. */
.scheda{
  background:var(--carta-2);
  border-radius:var(--raggio);
  box-shadow:var(--ombra-s);
  transition:transform .34s cubic-bezier(.22,.61,.36,1),
             box-shadow .34s ease, border-color .34s ease, opacity .34s ease;
}
.scheda:is(:hover,.accesa){
  transform:translateY(-3px);
  box-shadow:var(--ombra-m);
  border-color:var(--filo-forte);
}
.sul-scuro .scheda{ background:rgba(var(--rgb-su-fascia),.05); box-shadow:none; }
.sul-scuro .scheda:is(:hover,.accesa){
  background:rgba(var(--rgb-su-fascia),.09); border-color:rgba(var(--rgb-su-fascia),.42);
  box-shadow:none;
}

/* ── le anteprime del blog: la fotografia respira, e la scheda con lei ── */
.post{ transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease; }
.post:is(:hover,.accesa){ transform:translateY(-3px); }
.post-img{ box-shadow:var(--ombra-s); transition:box-shadow .4s ease; }
.post:is(:hover,.accesa) .post-img{ box-shadow:var(--ombra-m); }
/* il titolo si scalda: è il segnale che la scheda è un collegamento */
.post-title{ transition:color .3s ease; }
.post:is(:hover,.accesa) .post-title{ color:var(--azione-testo); }

/* ── le fotografie: dentro alla loro finestra, si avvicinano ──── */
/* ⚠️ la regola d'ingresso `html.js .finestra.viva img` mette
   `transform:none` ed è più specifica: senza `html.js` davanti, qui
   non succedeva niente. */
.fascia > img{ transition:transform 1s cubic-bezier(.22,.61,.36,1); }
html.js .figura-testo .finestra.viva img{
  transition:clip-path .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
html.js .figura-testo .finestra.viva:hover img{ transform:scale(1.03); }

/* ── le domande: la riga si sposta e il segno gira ─────────────
   Una FAQ è un riquadro anche lei, e prima non succedeva niente
   finché non la aprivi. */
.faq-voce{ position:relative; transition:background .3s ease; }
.faq-voce::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--azione); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.faq-voce:is(:hover,.accesa)::before,
.faq-voce[data-aperta]::before{ transform:scaleY(1); }
.faq-voce > button{ transition:padding-left .34s cubic-bezier(.22,.61,.36,1), color .3s ease; }
.faq-voce:is(:hover,.accesa) > button,
.faq-voce[data-aperta] > button{ padding-left:1rem; }
.faq-voce:is(:hover,.accesa) > button{ color:var(--azione-testo); }
.faq-voce[data-aperta]{ background:rgba(var(--rgb-inchiostro),.035); }
.faq-corpo p{ padding-left:1rem; }

/* ── i pulsanti: il pieno entra da sinistra invece di accendersi ── */
.azione{ position:relative; overflow:hidden; z-index:0; }
.azione::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:currentColor; opacity:0;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease;
}
.azione.a-filo:is(:hover,:focus-visible)::before{ transform:scaleX(1); opacity:.09; }

/* ── il riquadro dei numeri, da telefono ──────────────────────
   In colonna singola i quattro dati diventavano quattro blocchi
   appoggiati nel vuoto. Un filetto fra l'uno e l'altro li tiene
   insieme e dice che sono una cosa sola. */
@media (max-width:900px){
  .varco .dati{ grid-template-columns:1fr; gap:0; }
  .varco .dato{ padding-block:.95rem; border-top:1px solid var(--filo); }
  .varco .dato:first-child{ border-top:0; padding-top:.2rem; }
  .varco .dato span{ margin-top:.3rem; }
}

@media (prefers-reduced-motion:reduce){
  .scheda,.post,.post-img,.faq-voce > button,.figura-testo .finestra img{ transition:none; }
  .scheda:is(:hover,.accesa),.post:is(:hover,.accesa){ transform:none; }
  .azione::before{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   30 · DA TELEFONO SI TOCCA, NON SI PUNTA

   Misurato a 390 px, pagina per pagina. Due difetti veri, che non si
   vedono guardando uno screenshot ma si sentono usando il sito:

   ① BERSAGLI TROPPO BASSI. Un dito ha bisogno di circa 44 px. Qui
      c'erano collegamenti alti 20 px («daniela.righi@me.com»,
      «Cookie Policy»), 23 px (le frecce «Scopri chi sono»), 27 px
      (i pulsanti delle piattaforme del podcast) e 30 px (le voci del
      piede). Si sbaglia a colpirli, e chi sbaglia se ne va.
      La riga di testo non cambia: cresce solo l'area cliccabile.

   ② TESTO SOTTO GLI 11,5 px. Il badge «IN EVIDENZA» stava a 10,6 px e
      le date degli articoli a 11,4. Su carta si leggono, su un telefono
      in mano, in movimento, no.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ① l'area cliccabile ─────────────────────────────────────── */
  .freccia{ padding-block:.6rem; }
  .piede-col a:not(.piede-social a),
  .piede-legale a,
  .piede-barra a,
  .briciole a{ display:inline-block; padding-block:.42rem; }
  .piattaforme .azione{ padding-block:.95rem; }
  .post-cta{ padding-block:.5rem; }
  /* le voci del menu a tendina sono già grandi; qui il tocco sul logo */
  .marchio{ padding-block:.3rem; }

  /* la casella del consenso: 13 px è mezzo polpastrello */
  .consenso input[type="checkbox"]{
    width:1.6rem; height:1.6rem; flex:none; margin-top:0;
  }
  /* le icone del piede: 32 px è sotto la soglia del dito */
  .piede-col .piede-social a{ width:2.6rem; height:2.6rem; }
  .piede-social{ gap:.55rem; }
  .consenso{ align-items:flex-start; gap:.8rem; }

  /* ② il corpo minimo ────────────────────────────────────────── */
  .evidenza{ font-size:.74rem; padding:.32rem .6rem; }
  .post-meta{ font-size:.76rem; }
  .occhiello{ font-size:.75rem; }
  .briciole,.art-meta{ font-size:.78rem; }
  .dato span{ font-size:.76rem; }
  .prova cite{ font-size:.74rem; }
  .offerta-esito b,.cifra-testo em{ font-size:.78rem; }
}

/* ── il riquadro dei numeri quando sta di fianco a una fotografia ──
   Dentro a `.figura-testo` la colonna è metà pagina: due dati affiancati
   là dentro spezzano l'etichetta in colonnine da due parole
   («DI FORMAZIONE / PROFESSIONALE / E / SPECIALISTICA»). In una colonna
   stretta i numeri vanno uno sotto l'altro. */
.figura-testo .dati{ grid-template-columns:1fr; gap:0; }
.figura-testo .dato{ padding-block:1rem; border-top:1px solid var(--filo); }
.figura-testo .dato:first-child{ border-top:0; padding-top:.2rem; }
.figura-testo .dato span{ max-width:34ch; }

/* ═══════════════════════════════════════════════════════════════
   31 · LA LINEA DEL TEMPO DA TELEFONO — verticale, a bordo sito

   Da computer il percorso è una riga orizzontale con quattro punti, e
   la linea cresce dove passi il puntatore. Da telefono quella riga non
   ci sta: fino a ora la traccia veniva semplicemente SPENTA
   (`.mosse::before{display:none}`) e i quattro passaggi restavano
   quattro blocchi slegati. Spariva proprio la cosa che Daniela aveva
   chiesto di mettere in evidenza — che è un percorso.

   Qui la riga si alza in piedi: diventa una guida verticale sul bordo
   sinistro, i quattro punti ci stanno appesi e il testo rientra.

   E siccome su un dito il puntatore non esiste, la linea non la fa
   crescere il mouse: la fa crescere **lo scorrimento**. Mentre il
   blocco attraversa lo schermo la guida si riempie dall'alto e i punti
   si accendono uno dopo l'altro. Stessa grammatica, altro gesto.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .mosse{
    --guida:.5rem;                  /* dove corre la linea */
    grid-template-columns:1fr;
    row-gap:clamp(1.9rem,5.5vw,2.6rem);
    padding-top:0;
    padding-left:2.6rem;            /* lo spazio che la guida si prende */
  }

  /* la traccia, sempre visibile e tenue */
  .mosse::before{
    display:block;
    top:.35rem; bottom:.35rem; left:var(--guida);
    right:auto; width:1px; height:auto;
  }
  /* la linea che cresce: adesso scende, non corre */
  .mosse::after{
    top:.35rem; bottom:.35rem; left:var(--guida);
    right:auto; width:1px; height:auto;
    background:linear-gradient(180deg, rgba(var(--rgb-osso),.55), var(--osso));
    transform-origin:50% 0;
    transform:scaleY(var(--avanzamento));
  }
  /* mentre si scorre la linea deve stare attaccata al dito, non inseguire */
  .mosse[data-scorre]::after{ transition:transform .12s linear; }

  /* i punti si appendono alla guida */
  .mossa::before{
    top:.3rem;
    left:calc(var(--guida) - 2.6rem - 3.5px);
  }

  /* il numero e il titolo partono dalla stessa riga del punto */
  .mossa-n{ margin-top:0; }
}

/* sotto i 420 px la guida si stringe: ogni millimetro di colonna conta */
@media (max-width:420px){
  .mosse{ --guida:.4rem; padding-left:2.1rem; }
  .mossa::before{ left:calc(var(--guida) - 2.1rem - 3.5px); }
}

/* ═══════════════════════════════════════════════════════════════
   32 · DARE CORPO AI BLOCCHI

   «A me il sito sembra un pochino spoglio, i riquadri interattivi
   facciamoli meglio, rendiamoli più belli visivamente.»

   Ha ragione, e so anche perché è successo. Due giri fa il riferimento
   portato dal committente era un sito fatto di schede, io le avevo
   ricopiate, lui giustamente mi ha fermato — e nel rifarle sono andato
   all'estremo opposto: SOLO filetti. Niente superfici, niente ombre,
   niente dettaglio a piccola scala. Composto, ma vuoto.

   La via di mezzo è questa: metà dei blocchi prendono una superficie di
   carta, l'altra metà restano righe. La varietà fra i due tipi è quello
   che riempie la pagina — se diventassero tutti schede si tornerebbe al
   campionario di prima.

     PRENDONO SUPERFICIE   .voce  ·  .aspetto  ·  .offerta
     RESTANO RIGHE         .cifra ·  .spunta

   E ogni superficie porta un segno che prima non c'era: un angolo
   disegnato in alto a destra, che si chiude al passaggio. È un dettaglio
   da stampa — il crocino di registro — e non lo fa nessuno degli altri
   nostri siti. Uno solo, non due: `::before` su queste stesse voci è già
   il filetto che cresce, e un terzo segno per scatola sarebbe rumore.
   ═══════════════════════════════════════════════════════════════ */

/* ── la superficie: carta appena più carica, con l'angolo che si chiude ── */
.voce,.aspetto,.offerta{
  border-radius:var(--raggio);
  background:transparent;
  transition:background .38s ease, box-shadow .38s ease,
             opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.voce:is(:hover,.accesa),
.aspetto:is(:hover,.accesa),
.offerta:is(:hover,.accesa){
  background:var(--carta-2);
  box-shadow:var(--ombra-s);
}
.sul-scuro .voce:is(:hover,.accesa),
.sul-scuro .aspetto:is(:hover,.accesa),
.sul-scuro .offerta:is(:hover,.accesa){
  background:rgba(var(--rgb-su-fascia),.06); box-shadow:none;
}

/* il crocino di registro. Fermo è invisibile; al passaggio si disegna. */
.voce::after,.aspetto::after,.offerta::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:.5rem; right:.5rem; width:.7rem; height:.7rem;
  border-top:1px solid var(--accento-filo); border-right:1px solid var(--accento-filo);
  opacity:0; transform:translate(-4px,4px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.voce:is(:hover,.accesa)::after,
.aspetto:is(:hover,.accesa)::after,
.offerta:is(:hover,.accesa)::after{ opacity:.55; transform:none; }
.sul-scuro .voce::after,.sul-scuro .aspetto::after,.sul-scuro .offerta::after{
  border-color:var(--osso);
}

/* servono un po' d'aria dentro, adesso che c'è un dentro */
.voce{ padding-inline:clamp(.8rem,2vw,1.1rem); }
.indice{ column-gap:clamp(1.2rem,3vw,2.4rem); }
/* il filetto di sopra deve restare a filo del testo, non della scatola */
.voce::before{ left:clamp(.8rem,2vw,1.1rem); right:clamp(.8rem,2vw,1.1rem); }
.aspetto{ padding-block:clamp(1rem,2.2vw,1.5rem); }
.offerta{ padding-block:clamp(1rem,2.2vw,1.5rem); }

/* ── le icone: da segno a oggetto ──────────────────────────────
   Erano tratti da 19 px appoggiati sul niente. Adesso stanno dentro a
   un disco di carta che al passaggio si tinge: si vedono, e danno al
   blocco un punto d'appoggio visivo che prima non aveva. */
.voce-t i{
  width:1.85rem; height:1.85rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--carta-3); color:var(--accento-testo);
  transition:background .34s ease, color .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.voce-t i svg{ width:1rem; height:1rem; }
.voce:is(:hover,.accesa) .voce-t i{
  background:var(--accento); color:var(--inchiostro); transform:scale(1.06);
}
.sul-scuro .voce-t i{ background:rgba(var(--rgb-su-fascia),.10); color:var(--osso); }
.sul-scuro .voce:is(:hover,.accesa) .voce-t i{ background:var(--osso); color:var(--inchiostro-cupo); }

.aspetto-i{ color:var(--accento-testo); transition:color .34s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
.aspetto:is(:hover,.accesa) .aspetto-i{ transform:translateY(-2px); }

/* ── le cifre: il numero prende peso ───────────────────────────
   Restano righe, ma il numerale non è più solo grande: al passaggio
   si scalda e gli cresce dietro un'ombra di colore appena percettibile. */
.cifra b{ transition:color .34s ease, text-shadow .34s ease; }
.cifra:is(:hover,.accesa) b{
  color:var(--accento-testo); text-shadow:0 2px 18px rgba(var(--rgb-accento),.28);
}
.sul-scuro .cifra:is(:hover,.accesa) b{
  color:var(--osso); text-shadow:0 2px 18px rgba(var(--rgb-osso),.20);
}

/* ── le spunte: il trattino diventa un segno di spunta vero ───── */
.spunta{ padding-inline:clamp(.6rem,1.6vw,.9rem); border-radius:var(--raggio); }
.spunta{ transition:background .34s ease, transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease; }
.spunta:is(:hover,.accesa){ background:var(--carta-2); }
.sul-scuro .spunta:is(:hover,.accesa){ background:rgba(var(--rgb-su-fascia),.06); }

/* ── le schede del blog e i riquadri già esistenti: un filo di più ── */
.scheda{ border-radius:var(--raggio-lg); }
.post-img{ border-radius:var(--raggio); }

@media (prefers-reduced-motion:reduce){
  .voce,.aspetto,.offerta,.spunta,.voce-t i,.aspetto-i,.cifra b{ transition:none; }
  .voce::after,.aspetto::after,.offerta::after{ transition:none; }
}

/* da telefono le superfici hanno bisogno di meno rientro */
@media (max-width:720px){
  .voce{ padding-inline:.7rem; }
  .voce::before{ left:.7rem; right:.7rem; }
  .voce-t i{ width:1.7rem; height:1.7rem; }
}

/* gli aspetti sono nati per tre colonne; dove sono due, due restano */
.aspetti:has(> .aspetto:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }

/* ═══════════════════════════════════════════════════════════════
   33 · IL SIGILLO — un timbro tondo che gira sulla fotografia

   Era una pillola piena d'oro. Il committente la vuole TONDA, che gira,
   e soprattutto NON piena: «deve quasi essere trasparente, sotto deve
   vedersi la foto».

   Quindi: due anelli sottili e il testo che corre lungo il cerchio, e
   in mezzo il vuoto. Il problema vero di un timbro trasparente è che
   sotto ci passa una fotografia, cioè un fondo che cambia da un punto
   all'altro: l'oro su una ciocca chiara sparirebbe. La leggibilità non
   la fa un fondo — che qui non c'è — la fa il **contorno**: ogni
   lettera è disegnata prima con un tratto scuro e poi riempita d'oro
   (`paint-order:stroke fill`). Funziona su qualunque cosa ci sia sotto,
   e non toglie un pixel di fotografia.

   Gira il testo, non tutto: la stella al centro resta ferma, se no
   sembra una rotella che carica.
   ═══════════════════════════════════════════════════════════════ */
.sigillo{
  position:absolute; z-index:3;
  right:clamp(-2.2rem,-3vw,-1.2rem); bottom:clamp(1rem,3vw,2.2rem);
  width:clamp(6.4rem,9vw,7.6rem); aspect-ratio:1;
  display:grid; place-items:center;
  pointer-events:none;
}
.sigillo-gira{
  width:100%; height:100%;
  animation:gira-sigillo 30s linear infinite;
}
@keyframes gira-sigillo{ to{ transform:rotate(360deg); } }

.sigillo-anello{
  fill:none; stroke:var(--carta); stroke-width:1;
  opacity:.9;
}
.sigillo-anello-int{ opacity:.5; }

.sigillo-testo{
  /* 🔴 Il contorno va su `--rgb-ombra`, non sul velo: questo segno
     sta sopra a una FOTOGRAFIA, che non cambia con la palette. Col
     velo, sulla palette chiara diventava bianco su bianco. */
  fill:var(--carta);
  stroke:rgba(var(--rgb-ombra),.66); stroke-width:2.4px;
  paint-order:stroke fill;          /* prima il contorno, poi il pieno */
  font-family:var(--testo);
  font-size:10.6px; font-weight:600; letter-spacing:.13em;
}
.sigillo-stella{
  position:absolute; color:var(--carta);
  font-size:clamp(1rem,1.5vw,1.25rem); line-height:1;
  text-shadow:0 1px 3px rgba(var(--rgb-ombra),.8);
}

@media (prefers-reduced-motion:reduce){ .sigillo-gira{ animation:none; } }

@media (max-width:900px){
  /* da telefono la fotografia è il fondo di tutta l'apertura: il
     sigillo si sposta in alto a destra, dove non copre né il viso
     né il testo */
  .sigillo{
    right:var(--gutter); bottom:auto;
    top:calc(var(--alt-testata,4.6rem) + .8rem);
    width:clamp(5.4rem,20vw,6.4rem);
  }
  .sigillo-testo{ font-size:10.9px; letter-spacing:.11em; }
}
@media (max-width:400px){
  .sigillo{ width:5rem; }
  .sigillo-testo{ font-size:11.4px; letter-spacing:.08em; }
}

/* ═══════════════════════════════════════════════════════════════
   34 · IL NASTRO — un anello di parole che non si ferma mai

   Sotto l'apertura, una fascia scura con le parole chiave che scorrono
   in continuo. Serve a spezzare la pagina e a dire in due secondi di
   cosa si parla, senza aggiungere un paragrafo.

   Come funziona: la stessa lista è scritta DUE VOLTE dentro al nastro,
   e l'animazione la sposta di esattamente metà della sua larghezza.
   Quando arriva in fondo è tornata identica al punto di partenza, e
   riparte senza salto. È il solo modo che non ha giunte visibili.

   🎞️ Regola di studio: i nastri non si fermano mai, nemmeno col mouse
   sopra. Al passaggio RALLENTA — da 34 a 58 secondi — e basta.
   ═══════════════════════════════════════════════════════════════ */
.nastro{
  --corsa:34s;
  overflow:hidden; background:var(--inchiostro-cupo);
  border-block:1px solid rgba(var(--rgb-accento),.28);
  padding-block:.9rem;
  position:relative; isolation:isolate;
}
.nastro-scorre{
  display:flex; width:max-content;
  animation:nastro var(--corsa) linear infinite;
}
.nastro:hover .nastro-scorre{ animation-duration:58s; }
.nastro ul{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  padding-right:clamp(1.4rem,3vw,2.6rem); flex:none;
}
.nastro li{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  font-family:var(--testo); font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--osso); white-space:nowrap;
}
.nastro li::after{ content:"✦"; color:var(--accento); font-size:.85em; letter-spacing:0; }
@keyframes nastro{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* si dissolve ai due bordi, così le parole non sbucano di colpo */
.nastro::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--inchiostro-cupo), transparent 7%,
                                    transparent 93%, var(--inchiostro-cupo));
}
@media (prefers-reduced-motion:reduce){
  .nastro-scorre{ animation:none; }
  .nastro ul:nth-child(2){ display:none; }
  .nastro{ overflow-x:auto; }
}

/* ═══════════════════════════════════════════════════════════════
   35 · IL FUOCO SUL MANIFESTO

   Mentre si attraversa la frase del manifesto, tutto il resto della
   pagina si abbassa di luce. Non è un fondo che cambia colore: è un
   velo fisso sopra la pagina, e la sezione del manifesto sta SOPRA il
   velo. Così non si tocca nessun colore e non si ridisegna niente:
   cambia una sola opacità, che è la cosa più economica che ci sia.
   ═══════════════════════════════════════════════════════════════ */
.velo-fuoco{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background:var(--inchiostro-cupo);
  opacity:0; transition:opacity .5s ease;
}
html.js .manifesto{ position:relative; z-index:41; }
/* la sezione, mentre è a fuoco, si stacca dal foglio */
.manifesto .affermazione{ transition:transform .6s cubic-bezier(.22,.61,.36,1); }
html.js .manifesto.a-fuoco .affermazione{ transform:scale(1.015); }
@media (prefers-reduced-motion:reduce){
  .velo-fuoco{ display:none; }
  html.js .manifesto.a-fuoco .affermazione{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   36 · GLI HOTSPOT SUL RITRATTO

   Tre punti che pulsano sulla fotografia; toccandoli o passandoci
   sopra si apre una targhetta con un fatto della sua carriera.
   Su telefono l'hover non c'è: si aprono al tocco, e main.js chiude
   gli altri quando se ne apre uno.
   ═══════════════════════════════════════════════════════════════ */
.con-punti{ position:relative; }
.punto-vivo{
  position:absolute; z-index:4; width:1.5rem; height:1.5rem;
  border:0; padding:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.punto-vivo::before{                       /* il nucleo */
  content:""; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--accento); box-shadow:0 0 0 1px rgba(var(--rgb-ombra),.35);
}
.punto-vivo::after{                        /* l'onda che pulsa */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--accento);
  animation:pulsa 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes pulsa{
  0%   { transform:scale(.45); opacity:.9; }
  70%  { transform:scale(1);   opacity:0; }
  100% { transform:scale(1);   opacity:0; }
}
.punto-targa{
  position:absolute; z-index:5; left:50%; bottom:calc(100% + .6rem);
  translate:-50% 0; width:max-content; max-width:13rem;
  padding:.55rem .8rem; border-radius:10px;
  background:var(--inchiostro-cupo); color:var(--osso);
  font-family:var(--testo); font-size:.78rem; line-height:1.35;
  box-shadow:var(--ombra-m);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.punto-targa b{ display:block; color:var(--accento); font-size:.73rem;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.1rem; }
.punto-vivo:is(:hover,:focus-visible,[data-aperto]) .punto-targa{
  opacity:1; visibility:visible; transform:none;
}
@media (prefers-reduced-motion:reduce){ .punto-vivo::after{ animation:none; opacity:.5; } }

/* ═══════════════════════════════════════════════════════════════
   37 · LE SCHEDE TEMATICHE

   Tre linguette sotto la biografia. Servono a tenere in pagina tre
   approfondimenti senza allungarla: si legge quello che interessa.
   Senza JavaScript i tre pannelli restano tutti aperti, uno sotto
   l'altro: non si perde una parola.
   ═══════════════════════════════════════════════════════════════ */
.linguette{
  display:flex; flex-wrap:wrap; gap:.4rem;
  border-bottom:1px solid var(--filo); margin-bottom:clamp(1.2rem,2.4vw,1.8rem);
}
.linguetta{
  position:relative; padding:.85rem 1.1rem;
  font-family:var(--testo); font-size:.86rem; font-weight:600;
  color:var(--su-carta-tenue); background:none; border:0; cursor:pointer;
  transition:color .28s ease;
}
.linguetta::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:-1px; height:2px;
  background:var(--accento); transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.linguetta:hover{ color:var(--su-carta); }
.linguetta[aria-selected="true"]{ color:var(--su-carta); }
.linguetta[aria-selected="true"]::after{ transform:scaleX(1); }
.pannello[hidden]{ display:none; }
.pannello{ animation:entra-pannello .4s cubic-bezier(.22,.61,.36,1); }
@keyframes entra-pannello{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pannello{ animation:none; } }
@media (max-width:560px){
  .linguetta{ padding:.75rem .7rem; font-size:.8rem; }
}

/* l'area toccabile degli hotspot: il punto resta piccolo, il bersaglio no.
   Misurato a 390 px era 24 px, sotto la soglia del dito. */
@media (max-width:900px){
  .punto-vivo{ width:2.6rem; height:2.6rem; }
  .punto-vivo::after{ inset:.55rem; }
  .punto-targa{ max-width:11rem; font-size:.74rem; }
}

/* ── il richiamo centrato sotto a una sezione a due colonne ────
   Un pulsante allineato a sinistra in fondo a una colonna vuota si
   legge come una cosa dimenticata lì. Centrato sotto tutte e due
   chiude la sezione invece di penzolare. */
.azione-centrata{
  margin-top:clamp(2rem,4vw,3rem); margin-bottom:0;
  text-align:center;
}
/* 🔴 Col titolo dentro alla colonna il divario e' sceso da 340 a
   184 px, ma un buco di 184 px sotto al testo si vede lo stesso.
   Allineando al CENTRO, quel vuoto si divide in due — sopra e sotto —
   e smette di leggersi come una mancanza: diventa il respiro di un
   titolo che sta a mezza altezza dell'elenco che commenta. */
.duetto-testa{ align-items:center; }
.duetto-testa h2{ margin-bottom:0; }
@media (max-width:900px){ .duetto-testa{ align-items:start; } }

/* ═══════════════════════════════════════════════════════════════
   38 · LE CINQUE PALETTE, E IL SELETTORE PER SCEGLIERLE

   ⚠️ IL SELETTORE È PROVVISORIO. Serve a far scegliere alla cliente, e
   quando la scelta è fatta si tolgono: la barra, questo blocco, e i
   quattro `[data-palette]` che non servono più. Chi legge fra un mese
   deve sapere che non è una funzione del sito.

   I valori non sono scelti a occhio: ogni palette è passata da un
   controllo di 18 coppie di contrasto (titoli, corpo, metadati, testo
   nei pulsanti, link, occhielli, testo sulle fasce scure, bordi dei
   campi). Dove un rapporto non passava, il colore è stato scurito o
   schiarito finché non passava — nessuna è stata lasciata correre.
   ═══════════════════════════════════════════════════════════════ */
/* ── 1 · SABBIA E PRUSSIA ──────────────────────────────
   Fondo di sabbia calda, fasce di blu di Prussia notte, ottone per i segni. Il fondo si vede che e' un colore, non un bianco. */
:root[data-palette="1"]{
  /* il fondo — quello che si vede per l'85% della pagina */
  --carta:#F6F0E7; --carta-2:#F2EBDF; --carta-3:#ECE4D5;
  --rgb-carta:246,240,231;
  /* le fasce scure, il loro gradiente e i veli */
  --inchiostro:#2C333A; --inchiostro-cupo:#121A21; --inchiostro-fondo:#19232C;
  --rgb-inchiostro:44,51,58; --rgb-scuro:18,26,33;
  /* l'azione */
  --azione:#2E4F6B; --azione-testo:#3C668B;
  --azione-su:#25394B; --azione-cupa:#1F3447;
  --rgb-azione:46,79,107;
  /* l'accento: materia, non inchiostro */
  --accento:#B49650; --accento-testo:#766337; --accento-filo:#9C8349;
  --rgb-accento:180,150,80;
  /* il chiaro sulle fasce scure */
  --osso:#D2CDC1; --rgb-osso:210,205,193;
  --su-inchiostro-tenue:#A29B8B;
  /* il testo — l'ultima cosa che cambia */
  --grigio:#5F666D; --su-carta-corpo:#434A51; --filo-forte:#7C858D;
  /* la grana della carta */
  --grana:#9B7439; --grana-forza:.09;
}

/* ── 2 · ARGILLA E RUGGINE ──────────────────────────────
   Fondo di argilla rosata, fasce di bruno bruciato, ruggine per le azioni. La piu' calda e la piu' materica. */
:root[data-palette="2"]{
  /* il fondo — quello che si vede per l'85% della pagina */
  --carta:#F4EAE4; --carta-2:#EFE4DD; --carta-3:#E9DCD3;
  --rgb-carta:244,234,228;
  /* le fasce scure, il loro gradiente e i veli */
  --inchiostro:#372E2A; --inchiostro-cupo:#201713; --inchiostro-fondo:#2A201A;
  --rgb-inchiostro:55,46,42; --rgb-scuro:32,23,19;
  /* l'azione */
  --azione:#683E2C; --azione-testo:#88513A;
  --azione-su:#4B3025; --azione-cupa:#44291D;
  --rgb-azione:104,62,44;
  /* l'accento: materia, non inchiostro */
  --accento:#BB9058; --accento-testo:#775B36; --accento-filo:#A27B49;
  --rgb-accento:187,144,88;
  /* il chiaro sulle fasce scure */
  --osso:#D4CDC4; --rgb-osso:212,205,196;
  --su-inchiostro-tenue:#A2988B;
  /* il testo — l'ultima cosa che cambia */
  --grigio:#685F5A; --su-carta-corpo:#4C433E; --filo-forte:#8B7F79;
  /* la grana della carta */
  --grana:#975C38; --grana-forza:.09;
}

/* ── 3 · SALVIA E BRONZO ──────────────────────────────
   Fondo verde salvia molto sbiadito, fasce di verde-nero, bronzo per i segni. Fredda di fondo, calda nei dettagli. */
:root[data-palette="3"]{
  /* il fondo — quello che si vede per l'85% della pagina */
  --carta:#ECF1E9; --carta-2:#E6ECE2; --carta-3:#DEE5DA;
  --rgb-carta:236,241,233;
  /* le fasce scure, il loro gradiente e i veli */
  --inchiostro:#2A3427; --inchiostro-cupo:#141C12; --inchiostro-fondo:#1C261A;
  --rgb-inchiostro:42,52,39; --rgb-scuro:20,28,18;
  /* l'azione */
  --azione:#3D502F; --azione-testo:#516A3E;
  --azione-su:#36432D; --azione-cupa:#293720;
  --rgb-azione:61,80,47;
  /* l'accento: materia, non inchiostro */
  --accento:#B79457; --accento-testo:#765F37; --accento-filo:#9C7E49;
  --rgb-accento:183,148,87;
  /* il chiaro sulle fasce scure */
  --osso:#D4CEC4; --rgb-osso:212,206,196;
  --su-inchiostro-tenue:#A29A8B;
  /* il testo — l'ultima cosa che cambia */
  --grigio:#5A6558; --su-carta-corpo:#404C3E; --filo-forte:#7A8877;
  /* la grana della carta */
  --grana:#608A47; --grana-forza:.09;
}

/* ── 4 · CENERE E INDACO ──────────────────────────────
   Fondo grigio-azzurro di cenere, fasce di indaco notte, rame per i segni. La piu' fredda e la piu' netta. */
:root[data-palette="4"]{
  /* il fondo — quello che si vede per l'85% della pagina */
  --carta:#ECEEF4; --carta-2:#E5E8EF; --carta-3:#DCDFE8;
  --rgb-carta:236,238,244;
  /* le fasce scure, il loro gradiente e i veli */
  --inchiostro:#303040; --inchiostro-cupo:#131320; --inchiostro-fondo:#1A1A2A;
  --rgb-inchiostro:48,48,64; --rgb-scuro:19,19,32;
  /* l'azione */
  --azione:#49447E; --azione-testo:#5E57A2;
  --azione-su:#2D2B46; --azione-cupa:#302D53;
  --rgb-azione:73,68,126;
  /* l'accento: materia, non inchiostro */
  --accento:#C48D68; --accento-testo:#845739; --accento-filo:#B2754D;
  --rgb-accento:196,141,104;
  /* il chiaro sulle fasce scure */
  --osso:#D2C8C1; --rgb-osso:210,200,193;
  --su-inchiostro-tenue:#A2948B;
  /* il testo — l'ultima cosa che cambia */
  --grigio:#5F5F6D; --su-carta-corpo:#454554; --filo-forte:#818192;
  /* la grana della carta */
  --grana:#445893; --grana-forza:.09;
}

/* ── 5 · AVORIO E INCHIOSTRO ──────────────────────────────
   Fondo avorio pieno, fasce di nero d'inchiostro caldo, oro antico. La piu' classica: carta e stampa. */
:root[data-palette="5"]{
  /* il fondo — quello che si vede per l'85% della pagina */
  --carta:#F8F5EA; --carta-2:#F4F0E1; --carta-3:#EFEAD7;
  --rgb-carta:248,245,234;
  /* le fasce scure, il loro gradiente e i veli */
  --inchiostro:#3A342C; --inchiostro-cupo:#1A1814; --inchiostro-fondo:#24211C;
  --rgb-inchiostro:58,52,44; --rgb-scuro:26,24,20;
  /* l'azione */
  --azione:#5A4D3A; --azione-testo:#76654C;
  --azione-su:#413A2F; --azione-cupa:#3E3528;
  --rgb-azione:90,77,58;
  /* l'accento: materia, non inchiostro */
  --accento:#BA9B45; --accento-testo:#776431; --accento-filo:#9F8642;
  --rgb-accento:186,155,69;
  /* il chiaro sulle fasce scure */
  --osso:#D2CDC1; --rgb-osso:210,205,193;
  --su-inchiostro-tenue:#A09988;
  /* il testo — l'ultima cosa che cambia */
  --grigio:#6D675F; --su-carta-corpo:#514B43; --filo-forte:#8D867C;
  /* la grana della carta */
  --grana:#9E893B; --grana-forza:.09;
}

/* ── 6 · SOLE E BOSCO ──────────────────────────────────
   Carta di calce calda, ambra di sole per le azioni, verde bosco per i
   segni. La piu' chiara delle sei — e l'unica in cui NIENTE e' scuro:
   dove le altre cinque hanno una fascia notte, qui c'e' una fascia di
   miele chiaro.

   🔴 PERCHE' NON E' PIU' LAMPONE. Il committente, dopo averla vista:
   «questi colori sono troppo femminili, devono essere allegri ma
   neutri». Il lampone #CB2A65 e il rosa #DC8F9E se ne vanno interi.
   Restano l'idea (una palette chiara e viva) e la struttura del
   ribaltamento; cambiano tutte e tre le famiglie di tinta.

   Ambra e verde non sono scelti a caso: sono le due tinte che nessuna
   delle altre cinque usa come AZIONE (prussia, ruggine, verde-nero,
   indaco, bruno), sono calde e vive senza essere sgargianti, e non
   portano un codice di genere addosso. Le tinte gia' scartate dal
   committente — petrolio, corallo, cremisi, prugna, lampone — sono
   fuori da qui per costruzione.

   Diciotto coppie di contrasto verificate col calcolo, tutte passate:
   la piu' stretta e' la carta dentro al pulsante d'ambra, 4,67:1. */
:root[data-palette="6"]{
  --carta:#FCFAF4; --carta-2:#F7F2E7; --carta-3:#F1EBDC;
  --rgb-carta:252,250,244;
  --inchiostro:#33312B;
  /* 🔴 QUI STA LA DIFFERENZA CON LE ALTRE CINQUE.
     `--inchiostro-cupo` non e' piu' un fondo scuro: e' il miele chiaro.
     Di conseguenza tutto cio' che ci sta sopra si ribalta — l'inchiostro
     diventa scuro, il marchio bianco viene annerito, il velo sulle
     fotografie si schiarisce. Le OMBRE no: restano scure, perche'
     un'ombra chiara non esiste. */
  --inchiostro-cupo:#F6EFDF; --inchiostro-fondo:#FAF5E9;
  --rgb-inchiostro:51,49,43; --rgb-scuro:246,239,223;
  --rgb-ombra:74,58,30;
  --su-fascia:#3A362D; --rgb-su-fascia:58,54,45;
  --su-inchiostro:#3A362D; --su-inchiostro-tenue:#6A6355;
  /* 🔴 NIENTE DI SCURO, NEMMENO SULLE FOTOGRAFIE.
     Il committente, due volte: «in questa palette non voglio vedere
     niente di scuro, tutti i colori devono essere allegri».
     Vale anche per i veli: qui il velo e' la carta stessa, e serve solo
     a far tornare la fotografia dentro alla pagina — non a coprirla.
     Come lavora sull'apertura del telefono e' spiegato piu' sotto. */
  --rgb-velo:252,250,244;
  --su-velo:#2A2823;
  --su-velo-tenue:#2A2823;
  --rgb-su-velo:42,40,35;
  --marchio-su-fascia:brightness(0) opacity(.82);
  --marchio-su-velo:brightness(0) opacity(.86);
  --azione:#A85F0C; --azione-testo:#8C5109;
  --azione-su:#8C4F08; --azione-cupa:#7A4508;
  --rgb-azione:168,95,12;
  --accento:#3E7B54; --accento-testo:#2F6B45; --accento-filo:#4F8A63;
  --rgb-accento:62,123,84;
  --osso:#403B31; --rgb-osso:64,59,49;
  --grigio:#6B6455; --su-carta-corpo:#4B463C; --filo-forte:#8B8477;
  --grana:#B08A3A; --grana-forza:.05;
}

/* ── LE FOTOGRAFIE NELLA PALETTE CHIARA ──────────────────────────
   🔴 SULL'APERTURA CAMBIA LA FOTOGRAFIA, e basta.
   È la soluzione più semplice, l'ha indicata il committente, e ha
   ragione: invece di combattere con un ritratto fatto su fondale nero,
   se ne usa uno girato in luce naturale.

   `ritratto-vert.webp` — camicia bianca, campo aperto, luce di sera —
   era già nella cartella del progetto e non era mai stata usata da
   nessuna parte. È verticale (900×1349) come serve all'apertura a
   tutto schermo, ed è chiara proprio dove cadono le parole: lì c'è la
   camicia bianca, non una giacca nera.

   ── PERCHÉ TUTTO IL RESTO NON POTEVA FUNZIONARE, e resti scritto ──
   Sul ritratto in studio, per far leggere un inchiostro scuro, i pixel
   sotto alle parole devono arrivare a 154 su 255. Le strade provate,
   tutte misurate:
     · patina bianca sopra    → copre la fotografia (bocciata, giustamente);
     · schiarire con il CSS   → `brightness` moltiplica, il nero resta
       nero; e con `screen` il colore crolla dal 40,7% al 3,8%: una
       fotocopia;
     · curva sulle ombre con il colore riscalato → capelli arancioni;
     · scontornare e sostituire il fondale → il rumore di compressione
       del nero riemergeva sul fondo chiaro, e restava l'alone.
   Non era un problema di dosaggio: quella fotografia e quell'inchiostro
   non stanno insieme. Con la fotografia giusta il problema non esiste.
   I tentativi stanno in `_scartate/`, non sono stati cancellati.

   ⚠️ `content:url()` e non un `src` diverso nel markup: il markup è uno
   solo per tutte e sei le palette. Se un navigatore non lo applicasse,
   mostrerebbe il ritratto originale — non si rompe niente. */
:root[data-palette="6"] .varco-doppio .finestra img[src$="daniela-hero.webp"]{
  content:url("../img/ritratto-vert.webp");
}

/* le altre fotografie prendono solo un filo d'aria: nessuna patina,
   un sollevamento leggero delle ombre. Oltre questo valore il colore
   comincia a crollare — misurato. */
:root[data-palette="6"] .finestra img,
:root[data-palette="6"] .fascia > img,
:root[data-palette="6"] .post-img img,
:root[data-palette="6"] .art-figura img,
:root[data-palette="6"] .tav-fig img{
  filter:invert(1) brightness(.90) invert(1) saturate(1.06);
}

/* 🔴 LE ILLUSTRAZIONI DEL BLOG, E PERCHÉ QUI VANNO RUOTATE.
   Sono disegni a linea con foglie e cuori ROSA: nate per una palette
   che il rosa ce l'aveva. Su «Sole e bosco» restavano l'unica cosa
   rosa della pagina — e il rosa è esattamente quello che il committente
   ha chiesto di togliere. Quindici gradi di rotazione della tinta
   portano il rosa sul terracotta e sfiorano l'oro di verde: la pelle
   dei disegni resta pelle, e non c'è da rifare quindici file.

   ⚠️ SOLO i disegni. Sulle FOTOGRAFIE una rotazione di tinta si vede
   subito — l'incarnato diventa giallo — e infatti `.finestra img` qui
   sopra non la prende. Il valore è quello: a 22 gradi il sentiero
   dorato dell'illustrazione diventava verde acido, provato. */
:root[data-palette="6"] .post-img img,
:root[data-palette="6"] .art-figura img,
:root[data-palette="6"] .tav-fig img{
  filter:invert(1) brightness(.90) invert(1) hue-rotate(15deg) saturate(1);
}

/* niente patina sulla fascia: lì la fotografia è già chiara dove
   cadono le parole (misurato 9,9:1 senza niente sopra) */
:root[data-palette="6"] .fascia::after{ background:none; }

@media (max-width:900px){

  /* ═══ LA DISSOLVENZA NELLA CARTA ═══════════════════════════
     🔴 IL PROBLEMA, MISURATO PRIMA DI TOCCARE QUALSIASI COSA.
     Il committente: «nella hero da mobile le parole non si leggono a
     causa dei colori sotto». Ha ragione, e si può dimostrare.
     Ho preso la fotografia com'è ritagliata a 375×812 e ho misurato,
     riga per riga, il quinto percentile della luminanza sotto alla
     colonna di testo. Contro un carattere nero:

        riga 400 (l'occhiello)   1,04:1      riga 620   2,12:1
        riga 470 (il titolo)     3,93:1      riga 710   1,70:1
        riga 560 (l'occhiello)   2,83:1      riga 800   1,31:1

     Il minimo di legge è 4,5:1. Non ci arriva NESSUNA riga: le parole
     cadono sui capelli e sull'erba in ombra, che sono scuri quanto il
     carattere. Non era un'impressione, era un fatto.

     ── PERCHÉ UNA PATINA UNIFORME NON È LA RISPOSTA ──
     Per portare a 4,5:1 il pixel peggiore (7 su 255) servirebbe una
     patina al 45% STESA SU TUTTA l'apertura. Il viso ci finirebbe
     sotto, e il committente quella strada l'ha già bocciata due volte.

     ── LA RISPOSTA: LA FOTOGRAFIA SI DISSOLVE NELLA CARTA ──
     Sopra al 36% dell'altezza — cioè su tutto il viso — non c'è
     assolutamente niente: zero. Da lì in giù la carta della pagina sale
     dentro alla fotografia, piano, e quando l'apertura finisce è già
     carta piena: il taglio fra l'apertura e la sezione che segue
     sparisce, e l'immagine sembra appoggiata sul foglio invece che
     incollata sopra.
     Non è una patina messa sopra alle parole: è la pagina che comincia.
     Le tappe non sono a occhio: sono state cercate al ribasso finché la
     riga peggiore è rimasta sopra al minimo di legge, per lasciare
     scoperta più fotografia possibile. E il conto è stato rifatto sui
     pixel veri per TUTTE le aperture e TUTTE le misure di telefono —
     quattro fotografie (l'apertura, Daniela, NEXT MOVE, Contatti) per
     quattro schermi (360×640, 375×812, 430×932, 768×1024):

        la riga peggiore delle sedici prove:   5,01:1
        superficie di testo sotto al 4,5:1:    0,00%
        velo medio sull'apertura:              34,6%

     Un gradino più forte (il 37% medio) portava la peggiore a 5,5:1 e
     non serviva; uno più debole (32%) scendeva a 4,57 e il margine
     spariva. Questo è il punto in mezzo. */
  /* 🔴 IN PIXEL DAL FONDO, NON IN PERCENTUALE. La prima stesura aveva
     le tappe in percentuale, calcolate su uno schermo da 812 px. Su un
     telefono da 640 il testo sale al 32% dell'altezza e finiva SOPRA
     all'inizio della dissolvenza: misurato, 1,23:1 — illeggibile.
     Il testo pero' non sta a una percentuale: sta appoggiato al FONDO,
     sempre, e alto piu' o meno uguale. Quindi la dissolvenza si ancora
     al fondo anche lei, e allora vale a ogni altezza. */
  :root[data-palette="6"] .apertura-scura .varco-doppio::after{
    background:linear-gradient(0deg,
      rgba(var(--rgb-carta),.90)   0,
      rgba(var(--rgb-carta),.68) 100px,
      rgba(var(--rgb-carta),.51) 240px,
      rgba(var(--rgb-carta),.46) 360px,
      rgba(var(--rgb-carta),.43) 440px,
      rgba(var(--rgb-carta),.27) 490px,
      rgba(var(--rgb-carta),0)   575px);
  }

  /* 🔴 IL NERO, E PERCHÉ RESTA NERO.
     Il committente: «i caratteri della hero li voglio neri».
     Il conto dice che aveva ragione anche tecnicamente: perché un testo
     arrivi a 4,5:1 gli serve un fondo di almeno 156 su 255 se è colorato,
     di soli 116 se è nero. Quaranta livelli di differenza, ed è tutta la
     partita: col nero la dissolvenza può restare molto più leggera.
     Nessun `text-shadow`, nessun alone: quello il committente l'aveva
     giudicato «brutto esteticamente», e con il fondo giusto non serve. */
  :root[data-palette="6"] .apertura-scura .varco .occhiello,
  :root[data-palette="6"] .apertura-scura .varco h1,
  :root[data-palette="6"] .apertura-scura .varco h1 em,
  :root[data-palette="6"] .apertura-scura .varco .lede{
    color:#000;
    text-shadow:none;
  }
  :root[data-palette="6"] .apertura-scura .varco-azioni .a-filo{
    color:#000; border-color:rgba(0,0,0,.55); text-shadow:none;
  }

  /* Il marchio in cima sta sul cielo, dove la dissolvenza non arriva
     mai: lo annerisce già `--marchio-su-velo`, dichiarato nella palette.
     Qui non serve nient'altro. */
}

/* 🔴 Il sigillo si ribalta. È carta con il contorno scuro, e nasce per
   stare su una fotografia scura. Qui la fotografia è in luce naturale
   e quel segno spariva: misurato, restava chiaro su chiaro. Sulla
   palette chiara diventa inchiostro con l'alone di luce. */
:root[data-palette="6"] .sigillo-testo{
  fill:var(--inchiostro);
  stroke:rgba(var(--rgb-carta),.85);
}
:root[data-palette="6"] .sigillo-anello{ stroke:var(--inchiostro); opacity:.55; }
:root[data-palette="6"] .sigillo-stella{
  color:var(--azione);
  text-shadow:0 1px 3px rgba(var(--rgb-carta),.9);
}

/* ── la barra della scelta: due righe, colori e carattere ───── */
.scegli{
  /* 🔴 Stava in alto e copriva la navigazione — misurato: si
     sovrapponeva ai link per intero. Spostata in basso, dove non
     c'e' nulla di cliccabile fisso. */
  position:fixed; z-index:300; left:50%; translate:-50% 0; bottom:.7rem;
  display:grid; gap:.35rem; padding:.6rem .8rem;
  border-radius:18px;
  /* 🔴 Era un rettangolo nero fisso. Sulla palette chiara restava
     l'unica cosa scura dello schermo, e il committente giudica i
     colori guardando la pagina: una barra nera davanti falsa il
     giudizio. Adesso prende i colori della palette scelta. */
  background:rgba(var(--rgb-scuro),.96);   /* 14/09: tolto il blur, vedi sopra */
  box-shadow:0 14px 38px -14px rgba(var(--rgb-ombra),.45);
  border:1px solid rgba(var(--rgb-su-fascia),.16);
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
}
.scegli-riga{ display:flex; align-items:center; gap:.45rem; }
.scegli-riga b{
  font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--su-inchiostro-tenue);
  white-space:nowrap; width:5.2rem; flex:none;
}
.scegli-riga button{
  width:2rem; height:2rem; border-radius:50%; padding:0; flex:none;
  border:1px solid rgba(var(--rgb-su-fascia),.34); cursor:pointer;
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  background:rgba(var(--rgb-su-fascia),.08); color:var(--su-fascia); font-size:.86rem; line-height:1;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), border-color .24s ease;
}
/* i pallini dei COLORI mostrano i tre colori che si vedono davvero:
   il fondo, il pulsante e la fascia scura. */
.scegli-riga button[data-p]::after{
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 210deg,
    var(--pa) 0 33.4%, var(--pb) 33.4% 66.7%, var(--pc) 66.7% 100%);
}
/* quelli del CARATTERE mostrano una «Aa» nel carattere stesso */
.scegli-riga button[data-c]{ font-size:.92rem; }
.scegli-riga button:hover{ transform:scale(1.12); }
.scegli-riga button[aria-pressed="true"]{
  border-color:var(--su-fascia); transform:scale(1.12);
  box-shadow:0 0 0 2px rgba(var(--rgb-su-fascia),.40);
}
.scegli-nome{
  font-size:.7rem; color:var(--su-fascia); white-space:nowrap;
  min-width:9.6rem; text-align:left; padding-left:.2rem;
}
@media (max-width:820px){
  .scegli{ top:auto; bottom:.6rem; padding:.5rem .6rem; }
  .scegli-riga b{ width:4.2rem; font-size:.6rem; }
  .scegli-nome{ min-width:0; max-width:6.4rem; overflow:hidden; text-overflow:ellipsis; }
  .scegli-riga button{ width:1.85rem; height:1.85rem; }
}
/* non deve coprire il menu aperto */
.tendina[data-aperta] ~ .scegli,
.scegli:has(~ .tendina[data-aperta]){ opacity:0; pointer-events:none; }

/* ═══════════════════════════════════════════════════════════════
   39 · LE CINQUE VOCI TIPOGRAFICHE

   ⚠️ PROVVISORIO, come il selettore dei colori. Quando la scelta è
   fatta si tiene una variante sola e si buttano le altre quattro —
   insieme ai loro file in assets/fonts.

   La regola di Daniela vale dentro a ognuna: DUE caratteri, mai tre.
   Quello che si sceglie è quale coppia. E `--su-radice` compensa
   l'occhio diverso di ogni famiglia, così tutte e cinque si leggono
   della stessa dimensione anche se i corpi nominali sono uguali.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · EDITORIALE — Instrument Serif + Instrument Sans ──────
   Serif ad alto contrasto, moderno. È la voce attuale del sito. */
:root[data-carattere="1"]{
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --testo:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice:1;
}

/* ── 2 · CLASSICA — Cormorant Garamond + Jost ─────────────────
   Un garaldo di impianto antico accanto a un geometrico asciutto.
   La più elegante, e la più leggera: il Cormorant ha tratti sottili,
   quindi vuole misure grandi. Da qui il +5% sulla radice. */
:root[data-carattere="2"]{
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --testo:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice:1.05;
}
:root[data-carattere="2"] h1,
:root[data-carattere="2"] h2{ letter-spacing:-.005em; }
:root[data-carattere="2"] .occhiello{ letter-spacing:.2em; }

/* ── 3 · CONTEMPORANEA — Fraunces + Work Sans ─────────────────
   Un serif con carattere, dal disegno morbido, e un sans neutro e
   solido. La più calda delle cinque. Occhio grande: −3%. */
:root[data-carattere="3"]{
  --display:"Fraunces", Georgia, serif;
  --testo:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice:.97;
}
:root[data-carattere="3"] h1,
:root[data-carattere="3"] h2,
:root[data-carattere="3"] h3{ letter-spacing:-.015em; }

/* ── 4 · DA STUDIO — Spectral + IBM Plex Sans ─────────────────
   Un serif da lettura lunga e un sans tecnico. È la più sobria: il
   registro di una relazione, non di una brochure. */
:root[data-carattere="4"]{
  --display:"Spectral", Georgia, serif;
  --testo:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice:.99;
}
:root[data-carattere="4"] h1,
:root[data-carattere="4"] h2{ letter-spacing:-.012em; }
/* 14/09: e vale anche di base, perche' «Da studio» e' il carattere scelto. */
h1, h2{ letter-spacing:-.012em; }

/* ── 5 · SENZA GRAZIE — Manrope, sola ─────────────────────────
   Nessun serif: titoli e testo con lo stesso carattere, distinti
   solo dal peso. È diversa dalle altre quattro per categoria, non
   per gusto — ed è la più contemporanea. */
:root[data-carattere="5"]{
  --display:"Manrope", system-ui, -apple-system, sans-serif;
  --testo:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --su-radice:.99;
}
:root[data-carattere="5"] h1,
:root[data-carattere="5"] h2,
:root[data-carattere="5"] h3,
:root[data-carattere="5"] .affermazione,
:root[data-carattere="5"] .post-title,
:root[data-carattere="5"] .cifra b,
:root[data-carattere="5"] .dato b,
:root[data-carattere="5"] .offerta-n{ font-weight:800; letter-spacing:-.028em; }
/* senza un serif, il corsivo dei titoli perde senso: al suo posto il colore */
:root[data-carattere="5"] h1 em,
:root[data-carattere="5"] h2 em,
:root[data-carattere="5"] .affermazione em{ font-style:normal; color:var(--azione); }

/* ═══════════════════════════════════════════════════════════════
   40 · LA TAVOLA — la tabella che si ordina e si filtra

   Richiesta del committente: «aggiungiamo tabelle interattive dove si
   può». Una tabella si aggiunge dove i dati SONO una tabella — cioè
   dove ci sono righe confrontabili e colonne che vale la pena mettere
   in ordine. Nel sito i posti sono tre, e sono questi:

     · il blog     — cinque articoli con tema, tempo di lettura e data;
     · il podcast  — le puntate con numero, durata e uscita;
     · NEXT MOVE   — il confronto fra il primo incontro e il percorso.

   Da nessun'altra parte una tabella sarebbe una tabella: sarebbe un
   elenco con le righe, e allora è meglio l'elenco.

   🔴 È UNA `<table>` VERA, non una griglia travestita. Le intestazioni
   sono `<th scope="col">`, l'ordinamento si annuncia con `aria-sort`, e
   chi legge con la voce sente «colonna Lettura, ordinata in salita».
   Una griglia di `<div>` avrebbe la stessa faccia e nessuna di queste
   cose.

   🔴 E FUNZIONA SENZA JAVASCRIPT. Senza, resta una tabella ordinata per
   data con tutte le righe: i comandi sono aggiunti da main.js e non
   esistono finché non c'è chi li fa funzionare.

   Da telefono la tabella non si stringe: si SPACCHETTA. Ogni riga
   diventa una scheda, e l'intestazione di colonna torna davanti al
   dato, presa da `data-etichetta`. Una tabella a scorrimento
   orizzontale su uno schermo da 375 px non la legge nessuno.
   ═══════════════════════════════════════════════════════════════ */
.tavola{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--filo);
  border-radius:var(--raggio);
  background:var(--carta);
  box-shadow:var(--ombra-s);
  overflow:hidden;
}

/* ── i comandi: i filtri a sinistra, il conteggio a destra ───── */
.tavola-comandi{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  justify-content:space-between;
  padding:.85rem clamp(.9rem,2vw,1.4rem);
  border-bottom:1px solid var(--filo);
  background:var(--carta-2);
}
.tavola-filtri{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tavola-filtro{
  font:inherit; font-size:.84rem; line-height:1;
  padding:.5rem .85rem; border-radius:999px;
  border:1px solid var(--filo); background:transparent;
  color:var(--su-carta-tenue); cursor:pointer;
  transition:color var(--tempo), border-color var(--tempo), background-color var(--tempo);
}
.tavola-filtro:hover{ color:var(--su-carta); border-color:var(--filo-forte); }
.tavola-filtro[aria-pressed="true"]{
  background:var(--azione); border-color:var(--azione); color:var(--carta);
}
.tavola-filtro b{ font-weight:600; }
.tavola-filtro i{ font-style:normal; opacity:.65; margin-left:.35rem; }
.tavola-conta{ margin:0; font-size:.82rem; color:var(--su-carta-tenue); }

/* ── la tabella ─────────────────────────────────────────────── */
.tavola table{ width:100%; border-collapse:collapse; }
.tavola th,.tavola td{ text-align:left; padding:.85rem clamp(.7rem,1.6vw,1.1rem); vertical-align:middle; }
.tavola thead th{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--su-carta-tenue);
  border-bottom:1px solid var(--filo); white-space:nowrap;
  padding-block:.7rem;
}
.tavola tbody tr{ border-bottom:1px solid var(--filo); }
.tavola tbody tr:last-child{ border-bottom:0; }
.tavola tbody tr{ transition:background-color var(--tempo); }
.tavola tbody tr:is(:hover,.accesa){ background:var(--carta-2); }

/* il pulsante d'ordinamento dentro all'intestazione */
.tavola-ord{
  font:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit;
  font-weight:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  transition:color var(--tempo);
}
.tavola-ord:hover{ color:var(--su-carta); }
.tavola-ord::after{
  content:""; width:.5rem; height:.5rem; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.08rem) scale(.85);
  opacity:.28;
  transition:transform var(--tempo), opacity var(--tempo);
}
th[aria-sort="ascending"] .tavola-ord{ color:var(--azione-testo); }
th[aria-sort="descending"] .tavola-ord{ color:var(--azione-testo); }
th[aria-sort="ascending"] .tavola-ord::after{ opacity:1; transform:rotate(225deg) translateY(-.08rem) scale(.85); }
th[aria-sort="descending"] .tavola-ord::after{ opacity:1; transform:rotate(45deg) translateY(-.08rem) scale(.85); }

/* ── le celle ───────────────────────────────────────────────── */
.tav-titolo{ display:block; font-family:var(--display); font-size:1.12rem;
  line-height:1.22; color:var(--su-carta); text-decoration:none; }
.tav-titolo::after{ content:""; position:absolute; inset:0; }   /* tutta la riga è cliccabile */
.tavola td:first-child{ position:relative; }
.tavola tbody tr:hover .tav-titolo{ color:var(--azione-testo); }
.tav-gancio{ display:block; margin-top:.28rem; font-size:.88rem; color:var(--su-carta-tenue);
  max-width:52ch; }
.tav-fig{ width:64px; height:64px; flex:none; border-radius:10px; overflow:hidden;
  background:var(--carta-3); }
.tav-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 🔴 In alto, non al centro: la riga del podcast porta tre righe di
   sommario e il numero centrato finiva a mezz'aria, staccato dal titolo
   a cui appartiene. Con l'allineamento in alto il numero sta accanto
   alla prima riga, che e' il suo posto. */
.tav-riga1{ display:flex; gap:.9rem; align-items:flex-start; }
.tav-segno{
  display:inline-block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accento-testo); border:1px solid var(--accento-filo);
  border-radius:999px; padding:.24rem .6rem; white-space:nowrap;
}
.tav-num{ font-family:var(--display); font-size:1.5rem; color:var(--accento-testo);
  line-height:1; padding-top:.18rem; }
.tavola td.tav-fine{ text-align:right; white-space:nowrap; }
.tavola .freccia{ position:relative; z-index:1; }
.tav-vuoto{ padding:1.6rem; text-align:center; color:var(--su-carta-tenue); }

/* ── il confronto: due colonne che si mettono a fuoco ────────── */
.tavola.confronto td{ font-size:.95rem; }
.tavola.confronto tbody th{
  text-align:left; font-weight:500; color:var(--su-carta);
  padding:.85rem clamp(.7rem,1.6vw,1.1rem); width:34%;
}
.tavola.confronto col{ transition:none; }
.tavola.confronto td[data-col]{ transition:background-color var(--tempo), color var(--tempo); }
.tavola.confronto td[data-col].fuoco{ background:var(--carta-3); color:var(--su-carta); }
.tavola.confronto thead th[data-col].fuoco{ color:var(--azione-testo); }

/* ── LA TAVOLA DA TELEFONO: ogni riga diventa una scheda ─────── */
@media (max-width:760px){
  .tavola{ border-radius:var(--raggio); }
  .tavola-comandi{ flex-direction:column; align-items:stretch; }
  .tavola-filtri{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.15rem;
    scrollbar-width:none; }
  .tavola-filtri::-webkit-scrollbar{ display:none; }
  .tavola-filtro{ flex:none; }
  .tavola thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tavola table,.tavola tbody,.tavola tr,.tavola td{ display:block; width:auto; }
  .tavola tbody tr{ padding:.3rem 0 .9rem; }
  .tavola td{ padding:.28rem clamp(.9rem,4vw,1.2rem); }
  .tavola td:first-child{ padding-top:.9rem; }
  /* l'intestazione torna davanti al dato */
  .tavola td[data-etichetta]:not(:first-child)::before{
    content:attr(data-etichetta) " · ";
    font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--su-carta-tenue);
  }
  .tavola td.tav-fine{ text-align:left; padding-top:.6rem; }
  .tavola.confronto tbody th{ display:block; width:auto; padding-bottom:.2rem;
    font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--su-carta-tenue); }
  /* nel confronto, da telefono si guarda una colonna alla volta */
  .tavola.confronto td[data-col]{ display:none; }
  .tavola.confronto td[data-col].fuoco{ display:block; background:none; }
  /* ...e il nome della colonna NON si ripete davanti a ogni valore: sta
     gia' scritto, acceso, nel tasto qui sopra. Sei volte «Il primo
     incontro» in colonna erano rumore. */
  .tavola.confronto td[data-etichetta]::before{ content:none; }
}

/* ═══════════════════════════════════════════════════════════════
   41 · IL RULLO DEI VIDEO — quello che pubblica davvero

   Richiesta del committente: «se abbiamo contenuti sui social
   troviamoli e proviamo ad aggiungerli». Ci sono, e sono suoi: sul
   canale YouTube pubblica video brevi, verticali, una domanda per
   volta. Le miniature sono scaricate e servite DA QUI — mai da un CDN,
   come vuole la regola — e stanno in `assets/img/video/`.

   🔴 NON È UN CAROSELLO CHE SCORRE DA SOLO. Sono link: un nastro che
   si muove da solo e li porta via mentre li punti è una trappola. Qui
   la riga si scorre col dito o con la rotella, si aggancia (`snap`) e
   sta ferma quando la lasci. Il nastro che non si ferma mai è un'altra
   cosa e sta alla sezione 34, dove non c'è niente da cliccare.
   ═══════════════════════════════════════════════════════════════ */
.rullo{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,190px);
  gap:clamp(.7rem,1.4vw,1rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:.7rem;
  /* il rullo esce dalla misura e arriva al bordo: si capisce che continua */
  margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
  /* 🔴 SENZA QUESTA RIGA il primo video parte tagliato. L'aggancio allinea
     il bordo della scheda al bordo del CONTENITORE, non a quello del suo
     riempimento: al caricamento il rullo si spostava da solo di 51 px e
     mangiava la prima miniatura. Misurato, non immaginato. */
  scroll-padding-inline:var(--gutter);
  scrollbar-width:thin; scrollbar-color:var(--filo-forte) transparent;
}
.rullo::-webkit-scrollbar{ height:6px; }
.rullo::-webkit-scrollbar-thumb{ background:var(--filo); border-radius:99px; }
.rullo::-webkit-scrollbar-track{ background:transparent; }
/* 🔴 `align-items:start`, e non e' un vezzo. Senza, la griglia STIRA
   ogni scheda all'altezza della riga: la miniatura cresceva fino a
   riempirla e spingeva titolo e data fuori dal riquadro, che li
   tagliava (il rullo scorre, quindi ritaglia). Misurato: scheda 353 px,
   miniatura 353 px, testo a zero. */
.rullo{ align-items:start; }
.clip{
  scroll-snap-align:start; position:relative;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.clip-fig{
  position:relative; overflow:hidden; border-radius:var(--raggio);
  background:var(--carta-3); aspect-ratio:3/4; box-shadow:var(--ombra-s);
  flex:none; width:100%;
}
.clip-fig img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.22,.61,.36,1); }
.clip:hover .clip-fig img{ transform:scale(1.04); }
/* il triangolo del play: due bordi, nessuna immagine */
.clip-play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:3rem; height:3rem; border-radius:50%;
  background:rgba(var(--rgb-carta),.9);
  display:grid; place-items:center;
  box-shadow:0 6px 18px -8px rgba(var(--rgb-ombra),.6);
  transition:transform var(--tempo), background-color var(--tempo);
}
.clip:hover .clip-play{ transform:translate(-50%,-50%) scale(1.08); }
.clip-play::before{
  content:""; width:0; height:0; margin-left:.22rem;
  border-left:.72rem solid var(--azione);
  border-top:.46rem solid transparent; border-bottom:.46rem solid transparent;
}
.clip-t{ display:block; margin-top:.6rem; font-size:.92rem; line-height:1.35;
  color:var(--su-carta); }
.clip-d{ display:block; margin-top:.2rem; font-size:.78rem; color:var(--su-carta-tenue); }
@media (prefers-reduced-motion:reduce){
  .clip-fig img,.clip-play{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOTO E VIDEO DEL BLOG — scelti da Domenico il 09/09/2026
   ══════════════════════════════════════════════════════════════════════
   ⚠️ Le sorgenti sono verticali 9:16 e piccole (720 px di lato lungo).
   Nelle schede orizzontali ci arrivano con `object-fit:cover`, che tiene
   il centro: e' li' che sta il soggetto in tutte e tre. */

/* il video in copertina si comporta esattamente come l'immagine */
.post-img video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.post:is(:hover,.accesa) .post-img video{ transform:scale(1.04); }
/* niente patina di palette sui video, come per le fotografie */
:root[data-palette] .post-img video{ filter:none; }

/* IL VIDEO DENTRO L'ARTICOLO.
   Regola THK: parte solo, muto, in loop, senza controlli. L'unico comando
   e' l'audio. La sorgente e' verticale: si limita l'altezza, altrimenti
   da telefono occupa due schermate e spezza la lettura. */
.art-video{
  margin:2.4rem 0; display:flex; flex-direction:column;
  align-items:center; gap:.8rem;
}
.art-video video{
  max-height:clamp(300px, 56vh, 520px); width:auto; max-width:100%;
  display:block; border-radius:var(--raggio);
  background:var(--carta-3); box-shadow:var(--ombra-m);
}
.art-video-audio{
  font-family:var(--testo); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--su-carta-tenue); background:none; border:0;
  padding:.35rem .1rem; cursor:pointer;
  border-bottom:1px solid var(--filo); transition:color .3s ease;
}
.art-video-audio:hover,
.art-video-audio:focus-visible{ color:var(--azione); }
.art-video-audio[aria-pressed="true"]{ color:var(--accento-testo); }

@media (prefers-reduced-motion:reduce){
  .post-img video{ transition:none; }
}

/* IL VIDEO IN APERTURA D'ARTICOLO.
   La sorgente e' verticale 9:16. Ritagliarla a fascia le taglierebbe
   testa e piedi: qui non si taglia, si limita l'altezza e si centra.
   Il fondo attorno e' la carta, quindi non si vede il riquadro. */
.art-figura.finestra video{
  display:block; margin-inline:auto;
  max-height:clamp(340px, 62vh, 560px); width:auto; max-width:100%;
  border-radius:var(--raggio); background:var(--carta-3);
  box-shadow:var(--ombra-m);
}

/* il pulsante audio quando il video sta in apertura d'articolo */
.art-figura .art-video-audio{ display:block; margin:.9rem auto 0; text-align:center; }


/* 🔴 15/09/2026 — I MARCHI DELLE PIATTAFORME NEI PULSANTI «Dove ascoltarlo».
   Richiesta del PDF dell'11/09: «Possiamo mettere i logi di apple music -
   spotify etc ?». I glifi sono quelli ufficiali (Simple Icons, CC0), messi
   IN LINEA nel pulsante: nessuna richiesta esterna in piu', e con
   `currentColor` seguono la palette del sito invece di imporre sei colori
   diversi in fila.

   ⚠️ LA CLASSE NON PUO' CHIAMARSI `.marchio`: quel nome e' gia' preso dal
   logo dell'intestazione (riga 240), che ha `flex:none; line-height:0` e su
   mobile un `padding-block`. Riusarlo storceva i sei loghi senza dare errore. */
/* Nessuna regola sul pulsante: `.azione` (riga 266) ha gia'
   `display:inline-flex; align-items:center; gap:.5rem`. Aggiungerne una
   qui rendeva questi sei pulsanti leggermente diversi da tutti gli altri
   del sito, con un gap in `em` invece che in `rem`. */
.logo-piattaforma{ flex:0 0 auto; width:1.1em; height:1.1em; display:block; }
@media (max-width:520px){ .logo-piattaforma{ width:1em; height:1em; } }

/* 🔴 19/09/2026 — IL BANNER DEL CONSENSO.
   Daniela ha chiesto Google Analytics, e GA4 usa cookie di profilazione:
   in Italia vogliono il consenso PRIMA, non l'avviso dopo. Il banner e'
   una barra bassa, non una finestra che copre il sito: si legge, si
   sceglie, sparisce. I due pulsanti hanno lo stesso peso visivo, perche'
   un «rifiuta» nascosto o sbiadito non e' una scelta libera. */
#consenso{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  padding:.95rem clamp(1rem,4vw,2.4rem);
  background:var(--inchiostro-fondo); color:var(--su-fascia);
  border-top:1px solid rgba(var(--rgb-su-fascia),.16);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
#consenso.visibile{ transform:none; }
#consenso p{
  flex:1 1 22rem; margin:0; font-size:.88rem; line-height:1.45;
  color:var(--su-fascia);
}
#consenso a{ color:var(--su-fascia); text-decoration:underline; text-underline-offset:2px; }
.consenso-bottoni{ display:flex; gap:.6rem; flex:0 0 auto; }
#consenso button{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.58rem 1.1rem; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(var(--rgb-su-fascia),.42); background:none; color:var(--su-fascia);
  transition:background .18s ease, border-color .18s ease;
}
#consenso button:hover{ background:rgba(var(--rgb-su-fascia),.12); border-color:var(--su-fascia); }
#consenso .consenso-si{ background:var(--su-fascia); color:var(--inchiostro-fondo); border-color:var(--su-fascia); }
#consenso .consenso-si:hover{ opacity:.88; background:var(--su-fascia); }
@media (max-width:560px){
  #consenso{ gap:.7rem; padding:.9rem 1rem 1.1rem; }
  .consenso-bottoni{ width:100%; }
  #consenso button{ flex:1 1 0; padding-block:.72rem; }   /* dito, non mouse */
}
@media (prefers-reduced-motion:reduce){ #consenso{ transition:none; } }
.scelta-riga{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; margin:1.1rem 0; }
.scelta-riga .tenue{ font-size:.88rem; color:var(--tenue); }

/* 🔴 19/09/2026 — L'ARTEFATTO DI SAFARI SULLO SCORRIMENTO.
   Il 14/09 Daniela ha fotografato, da iPhone, un titolo stampato sopra al
   paragrafo sotto («questo titolo scende e copre il testo»).
   ⚠️ NON sono riuscito a riprodurlo: misurato con Chromium a 390, 360 e
   768 px, prima e dopo l'animazione, a sei fasi diverse — mai una
   sovrapposizione. Il difetto e' quindi specifico di Safari su iOS, dove
   un elemento animato con `transform` puo' essere dipinto nel posto
   sbagliato per un fotogramma durante lo scorrimento per inerzia.

   Questo e' l'accorgimento standard contro quella classe di problema: si
   chiede al browser di tenere ogni elemento animato sul proprio livello,
   cosi' non viene ridipinto insieme ai vicini. Non cambia niente di come
   si vede, e non costa niente quando il difetto non c'e'. */
@supports (-webkit-touch-callout: none) {
  html.js .vieni{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  html.js .vieni.viva{ -webkit-transform:translateZ(0); }
}