/* ==========================================================================
   home.css — sito vetrina.
   Carica dopo tokens.css e base.css.

   Distribuzione del colore su questa pagina: circa 60% fondo chiaro,
   30% tra sabbia e i due stacchi navy, meno del 5% ottone — e l'ottone solo
   su azioni primarie, numeri e piccole sottolineature.
   ========================================================================== */

/* ================================================================ 1. hero */

.hero { padding-block: var(--sp-7) var(--sp-section-s); overflow: hidden; }
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); }
}

.hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-4); }
.hero__payoff {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  margin-bottom: var(--sp-6);
  max-width: 30ch;
}
.hero__foto { position: relative; }
.hero__foto .media { box-shadow: var(--sh-lg); }

/* Il riconoscimento appoggiato alla foto: è l'unico dato comparativo
   verificato da terzi, quindi sta dove si guarda per primo. */
.hero__premio {
  position: absolute; left: calc(var(--sp-4) * -1); bottom: var(--sp-6);
  max-width: 230px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-brass);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-md);
}
.hero__premio strong { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.3; }
.hero__premio span { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: 3px; line-height: 1.4; }
@media (max-width: 859px) {
  .hero__premio { position: static; max-width: none; margin-top: var(--sp-4); box-shadow: none; }
}

/* ---- barra di prova sociale ---- */
.prove {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-7);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-5);
}
@media (min-width: 720px) { .prove { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.prova { padding: var(--sp-3) 0; }
.prova__n {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1;
  color: var(--c-brass); font-variant-numeric: tabular-nums lining-nums;
}
.prova__l { font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: var(--sp-2); line-height: 1.4; }
/* La prima prova è il riconoscimento: si distingue senza gridare */
.prova--primo .prova__n { font-size: var(--fs-lg); }
.prova--primo { grid-column: span 2; }
@media (min-width: 720px) { .prova--primo { grid-column: span 1; } }

/* ================================================================= 2. bio */

.bio { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .bio { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; } }
.bio__testo p + p { margin-top: var(--sp-4); }
.bio__testo p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--c-ink-2); }
.bio__testo p:first-of-type { font-size: var(--fs-md); color: var(--c-ink); }

/* La frase su cui poggia tutta la sezione */
.bio__perno {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--c-brass);
  margin: var(--sp-6) 0;
}
/* Apertura: un gradino sopra il resto, così l'occhio sa da dove partire */
.bio__apertura { font-size: var(--fs-md); color: var(--c-ink); }

/* La foto con la sua didascalia. `.media` ha `overflow: hidden` e una
   proporzione fissa: una didascalia dentro verrebbe tagliata, quindi la
   cornice sta fuori e dentro ci va il riquadro dell'immagine. */
/* `margin: 0` azzerava anche l'`u-mt-6` che stava nell'HTML, perche' le due
   regole pesano uguale e questa arriva dopo: la foto finiva incollata al
   titolo. Il margine adesso lo dichiara solo questa riga, e l'HTML non ci
   prova piu'. Il reset serve comunque, perche' un `figure` nasce con i
   margini del browser. */
.bio__foto { margin: var(--sp-6) 0 0; }
.bio__foto figcaption { margin-top: var(--sp-3); }

/* I tre fatti, che sono la parte che si legge per prima da chi scorre.
   Erano tre righe grigie con un trattino davanti: la cosa piu' scansionabile
   della sezione, vestita da nota a margine. Adesso il valore sta sopra e in
   grande, la spiegazione sotto, e da 560 px in su stanno in fila. */
.bio__fatti {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  display: grid; gap: var(--sp-5);
  list-style: none; padding-left: 0;
}
@media (min-width: 560px) {
  .bio__fatti { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-4); }
}

.bio__fatti li { display: grid; gap: var(--sp-2); align-content: start; }

/* Il valore nel carattere dei titoli: e' un numero, e i numeri di questo
   sito si leggono in Fraunces. `lining-nums` perche' le cifre di serie sono
   minuscole e in mezzo a una fascia di dati sembrano refusi. */
.bio__fatto-v {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-lg); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--c-navy);
  font-variant-numeric: lining-nums;
}
/* Il filo d'ottone sopra ogni valore: e' lo stesso segno delle carte delle
   credenziali piu' sotto, e serve a dire che sono la stessa specie di cosa,
   cioe' fatti verificabili e non frasi. */
.bio__fatti li::before {
  content: "";
  display: block;
  width: 26px; height: 2px;
  border-radius: var(--r-full);
  background: var(--c-brass);
}
.bio__fatto-l {
  font-size: var(--fs-3xs); color: var(--c-ink-3); line-height: 1.5;
}

/* L'invito a chi ha piu' di un immobile. Era testo piccolo e grigio in fondo
   alla colonna, cioe' il posto in cui si mettono le cose che non contano; ed
   e' invece rivolto a chi vale di piu'. Un riquadro sabbia lo stacca dal
   racconto senza gridare: non e' un pulsante, e' un'apertura. */
/* `.bio__testo .bio__extra` e non `.bio__extra` da sola: `.bio__testo p`
   detta misura e colore di ogni paragrafo della colonna, e a parita' di peso
   vincerebbe lei. Due classi bastano a passarle davanti, e sono meglio di un
   `!important`, che in questo progetto esiste solo per la regola che fa
   funzionare `hidden`. */
.bio__testo .bio__extra {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-sand);
  border-radius: var(--r-md);
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.bio__extra strong { color: var(--c-ink); font-weight: var(--fw-semi); }

/* ============================================================ 3. percorso */

.tl { position: relative; padding-left: var(--sp-7); }
@media (min-width: 760px) { .tl { padding-left: 0; max-width: 760px; margin-inline: auto; } }

/* La linea si disegna con scaleY: resta sulla GPU e non tocca il layout */
.tl__linea {
  position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: var(--c-brass);
  transform: scaleY(0); transform-origin: top center;
  opacity: .45;
}
@media (min-width: 760px) { .tl__linea { left: 50%; margin-left: -1px; } }

