/* ============================================================================
   proposta.css: gli stili nuovi della proposta di Noemi per la pagina caso
   studio (28/10/2026). Si carica dopo caso.css e non lo modifica: chi rivede
   la proposta trova qui, in un posto solo, tutto ciò che è stato aggiunto.
   Regole di riferimento: docs/lavori-linee-comuni.md.
   Solo token di tokens.css, nessun colore scritto a mano tranne dove detto.
   ========================================================================== */

/* ── Segnaposto ───────────────────────────────────────────────────────────────
   Un riquadro con un codice al posto di un'immagine che ancora non c'è. Il
   codice è lo stesso del nome del file da caricare su Drive (Lavori · Aure
   Studio / Originali). Le proporzioni sono quelle dell'immagine che arriverà,
   così l'impaginazione non salta quando il file entra. */
.segnaposto {
  display: grid;
  place-content: center;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1.5px dashed var(--viola-testo);
  background: var(--bianco-sporco);
  color: var(--testo);
  text-align: center;
  width: 100%;
}
.segnaposto--16x10 { aspect-ratio: 16 / 10; }
.segnaposto--4x5   { aspect-ratio: 4 / 5; }
.segnaposto--9x16  { aspect-ratio: 9 / 16; }
.segnaposto--1x1   { aspect-ratio: 1 / 1; }
.segnaposto--4x3   { aspect-ratio: 4 / 3; }
.segnaposto__codice {
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--viola-testo);
}
.segnaposto__cosa {
  font-size: var(--t-small);
  line-height: var(--lh-media);
  color: var(--testo-tenue);
  max-width: 36ch;
  margin-inline: auto;
}

/* Il dato che manca, dentro il testo. Fondo verde e testo nero: 7,42:1.
   Si vede da lontano apposta: una pagina che ne contiene uno non si pubblica
   (linee comuni §2 e §4). */
