/*
 * I nostri lavori — aspetto
 *
 * Origine: .works-band / .works-rail / .work-card / .works-controls della
 * cattura Ristrutturazione.html. Ogni valore letto.
 *
 * ⚠️ QUARTA pista con i comandi, e la sola con COMANDI PROPRI: nel sorgente
 * i pulsanti sono 40px, trasparenti invece che bianchi, con le frecce ‹ ›
 * invece di ← →, larghezza totale 260px centrata. Non e' il componente
 * .falone-rail-controls del tema, che ha altri valori. La LOGICA invece e'
 * la stessa: si riusa rail.js, esteso con due opzioni.
 *
 * ⚠️ SOPRA I 1180px LA PISTA NON SCORRE. Il sorgente usa
 * `grid-auto-columns: minmax(0, 1fr)`: le schede si dividono la larghezza e
 * ci stanno tutte. I pulsanti risultano disattivati e la barra piena — e'
 * cosi' nell'originale, non un difetto. Sotto i 1180 le schede prendono una
 * larghezza fissa e la pista comincia a scorrere.
 *
 * Indice
 *   1. fascia scura
 *   2. pista
 *   3. scheda
 *   4. comandi
 */

/* ======================================================================
   1. FASCIA SCURA
   ====================================================================== */
.falone-works {
  padding:
    var(--falone-works-pad-top, 86px)
    var(--falone-works-pad-x, 52px)
    var(--falone-works-pad-bottom, 82px);
  background: var(--falone-works-bg, #121212);
  color: var(--falone-works-ink, #fff);
  overflow: hidden;   /* la pista sborda a destra: qui si taglia */
}

.falone-works__head { margin-bottom: var(--falone-works-head-gap, 44px); }

.falone-works__h2 {
  /* ⚠️ I 24px del modello (`h2 { margin-bottom: 24px }`), che qui mancavano:
     erano l'unico caso su otto widget con margine ZERO. Non e' solo coerenza —
     con l'interlinea 1.03 su un corpo di 74,88px l'inchiostro dell'ultima riga
     sborda ~15px sotto la propria scatola, e il sottotitolo partiva dal fondo
     della SCATOLA: si sovrapponeva al titolo di 15px, misurato su due widget.
     Con 24px restano 9px liberi, come nelle altre fasce. */
  margin: 0 0 var(--falone-h2-gap, 24px);
  max-width: none;
  color: var(--falone-works-ink, #fff);
}
/* la scala arriva da .falone-h2--page del tema */

/* ======================================================================
   2. PISTA
   ======================================================================
   `minmax(0, 1fr)` sopra i 1180: tutte le schede nella finestra, niente
   scorrimento. Sotto, larghezza fissa e la pista scorre. */
.falone-works__rail {
  display: grid;
  grid-auto-flow: column;
  /* ⚠️ Il minimo e' parametrizzato, non fisso a 0. Con `minmax(0, 420px)` la
     griglia comprime comunque le schede per farle stare tutte nel
     contenitore: il massimo di un binario si raggiunge solo se c'e' spazio
     libero. Per avere schede larghe davvero su schermo grande vanno alzati
     ENTRAMBI i lati, ed e' quello che fa il controllo
     *Larghezza delle schede su schermo largo*.
     Vuoto = `minmax(0, 1fr)`, cioe' il comportamento del sorgente. */
  grid-auto-columns: minmax(
    var(--falone-works-card-wide-min, 0px),
    var(--falone-works-card-fr, 1fr)
  );
  gap: var(--falone-works-gap, 16px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.falone-works__rail::-webkit-scrollbar { display: none; }

.falone-works__rail:focus-visible {
  outline: 2px solid var(--falone-works-accent, #f7941d);
  outline-offset: 4px;
}

/* ----------------------------------------------------------------------
   Modo GRIGLIA
   ----------------------------------------------------------------------
   ⚠️ Alternativa alla pista, non una variante: in Efficientamento Energetico
   i riquadri stanno in una griglia fissa che non scorre, e i comandi non
   esistono. Il markup li omette del tutto, qui si spegne lo scorrimento. */
.falone-works--griglia .falone-works__rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--falone-works-cols, 5), minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}

/* ======================================================================
   3. SCHEDA
   ====================================================================== */
.falone-works__card {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: var(--falone-works-ratio, 3 / 4);
  overflow: hidden;
  scroll-snap-align: start;
  /* ⚠️ #050505: nero profondo del sorgente, si vede solo dove la foto manca */
  background: var(--falone-works-card-bg, #050505);
  isolation: isolate;
}

/* ⚠️ Selettore DISCENDENTE: `.elementor img { height: auto }` (0,1,1)
   batterebbe la classe sola e la foto non riempirebbe la scheda. */
.falone-works__card .falone-works__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.falone-works__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, .05) 42%, rgba(5, 5, 5, .9));
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-works__card::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--falone-works-veil-color, #050505) calc(var(--falone-works-veil-top, .05) * 100%), transparent) var(--falone-works-veil-pos, 42%),
      color-mix(in srgb, var(--falone-works-veil-color, #050505) calc(var(--falone-works-veil-bottom, .9) * 100%), transparent));
  }

  /* ⚠️ Velo a TRE passaggi: in Efficientamento Energetico la sfumatura ha un
     punto in mezzo (.12 al 18%, .55 al 58%, .93). Blocco a se', non il
     precedente con un valore in piu'. */
  .falone-works--veil3 .falone-works__card::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--falone-works-veil-color, #050505) calc(var(--falone-works-veil-top, .12) * 100%), transparent) var(--falone-works-veil-pos, 18%),
      color-mix(in srgb, var(--falone-works-veil-color, #050505) calc(var(--falone-works-veil-mid, .55) * 100%), transparent) var(--falone-works-veil-mid-pos, 58%),
      color-mix(in srgb, var(--falone-works-veil-color, #050505) calc(var(--falone-works-veil-bottom, .93) * 100%), transparent));
  }
}

/* ======================================================================
   3bis. SCHEDA SENZA FOTOGRAFIA
   ======================================================================
   ⚠️ NON e' nel sorgente: nell'originale ogni scheda ha la sua foto. Serve
   nella pagina Infrastrutture, dove tre soggetti (viabilita', reti e
   sottoservizi, sistemazioni esterne) non hanno alcuna fotografia in
   libreria — verificato allegato per allegato il 05/08. Senza questo, la
   scheda e' un rettangolo #050505 piatto e sembra un'immagine rotta.

   E' un ripiego DICHIARATO, non un abbellimento: appena arrivano le tre
   fotografie basta assegnarle dal pannello e la classe sparisce da sola,
   perche' il modello la scrive solo quando l'immagine manca.

   Due segni, entrambi tenui, per non competere coi vicini che una foto ce
   l'hanno: una sfumatura diagonale che stacca dal fondo della fascia, e un
   filo di contorno in accento molto trasparente. */
.falone-works__card--senza-foto {
  /* ripiego per i browser senza color-mix: i valori gia' risolti */
  background:
    linear-gradient(135deg, #16130f, #050505 62%);
  box-shadow: inset 0 0 0 1px rgba(247, 148, 29, .16);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-works__card--senza-foto {
    background: linear-gradient(
      var(--falone-works-vuota-angolo, 135deg),
      color-mix(in srgb,
        var(--falone-works-vuota-tinta, var(--falone-accent, #f7941d))
        calc(var(--falone-works-vuota-forza, .07) * 100%),
        var(--falone-works-card-bg, #050505)),
      var(--falone-works-card-bg, #050505) var(--falone-works-vuota-fine, 62%));
    box-shadow: inset 0 0 0 var(--falone-works-vuota-filo, 1px)
      color-mix(in srgb,
        var(--falone-works-vuota-tinta, var(--falone-accent, #f7941d))
        calc(var(--falone-works-vuota-filo-op, .16) * 100%),
        transparent);
  }
}

/* il velo generale scurisce il basso per staccare il testo dalla foto: qui
   la foto non c'e' e toglierlo lascia la sfumatura pulita */
.falone-works__card--senza-foto::after { background: none; }

.falone-works__body { padding: var(--falone-works-card-pad, 18px); }

.falone-works__cat {
  display: block;
  margin-bottom: var(--falone-works-cat-gap, 8px);
  color: var(--falone-works-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-works-cat-size, .64rem);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.falone-works__title {
  margin: 0;
  /* ⚠️ Colore PROPRIO, non quello del titolo di sezione.
     Stanno sopra una fotografia, quindi vanno chiari SEMPRE — anche quando la
     fascia e' su fondo bianco e il titolo della sezione e' scuro, come in
     Edilizia Residenziale. Con una variabile sola per entrambi i titoli, quelli
     sulle foto diventavano grigio scuro e non si leggevano: misurato. */
  color: var(--falone-works-card-ink, var(--falone-works-ink, #fff));
  font-family: var(--falone-font-display, "Jost", sans-serif);
  /* ⚠️ Corpo alzato di circa un ottavo su richiesta dell'utente (18/08):
     le didascalie sotto le fotografie erano piu' piccole del resto del
     sito. La formula resta fluida e parametrizzata in tre parti, cosi'
     una singola istanza puo' scostarsene senza perdere la fluidita'. */
  font-size: clamp(
    var(--falone-works-title-min, 1rem),
    var(--falone-works-title-vw, 1.2vw),
    var(--falone-works-title-max, 1.16rem)
  );
  font-weight: 600;
  line-height: 1.25;
}

/* Link «Scopri il progetto →»: la freccia si sposta al passaggio.
   ⚠️ Selettore DISCENDENTE, e' un <a>: Elementor azzera box-shadow e
   text-decoration su `.elementor a` con specificita' (0,1,1). */
.falone-works__body .falone-works__link {
  display: inline-flex;
  align-items: center;
  gap: var(--falone-works-link-gap, 6px);
  margin-top: var(--falone-works-link-top, 0);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-works-link-size, .62rem);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--falone-dur-fast, .2s) var(--falone-ease, ease);

  color: rgba(255, 255, 255, .82);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-works-card-ink, #fff) calc(var(--falone-works-link-op, .82) * 100%),
    transparent);
}

.falone-works__link em {
  font-style: normal;
  transition: transform var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

.falone-works__body a.falone-works__link:hover,
.falone-works__body a.falone-works__link:focus-visible {
  color: var(--falone-works-accent, #f7941d);
}

.falone-works__link:hover em,
.falone-works__link:focus-visible em { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .falone-works__link,
  .falone-works__link em { transition: none; }
  .falone-works__link:hover em { transform: none; }
}

/* ----------------------------------------------------------------------
   Freccia sulla RIGA del titolo
   ----------------------------------------------------------------------
   Nella pagina Infrastrutture la freccia non sta sotto il titolo ma alla sua
   destra, sulla stessa riga e spinta al bordo. La categoria resta sopra, a
   tutta larghezza: due righe di griglia, la seconda a due colonne.
   `align-items: end` allinea la freccia alla base del titolo anche quando
   quello va su due righe. */
.falone-works--freccia .falone-works__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--falone-works-freccia-gap, 12px);
}

.falone-works--freccia .falone-works__cat { grid-column: 1 / -1; }

.falone-works--freccia .falone-works__link { margin-top: 0; }

/* ======================================================================
   4. COMANDI
   ======================================================================
   ⚠️ Propri di questa sezione, NON .falone-rail-controls del tema: 40px
   invece di 44, fondo trasparente invece di bianco, larghezza 260 invece di
   560, centrati con 34px di stacco. Confrontati riga per riga col sorgente
   prima di decidere di non riusare il componente. */
.falone-works__controls {
  display: grid;
  grid-template-columns:
    var(--falone-works-btn, 40px)
    minmax(var(--falone-works-bar-min, 80px), 1fr)
    var(--falone-works-btn, 40px);
  gap: var(--falone-works-controls-gap, 16px);
  align-items: center;
  width: min(100%, var(--falone-works-controls-w, 260px));
  /* ⚠️ `auto` centra, `0` allinea a sinistra: nel sorgente i Lavori di
     Ristrutturazione sono centrati, i Progetti di Edilizia Residenziale
     partono da sinistra. E' un controllo. */
  margin: var(--falone-works-controls-top, 34px) auto 0 var(--falone-works-controls-left, auto);
}

.falone-works__btn {
  width: var(--falone-works-btn, 40px);
  height: var(--falone-works-btn, 40px);
  display: grid;
  place-items: center;
  /* ⚠️ Elementor mette 16px di margine interno ai <button>. Con
     `box-sizing: border-box` un pulsante da 30px non ci sta piu' dentro —
     32 di margine piu' 2 di bordo — e `min-width: auto` lo allarga a 34:
     misurato. Il sorgente non ha quel margine, e il glifo e' centrato da
     `place-items` anche senza. */
  padding: 0;
  border: 1px solid var(--falone-works-accent, #f7941d);
  border-radius: 0;
  background: transparent;
  color: var(--falone-works-accent, #f7941d);
  cursor: pointer;
  /* ⚠️ Anche il glifo della freccia ha una misura propria per pagina:
     1,05rem nei Lavori di Ristrutturazione, 0,95 nei Progetti di Edilizia
     Residenziale, dove i pulsanti sono piu' piccoli. */
  font-size: var(--falone-works-btn-glifo, 1.05rem);
  line-height: 1;
  transition:
    background var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    color      var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    opacity    var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

.falone-works__btn:hover:not([aria-disabled="true"]),
.falone-works__btn:focus-visible:not([aria-disabled="true"]) {
  background: var(--falone-works-accent, #f7941d);
  color: var(--falone-works-btn-ink, #fff);
  outline: 0;
}

/* ⚠️ Il sorgente usa l'attributo `disabled`; rail.js scrive `aria-disabled`,
   che lascia il pulsante raggiungibile da tastiera e annunciato come
   disattivato invece di sparire dalla navigazione. Lo stile e' lo stesso. */
.falone-works__btn[aria-disabled="true"] {
  opacity: var(--falone-works-btn-off, .35);
  cursor: default;
}

.falone-works__progress {
  height: var(--falone-works-bar-h, 1px);
  background: rgba(247, 148, 29, .34);   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-works__progress {
    background: color-mix(in srgb,
      var(--falone-works-accent, #f7941d) calc(var(--falone-works-bar-op, .34) * 100%),
      transparent);
  }
}

.falone-works__progress span {
  display: block;
  height: 100%;
  background: var(--falone-works-accent, #f7941d);
  transition: width var(--falone-works-bar-dur, .25s) var(--falone-ease, ease);
}

/* ======================================================================
   IMPILAMENTO
   ====================================================================== */
@media (max-width: 1180px) {
  /* in modo griglia le colonne scalano, e la larghezza fissa non serve */
  .falone-works--griglia .falone-works__rail {
    grid-template-columns: repeat(var(--falone-works-cols-tablet, 3), minmax(0, 1fr));
    grid-auto-columns: auto;
  }

  /* qui la pista comincia a scorrere: le schede prendono larghezza fissa */
  .falone-works__rail {
    grid-auto-columns: minmax(
      var(--falone-works-card-min, 240px),
      var(--falone-works-card-vw, 32vw)
    );
  }
}

@media (max-width: 820px) {
  .falone-works {
    padding: var(--falone-works-pad-tablet, 72px) var(--falone-works-pad-x-tablet, 18px);
  }
  .falone-works--griglia .falone-works__rail {
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
  }
  .falone-works--griglia .falone-works__card {
    aspect-ratio: var(--falone-works-ratio-tablet, var(--falone-works-ratio, 3 / 4));
  }
  .falone-works__rail {
    grid-auto-columns: minmax(
      var(--falone-works-card-min-tablet, 220px),
      var(--falone-works-card-vw-tablet, 72vw)
    );
  }
  /* i comandi non sono piu' centrati ma a filo del contenuto */
  .falone-works__controls {
    width: calc(100% - 2 * var(--falone-indent, 0px));
    margin-left: var(--falone-indent, 0px);
    margin-right: 0;
  }
  .falone-works__h2 br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .falone-works__rail { scroll-behavior: auto; }
  .falone-works__btn,
  .falone-works__progress span { transition: none; }
}

/* ======================================================================
   9. DIDASCALIA SOTTO LA FOTOGRAFIA
   ======================================================================
   Dallo screen di Efficientamento (05/08): il testo non sta sopra
   l'immagine ma in un riquadro scuro sotto.

   ⚠️ Il markup NON cambia: sarebbe stato rischioso per le cinque pagine che
   gia' usano questo widget. Cambia solo la disposizione — la scheda diventa
   due righe, la fotografia perde il posizionamento assoluto e prende la sua
   proporzione, e il corpo scende sotto con un fondo proprio.

   ⚠️ Il velo viene SPENTO: serviva a staccare il testo dalla foto, e con il
   testo fuori dall'immagine scurirebbe la fotografia senza motivo. */
.falone-works--sotto .falone-works__card {
  aspect-ratio: auto;
  align-content: stretch;
  background: var(--falone-works-sotto-bg, #121212);
}

.falone-works--sotto .falone-works__card .falone-works__img {
  position: static;
  z-index: auto;
  aspect-ratio: var(--falone-works-sotto-ratio, 4 / 3);
  height: auto;
}

.falone-works--sotto .falone-works__card::after { content: none; }

.falone-works--sotto .falone-works__body {
  padding: var(--falone-works-sotto-pad, 20px);
  background: var(--falone-works-sotto-bg, #121212);
}

/* la citta': riga sotto il titolo, piu' tenue */
.falone-works__citta {
  display: block;
  margin-top: var(--falone-works-citta-top, 4px);
  color: rgba(255, 255, 255, .6);   /* ripiego */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-works-citta-size, .8rem);
  font-weight: 400;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-works__citta {
    color: color-mix(in srgb,
      var(--falone-works-card-ink, #fff) calc(var(--falone-works-citta-op, .6) * 100%),
      transparent);
  }
}

/* ======================================================================
   10. LINK ACCANTO AL TITOLO DI SEZIONE
   ======================================================================
   ⚠️ Selettore con DUE classi: Hello Elementor pubblica
   `a:active, a:hover { color: #336 }` con specificita' (0,1,1). Con una
   classe sola il link diventerebbe blu navy al passaggio. */
/* ⚠️ La griglia vale SOLO quando c'e' il link, ed e' per questo che la
   classe la scrive il modello. Applicandola sempre, sulle cinque pagine
   senza link l'occhiello sarebbe finito nella prima cella e il titolo nella
   seconda, cioe' a destra.
   ⚠️ L'occhiello attraversa ENTRAMBE le colonne: senza, occupa la prima
   cella e spinge titolo e link di un posto. E' esattamente l'errore che ho
   fatto alla prima passata — il titolo era finito a destra e il link sotto
   l'occhiello. */
.falone-works__head--conlink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--falone-works-sezlink-gap, 24px);
}

.falone-works__head--conlink > .falone-eyebrow { grid-column: 1 / -1; }

.falone-works .falone-works__sezlink {
  display: inline-flex;
  align-items: center;
  gap: var(--falone-works-sezlink-icon-gap, 10px);
  color: var(--falone-works-ink, #262626);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-works-sezlink-size, .66rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.falone-works a.falone-works__sezlink:hover,
.falone-works a.falone-works__sezlink:focus-visible,
.falone-works a.falone-works__sezlink:active {
  color: var(--falone-works-accent, #f7941d);
}

.falone-works .falone-works__sezlink em {
  font-style: normal;
  transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .falone-works .falone-works__sezlink em { transition: none; }
}

.falone-works a.falone-works__sezlink:hover em { transform: translateX(4px); }

@media (max-width: 820px) {
  /* su schermo stretto il link va a capo sotto il titolo */
  .falone-works__head--conlink { grid-template-columns: 1fr; row-gap: 16px; }
  .falone-works .falone-works__sezlink { justify-self: start; }
}

/* descrizione dell'intervento, sotto la citta' */
.falone-works__desc {
  margin: var(--falone-works-desc-top, 6px) 0 0;
  color: rgba(255, 255, 255, .58);   /* ripiego */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 16px, richiesta esplicita del cliente (11/09): falone-works serve solo
     le quattro pagine interessate (Ristrutturazione, Edilizia,
     Efficientamento, Infrastrutture), nessun'altra. */
  font-size: var(--falone-works-desc-size, 1rem);
  font-weight: 300;
  line-height: var(--falone-works-desc-lh, 1.55);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-works__desc {
    color: color-mix(in srgb,
      var(--falone-works-card-ink, #fff) calc(var(--falone-works-desc-op, .58) * 100%),
      transparent);
  }
}

/* ⚠️ In modo «didascalia sotto» la freccia del collegamento va in basso a
   destra del riquadro, come nello screen, invece che in fondo al testo. */
.falone-works--sotto .falone-works__body {
  position: relative;
  padding-right: calc(var(--falone-works-sotto-pad, 20px) + var(--falone-works-freccia-spazio, 26px));
}

.falone-works--sotto .falone-works__link {
  position: absolute;
  right: var(--falone-works-sotto-pad, 20px);
  bottom: var(--falone-works-sotto-pad, 20px);
}

/* ⚠️ In modo «didascalia sotto», una scheda SENZA fotografia non riserva lo
   spazio dell'immagine e la sua didascalia risale in cima, sfalsando tutta
   la fila. Il riquadro qui sotto tiene il posto con la stessa proporzione,
   e porta i due segni tenui della scheda senza foto — sfumatura in accento e
   filo di contorno — che altrimenti resterebbero sul contenitore sbagliato. */
.falone-works--sotto .falone-works__card {
  grid-template-rows: auto 1fr;
  align-content: stretch;
}

.falone-works--sotto .falone-works__card--senza-foto::before {
  content: "";
  display: block;
  aspect-ratio: var(--falone-works-sotto-ratio, 4 / 3);
  background:
    linear-gradient(135deg, rgba(247, 148, 29, .09), rgba(247, 148, 29, .02) 62%);
  box-shadow: inset 0 0 0 1px rgba(247, 148, 29, .16);
}

/* Sottotitolo della sezione — le misure sono quelle di `.section-heading > p`
   del modello: 590px di larghezza, peso 300, colore del corpo. Il margine
   sotto resta quello del browser, come nel modello, cosi' entra nell'altezza
   dell'intestazione. */
.falone-works__lead {
  max-width: var(--falone-works-lead-w, 590px);
  margin: 0 0 var(--falone-p-gap, 1em);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: var(--falone-works-lead-weight, 300);
  /* ⚠️ `inherit` NON va bene: la sezione ha `color: #fff` anche quando il
     fondale e' chiaro (i colori delle fasce chiare si impostano sui singoli
     elementi, non sul contenitore). Il sottotitolo veniva bianco su bianco —
     rapporto 1:1, invisibile. Si aggancia alla stessa variabile del testo
     delle celle, che il fondale chiaro imposta. */
  color: var(--falone-works-lead-color, var(--falone-works-ink, #fff));
}