.tl__tappa { position: relative; padding-bottom: var(--sp-7); }
.tl__tappa:last-child { padding-bottom: 0; }
.tl__punto {
  position: absolute; left: calc(var(--sp-7) * -1 + 5px); top: 4px;
  width: 14px; height: 14px; border-radius: var(--r-full);
  background: var(--c-surface); border: 2px solid var(--c-brass);
  transition: transform var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.tl__tappa.is-in .tl__punto { background: var(--c-brass); transform: scale(1.15); }

.tl__anno {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--c-brass); line-height: 1; margin-bottom: var(--sp-2);
  font-variant-numeric: lining-nums;
}
.tl__titolo { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tl__testo { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-relaxed); max-width: 46ch; }

/* Da 760px la timeline si apre a due colonne alternate */
@media (min-width: 760px) {
  .tl__tappa { width: 50%; padding-right: var(--sp-7); }
  .tl__tappa:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: var(--sp-7); text-align: left; }
  .tl__tappa:nth-child(odd) { text-align: right; }
  .tl__tappa:nth-child(odd) .tl__testo { margin-left: auto; }
  .tl__punto { left: auto; right: -7px; }
  .tl__tappa:nth-child(even) .tl__punto { left: -7px; right: auto; }
}

.tl__tappa { opacity: 0; transform: translateY(18px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.tl__tappa.is-in { opacity: 1; transform: none; }
html:not(.js) .tl__tappa { opacity: 1; transform: none; }
html:not(.js) .tl__linea { transform: scaleY(1); }

/* ========================================================= 4. credenziali
   Una riga di prove, non una sezione di vendita: niente card grandi,
   niente icone decorative. */

/* ---- le credenziali: quattro carte, non quattro colonne di testo ----
   Prima erano quattro blocchi separati da un filo sottile in cima. Si
   leggevano come un elenco, e in una sezione che si chiama «credenziali»
   l'elenco e' esattamente la forma che non convince nessuno.

   Adesso sono carte: un contenitore che dice «questa e' una cosa a se'», con
   la sua icona per farla riconoscere da lontano. Le quattro voci hanno titoli
   lunghi e simili («Laurea in...», «Formazione continua...», «Abilitazione
   all'esercizio...»): senza un segno grafico si leggono una per volta. */
.cred { display: grid; gap: var(--sp-4); }
@media (min-width: 640px)  { .cred { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cred { grid-template-columns: repeat(4, 1fr); } }

.cred__v {
  position: relative;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}

/* Il filo d'ottone in cima si disegna da sinistra quando la carta entra.
   Non e' decorazione fine a se stessa: e' lo stesso gesto della barra di
   avanzamento del questionario, e usa lo stesso gradiente. Il ritardo cresce
   con l'indice, cosi' i quattro fili si accendono uno dopo l'altro invece che
   tutti nello stesso istante.

   Sta rientrato e arrotondato invece che attaccato ai bordi: a filo del bordo
   veniva tagliato dai 18 px di raggio dell'angolo e sembrava una riga storta
   che galleggia. Rientrato e' un accento voluto, e allineato all'imbottitura
   comincia esattamente dove comincia il testo. */
.cred__v::before {
  content: "";
  position: absolute;
  top: var(--sp-4); left: var(--sp-5); right: var(--sp-5);
  height: 3px;
  border-radius: var(--r-full);
  background: var(--g-brass-rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}
.cred__v.is-in::before { transform: scaleX(1); }

/* L'icona in una pastiglia d'ottone velato. Entra un momento dopo il filo,
   con una scala che parte da poco sotto: e' l'unico movimento con un
   rimbalzo, e ce l'ha perche' e' l'unico elemento tondo della sezione. */
.cred__i {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-brass-a12);
  /* `--c-brass-hover` e non `--c-brass`: l'ottone chiaro sulla pastiglia
     d'ottone velato dava 2,43:1, sotto la soglia di 3:1 che vale per gli
     elementi grafici. Non e' solo una questione di regola: a quel rapporto
     il disegno si legge slavato, e un'icona slavata non aiuta a scandire
     niente. Con l'ottone scuro si arriva sopra la soglia restando nella
     stessa famiglia di colore. */
  color: var(--c-brass-hover);
  transform: scale(.72);
  opacity: 0;
  transition: transform var(--d-base) var(--e-soft),
              opacity var(--d-base) var(--e-out);
  transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.cred__v.is-in .cred__i { transform: scale(1); opacity: 1; }
.cred__i svg { width: 21px; height: 21px; display: block; }

.cred__l { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.35; }
.cred__n { font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: var(--sp-2); line-height: 1.45; }

/* ================================================================ 5. team */

/* La foto di gruppo e' rimasta sola: sotto non c'e' piu' la griglia dei
   singoli, quindi non serve staccarla da niente. */
.team__foto { margin-bottom: 0; }

/* ============================================================ 6. servizi
   Tre fasi invece di dodici voci. Ogni fase ha un numero grande che fa da
   appiglio visivo, e le schede dentro sono compatte: icona a sinistra, testo
   a destra, in modo che l'occhio possa saltare da un titolo all'altro senza
   dover leggere tutto.

   La linea verticale che collega le fasi è l'unica decorazione: dice che è un
   percorso e non un elenco. */

/* Il contenimento sta sulla SEZIONE, che è larga quanto la finestra: se
   stesse su `.servizi`, che è largo quanto il testo, taglierebbe le schede
   prima del bordo dello schermo invece di lasciarle sporgere.
   `clip` e non `hidden` per non creare un secondo contenitore di scorrimento. */
#servizi { overflow-x: clip; }
.servizi { display: grid; gap: 0; min-width: 0; }

/* ---- la fase ---- */

.fase {
  position: relative;
  padding-block: var(--sp-7);
  /* Senza questo un discendente scorrevole non si contiene: si allarga fino
     alla larghezza del contenuto e trascina con sé tutta la pagina. */
  min-width: 0;
}
.fase + .fase { border-top: 1px solid var(--c-line); }
.fase:first-child { padding-top: var(--sp-5); }
.fase:last-child { padding-bottom: 0; }

.fase__testa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-6);
}
@media (min-width: 900px) {
  .fase__testa { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6); }
}

/* Il numero: grande, in ottone tenue, non urla ma ancora l'occhio */
.fase__n {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: .82;
  color: var(--c-brass-a40);
  font-variant-numeric: lining-nums;
  letter-spacing: var(--ls-tight);
}

.fase__testi { min-width: 0; }
.fase__titolo { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.fase__testo {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  max-width: 54ch;
}

.fase__conta {
  grid-column: 2;
  justify-self: start;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  white-space: nowrap;
}
@media (min-width: 900px) { .fase__conta { grid-column: 3; justify-self: end; } }

/* ---- la griglia delle schede ---- */

/* Sotto i 700px le schede NON si impilano: la fase diventa una riga che
   scorre di lato. Impilate, le dodici schede facevano quasi cinque schermate
   di scorrimento — organizzate, ma pur sempre un muro. Così ogni fase occupa
   un'altezza fissa e si esplora col pollice.
   Le schede sporgono oltre il bordo: è quello che fa capire che ce n'è dell'altro. */
.fase__griglia {
  display: flex;
  gap: var(--sp-3);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fase__griglia::-webkit-scrollbar { display: none; }

/* La barretta di avanzamento dentro la fase.
   La aggiunge motion.js solo quando lo scorrimento guidato e' davvero attivo:
   una barra ferma su una fase che non si blocca sarebbe una promessa non
   mantenuta. */
.fase__avanzamento {
  height: 2px;
  margin-top: calc(var(--sp-3) * -1);
  margin-bottom: var(--sp-4);
  background: var(--c-line);
  border-radius: var(--r-full);
  overflow: hidden;
}
.fase__avanzamento span {
  display: block; height: 100%;
  background: var(--c-brass);
  transform: scaleX(0);
  transform-origin: left center;
}
/* Mentre la fase e' bloccata l'aggancio darebbe strattoni contro lo
   scorrimento guidato: si spegne, e torna appena la fase e' passata. */
.fase.is-in-scorrimento .fase__griglia { scroll-snap-type: none; }

@media (min-width: 700px) {
  /* Da tablet in su la griglia e' una griglia vera: non c'e' niente da far
     sfilare, e la barretta non ha piu' senso. */
  .fase__avanzamento { display: none; }
}
.fase__griglia > * {
  flex: 0 0 clamp(250px, 76vw, 300px);
  scroll-snap-align: start;
}

/* Da 700px in su torna una griglia vera: lo spazio c'è, e leggere tutto
   insieme è meglio che scorrere. */
@media (min-width: 700px) {
  .fase__griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .fase__griglia > * { flex: initial; }
}
@media (min-width: 1080px) { .fase__griglia { grid-template-columns: repeat(3, 1fr); } }

/* La fase con due sole voci non deve avere schede larghe il doppio */
@media (min-width: 700px) {
  .fase[data-fase="3"] .fase__griglia { grid-template-columns: repeat(2, 1fr); }
}

/* ---- la scheda ---- */

.servizio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  align-content: start;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
@media (hover: hover) {
  .servizio:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--c-line);
  }
  .servizio:hover .servizio__icona { background: var(--c-brass-a12); color: var(--c-brass-hover); }
}

.servizio__icona {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-blue-a10);
  color: var(--c-blue);
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.servizio__icona svg { width: 21px; height: 21px; }

.servizio__corpo { min-width: 0; }
.servizio__titolo {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.servizio__testo {
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

/* Entrata sfalsata dentro la fase, non su tutta la sezione: le schede
   arrivano quando arriva il loro gruppo. */
html.js .servizio[data-reveal] { transition-delay: calc(var(--i, 0) * 55ms); }

/* Elenco unico, se un domani sparissero le fasi */
.servizi--piatti { gap: var(--sp-3); }
@media (min-width: 700px)  { .servizi--piatti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .servizi--piatti { grid-template-columns: repeat(3, 1fr); } }

/* ---- chiusura della sezione ---- */

.servizi__chiusura {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--c-sand);
  border-radius: var(--r-lg);
  display: grid; gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 760px) {
  .servizi__chiusura { grid-template-columns: 1fr auto; gap: var(--sp-7); }
}
.servizi__chiusura-testo {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  max-width: 58ch;
}
.servizi__chiusura .btn { white-space: nowrap; }

/* ==================================================== 6-bis. la guida
   Tre colonne che rispondono a tre domande diverse: che cosa ricevo, che cosa
   c'e' dentro, come lo ottengo. L'ordine su schermo stretto e' lo stesso in
   cui si ragiona: prima si vede l'oggetto, poi si capisce cosa contiene, poi
   lo si chiede.

   La prima versione era corretta e piatta: il libro galleggiava in un campo
   beige vuoto, l'elenco era una fila di pallini e l'unica cosa con un peso
   era il modulo. Quello che segue serve a darle profondita'. */

.lm {
  position: relative;
  overflow: hidden;          /* la planimetria sborda, e deve fermarsi qui */
  isolation: isolate;
}
.lm > .container { position: relative; z-index: 1; }

/* ---- la planimetria di sfondo ---- */
.lm__pianta {
  position: absolute;
  right: -14%;
  top: 50%;
  transform: translateY(-46%);
  height: 128%;
  width: auto;
  color: var(--c-navy);
  opacity: .09;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 899px) {
  /* Su schermo stretto la planimetria finirebbe sotto il testo invece che
     accanto: si sposta piu' fuori e si sbiadisce ancora. */
  .lm__pianta { right: -46%; height: 108%; opacity: .06; }
}
@media (prefers-reduced-motion: no-preference) {
  .lm__pianta { transition: opacity var(--d-slow) var(--e-out); }
}

.lm__intro { max-width: 62ch; }
.lm__intro h2 { text-wrap: balance; }

/* Due blocchi, non tre colonne.
   Prima erano libro | indice | modulo. Il libro e' basso e l'indice e' alto,
   quindi restavano affiancati con duecento pixel di vuoto sotto la copertina,
   e il modulo sembrava una quarta cosa capitata li' per caso. Adesso libro e
   indice stanno in un riquadro solo, che e' quello che sono davvero (che cosa
   ricevi e che cosa contiene), e il modulo e' l'altro blocco: l'azione. */
.lm__griglia {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-9);
  align-items: start;
}
@media (min-width: 1040px) {
  .lm__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    column-gap: var(--sp-8);
  }
}