.da-raccogliere {
  background: var(--verde);
  color: var(--nero);
  padding: 0 0.3em;
  font-size: 0.85em;
  font-weight: var(--w-normal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.da-raccogliere::before { content: "⟨"; }
.da-raccogliere::after  { content: "⟩"; }

/* ── Fatti in cifre ───────────────────────────────────────────────────────────
   Tre fatti in testo, mai dentro un'immagine. Sotto il titolo nell'apertura,
   e come riga di dati nel modulo delle campagne. */
.caso-fatti {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .caso-fatti { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
}
.caso-fatti--modulo { margin-top: 0; }
.caso-fatti__voce { display: grid; gap: var(--s-1); align-content: start; }
.caso-fatti__cifra {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
}
.caso-fatti__eti {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-larga);
  color: var(--testo-tenue);
}

/* ── Vetrina: i reel nei telefoni ─────────────────────────────────────────────
   Subito sotto il titolo, perché il lavoro sui contenuti si veda senza
   scorrere. Quattro telefoni in riga da 1000 px; sotto, un carosello che si
   scorre di lato con il telefono successivo che si intravede. */
.caso-vetrina { margin-block-start: var(--s-5); }
.caso-telefoni {
  /* min-width: 0 e max-width: 100% tengono il carosello dentro la colonna:
     senza, la riga che scorre allarga la griglia che la contiene e la pagina
     intera esce di lato su telefono. */
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-2);
  scrollbar-width: thin;
}
.caso-telefoni > * { scroll-snap-align: start; }
@media (min-width: 600px) {
  .caso-telefoni { grid-auto-columns: 40%; }
}
@media (min-width: 1000px) {
  .caso-telefoni {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    gap: var(--s-4);
  }
}

/* Il telefono è solo una cornice: bordo sottile nel colore del testo, angoli
   arrotondati, nessun notch e nessun marchio. Qui l'angolo arrotondato è
   voluto: è un oggetto, non una fotografia (le foto restano ad angoli vivi). */
.telefono {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
/* Noemi, 28/10: niente cornice né linea grigia, solo il video con gli angoli
   appena arrotondati. */
.caso-figura.telefono > video,
.telefono > .segnaposto {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
}
.caso-figura.telefono > video { border: 0; }  /* batte .caso-figura > :first-child di caso.css */
.telefono__dida {
  margin: var(--s-1) var(--s-1) 0;
  font-size: var(--t-small);
  line-height: var(--lh-media);
  color: var(--testo-tenue);
}
/* Il bottone di pausa NON si vede col mouse (Noemi e Giuseppe, 28/10: video
   muti in loop, senza comandi a vista). Resta però quello di reel.r1.js,
   raggiungibile con Tab e visibile solo quando ha il focus: è la condizione
   minima della WCAG 2.2.2 per un video che si muove da solo oltre 5 secondi.
   Nessuna regola qui: vale quella di caso.css. */

/* ── Strategia: il dato accanto al passo ─────────────────────────────────────
   Proposta di Paola: ogni passo porta il suo numero, come cifra in evidenza. */
.caso-dato {
  display: block;
  margin-top: var(--s-1);
  font-weight: var(--w-bold);
  color: var(--viola-testo);
}

/* ── Testo isolato sotto un occhiello ───────────────────────────────────────── */
.caso-mod__micro--sola { margin-bottom: var(--s-3); }

/* ── Eventi: tre immagini 4:5 in riga ───────────────────────────────────────── */
@media (min-width: 760px) {
  .caso-riga--eventi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Titolo su quattro righe ──────────────────────────────────────────────────
   caso.css dà i ritardi solo alle prime due righe: qui la cascata continua
   sulle righe 3 e 4, così le parole salgono in ordine di lettura. */
.mask--apertura .riga:nth-child(2) .parola:nth-child(1) { animation-delay: 150ms; }
.mask--apertura .riga:nth-child(2) .parola:nth-child(2) { animation-delay: 200ms; }
.mask--apertura .riga:nth-child(2) .parola:nth-child(3) { animation-delay: 250ms; }
.mask--apertura .riga:nth-child(3) .parola:nth-child(1) { animation-delay: 300ms; }
.mask--apertura .riga:nth-child(3) .parola:nth-child(2) { animation-delay: 350ms; }
.mask--apertura .riga:nth-child(4) .parola:nth-child(1) { animation-delay: 400ms; }
.mask--apertura .riga:nth-child(4) .parola:nth-child(2) { animation-delay: 450ms; }

/* ── Righe a tre ──────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .caso-riga--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caso-elenco--tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
}
.caso-riga--sotto { margin-top: var(--s-4); }

/* ── Trittico delle stories ───────────────────────────────────────────────────
   Riferimento The Wave: tre stories affiancate su una fascia scura, quella
   centrale più grande. Costruito in CSS e non come video: dentro ci vanno le
   stories vere (immagini o video), si aggiorna cambiando un file e si riusa
   per ogni cliente. Su telefono restano tre, più piccole. */
.caso-trittico {
  margin-block: var(--s-5);
  padding-block: var(--s-5);
  background: var(--nero);
  color: var(--bianco);
}
.caso-trittico .caso-sub { color: var(--bianco); }
.trittico {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  gap: var(--s-2);
  max-width: 820px;
  margin-inline: auto;
}
@media (min-width: 760px) { .trittico { gap: var(--s-4); } }
.trittico .segnaposto { padding: var(--s-1); }

/* ── Copertina che si richiude in card ────────────────────────────────────────
   Riferimento S4 Studio, versione corta (copertina.js). --p va da 0 a 1 nel
   primo 70% di scorrimento della foto. La foto si stringe ai lati e in basso e
   scende appena di scala: solo movimento, opacità sempre 1.
   Angoli arrotondati di default, come S4: scelta di Noemi del 28/10, che
   per la copertina supera la regola degli angoli vivi (linee comuni §6). */
/* Giuseppe, 04/11: la foto parte a tutta pagina, staccata dai bordi dello
   schermo di un margine (--gutter) e con gli angoli a 16 px come i video della
   pagina; scorrendo si richiude fino alla misura del testo (--misura) e gli
   angoli salgono a 28. Niente scala: con la scala la foto si staccava dalla
   testata e lasciava una riga bianca sopra. Le percentuali di inset() sono
   sulla scatola della foto, cioè sulla larghezza della pagina. */
/* Tetto a 1920 px: la foto sorgente è larga 1440, e a 3840 la striscia
   diventava 6:1, sgranata e col viso tagliato. Oltre, la foto si centra. */
.caso-copertina img {
  max-width: 1920px;
  width: calc(100% - var(--gutter) * 2);
  border-radius: 16px;
}
.caso-copertina--card { background: transparent; }
.caso-copertina--card img {
  --q: var(--p, 0);
  --fine: max(var(--gutter), (100% - var(--misura)) / 2);
  --lato: calc(var(--gutter) + (var(--fine) - var(--gutter)) * var(--q));
  width: 100%;
  max-width: 1920px;
  border-radius: 0;
  clip-path: inset(0 var(--lato) calc(var(--q) * 7%) var(--lato) round calc(16px + var(--q) * 12px));
  will-change: clip-path;
}
/* Variante ?copertina=vivi: la card ad angoli vivi, per il confronto. */
.caso-copertina--vivi img {
  clip-path: inset(0 var(--lato) calc(var(--q) * 7%) var(--lato));
}

/* Giuseppe, 04/11: la testata velata (bianco all'88% più sfocatura) passava
   sopra la foto come una banda bianca che inseguiva lo scorrimento. Qui è
   piena e senza sfocatura. */
.testata {
  background: var(--bianco, #fff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Giuseppe, 04/11: sugli schermi grandi il titolo andava a capo dentro le
   righe («a» da sola, «Aure» e «Studio» separati). Da 760 in su il corpo
   segue la mezza colonna: «a community», la riga più larga, misura 5,6 em, e
   5,75 lascia il margine. Ogni .riga resta una riga sola anche col nowrap. */
@media (min-width: 760px) {
  .caso-apertura .caso-titolo {
    font-size: min(clamp(2rem, 1rem + 5.5vw, 7rem),
                   (min(var(--misura), 100vw - var(--gutter) * 2) - clamp(2rem, 4vw, 4rem)) / 2 / 5.75);
  }
  .caso-apertura .caso-titolo .riga { white-space: nowrap; }
}

/* ── Il racconto ──────────────────────────────────────────────────────────────
   Riferimento Dexanet (Noemi, 28/10): il lettore entra nel progetto. Prende il
   posto del micro paragrafo di caso.css (tetto 32 parole, grigio) nella testa
   dei moduli: due paragrafi brevi, colore pieno per leggerli bene. Il totale
   della pagina resta fra 600 e 1.200 parole (linee comuni §1). */
.caso-racconto { max-width: 58ch; }
/* Giuseppe, 03/11: una misura sola per tutti i paragrafi, la più grande delle
   due. Il primo paragrafo un ottavo più grande era una differenza che si vede
   come un errore e non come una scelta. */
.caso-racconto p {
  margin: 0 0 var(--s-2);
  font-size: calc(var(--t-body) * 1.125);
  line-height: var(--lh-larga);
  color: var(--testo);
}
.caso-racconto p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  .caso-testa:has(.caso-racconto) { align-items: start; }
}

/* Lo stacco fra due capitoli: la foto a tutta larghezza respira sopra. */
.caso-pausa { margin-top: var(--s-5); }

/* ── Occhiello sopra il titolo ────────────────────────────────────────────────
   Noemi, 28/10, per ogni lavoro: settore, città e anno stanno sopra il
   titolo. Supera la scelta della rev 8 di Giuseppe (occhiello sotto la lead). */
.caso-occhiello-alto { margin: 0 0 var(--s-2); }

.segnaposto--16x9 { aspect-ratio: 16 / 9; }

/* ── Ingresso delle immagini ──────────────────────────────────────────────────
   Al wipe di Giuseppe (la tendina che scopre la foto dal basso) si aggiunge un
   leggero zoom indietro dentro la cornice: la foto parte al 106% e si posa al
   100% mentre si scopre. Solo movimento, opacità sempre 1. Vale anche per i
   reel e per i segnaposto, che salgono di poco. Con «riduci movimento» non
   parte: lo stato nascosto vive sotto .js-anima, che entrata.js non mette. */
.js-anima .caso-figura.anima > img {
  transform: scale(1.06);
  transition: clip-path var(--m-lungo, 900ms) var(--e-out, ease-out), transform 1400ms var(--e-out, ease-out);
}
.js-anima .caso-figura.anima.dentro > img { transform: none; }
/* Lo zoom al 106% non deve uscire dalla cornice (Giuseppe, 03/11): sulle foto
   a tutta larghezza sporgeva di 12 px a destra, e su telefono la pagina
   diventava più larga dello schermo e si spostava di lato. */
.caso-figura.anima { overflow: clip; }
.js-anima .segnaposto.anima { transform: translateY(24px); transition: transform 900ms var(--e-out, ease-out); }
.js-anima .segnaposto.anima.dentro { transform: none; }

.segnaposto--21x9 { aspect-ratio: 21 / 9; }

/* ── I servizi nel titolo ─────────────────────────────────────────────────────
   Noemi e Giuseppe, 28/10, per ogni lavoro: i servizi fatti per quel cliente,
   solo testo in maiuscoletto viola, separati da un punto. Niente pillole né
   bordi: non sono bottoni e non devono sembrarlo. */
.caso-tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) 0;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--viola-testo);
}
.caso-tag li + li::before {
  content: "·";
  margin: 0 0.75em;
  color: var(--viola);
}

/* ── Il profilo del cliente ───────────────────────────────────────────────────
   Bottone con bordo grigio, per ogni lavoro: porta al profilo vero. */
.caso-profilo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 1.5px solid var(--hairline-forte);
  border-radius: var(--raggio-pill);
  color: var(--testo);
  text-decoration: none;
  transition: border-color var(--transizione);
}
.caso-profilo:hover { border-color: var(--testo); }
.caso-profilo:focus-visible { outline: 3px solid var(--viola); outline-offset: 3px; }

/* ── Testimonianza: la fascia finale ──────────────────────────────────────────
   Noemi, 28/10: a tutta larghezza, alta fra 600 e 800 px, lunga e stretta,
   come chiusura del racconto. A sinistra il ritratto che riempie l'altezza,
   a destra la frase. Su telefono si impilano. */
.caso-finale {
  display: grid;
  margin-block-start: var(--s-6);
  background: var(--bianco-sporco);
}
@media (min-width: 900px) {
  .caso-finale {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    height: clamp(600px, 70vh, 800px);
  }
}
.caso-finale__foto { height: 100%; min-height: 360px; border: 0; }
.caso-finale__testo {
  margin: 0;
  align-self: center;
  padding: var(--s-5) var(--gutter);
  max-width: 34ch;
}
.caso-finale__testo p {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  font-weight: var(--w-light);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
}
.caso-finale__testo footer {
  font-size: var(--t-small);
  color: var(--testo-tenue);
}

/* ── Spaziature: la scala dei respiri ─────────────────────────────────────────
   Noemi, 28/10: più aria fra il testo e ciò che lo segue (dati, immagini),
   almeno 48 px, sempre multipli di 8. Sta in fondo al file perché deve
   vincere su caso.css e sulle regole sopra.
     48  la base: fra due blocchi dello stesso modulo
     64  dopo un blocco di testo (testa del modulo, racconto, voci)
     96  prima di una fascia o di un'immagine a tutta larghezza
    128  fra un modulo e l'altro
   Su telefono i due gradini alti scendono a 64 e 96: lo schermo è corto e
   ogni 32 px in più sono uno scroll in più. La base resta 48. */