/* ---- l'oggetto ---- */
.lm__prodotto {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 620px) { .lm__prodotto { padding: var(--sp-7); gap: var(--sp-7); } }

/* Copertina e dati affiancati da 560 px in su. Sotto, in colonna, con la
   copertina centrata: su un telefono un libro allineato a sinistra con del
   testo accanto diventa due cose strette e nessuna leggibile. */
.lm__testa { display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }
@media (min-width: 560px) {
  .lm__testa {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
    justify-items: stretch;
    text-align: left;
  }
}
.lm__meta { display: grid; gap: var(--sp-4); justify-items: center; }
@media (min-width: 560px) { .lm__meta { justify-items: start; } }

/* ---- il libro ----
   Non e' un'immagine appoggiata sul niente: ha un alone caldo dietro e
   un'ombra sotto, due pseudo-elementi e nessun file in piu'. */
.lm__libro {
  position: relative;
  /* Il render ha margini larghi intorno al libro, quindi il riquadro e'
     sempre piu' grande dell'oggetto che si vede. Su telefono si ferma a 210
     px; da 560 in su la larghezza gliela detta la colonna della griglia, che
     ne vale 190, e questo massimo non entra piu' in gioco. */
  width: 100%; max-width: 210px;
  padding-bottom: var(--sp-4);
}