:root {
  --r-base: 48px;
  --r-testo: 64px;
  --r-fascia: 96px;
  --r-modulo: 128px;
}
@media (max-width: 759.98px) {
  :root { --r-fascia: 64px; --r-modulo: 96px; }
}

/* Il passo dentro un modulo era un gap unico da 32 px (caso.css): diventa 48. */
.caso-mod { gap: var(--r-base); padding-block-start: var(--r-modulo); }

/* Dopo il testo, 64: il gap da 48 più 16 sul blocco che segue. */
.caso-mod > .caso-testa + *,
.caso-mod > .caso-corpo:has(> .caso-elenco) + * { margin-top: calc(var(--r-testo) - var(--r-base)); }

/* Fasce e immagini a tutta larghezza: 96 sopra e sotto. */
.caso-mod > .caso-pausa,
.caso-mod > .caso-trittico { margin-top: calc(var(--r-fascia) - var(--r-base)); }
.caso-mod > .caso-trittico { margin-bottom: calc(var(--r-fascia) - var(--r-base)); }
.caso-trittico { padding-block: var(--r-fascia); margin-block: 0; }

/* Fra immagini affiancate: 32 su desktop, 24 su telefono. */
.caso-riga { gap: 24px; }
@media (min-width: 760px) { .caso-riga { gap: 32px; } }
.caso-riga--sotto { margin-top: var(--r-base); }

/* La testa di modulo: 24 fra titolo e racconto quando vanno a capo. */
.caso-testa { row-gap: 24px; }
.caso-racconto p { margin-bottom: 16px; }

/* Apertura: servizi a 32 dalla lead, fatti a 64 dai servizi. */
.caso-tag { margin-top: 32px; }
.caso-fatti { margin-top: var(--r-testo); padding-top: 32px; gap: 32px; }
.caso-fatti--modulo { margin-top: 0; }

/* La vetrina segue l'apertura a 96, non a 128: è la stessa prima schermata
   che continua. */
.caso-vetrina { margin-block-start: 0; padding-block-start: var(--r-fascia); }

/* Il micro testo isolato (l'elenco eventi di The Ritual) sta a 48 dalle foto. */
.caso-mod__micro--sola { margin-bottom: 0; }

/* La testimonianza chiude a 128 dall'ultimo modulo. */
.caso-finale { margin-block-start: var(--r-modulo); }

/* L'apertura aveva un fondo fluido (40-64 px) che si sommava al passo della
   vetrina: lo si azzera, e la distanza la decide solo la scala. La copertina
   sta a 48 dall'occhiello, la base. */
.caso-apertura { padding-bottom: 0; }
.caso-copertina { margin-bottom: var(--r-base); }

/* La fascia della testimonianza e il blocco dei contatti hanno lo stesso
   fondo (bianco sporco): senza uno stacco bianco si fonderebbero in un
   blocco solo. */
.caso-finale { margin-block-end: var(--r-modulo); }

/* ── Testa della vetrina: profilo a sinistra, «Highlights» a destra ─────────── */
.caso-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.caso-highlights__link { margin: 0; }
.caso-highlights__titolo {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
}

/* ── I dati di Meta Ads: centrati e con più aria ──────────────────────────────
   Noemi, 28/10: cifre e etichette al centro della colonna, filetti sopra e
   sotto, 64 px di respiro dentro e 64 prima delle creatività. */
.caso-fatti--centro {
  text-align: center;
  padding-block: var(--r-testo);
  border-bottom: 1px solid var(--hairline);
}
.caso-fatti--centro .caso-fatti__voce { justify-items: center; }
.caso-fatti--centro .caso-fatti__cifra { font-size: var(--t-h2); }
.caso-fatti--centro .caso-fatti__eti { max-width: 28ch; }
@media (min-width: 760px) { .caso-fatti--centro { column-gap: var(--r-testo); } }
.caso-fatti--centro + .caso-riga--sotto { margin-top: var(--r-testo); }

/* ── Moduli a galleria (Brand e visual identity) ──────────────────────────────
   Noemi, 28/10: un ritmo solo fra le immagini, 32 px in orizzontale e in
   verticale (prima 32 e 48, due misure nella stessa galleria). I gruppi si
   separano con lo spazio, non con i titoletti: 64 px dove comincia un gruppo
   nuovo (.caso-stacco). Dal testo alla prima immagine resta 64.
   Il gap del modulo è 48: il margine negativo di 16 porta il passo a 32. */
.caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-corpo { margin-top: -16px; }
.caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-stacco { margin-top: calc(var(--r-testo) - var(--r-base)); }
@media (max-width: 759.98px) {
  .caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-corpo { margin-top: -24px; }  /* 24 su telefono, come le righe */
}
@media (max-width: 759.98px) {
  .caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-stacco { margin-top: calc(var(--r-testo) - var(--r-base)); }
}

/* ── Riga di collegamenti sotto il titolo ─────────────────────────────────────
   Noemi, 29/10 (linee comuni §3): con più di tre blocchi, un collegamento a
   ciascuno. Testo piccolo e sottolineato: sono link e devono sembrarlo. Sta a
   32 dal filetto dei fatti. */
.caso-indice ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}
.caso-indice a {
  color: var(--testo);
  text-decoration: underline;
  text-decoration-color: var(--hairline-forte);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--transizione);
}
.caso-indice a:hover { text-decoration-color: var(--testo); }
.caso-indice a:focus-visible { outline: 3px solid var(--viola); outline-offset: 3px; }

/* ── Prossimo lavoro ──────────────────────────────────────────────────────────
   Noemi, 29/10, per ogni caso studio: l'immagine del caso successivo e sotto
   il suo nome, tutto un link. Foto ad angoli vivi (§6). 128 sopra e sotto:
   i margini si fondono con quello della testimonianza, quando c'è. */
.caso-prossimo { margin-block: var(--r-modulo); }
.caso-prossimo__link {
  display: grid;
  gap: 24px;
  color: var(--testo);
  text-decoration: none;
}
.caso-prossimo__img { border: 0; }
.caso-prossimo__testo { display: grid; gap: var(--s-1); }
.caso-prossimo__testo .occhiello { margin: 0; }
.caso-prossimo__titolo {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
}
.caso-prossimo__titolo [aria-hidden] {
  display: inline-block;
  transition: transform var(--transizione);
}
.caso-prossimo__link:hover .caso-prossimo__titolo [aria-hidden] { transform: translateX(8px); }
.caso-prossimo__link:focus-visible { outline: 3px solid var(--viola); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .caso-prossimo__titolo [aria-hidden] { transition: none; }
}

/* ── Media larghi, come The Wave ──────────────────────────────────────────────
   Noemi, 29/10 (prova): le griglie di media escono dalla colonna del testo e
   arrivano quasi al bordo, con un margine laterale stretto e uno spazio
   uniforme fra un media e l'altro. Misurato su The Wave a 2000 px: margine
   ~34, spazio ~64, cioè 24 e 48 a 1440. Su telefono 16 e 16. Il testo resta
   nella sua colonna. Sta in fondo perché deve vincere su caso.css e sopra. */