/* l'alone: una luce calda dietro il libro, che lo stacca dal fondo */
.lm__libro::before {
  content: "";
  position: absolute; inset: -12% -8% 6% -8%;
  background: radial-gradient(60% 55% at 50% 45%, var(--c-brass-a22), transparent 72%);
  z-index: 0; pointer-events: none;
}
/* l'ombra: un'ellisse schiacciata sotto, che gli da' un appoggio */
.lm__libro::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 22px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-ink-a20), transparent 70%);
  z-index: 0; pointer-events: none;
}

.lm__libro picture { display: block; position: relative; z-index: 1; }
.lm__libro img {
  display: block; width: 100%; height: auto;

  /* I bordi sfumano nel fondo della pagina. Il render non ha un fondo piatto:
     e' un fondale illuminato, e i suoi quattro angoli differiscono fino a
     ventuno livelli l'uno dall'altro. Nessun ricolore uniforme puo'
     pareggiarli, e senza sfumatura resterebbe un rettangolo con una
     vignettatura visibile appoggiato sopra la sezione.

     Il nero delle sfumature non e' un colore ma uno stencil: conta solo il
     canale alfa. Si scrive per parola chiave e non in esadecimale, perche' in
     questo progetto gli esadecimali stanno solo in tokens.css. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, black 10%, black 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, black 8%,  black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, black 10%, black 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, black 8%,  black 92%, transparent 100%);
  mask-composite: intersect;
}

@media (hover: hover) {
  .lm__libro picture { transition: transform var(--d-base) var(--e-out); }
  .lm__libro:hover picture { transform: translateY(-6px) rotate(-1deg); }
}

/* le specifiche: erano una riga di testo minuto, adesso sono un'etichetta */
.lm__specifiche {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2) var(--sp-3);
  list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface-a92);
  font-size: var(--fs-2xs); color: var(--c-ink-2);
}
.lm__specifiche li { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Il punto di separazione e' disegnato, non scritto: cosi' non finisce
   selezionato quando si copia il testo. */
.lm__specifiche li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: var(--r-full);
  background: var(--c-brass); margin-right: var(--sp-2);
}
.lm__specifiche strong {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--c-ink);
}

/* ---- le specifiche: non una riga di testo minuto, un'etichetta ---- */
.lm__specifiche {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2) var(--sp-3);
  list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface-a92);
  font-size: var(--fs-2xs); color: var(--c-ink-2);
}
.lm__specifiche li { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Il punto di separazione e' disegnato, non scritto: cosi' non finisce
   selezionato quando si copia il testo. */
.lm__specifiche li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: var(--r-full);
  background: var(--c-brass); margin-right: var(--sp-2);
}
.lm__specifiche strong {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--c-ink);
}

.lm__eti {
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-ink-2);
}

/* ---- l'indice, su due colonne ----
   Dieci righe in fila erano una colonna alta il doppio di tutto il resto, e
   la parte piu' monotona della pagina. Cinque e cinque si leggono in un
   colpo d'occhio e stanno dentro l'altezza del modulo accanto. */
.lm__dentro { border-top: 1px solid var(--c-line); padding-top: var(--sp-6); }
.lm__dentro[hidden] { display: none; }

.lm__indice {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-2);
}
@media (min-width: 760px) {
  .lm__indice {
    /* Cinque righe e poi si passa alla colonna successiva: cosi' 1-5 stanno a
       sinistra e 6-10 a destra, che e' l'ordine in cui si leggono. Con il
       flusso normale per righe verrebbero 1-2 / 3-4 / 5-6, cioe' un indice
       che si legge a zig-zag. */
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-6);
  }
}

.lm__indice li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.lm__n {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--c-brass);
  /* Il token pensato per il testo sull'ottone: 5.2:1, sopra la soglia.
     Il navy pieno si sarebbe fermato a 4.1. */
  color: var(--c-on-brass);
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}
.lm__parte {
  font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  color: var(--c-ink); line-height: var(--lh-normal);
}
@media (hover: hover) {
  .lm__indice li { transition: transform var(--d-fast) var(--e-out); }
  .lm__indice li:hover { transform: translateX(3px); }
}