:root { --m-lato: 24px; --m-passo: 48px; }
/* Su telefono i media si allineano al testo (Giuseppe, 03/11): a 16 px contro
   i 21 del gutter i due bordi sinistri non coincidevano e si vedeva. */
@media (max-width: 759.98px) { :root { --m-lato: var(--gutter); --m-passo: 16px; } }

.caso-corpo.caso-riga,
.caso-corpo.caso-stacco,
.caso-corpo:has(> .caso-riga),
.caso-corpo:has(> .caso-telefoni) {
  width: calc(100% - var(--m-lato) * 2);
  max-width: none;
}
.caso-riga,
.caso-telefoni { gap: var(--m-passo); }
@media (min-width: 760px) { .caso-riga { gap: var(--m-passo); } }
@media (min-width: 1000px) { .caso-telefoni { gap: var(--m-passo); } }
/* Nelle gallerie anche fra una riga e l'altra c'è lo stesso spazio: il
   margine corregge il passo del modulo (48) fino a --m-passo. Il gruppo nuovo
   (.caso-stacco) non ha una pausa in più: il ritmo è uno solo. */
.caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-corpo { margin-top: calc(var(--m-passo) - var(--r-base)); }
@media (max-width: 759.98px) {
  .caso-mod--galleria > .caso-corpo:not(.caso-testa) + .caso-corpo { margin-top: calc(var(--m-passo) - var(--r-base)); }
}

/* ── The Ritual: immagine · video · immagine ──────────────────────────────────
   Noemi, 29/10: le tre colonne sono le stesse della griglia di foto sotto,
   così i bordi si allineano. Per avere anche la stessa altezza il video prende
   la proporzione 4:5 delle locandine e mostra la parte centrale (cover). */
.caso-riga--evento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 760px) { .caso-riga--evento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.caso-riga--evento .caso-figura.telefono > video {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* Le foto dell'evento: una riga da tre in 4:5, alta come la riga sopra
   (locandina · video · key visual). Le foto sono quadrate e mostrano la parte
   centrale. Noemi, 30/10. */
.caso-riga--griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caso-riga--griglia .caso-figura > img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* ── Reel delle campagne: tre come Highlights ─────────────────────────────────
   Noemi, 29/10: stessa misura dei reel di Highlights (un quarto della riga),
   quindi la fila da tre è larga tre quarti e sta al centro. Su telefono resta
   il carosello di Highlights. */
@media (min-width: 1000px) {
  .caso-telefoni--tre {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc((100% - var(--m-passo) * 3) * 0.75 + var(--m-passo) * 2);
    margin-inline: auto;
  }
}

/* ── Testimonianza: il ritratto vero riempie la sua metà della fascia ────── */
figure.caso-finale__foto { margin: 0; overflow: hidden; }
.caso-finale__foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 0;
}

/* ── The Ritual: il riquadro che alterna le foto ──────────────────────────────
   Noemi, 30/10. Le foto sono impilate nella stessa cella e si danno il cambio
   a stacco netto, senza dissolvenza (step-end): 0,7 s ciascuna, 2,8 s il giro
   delle quattro, in loop. I ritardi negativi fanno girare tutte le foto da
   subito, sfasate di 0,7 s. Il ritmo resta sotto i tre cambi al secondo
   (soglia WCAG 2.3.1 sui lampeggi). Per cambiare il numero di foto vanno
   rifatti durata, percentuale del keyframe (100/n) e ritardi. */
.caso-dissolvenza { display: grid; }
.caso-dissolvenza > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #E9E9E9;
  opacity: 0;
  animation: stacco 2.8s step-end infinite;
}
.caso-dissolvenza > img:nth-of-type(1) { animation-delay: 0s; }
.caso-dissolvenza > img:nth-of-type(2) { animation-delay: -2.1s; }
.caso-dissolvenza > img:nth-of-type(3) { animation-delay: -1.4s; }
.caso-dissolvenza > img:nth-of-type(4) { animation-delay: -0.7s; }
@keyframes stacco {
  0%      { opacity: 1; }
  25%     { opacity: 0; }
  100%    { opacity: 0; }
}
.caso-dissolvenza:hover > img,
.caso-dissolvenza:focus-visible > img { animation-play-state: paused; }
.caso-dissolvenza:focus-visible { outline: 3px solid var(--viola); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .caso-dissolvenza > img { animation: none; }
  .caso-dissolvenza > img:nth-of-type(1) { opacity: 1; }
}

/* ── L'apertura: titolo, lead e servizi ──────────────────────────────────────
   Giuseppe, 03/11. Nel markup l'ordine è titolo · lead · servizi, che è quello
   del telefono. Da 760 px in su la griglia porta i servizi accanto al titolo,
   in una colonna che va dal titolo fino al margine destro (Giuseppe, 03/11:
   a distanza fissa stavano troppo vicini al titolo).
   I margini qui dentro sono azzerati e lo spazio lo dà la griglia, perché in
   una griglia i margini non si fondono come facevano prima. */
.caso-apertura__testa {
  display: grid;
  grid-template-areas: "titolo" "lead" "tag";
  row-gap: var(--s-4);
}
.caso-apertura__testa .caso-titolo { grid-area: titolo; margin: 0; }
.caso-apertura__testa .caso-apertura__coda { grid-area: lead; }
.caso-apertura__testa .lead { margin: 0; }
.caso-apertura__testa .caso-tag { grid-area: tag; margin: 0; }
@media (min-width: 760px) {
  /* I servizi stanno nella colonna di destra e la occupano fino al margine;
     scendono accanto al titolo E alla lead (area «tag» su due righe), perché
     a 32 px la colonna è più alta del solo titolo. La seconda riga è 1fr: lo
     spazio in più va sotto la lead, non fra titolo e lead. */
  .caso-apertura__testa {
    /* Due metà uguali: con «auto» la lead allargava la sua colonna e a 900 px
       i servizi andavano a capo. A metà colonna il titolo ci sta da 760 in
       su (a 760 misura 325 px su 336 disponibili). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas: "titolo tag" "lead tag";
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .caso-apertura__testa .caso-apertura__coda { align-self: start; }
  /* PROVA GRAFICA (Giuseppe, 03/11): maiuscolo, una linea continua fino al
     margine destro fra un servizio e l'altro, aria ampia fra testo e linea.
     Corpo 24 px (a 32 era troppo pesante accanto al titolo). L'evidenziazione
     viola al passaggio del mouse è stata provata e tolta il 03/11. */
  .caso-apertura__testa .caso-tag {
    align-self: start;
    flex-direction: column;
    gap: 0;
    /* 24 px da 873 in su; sotto scende con lo schermo (21 a 760), perché a
       24 fissi «Brand e visual identity» va a capo nella mezza colonna. */
    font-size: min(1.5rem, 2.75vw);
    letter-spacing: 0.04em;
  }
  .caso-apertura__testa .caso-tag li {
    padding-block: 0.75em;
    line-height: 1;
  }
  .caso-apertura__testa .caso-tag li:first-child { padding-top: 0; }
  .caso-apertura__testa .caso-tag li + li { border-top: 1px solid var(--hairline-forte); }
  .caso-apertura__testa .caso-tag li + li::before { content: none; }
}

/* ── I fatti in cifre: le cifre salgono dal basso ─────────────────────────────
   Apertura e dati Meta (Giuseppe, 03/11). Ogni cifra sale dentro la sua riga,
   come le parole del titolo. Il blocco intorno resta fermo: si muove solo il
   numero. Con «riduci movimento» entrata.js non mette .js-anima e le cifre
   sono già al loro posto. */
.js-anima .caso-fatti--centro .caso-fatti__voce.anima { transform: none; }

/* ── Telefono: la scala tipografica ──────────────────────────────────────────
   Giuseppe, 03/11. Il titolo prende tutta la colonna: i glifi della riga più
   larga, «a community», misurano 5,6 em, e il divisore 5,65 lascia un filo
   di margine perché ogni .riga resti una riga sola (la maschera taglia la
   scatola). A 390 fa 61,6 px e l'ultima lettera cade a 24 px dal bordo,
   contro i 21 a sinistra. ⚠️ La scatola di .riga sporge di 0,24 em per lato
   per costruzione (padding e margine negativo della maschera, motion.r1.css):
   chi misura il titolo misuri i glifi, non la scatola. */
@media (max-width: 759.98px) {
  .caso-apertura .caso-titolo { font-size: min(calc((100vw - var(--gutter) * 2) / 5.65), 4.5rem); }
  /* In fila andavano a capo col puntino in testa alla riga: in colonna, come
     da desktop, ogni servizio sta su una riga sua e i puntini non servono. */
  .caso-apertura .caso-tag { font-size: 0.875rem; flex-direction: column; gap: 6px; }
  /* Un corpo solo per i paragrafi, 18 px: la lead (18,3 a 390) si allinea al
     racconto invece di stargli a un soffio. */
  .caso-apertura .lead { font-size: 1.125rem; }
  /* L'occhiello si stacca dal titolo e si avvicina alla copertina: 24 sopra,
     32 sotto (erano 48 e 16). */
  .caso-apertura .caso-copertina { margin-bottom: 24px; }
  .caso-apertura .caso-occhiello-alto { margin-bottom: 32px; }
  .caso-apertura .caso-tag li + li::before { content: none; }
  .caso-fatti--centro .caso-fatti__cifra { font-size: 2.75rem; overflow: hidden; }
  .caso-fatti__scorre { display: inline-block; }
  .js-anima .caso-fatti--centro .caso-fatti__scorre {
    transform: translateY(110%);
    transition: transform 900ms var(--e-out, ease-out);
  }
  .js-anima .caso-fatti--centro .caso-fatti__voce.dentro .caso-fatti__scorre { transform: none; }
}

/* ── Le GIF su telefono ───────────────────────────────────────────────────────
   Giuseppe, 03/11: sotto i 760 px ogni griglia di immagini diventa una GIF,
   a stacco netto come il riquadro di The Ritual. Il cambio lo fa gif.js, che
   mette .gif-attiva sul contenitore e .attiva sull'immagine di turno. Senza
   JavaScript, o con «riduci movimento», resta la prima immagine.
   The Ritual e Brand e visual identity hanno una GIF sola con tutte le loro
   immagini (.solo-telefono), e i blocchi da desktop si nascondono. */
.caso-corpo.solo-telefono { display: none; }
@media (max-width: 759.98px) {
  .caso-corpo.solo-telefono { display: block; }
  .caso-riga--griglia,
  .caso-riga--evento > .caso-figura:not(.telefono),
  #s-brand-identity > .caso-corpo:not(.caso-testa):not(.solo-telefono) { display: none; }
  .caso-riga--evento { grid-template-columns: minmax(0, 1fr); }

  .caso-gif { display: grid; }
  .caso-gif > img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #E9E9E9;
  }
  .caso-gif:not(.gif-attiva) > img:not(:first-child) { visibility: hidden; }
  /* Le due immagini larghe inquadrano il marchio, non il centro. */
  .caso-gif > img.gif-logotipo { object-position: 84% 50%; }
  .caso-gif > img.gif-vetrina  { object-position: 15% 50%; }

  [data-gif].gif-attiva { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-gif].gif-attiva > * { grid-area: 1 / 1; visibility: hidden; }
  [data-gif].gif-attiva > .attiva { visibility: visible; }
  [data-gif].gif-attiva:focus-visible { outline: 3px solid var(--viola); outline-offset: 6px; }

  /* Ferma col tocco, mostra il play in basso a destra (Giuseppe, 03/11): un
     cerchio bianco con il triangolo, nient'altro. È il segno che la GIF si
     riattiva con un altro tocco. Non riceve i tocchi: li prende la GIF. */
  [data-gif].gif-attiva { position: relative; cursor: pointer; }
  [data-gif].gif-attiva > .gif-icona {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transizione), visibility 0s linear 220ms;
  }
  [data-gif].gif-ferma > .gif-icona { visibility: visible; opacity: 1; transition: opacity var(--transizione); }
  .gif-icona svg { width: 20px; height: 20px; fill: var(--nero); }
}