.lm__coda {
  font-size: var(--fs-2xs); color: var(--c-ink-2);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ---- 3. il modulo ----
   Aveva gia' un peso suo, e restava scollegato dal resto. La testata navy gli
   da' un principio e porta il blu scuro anche in questa sezione, dove non
   c'era: adesso il libro, il numero in ottone e la testata si parlano. */
.lm__colonna--form { display: flex; flex-direction: column; }
.lm__form {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.lm__form-testa {
  background: var(--g-navy);
  color: var(--c-on-dark);
  padding: var(--sp-6);
  border-bottom: 3px solid var(--c-brass);
}
.lm__form-corpo { padding: var(--sp-6); }
@media (min-width: 560px) {
  .lm__form-testa { padding: var(--sp-6) var(--sp-7); }
  .lm__form-corpo { padding: var(--sp-7); }
  .lm__campi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  /* I campi dentro la riga non portano il proprio margine: la distanza fra
     nome e cognome la decide `gap`, e sommarli darebbe due spazi diversi
     nella stessa griglia. Il margine sotto la riga pero' ci vuole, ed e' la
     riga a doverlo avere: senza, fra il campo del cognome e l'etichetta
     «TELEFONO» lo spazio era ESATTAMENTE ZERO, e i tre campi si leggevano
     come un blocco unico. */
  .lm__campi .campo { margin-bottom: 0; }
  /* Il margine sotto la riga sta QUI DENTRO, non fuori. Fuori funzionerebbe
     lo stesso, ma solo grazie al collasso dei margini: sotto i 480 px la riga
     non e' una griglia, i campi tengono il proprio margine, e i due si
     fonderebbero in uno invece di sommarsi. E' vero finche' nessuno mette
     un'imbottitura o un bordo su `.lm__campi`, e il giorno che qualcuno lo
     facesse lo stacco raddoppierebbe senza che niente lo spieghi. */
  .lm__campi { margin-bottom: var(--sp-5); }
}
.lm__form-titolo {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-lg); font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}
.lm__form-sub {
  font-size: var(--fs-2xs); color: var(--c-on-dark-a70); margin-top: var(--sp-2);
}
/* ---- i campi ----
   Valgono solo dentro .lm__form: i campi generici stanno in base.css e li usa
   anche il questionario della valutazione, che ha sette passaggi e un
   equilibrio suo. Cambiarli li' avrebbe toccato due moduli per rifinirne uno. */

.lm__form .campo__label {
  /* 13 px e non 12: e' la stessa misura del sottotitolo e dei consensi, cosi'
     tutto il testo di servizio della scheda sta su un livello solo e la
     distanza dal valore digitato si legge come gerarchia invece che come
     sbalzo. */
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-2);
}

.lm__form .input {
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  /* Il campo e' appena piu' scuro della scheda che lo contiene: su un fondo
     bianco un campo bianco esiste solo grazie al bordo, e si vede poco. */
  background: var(--c-bg);
  /* Non `--c-line`: quello separa, questo delimita. Vedi il commento accanto
     al token, e i numeri: 1.34:1 contro 3.66:1. */
  border: 1.5px solid var(--c-line-forte);
  border-radius: var(--r-md);
  /* NON `--fs-md`: quel token e' un clamp che su desktop arriva a 18 px, cioe'
     quanto il titolo della scheda, e in mezzo a etichette da 12 px e testi da
     13 px il campo diventava la cosa piu' grossa del modulo. E' esattamente
     l'errore contro cui mette in guardia il commento accanto a `.input` in
     base.css, rifatto qui da un override. 16 px e' la stessa misura del resto
     del sito, e sotto c'e' la regola che lo porta a 15 su desktop. */
  font-size: 1rem;
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
/* Stessa regola di base.css, ripetuta qui perche' la selezione `.lm__form
   .input` pesa piu' di `.input` e una media query non aggiunge specificita':
   senza questa riga il campo resterebbe a 16 px solo dentro questa scheda.
   Il perche' dei 15 px, e perche' solo con il puntatore preciso, sta accanto
   alla regola generale in base.css. */
@media (pointer: fine) {
  .lm__form .input {
    font-size: var(--fs-sm);
    /* 48 px invece di 52: il bersaglio grosso serve al pollice, non al
       mouse, e resta ben sopra i 44 px dichiarati in `--touch`. */
    min-height: 48px;
  }
}

@media (hover: hover) {
  .lm__form .input:hover { border-color: var(--c-ink-2); }
}
/* Il fuoco e' in ottone e non in blu: e' il colore dell'azione in questa
   sezione, e il campo attivo deve appartenere al pulsante che lo chiude. */
.lm__form .input:focus {
  background: var(--c-surface);
  border-color: var(--c-brass);
  box-shadow: 0 0 0 4px var(--c-brass-a22);
}
.lm__form .input:focus-visible { outline: none; }
.lm__form .input[aria-invalid="true"] {
  border-color: var(--c-error);
  box-shadow: 0 0 0 4px var(--c-error-a10);
}

/* ---- le caselle di consenso ----
   Disegnate invece che lasciate al sistema: `accent-color` cambia il colore
   ma non la forma, e la casella di sistema resta l'unico elemento del modulo
   che non appartiene a questo sito. */
.lm__form .consenso { margin-top: var(--sp-5); }
.lm__form .consenso__riga {
  gap: var(--sp-4);
  padding: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  transition: background-color var(--d-fast) var(--e-out);
}
@media (hover: hover) {
  .lm__form .consenso__riga:hover { background: var(--c-navy-a06); }
}
.lm__form .consenso__check {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--c-bg);
  border: 1.5px solid var(--c-line-forte);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
/* la spunta: due lati di un quadrato ruotato, niente icona da caricare */
.lm__form .consenso__check::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--c-on-brass);
  border-bottom: 2px solid var(--c-on-brass);
  border-radius: 1px;
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-out);
}
.lm__form .consenso__check:checked {
  background: var(--c-brass);
  border-color: var(--c-brass);
}
.lm__form .consenso__check:checked::after { opacity: 1; }
.lm__form .consenso__check:focus-visible {
  outline: 2px solid var(--c-focus); outline-offset: 2px;
}
.lm__form .consenso__testo { font-size: var(--fs-2xs); }

/* ---- il pulsante ---- */
.lm__form .btn--block { gap: var(--sp-3); }
.lm__form .btn--block svg { width: 19px; height: 19px; flex: none; }

/* ---- la garanzia ----
   Era una nota in grigio sotto il pulsante. Con il lucchetto accanto smette di
   essere una postilla e diventa la risposta alla domanda che uno si fa proprio
   li': che cosa succede al mio numero. */
.lm__garanzia {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-3xs); line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.lm__garanzia svg {
  width: 16px; height: 16px; flex: none;
  color: var(--c-brass-hover);
  margin-top: 1px;
}
.lm__garanzia a { color: var(--c-blue); text-decoration: underline; }
.lm__errore {
  font-size: var(--fs-2xs); color: var(--c-error);
  margin-top: var(--sp-4); text-align: center; display: none;
}
.lm__errore.is-visibile { display: block; }

/* ---- conferma ---- */
.lm__fatto {
  padding: var(--sp-7);
  background: var(--c-surface);
  border: 1px solid var(--c-brass-a22);
  border-top: 3px solid var(--c-brass);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-brass);
  text-align: center;
}
.lm__fatto-segno {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--c-brass-a12); color: var(--c-brass-hover);
  margin-bottom: var(--sp-4);
}
.lm__fatto-segno svg { width: 22px; height: 22px; }
.lm__fatto-titolo {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
}
.lm__fatto-testo {
  font-size: var(--fs-sm); color: var(--c-ink-2);
  margin: var(--sp-3) 0 var(--sp-6);
}