/* ── Un passo solo fra le sezioni ─────────────────────────────────────────────
   Giuseppe, 03/11: fra una sezione e l'altra lo spazio è --r-modulo (96 su
   telefono, 128 da 760), anche quando la sezione finisce con un media.
   Misurato a 390 prima della correzione: 96 dopo foto e GIF, ma 112 dopo i
   caroselli dei reel, perché il carosello tiene sotto 16 px per la barra di
   scorrimento; e 152 fra «Prossimo lavoro» e la chiusura, dove al margine
   del banner si sommava il padding della sezione dei contatti.
   Resta fuori di proposito il passo fra apertura e Highlights (64 su
   telefono): è la stessa prima schermata che continua (Noemi, 28/10). */
.caso-mod > .caso-corpo:last-child > .caso-telefoni { margin-bottom: calc(var(--s-2) * -1); }
.caso-prossimo { margin-block-end: max(0px, calc(var(--r-modulo) - var(--s-6))); }

/* Il bottone «Preferenze cookie» del piede, copiato da home.css (04/11). */
.pie__preferenze {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pie__preferenze:hover { text-decoration-thickness: 2px; }
.pie__preferenze:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Giuseppe, 04/11: sugli schermi grandi i titoli dei moduli lasciavano una
   parola sola sull'ultima riga («identity», «Ritual», «costruire»). */
.caso-mod__titolo { text-wrap: balance; }
.caso-racconto p, .caso-apertura .lead { text-wrap: pretty; }