/* ========================================================== 7. portfolio */

.pf { display: grid; gap: var(--sp-4); }
@media (min-width: 700px)  { .pf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pf { grid-template-columns: repeat(3, 1fr); } }

.caso {
  background: var(--c-on-dark-a12);
  border: 1px solid var(--c-on-dark-a24);
  border-radius: var(--r-md);
  overflow: hidden;
}
.caso__foto {
  position: relative;
  aspect-ratio: 3/2; background: var(--c-navy-deep);
  display: grid; place-items: center;
}
/* L'immagine e' piu' alta della sua cornice: e' lo spazio in cui puo'
   scorrere senza scoprire i bordi. Senza questo margine la parallasse
   lascerebbe due strisce vuote sopra e sotto.

   Si usa il posizionamento assoluto e non un'altezza in percentuale: dentro
   una griglia con place-items una percentuale si risolve rispetto a un
   contenitore che non ha ancora un'altezza definita, e l'immagine viene alta
   zero. E' successo. */
.caso__foto { overflow: hidden; }
.caso__foto picture {
  position: absolute; inset: -6% 0;
  display: block;
}
.caso__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* La scheda si stacca al passaggio del mouse. Non e' decorazione: sono sei
   rettangoli uguali, e serve capire quale si sta guardando. */
@media (hover: hover) {
  .caso { transition: box-shadow var(--d-base) var(--e-out); }
  .caso:hover { box-shadow: var(--sh-lg); }
}
/* Con le animazioni ridotte l'immagine torna a riempire esattamente la
   cornice: non deve scorrere, quindi non le serve margine. */
/* Il margine per la parallasse serve solo dove la parallasse c'e'. Su telefono
   e' spenta, quindi tenerlo significherebbe ritagliare il sei per cento della
   fotografia in cambio di niente. */
@media (max-width: 767px) {
  .caso__foto picture { inset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .caso__foto picture { inset: 0; }
}
/* L'anno sta sulla foto e non nel corpo: nel corpo sarebbe una terza riga di
   testo, qui e' un'etichetta che si legge senza leggere. */
.caso__anno {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  padding: 3px var(--sp-3); border-radius: var(--r-full);
  background: var(--c-navy-a85);
  color: var(--c-on-dark);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}
.caso__corpo { padding: var(--sp-5); }
.caso__zona { font-size: var(--fs-3xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-brass-light); font-weight: var(--fw-semi); }
.caso__tipo { font-size: var(--fs-md); color: var(--c-on-dark); margin-top: var(--sp-2); font-family: var(--ff-display); font-variation-settings: var(--fv-display); font-weight: var(--fw-semi); }
.caso__dati { display: flex; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-on-dark-a12); }
.caso__d strong {
  display: block;
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-lg); color: var(--c-brass-light); line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.caso__d span { display: block; font-size: var(--fs-3xs); color: var(--c-on-dark-a70); margin-top: var(--sp-1); }
/* Le due colonne devono restare larghe uguale anche quando una manca:
   il 2022 non ha il tempo di vendita. */
.caso__d { flex: 1; min-width: 0; }
/* La riga in piu' che alcuni casi hanno: l'architetto, la vendita in blocco. */
.caso__nota {
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a88);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-on-dark-a12);
}
/* Il guscio esiste per separare due trasformazioni: la rivelazione agisce
   su di lui, lo scorrimento a velocita' diverse sulla scheda dentro. Non ha
   aspetto proprio, solo il compito di occupare la cella della griglia. */
.caso-guscio { display: flex; }
.caso-guscio > .caso { flex: 1; }

/* Le schede in griglia hanno altezze diverse: il corpo si allunga da solo
   cosi' le foto restano allineate fra loro. */
.caso { display: flex; flex-direction: column; }
.caso__corpo { display: flex; flex-direction: column; flex: 1; }
.caso__dati { margin-top: auto; }

/* ========================================================= 8. recensioni
   Carosello orizzontale. Su mobile è lo scorrimento nativo con aggancio,
   quello che il pollice si aspetta; su desktop si aggiungono trascinamento
   e frecce. Niente scorrimento automatico: una recensione che scivola via
   mentre la stai leggendo è un modo per non farla leggere. */

.rec { overflow: hidden; }

.rec__testa { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-7); }
@media (min-width: 760px) {
  .rec__testa { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-7); }
}

.rec__voto { display: flex; align-items: center; gap: var(--sp-4); }
.rec__voto-n {
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: var(--fw-bold); line-height: .9;
  color: var(--c-brass);
  font-variant-numeric: lining-nums;
}
.rec__stelle { display: block; color: var(--c-brass); letter-spacing: .14em; font-size: var(--fs-sm); }
.rec__voto-l { display: block; font-size: var(--fs-2xs); color: var(--c-ink-3); margin-top: var(--sp-1); }

/* ---- la pista ---- */

.carosello { position: relative; }

.carosello__pista {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--sp-2) var(--gutter) var(--sp-6);
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carosello__pista::-webkit-scrollbar { display: none; }

/* Oltre la larghezza del contenitore, le schede partono allineate al testo
   della sezione invece che al bordo della finestra. */
@media (min-width: 1240px) {
  .carosello__pista {
    padding-inline: max(var(--gutter), calc((100vw - var(--w-page)) / 2 + var(--gutter)));
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--w-page)) / 2 + var(--gutter)));
  }
}
.carosello__pista:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -4px; border-radius: var(--r-md); }
.carosello__pista.is-trascinando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .carosello__pista { cursor: grab; } }

/* ---- la scheda ---- */

.rec-card {
  position: relative;
  flex: 0 0 clamp(266px, 78vw, 372px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
@media (min-width: 760px) { .rec-card { flex-basis: 352px; } }
@media (hover: hover) { .rec-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } }

/* Le virgolette: grandi, in ottone tenue, dietro al testo. Unico elemento
   decorativo della sezione, e conta come accento, non come colore di fondo. */
.rec-card__virgolette {
  position: absolute; top: -.06em; left: var(--sp-4);
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: 5.5rem; line-height: 1; font-weight: var(--fw-bold);
  color: var(--c-brass-a22);
  pointer-events: none; user-select: none;
}

.rec-card__stelle {
  position: relative;
  color: var(--c-brass);
  letter-spacing: .12em;
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
}

.rec-card__testo {
  position: relative;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  flex: 1;
  /* Le recensioni vanno da 180 a 666 caratteri: senza un limite una scheda
     sarebbe tre volte l'altra. Si troncano a otto righe e si aprono al tocco. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-card.is-aperta .rec-card__testo { -webkit-line-clamp: unset; overflow: visible; }

.rec-card__apri {
  align-self: flex-start;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--c-blue);
  min-height: var(--touch);
  display: inline-flex; align-items: center;
}
.rec-card__apri:hover { color: var(--c-blue-hover); text-decoration: underline; }

.rec-card__piede {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.rec-card__avatar {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--c-navy); color: var(--c-on-dark);
  font-family: var(--ff-display); font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: 1;
}
.rec-card__chi { min-width: 0; }
.rec-card__nome { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-ink); }
.rec-card__fonte { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: 1px; }

.rec-card--vuota { flex: 0 0 clamp(266px, 78vw, 352px); scroll-snap-align: start; }

/* ---- entrata sfalsata: le schede arrivano da destra, una dopo l'altra ---- */
html.js .carosello:not(.is-entrato) .rec-card {
  opacity: 0;
  transform: translateX(28px);
}
html.js .is-entrato .rec-card {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---- sfumature ai bordi: dicono che il contenuto continua ---- */
.carosello__sfuma {
  position: absolute; top: 0; bottom: var(--sp-6); width: clamp(24px, 6vw, 72px);
  pointer-events: none; z-index: 2;
  opacity: 1; transition: opacity var(--d-base) var(--e-out);
}
.carosello__sfuma--sx { left: 0;  background: linear-gradient(90deg, var(--c-sand), transparent); }
.carosello__sfuma--dx { right: 0; background: linear-gradient(270deg, var(--c-sand), transparent); }
.carosello.is-inizio .carosello__sfuma--sx { opacity: 0; }
.carosello.is-fondo  .carosello__sfuma--dx { opacity: 0; }

/* ---- comandi ---- */

.carosello__barra-comandi {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; margin-top: var(--sp-2);
}

.carosello__avanzamento {
  flex: 1; min-width: 90px; height: 3px;
  background: var(--c-line);
  border-radius: var(--r-full);
  overflow: hidden;
}
.carosello__avanzamento-barra {
  display: block; height: 100%; width: 100%;
  background: var(--g-brass-rule);
  border-radius: var(--r-full);
  transform-origin: left center;
  transform: scaleX(.06);
  transition: transform var(--d-fast) var(--e-out);
}

.carosello__frecce { display: flex; gap: var(--sp-2); }

.carosello__freccia {
  width: var(--touch); height: var(--touch);
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: background-color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}
.carosello__freccia svg { width: 20px; height: 20px; }
.carosello__freccia:hover:not(:disabled) { border-color: var(--c-ink-a20); background: var(--c-bg); }
.carosello__freccia:disabled { opacity: .34; cursor: default; }

.rec__tutte { font-size: var(--fs-2xs); }
.rec__nota { margin-top: var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  html.js .carosello:not(.is-entrato) .rec-card { opacity: 1; transform: none; }
  .carosello__pista { scroll-behavior: auto; }
}

/* =========================================================== 9. l'ufficio
   Informazioni pratiche, non retorica: indirizzo, orari, comuni serviti.
   Tutto esce da config.js, quindi resta vero anche il giorno in cui Paolo
   cambia sede o orari.

   Qui NON compaiono quotazioni al metro quadro: i valori OMI in config sono
   ancora marcati «da verificare», e un numero non verificato messo in home
   vale meno di non metterlo affatto. */

.uff__griglia { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) {
  .uff__griglia { grid-template-columns: 1fr 46%; gap: var(--sp-8); align-items: center; }
}

/* ---- indirizzo: è il fatto principale della sezione, quindi è grande ---- */
.uff__indirizzo {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-style: normal;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--c-brass-light);
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-brass);
}

.uff__eti {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-brass-light);
  margin-bottom: var(--sp-3);
}

/* ---- orari ---- */
.uff__orari { margin-top: var(--sp-7); }
.uff__tabella { display: grid; gap: 0; max-width: 30rem; }
.uff__riga {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-on-dark-a12);
}
.uff__riga:last-child { border-bottom: 0; }
.uff__riga dt { font-size: var(--fs-2xs); color: var(--c-on-dark-a70); white-space: nowrap; }
.uff__riga dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-on-dark);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.uff__riga--chiuso dd { color: var(--c-on-dark-a70); font-weight: var(--fw-regular); }

/* ---- dove lavoro ---- */
.uff__dove { margin-top: var(--sp-7); }
.uff__dove-testo {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a88);
  max-width: 46ch;
}
.uff__dove-testo strong { color: var(--c-on-dark); font-weight: var(--fw-semi); }

/* ---- la pastiglia: aperto o chiuso adesso ----
   Una tabella di orari lascia il conto a chi legge. Questa risponde prima,
   e con gli stessi numeri della tabella: se un giorno cambiano gli orari,
   cambiano tutti e due insieme perche' la fonte e' una sola. */
.uff__orari-testa {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.uff__orari-testa .uff__eti { margin-bottom: 0; }

.uff__stato {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
.uff__stato::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
  background: currentColor; flex: none;
}
/* Il verde e il grigio sono quelli di sistema, non due colori nuovi: il
   primo e' lo stesso della validazione riuscita. Su fondo navy servono le
   varianti chiare, altrimenti restano sotto la soglia. */
.uff__stato.is-aperto { background: var(--c-success-a10); color: var(--c-on-dark); }
.uff__stato.is-chiuso { background: var(--c-on-dark-a12); color: var(--c-on-dark-a70); }
.uff__stato[hidden] { display: none; }

/* ---- le tre azioni ----
   In verticale sotto i 480 px: tre pulsanti affiancati su un telefono
   diventano tre parole tagliate.

   Sopra, due righe e non una. Non e' una resa al mandare a capo: i tre
   pulsanti chiedono 637 px e la colonna ne ha 563, quindi in fila andrebbero
   a capo comunque, ma in un punto deciso dal caso. Cosi' invece la gerarchia
   si vede: sopra quello che vogliamo che facciano, sotto i due modi
   alternativi di arrivarci. */
.uff__azioni { display: grid; gap: var(--sp-3); }
@media (min-width: 480px) {
  .uff__azioni {
    grid-template-columns: auto auto;
    justify-content: start;
  }
  .uff__azioni > :first-child { grid-column: 1 / -1; justify-self: start; }
}

/* Il pulsante secondario su fondo scuro: `.btn--ghost` e' pensato per il
   chiaro e qui sparirebbe. Contorno e testo nel colore del testo su navy. */
.btn--ghost-chiaro {
  background: transparent;
  color: var(--c-on-dark);
  border: 1.5px solid var(--c-on-dark-a24);
}
.btn--ghost-chiaro:hover { border-color: var(--c-on-dark-a70); background: var(--c-on-dark-a12); }
.btn--ghost-chiaro svg { width: 18px; height: 18px; flex: none; }
/* Un'etichetta di una parola non ha bisogno dell'imbottitura di una frase. */
.uff__azioni .btn--ghost-chiaro { padding-inline: var(--sp-5); }

/* ---- le due foto ----
   Una sola lasciava mezza colonna di blu vuoto: la colonna di sinistra e'
   alta il doppio. Due si impilano e la riempiono. */
.uff__foto { display: grid; gap: var(--sp-4); }
.uff__foto .media { box-shadow: var(--sh-lg); }
/* La seconda compare solo dove serve: su telefono le colonne stanno in fila
   una sotto l'altra e non c'e' nessun vuoto da riempire.

   ⚠️ Sul risparmio di banda: l'immagine e' `loading="lazy"` dentro un
   contenitore a `display: none`, e un contenitore senza riquadro non entra
   mai in vista, quindi i browser non la scaricano. E' il comportamento
   previsto e quello di Chrome, Firefox e Safari, ma **non e' stato misurato
   qui**: il pannello di anteprima non fa scattare il caricamento differito,
   quindi in prova non si scarica nessuna delle due e la verifica non
   distingue i due casi. Va ricontrollato sul sito pubblicato, con gli
   strumenti di rete di un browser vero.
   Se un domani si scoprisse che viene scaricata lo stesso, la casa mobile e'
   a 450 KB su un tetto di 500 e questi sono 40: si passa a uno sfondo CSS
   dichiarato dentro la media query, che non lascia scelta al browser. */
.uff__foto-seconda { display: none; }
@media (min-width: 900px) { .uff__foto-seconda { display: block; } }

/* ============================================================ 10. CTA finale */

.finale { text-align: center; }
.finale h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.finale .t-lead { max-width: 48ch; margin: 0 auto var(--sp-6); }
.finale .btn-row { justify-content: center; }

/* ================================================== 4-bis. verifica
   Il blocco della continuità. Sobrio di proposito: sono fatti da leggere,
   non un altro riquadro che grida. Ottone solo sul segno di spunta. */

/* ---- «Non devi credermi sulla parola» ----
   Sopra ci sono quattro carte bianche. Se anche questi quattro punti
   diventassero carte, la sezione sarebbe otto riquadri e non si capirebbe
   piu' che sono due cose diverse: quelle sono titoli, questi sono fatti
   controllabili. Quindi un pannello solo, che li tiene insieme. */
.verifica {
  margin-top: var(--sp-8);
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 900px) {
  .verifica {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-8) var(--sp-7);
  }
}
.verifica__testo h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.verifica__testo p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--c-ink-2); }

.verifica__punti { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .verifica__punti { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); } }

/* Il segno di spunta dentro una pastiglia tonda, come l'icona delle carte
   qui sopra: sono la stessa famiglia di segni e devono somigliarsi.
   Il segno si disegna quando il pannello entra, uno dopo l'altro. */
.verifica__p { position: relative; padding-left: calc(var(--sp-7) + var(--sp-3)); }
.verifica__p::before {
  content: "";
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--c-brass-a12);
}
.verifica__p::after {
  content: "";
  position: absolute; left: 9px; top: 8px;
  width: 11px; height: 6px;
  /* Ottone scuro come le icone delle carte, e per la stessa ragione: sulla
     pastiglia velata l'ottone chiaro si ferma a 2,43:1. Qui conta anche di
     piu', perche' il segno di spunta e' l'unica cosa che dice «verificato». */
  border-left: 2px solid var(--c-brass-hover);
  border-bottom: 2px solid var(--c-brass-hover);
  /* Il segno nasce ruotato e schiacciato, e si apre restando ruotato: la
     rotazione fa parte della forma, non del movimento, quindi sta in tutte e
     due gli stati. */
  transform: rotate(-45deg) scale(0);
  transition: transform var(--d-base) var(--e-soft);
  transition-delay: calc(var(--i, 0) * 110ms + 260ms);
}
.verifica.is-in .verifica__p::after { transform: rotate(-45deg) scale(1); }

.verifica__p strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.35; }
.verifica__p span { display: block; font-size: var(--fs-2xs); color: var(--c-ink-3); line-height: 1.5; margin-top: var(--sp-2); }

/* ---- bilancio: i numeri complessivi sopra le cinque transazioni ---- */
.bilancio { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-7); }
@media (min-width: 700px) { .bilancio { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.bilancio__v { padding-top: var(--sp-4); border-top: 2px solid var(--c-on-dark-a24); }
.bilancio__l { display: block; font-size: var(--fs-2xs); color: var(--c-on-dark-a70); margin-top: var(--sp-3); line-height: 1.5; max-width: 24ch; }
.bilancio__nota { margin-bottom: var(--sp-7); }

/* Mentre il nastro scorre l'aggancio è spento: il cursore lo dice. Non c'è
   pulsante di pausa e il movimento non si ferma al passaggio del mouse: è una
   scelta del cliente, presa sapendo che WCAG 2.2.2 chiederebbe un comando di
   arresto per il movimento automatico oltre i cinque secondi. */
.carosello.is-in-moto .carosello__pista { cursor: grab; }

/* I cloni del nastro infinito non devono mai finire sotto al puntatore di
   lettura di uno screen reader né catturare il fuoco. */
.rec-card[data-clone] { user-select: none; }