/*
 * Componenti condivisi Falone
 *
 * Sono gli elementi che nel sorgente ricorrono in piu' di una sezione.
 * Un widget che ne ha bisogno li USA: non li riscrive. Se ne serve una
 * variante, sovrascrive il minimo e annota cosa e perche'.
 *
 * Ogni variabile ha un ripiego pari al valore del sorgente, cosi' il
 * componente e' corretto anche se i token non sono stati caricati.
 *
 * Indice
 *   1. entrate in viewport (stati iniziali e finali)
 *   2. occhiello
 *   3. titoli
 *   4. pulsanti
 *   5. contenitore fotografico
 *   6. comandi del carosello
 *   7. impaginazione di sezione
 */

/* ======================================================================
   0. POSTO DELL'HEADER IN PAGINA
   ======================================================================
   L'header del sito e' position: fixed per progetto (come nel sorgente):
   galleggia sopra il contenuto e la pagina gli scorre sotto. Il suo
   contenitore non deve quindi occupare spazio, o tutto il contenuto scende.

   ⚠️ Serve perche' i container di Elementor hanno 10px di padding di
   default per lato (--container-default-padding-*): senza questa regola il
   contenitore dell'header resta alto 20px e il primo blocco della pagina
   parte 20px piu' in basso. Misurato in pagina, non supposto. */
.elementor-location-header {
  height: 0;
  overflow: visible;
}

/* ======================================================================
   1. ENTRATE IN VIEWPORT
   ======================================================================
   Contratto (vedi assets/js/reveal.js):
     data-falone-scene            sul contenitore da osservare
     data-falone-in="up|mask"     sul figlio da animare
     --falone-in-index            indice del figlio, per la cascata

   ⚠️ REGOLA DELLE QUATTRO CONDIZIONI
   Nessuno stato iniziale sta nel CSS di base. Gli elementi partono
   VISIBILI. E' lo script che, dopo essersi accertato di poter animare,
   aggiunge .falone-armed alla scena: solo da li' valgono opacity 0 e
   traslazione. Se lo script non viene servito o va in errore, in pagina
   non resta niente di invisibile. */

[data-falone-scene].falone-armed [data-falone-in] {
  opacity: 0;
  transition:
    opacity   var(--falone-dur-reveal, .7s) var(--falone-ease, ease),
    transform var(--falone-dur-reveal, .7s) var(--falone-ease, ease);
  transition-delay: calc(var(--falone-in-index, 0) * var(--falone-reveal-stagger, 90ms));
}

[data-falone-scene].falone-armed [data-falone-in="up"] {
  transform: translateY(var(--falone-reveal-shift, 28px));
}

/* variante a comparsa da sotto una maschera, per i titoli */
[data-falone-scene].falone-armed [data-falone-in="mask"] {
  transform: translateY(100%);
}
[data-falone-scene] [data-falone-in="mask"] { display: block; }

/* stato di arrivo: identico per tutte le varianti */
[data-falone-scene].falone-in [data-falone-in] {
  opacity: 1;
  transform: none;
}

/* Chi ha chiesto meno movimento vede tutto, fermo e subito.
   Si annulla la proprieta' finale, non la variabile: Elementor stampa le
   sue su selettori con l'id del documento, che battono qualunque classe. */
@media (prefers-reduced-motion: reduce) {
  [data-falone-scene].falone-armed [data-falone-in],
  [data-falone-scene].falone-in [data-falone-in] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================================================
   2. OCCHIELLO
   ====================================================================== */
.falone-eyebrow {
  margin-bottom: 18px;
  color: var(--falone-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ SCARTO DAL SORGENTE, chiesto dall'utente il 05/08: +2px su tutti gli
     occhielli del sito. Il sorgente dice `.68rem`, cioe' 10,88px misurati.
     Scritto come `calc(.68rem + 2px)` e non come 12,88px fisso: cosi' resta
     legato al corpo di base, e se un giorno la tipografia del Kit cambia
     l'occhiello lo segue come faceva prima.
     Un solo valore per tutte e cinque le pagine: e' un componente condiviso,
     34 occorrenze. */
  font-size: var(--falone-eyebrow-size, .68rem);
  font-weight: 800;
  letter-spacing: var(--falone-eyebrow-ls, .32em);
  text-transform: uppercase;
}

/* ⚠️ DECISIONE DELL'UTENTE, 18/08: gli occhielli di sezione sono ARANCIONI
   ovunque, su fondo chiaro e su fondo scuro.

   Il sorgente ne attenuava alcuni a grigio chiaro (#b7b7b7) sulle fasce
   scure e uno anche su fondo chiaro. Erano cinque su trentotto: una
   minoranza senza una regola che la spiegasse — la stessa sezione
   «Il metodo» e' grigia su Costruttori e arancione altrove. Con
   l'occhiello arancione la fascia si legge come un blocco solo.

   La classe resta, e resta il grigio come valore a portata di mano: basta
   impostare --falone-eyebrow-muted su una sezione per tornare indietro,
   senza toccare il modello ne' i widget. */
.falone-eyebrow--muted {
  color: var(--falone-eyebrow-muted, var(--falone-accent, #f7941d));
}

/* ======================================================================
   3. TITOLI
   ====================================================================== */
.falone-h1 {
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: var(--falone-h1, clamp(4.2rem, 10.2vw, 8.6rem));
  font-weight: 600;
  line-height: var(--falone-h1-lh, .86);
}

/* ⚠️ Porta ANCHE famiglia e peso, non solo la scala.
   Nei template questa classe si usa DA SOLA, senza .falone-h2: dichiarando
   solo font-size e line-height, i nove titoli delle pagine interne
   prendevano famiglia e peso dalla tipografia globale del Kit — misurato:
   Plus Jakarta Sans 500 invece di Jost 700, quindi carattere sbagliato e
   niente grassetto.
   Il peso 700 e' quello di .falone-h2, cosi' i titoli delle pagine interne
   sono coerenti con quelli della home. */
.falone-h2--page {
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: var(--falone-h2-page, clamp(1.95rem, 3.3vw, 3rem));
  font-weight: var(--falone-h2-page-weight, 600);
  line-height: var(--falone-h2-page-lh, 1.2);
}

.falone-h2 {
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: var(--falone-h2, clamp(2.35rem, 5.2vw, 5rem));
  font-weight: 600;
  line-height: var(--falone-h2-lh, 1.03);
}

/* nel sorgente l'<em> dentro un titolo va a capo in accento corsivo */
.falone-h1 em,
.falone-h2 em {
  display: block;
  color: var(--falone-accent, #f7941d);
  font-style: italic;
}

/* ======================================================================
   4. PULSANTI
   ====================================================================== */
.falone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition:
    transform    var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    background   var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    color        var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    border-color var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

/* :focus-visible oltre a :hover, o chi naviga da tastiera non vede nulla */
.falone-btn:hover,
.falone-btn:focus-visible { transform: translateY(-2px); }

/* ======================================================================
   ⚠️ IL BLU DI HELLO ELEMENTOR
   ======================================================================
   Il tema padre pubblica in assets/css/reset.css
       a:active, a:hover { color: #336 }
   con specificita' (0,1,1). Batte `.falone-btn--primary { color: #fff }`
   (0,1,0), quindi passando sopra un pulsante il testo diventava BLU NAVY
   su fondo colorato. Non e' del sorgente e non e' nostro: e' il reset del
   tema.
   Serve superare (0,1,1): `a.falone-btn--primary:hover` fa (0,2,1).
   Un selettore discendente qui non basterebbe sempre, perche' i pulsanti
   stanno in posti diversi e non hanno un contenitore comune.
   ⚠️ Vanno coperti :hover E :active — sono entrambi nel reset. */
a.falone-btn:hover,
a.falone-btn:focus-visible,
a.falone-btn:active { color: inherit; }

.falone-btn--primary {
  border-color: var(--falone-accent, #f7941d);
  background: var(--falone-accent, #f7941d);
  color: var(--falone-btn-primary-ink, #fff);
}

/* ======================================================================
   AL PASSAGGIO: LO STESSO ARANCIONE, PIU' PROFONDO
   ======================================================================
   ⚠️ SCARTO VOLUTO DAL SORGENTE, deciso dall'utente il 04/08.
   Il sorgente passa a --accent-strong (#ee2a24), che e' un ROSSO: cambia
   tinta, non luminosita'. Qui si scurisce l'arancione del 18% senza
   cambiare colore, cosi' il passaggio resta dentro la palette.
   Il rosso resta nel Kit come Global `fal_strong`: e' un colore del
   sorgente, semplicemente non lo usano piu' i pulsanti.

   ⚠️ Perche' @supports e non il solito doppio ripiego.
   Il modo
       background: #cb7918;
       background: var(--x, color-mix(...));
   NON protegge: il parser accetta `var()` sempre, quindi la seconda riga
   vince la cascata; se poi color-mix non si sa risolvere la dichiarazione
   e' invalida al momento del calcolo e la proprieta' torna al valore
   INIZIALE (transparent), non alla riga sopra. Con @supports il blocco
   intero non viene nemmeno letto dai browser che non sanno fare la
   miscela, e il ripiego resta quello buono. Vedi la trappola nel §7. */
/* ⚠️ 31/08: RIENTRATO al modello su richiesta. Il modello dice
   `.button.primary:hover { border-color: var(--accent-strong); background:
   var(--accent-strong) }`, cioe' il rosso #ee2a24 — che nel Kit e' il Global
   `fal_strong`. Il 04/08 era stato scartato perche' cambia TINTA invece di
   luminosita', e sostituito con lo stesso arancione scurito del 18%
   (#cb7918). Per tornare a quella scelta basta impostare
   --falone-btn-hover-bg: #cb7918 (o riaccendere la miscela con color-mix). */
.falone-btn--primary:hover,
.falone-btn--primary:focus-visible {
  border-color: var(--falone-btn-hover-bg, var(--falone-accent-strong, #ee2a24));
  background: var(--falone-btn-hover-bg, var(--falone-accent-strong, #ee2a24));
}

/* il testo resta bianco: serve (0,2,1) per battere a:hover del tema */
a.falone-btn--primary:hover,
a.falone-btn--primary:focus-visible,
a.falone-btn--primary:active {
  color: var(--falone-btn-primary-ink, #fff);
}

.falone-btn--ghost {
  color: var(--falone-btn-ghost-ink, #fff);
  border-color: rgba(255, 255, 255, .58);
}

/* stessa ragione: senza, il fantasma su fondo scuro diventava blu navy */
a.falone-btn--ghost:hover,
a.falone-btn--ghost:focus-visible,
a.falone-btn--ghost:active {
  color: var(--falone-btn-ghost-ink, #fff);
}

/* sotto 480px il sorgente allarga ogni pulsante a tutta riga */
@media (max-width: 480px) {
  .falone-btn {
    width: 100%;
    padding: 0 18px;
  }
}

/* ======================================================================
   5. CONTENITORE FOTOGRAFICO
   ======================================================================
   Due elementi annidati: quello esterno porta il ritaglio, quello interno
   l'ingrandimento. Su un solo elemento le due trasformazioni si
   sovrascriverebbero. */
.falone-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.falone-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ingrandimento in hover.
   Le scale sono variabili perche' le sezioni le usano diverse:
   Competenze 1.04 -> 1.10 in 650ms, Realizzazioni 1 -> 1.05 in 800ms.
   I ripieghi sono i valori delle Competenze, il primo consumatore. */
.falone-media--zoom img {
  transform: scale(var(--falone-zoom-from, 1.04));
  transition:
    transform var(--falone-dur-media, .65s) var(--falone-ease, ease),
    filter    var(--falone-dur-media, .65s) var(--falone-ease, ease),
    opacity   var(--falone-dur-media, .65s) var(--falone-ease, ease);
}
.falone-media--zoom:hover img,
.falone-media--zoom:focus-within img { transform: scale(var(--falone-zoom-to, 1.1)); }

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

/* velo sfumato sopra la foto */
.falone-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--falone-veil-card,
    linear-gradient(180deg, rgba(18,18,18,.08), rgba(18,18,18,.92)));
  pointer-events: none;
}

/* ======================================================================
   6. COMANDI DEL CAROSELLO
   ======================================================================
   Promossi a componente condiviso alla seconda occorrenza: nel sorgente
   .ongoing-controls e .projects-controls sono identici riga per riga, come
   .ongoing-controls button / .projects-arrow e .ongoing-progress /
   .rail-progress. Tenerli separati vorrebbe dire due copie che divergono
   alla prima modifica. */
.falone-rail-controls {
  display: grid;
  grid-template-columns:
    var(--falone-rail-btn, 44px)
    minmax(var(--falone-rail-bar-min, 160px), 1fr)
    var(--falone-rail-btn, 44px);
  gap: var(--falone-rail-controls-gap, 18px);
  align-items: center;
  width: min(100%, var(--falone-rail-controls-w, 560px));
  margin-top: 18px;
}

.falone-rail-btn {
  width: var(--falone-rail-btn, 44px);
  height: var(--falone-rail-btn, 44px);
  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-rail-accent, var(--falone-accent, #f7941d));
  border-radius: 0;
  /* ⚠️ Il fondo e' una variabile, non `--falone-paper` fisso: su una fascia
     scura un quadratino bianco e' la cosa piu' luminosa della sezione e si
     legge come un difetto. Il valore di partenza resta il bianco del
     sorgente, quindi le piste gia' in pagina non cambiano. */
  background: var(--falone-rail-btn-bg, var(--falone-paper, #fff));
  color: var(--falone-rail-accent, var(--falone-accent, #f7941d));
  cursor: pointer;
  /* ⚠️ Variabile, non piu' `1rem` fisso: rimpicciolendo il riquadro del
     pulsante senza toccare la freccia il glifo resta grande e sembra
     stretto. Il ripiego e' il valore di prima, quindi le piste gia' in
     pagina non cambiano da sole. */
  font-size: var(--falone-rail-glifo, 1rem);
  transition:
    background var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    color      var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    transform  var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

.falone-rail-btn:hover,
.falone-rail-btn:focus-visible {
  background: var(--falone-rail-accent, var(--falone-accent, #f7941d));
  color: var(--falone-paper, #fff);
  outline: 0;
  transform: translateY(-1px);
}

/* aggiunta nostra: un pulsante senza nulla da scorrere lo dichiara, invece
   di restare identico e sembrare rotto */
.falone-rail-btn[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
  transform: none;
}

.falone-rail-progress {
  height: 1px;
  background: rgba(247, 148, 29, .34);   /* ripiego */
  background: color-mix(in srgb,
    var(--falone-rail-accent, var(--falone-accent, #f7941d)) 34%, transparent);
}

.falone-rail-progress span {
  display: block;
  width: 18%;   /* stato iniziale: coincide col minimo calcolato dallo script */
  height: 100%;
  background: var(--falone-rail-accent, var(--falone-accent, #f7941d));
  transition: width var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

@media (max-width: 820px) {
  .falone-rail-controls {
    --falone-rail-btn: 40px;
    --falone-rail-bar-min: 120px;
    --falone-rail-controls-gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .falone-rail-btn,
  .falone-rail-progress span { transition: none; }
}

/* ======================================================================
   8. INTESTAZIONE DI SEZIONE
   ======================================================================
   Promossa alla seconda occorrenza: .section-heading del sorgente compare
   due volte nella home (Competenze, Realizzazioni) e tre in Costruttori
   (Metodo, Perche', Lavori realizzati). Stessi valori in tutte.

   La variante .split affianca al titolo una colonna di testo:
   minmax(0,1fr) minmax(300px,.45fr), allineate in basso. */
.falone-section-heading {
  display: grid;
  gap: var(--falone-heading-gap, 24px);
  max-width: var(--falone-heading-max, 940px);
  margin-bottom: var(--falone-heading-bottom, 62px);
  margin-left: var(--falone-indent, 0px);
}

/* ⚠️ Le schede su fascia SCURA: l'occhiello dell'intestazione condivisa
   prende --soft-ink (#666) dalla regola qui sotto, che su nero da' 2,6:1.
   Legandolo al colore del TITOLO della fascia si adatta da se': bianco al 68%
   sulle fasce scure, #666 su quelle chiare (identico a prima). Stessa cura
   applicata al Metodo. */
.falone-cards .falone-section-heading > p {
  color: color-mix(in srgb, var(--falone-cards-title-color, #262626) 68%, transparent);
}

/* ⚠️ Il modello NON esclude l'occhiello da questa regola: la sua
   `.section-heading > p` e' (0,1,1) e batte `.eyebrow` (0,1,0), quindi
   l'occhiello dentro un'intestazione pesa 300 e prende --soft-ink; resta
   grigio chiaro (#b7b7b7) solo con il modificatore `muted`, che a (0,2,0)
   vince sul colore. Escludendolo, il nostro «Competenze» veniva 800 e
   arancione. Allineato al modello il 31/08. */
.falone-method .falone-steps__text {
  /* nel modello `#metodo` e' `.dark-band`, e `.dark-band p` porta il testo dei
     passaggi a .68; il Processo della home, che NON e' dark-band, resta a .66
     da `.process-item p`. Stesso componente, due valori: qui per contenitore.
     ⚠️ Il .68 si applica all'INK DELLA FASCIA, non al bianco: quando il
     fondale del Metodo e' diventato grigio (alternanza del 31/08) questo
     testo restava bianco su grigio — rapporto 1,07:1, invisibile. Derivandolo
     dall'ink si adatta da se' a fascia chiara e a fascia scura. */
  color: rgba(255, 255, 255, .68);   /* ripiego */
  color: var(--falone-method-steps-text,
    color-mix(in srgb, var(--falone-method-ink, #fff) 68%, transparent));
}

.falone-method .falone-section-heading > p {
  /* (0,2,1): batte la regola generale qui sotto, come `.dark-band p` fa nel
     modello con `.section-heading > p`.
     ⚠️ Come sopra: legato all'ink, non al bianco. */
  color: rgba(255, 255, 255, .68);   /* ripiego */
  color: var(--falone-method-eyebrow-color,
    color-mix(in srgb, var(--falone-method-ink, #fff) 68%, transparent));
}

.falone-section-heading > p {
  max-width: var(--falone-heading-text-max, 590px);
  margin: 0;
  color: var(--falone-heading-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}

.falone-section-heading--split {
  max-width: none;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--falone-heading-aside-min, 300px), var(--falone-heading-aside-fr, .45fr));
  align-items: end;
}

@media (max-width: 820px) {
  .falone-section-heading--split { grid-template-columns: 1fr; }
}

/* ======================================================================
   9. ELENCO A PASSAGGI NUMERATI
   ======================================================================
   Promosso alla seconda occorrenza: .process-list / .process-item del
   sorgente stanno nella home (sezione Processo) e nella pagina Costruttori
   (sezione Metodo), identici riga per riga. Prima vivevano solo dentro
   process.css del widget: ora sono qui e il widget li usa.

   ⚠️ I filetti sono pensati per fondo SCURO: rgba(255,255,255,.16). Su
   fondo chiaro va cambiato --falone-steps-line dal controllo.

   ⚠️ L'unita' fr sta nel VALORE della variabile (.34fr), non in un calc():
   `calc(.34 * 1fr)` renderebbe invalida tutta la grid-template-columns e le
   tre colonne collasserebbero in una. */
.falone-steps {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;   /* i numeri sono nel markup, non generati */
  border-top: 1px solid
    color-mix(in srgb,
      var(--falone-steps-line, #fff) calc(var(--falone-steps-line-op, .16) * 100%),
      transparent);
}

.falone-steps__item {
  display: grid;
  grid-template-columns:
    var(--falone-steps-num-w, 82px)
    minmax(var(--falone-steps-title-min, 220px), var(--falone-steps-title-fr, .34fr))
    minmax(0, 1fr);
  gap: var(--falone-steps-gap, 24px);
  align-items: start;
  padding: var(--falone-steps-pad, 34px) 0;
  border-bottom: 1px solid
    color-mix(in srgb,
      var(--falone-steps-line, #fff) calc(var(--falone-steps-line-op, .16) * 100%),
      transparent);
}

/* ⚠️ ripiego: senza, un browser senza color-mix perderebbe i filetti e
   l'elenco resterebbe senza righe. Qui il doppio ripiego NON basterebbe:
   il valore contiene var(), quindi si usa @supports. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-steps      { border-top-color: rgba(255, 255, 255, .16); }
  .falone-steps__item { border-bottom-color: rgba(255, 255, 255, .16); }
}

.falone-steps__num {
  color: var(--falone-steps-num-color, var(--falone-accent, #f7941d));
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ SCARTO DAL SORGENTE, chiesto dall'utente il 05/08: +2px sui numeri
     piccoli. Il sorgente dice `.72rem` = 11,52px misurati.
     Vale per il Processo della home e per il Metodo di Creatori di Valore:
     e' lo stesso componente. */
  font-size: var(--falone-steps-num-size, .72rem);   /* modello: .72rem */
  font-weight: 800;
  letter-spacing: .22em;
}

.falone-steps__title {
  margin: 0;
  color: var(--falone-steps-title-color, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: 600;
  letter-spacing: 0;
}

.falone-steps__text {
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;

  color: rgba(255, 255, 255, .66);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-steps-text, #fff) calc(var(--falone-steps-text-op, .66) * 100%),
    transparent);
}

@media (max-width: 820px) {
  .falone-steps__item { grid-template-columns: 1fr; }
  /* a colonna unica il segnaposto vuoto del numero lascerebbe un buco */
  .falone-steps__item > span:empty { display: none; }
}

/* ======================================================================
   7. IMPAGINAZIONE DI SEZIONE
   ====================================================================== */
.falone-section {
  padding:
    var(--falone-section-pad-y, 112px)
    var(--falone-section-pad-x, 52px);
}

/* il rientro del testo: --text-left-offset del sorgente */
.falone-indent { margin-left: var(--falone-indent, 0px); }


/* ============================================================
   Falone · peso dei titoli fissato a 600 (strada A)
   Il sorgente dichiara  h1, h2, h3 { font-weight: 600 }.
   I ripieghi delle variabili sono gia' stati portati a 600, ma
   tre istanze page-hero (Ristrutturazione, Efficientamento,
   Infrastrutture) scrivono --falone-phero-title-weight:700 sul
   PROPRIO elemento: per le custom property vince l'antenato piu'
   vicino, non la specificita', quindi il ripiego non le raggiunge.
   Qui il peso e' dichiarato DIRETTAMENTE, cosi' vale ovunque.
   ⚠️ Di conseguenza il controllo «peso del titolo» nel pannello
   Elementor e' inerte su questi selettori: scelta voluta.
   Speculare al CSS aggiuntivo del remoto, cosi' i due ambienti
   si comportano identici. Esclusa la sola pagina 2.
   ============================================================ */

body:not(.page-id-2) .falone-h1,
body:not(.page-id-2) .falone-h2,
body:not(.page-id-2) .falone-h2--page,
body:not(.page-id-2) .falone-page-hero__h1 {
  font-weight: 600;
}


/* ============================================================
   Falone · interlinea dei paragrafi
   Il sorgente dichiara alla riga 72 di styles.css una regola di
   base:  p { line-height: 1.78 }
   Nel porting non era mai stata riprodotta, e i paragrafi
   ereditavano l'1,5 di Hello Elementor: misurati 24px contro i
   28,48 del riferimento, su OGNI paragrafo del sito. E' l'origine
   del «copy piu' light» segnalato dal cliente — che parlava di
   peso, ma il peso (300) e' identico: a differire era l'interlinea.
   ⚠️ Selettore di solo elemento, (0,0,1): qualunque regola di
   widget con una classe lo scavalca, ed e' voluto — nel sorgente
   e' una regola di base, non un'imposizione.
   Impatto misurato: le pagine si allungano fra lo 0,7% e il 2,2%,
   nessuno sbordamento e nessun paragrafo troncato.
   ============================================================ */

/* ⚠️ Hello Elementor dichiara `body { line-height: 1.5 }` nel suo reset.css,
   e quell'1,5 scendeva per eredita' su ogni <span>, <a> e <button> del sito:
   43 elementi della sola home misuravano un'interlinea dove il modello dice
   `normal` (differenze di altezza fra 2 e 5px per elemento). Il modello non
   dichiara nulla su body, quindi qui si torna a `normal`.
   I paragrafi NON cambiano: la regola `p` qui sotto e' piu' specifica. */
body { line-height: normal; }

/* ⚠️ Hello Elementor dichiara 1.5 anche su `button, input, select, textarea`
   e 1 su `label`, sempre nel suo reset. Il modello non dichiara interlinea su
   nessuno dei due: sono le ultime 10 differenze della home (le frecce dei
   caroselli, il pulsante Invia, le etichette nascoste del modulo). */
button, input, select, textarea, label { line-height: normal; }

p { line-height: var(--falone-p-lh, 1.78); }


/* ============================================================
   Falone · le regole DI BASE dei titoli, come nel modello
   Il modello dichiara in styles.css:
       h1, h2, h3 { font-family: display; font-weight: 600; letter-spacing: 0 }
       h2 { font-size: clamp(2.35rem, 5.2vw, 5rem); line-height: 1.03 }
       h3 { font-size: clamp(1.45rem, 2.1vw, 2.1rem); line-height: 1.12 }
   Nel porting non erano mai state riprodotte: valeva il reset.css di Hello
   Elementor (h3 1.75rem = 28px, h1..h6 interlinea 1.2, peso 500). Da qui
   arrivavano gli h3 delle schede a 28px invece di 30,24 e le interlinee dei
   titoli a 1,2 invece di 1,12 — su tutte le pagine.
   ⚠️ Selettori di solo ELEMENTO, come nel modello: qualunque regola di
   widget con una classe li scavalca, ed e' voluto. Vincono sul reset di
   Hello perche' questo foglio si stampa dopo, a parita' di specificita'.
   ============================================================ */

h1, h2, h3 {
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: var(--falone-titoli-peso, 600);
  letter-spacing: 0;
}

h2 {
  font-size: var(--falone-h2, clamp(2.35rem, 5.2vw, 5rem));
  line-height: var(--falone-h2-lh, 1.03);
}

h3 {
  font-size: var(--falone-h3, clamp(1.45rem, 2.1vw, 2.1rem));
  line-height: var(--falone-h3-lh, 1.12);
}

/* nel modello ogni <em> dentro un h2 va a capo, in accento e in corsivo */
h2 em {
  display: block;
  color: var(--falone-accent, #f7941d);
  font-style: italic;
}


/* ============================================================
   Falone · galleria filtrabile di Cantieri (widget Gallery di
   Elementor Pro, non un widget nostro: vedi la decisione «strada C»).
   Qui si riporta l'aspetto a quello del riferimento, che usa
   .filter-bar / .filter-item in styles.css righe 1269-1279.
   ⚠️ Elementor applica lo stato attivo via JavaScript: si coprono
   entrambe le classi che puo' usare.
   ============================================================ */

.falone-cantieri-gallery .elementor-gallery__titles-container {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px;
  justify-content: flex-start;
}

.falone-cantieri-gallery .elementor-gallery-title {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 18px; margin: 0; cursor: pointer;
  border: 1px solid var(--falone-line, #e7e7e7);
  background: #fff; color: var(--falone-black, #121212);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.falone-cantieri-gallery .elementor-gallery-title:hover,
.falone-cantieri-gallery .elementor-gallery-title.elementor-item-active,
.falone-cantieri-gallery .elementor-gallery-title--active {
  background: var(--falone-accent, #f7941d);
  border-color: var(--falone-accent, #f7941d);
  color: #fff;
}

/* la sottolineatura animata di Elementor non c'e' nel riferimento */
.falone-cantieri-gallery .elementor-gallery-title:before,
.falone-cantieri-gallery .elementor-gallery-title:after { display: none !important; }

/* schede: fondo scuro, foto attenuata, sfumatura verso il basso */
.falone-cantieri-gallery .e-gallery-item { background: #111; }
/* ⚠️ Nel modello `.filter-item` ha `min-height: 360px`: un'altezza FISSA, non
   un rapporto d'aspetto. Il widget Gallery di Elementor calcola l'altezza dal
   rapporto, e a 1440 le tessere venivano 282,9px invece di 360. */
/* ⚠️ Nel modello `.filter-item` e' alta 360px A OGNI LARGHEZZA: `min-height`
   piu' un'immagine in `position: absolute`, quindi il rapporto d'aspetto non
   entra nell'altezza. Il widget Gallery invece crea l'altezza con il trucco
   del `padding-bottom` percentuale su un figlio: a una colonna, 769px di
   larghezza diventavano 513px di altezza contro i 360 del modello (+21% di
   pagina). Si azzera quel padding e si fissa l'altezza. */
.falone-cantieri-gallery .e-gallery-item,
.falone-cantieri-gallery .elementor-gallery-item {
  height: var(--falone-cantieri-tessera-h, 360px);
  min-height: var(--falone-cantieri-tessera-h, 360px);
}

.falone-cantieri-gallery .e-gallery-item .e-gallery-image {
  padding-bottom: 0;
  height: 100%;
}

/* ⚠️ Una colonna sotto gli 820, come il modello (`@media (max-width: 820px)
   { .filter-gallery { grid-template-columns: 1fr } }`).
   Le colonne del widget Gallery le decide il JAVASCRIPT di Elementor, che
   scrive `--columns` in linea confrontando `innerWidth < 820`: a 820 esatti —
   la larghezza dell'iPad Air — restava a tre colonne mentre il modello era
   gia' a una. Il CSS di Elementor usa `max-width: 820` (incluso) e il suo JS
   `< 820` (escluso): i due non coincidono, e l'impostazione «1 colonna su
   tablet» non basta. Si sovrascrive `grid-template-columns`, che in linea non
   c'e' (in linea c'e' solo la variabile). */
@media (max-width: 820px) {
  .falone-cantieri-gallery .e-gallery-grid {
    grid-template-columns: 1fr;
  }
}
.falone-cantieri-gallery .e-gallery-image { opacity: .62; }
.falone-cantieri-gallery .e-gallery-item:hover .e-gallery-image { opacity: .72; }

/* ⚠️ Nel riferimento il titolo e' SEMPRE visibile in basso a sinistra;
   il widget Pro lo mostra in sovrimpressione al passaggio del mouse.
   Qui si forza la sovrimpressione a restare visibile. */
.falone-cantieri-gallery .elementor-gallery-item__overlay {
  opacity: 1 !important;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; padding: 24px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)) !important;
}

.falone-cantieri-gallery .elementor-gallery-item__title {
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: 600; color: #fff; margin: 0;
}

/* ⚠️ Elementor stampa prima il titolo e poi la descrizione; nel
   riferimento la CATEGORIA sta sopra il NOME. `order: -1` inverte la
   resa senza scambiare i campi, che restano semanticamente giusti:
   il titolo dell'allegato e' il nome dell'opera. */
.falone-cantieri-gallery .elementor-gallery-item__description {
  order: -1;
  color: var(--falone-accent, #f7941d);
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase;
}

/* ⚠️ Due ostacoli scoperti ispezionando il DOM reso, non deducibili
   dal CSS: (1) dentro l'overlay c'e' un wrapper __content che centra
   tutto con align-items/justify-content: center e text-align: center;
   (2) titolo e descrizione portano .elementor-animated-item--fade-in,
   che li tiene a opacity 0 finche' non passa il mouse. Forzare
   l'opacita' del solo overlay non bastava. */
.falone-cantieri-gallery .elementor-gallery-item__content {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
}

.falone-cantieri-gallery .elementor-gallery-item__title,
.falone-cantieri-gallery .elementor-gallery-item__description,
.falone-cantieri-gallery .elementor-animated-item--fade-in {
  opacity: 1 !important;
  transform: none !important;
  text-align: left !important;
}

.falone-cantieri-gallery .elementor-gallery-item__title {
  font-size: clamp(1.5rem, 1.9vw, 1.95rem) !important;
  line-height: 1.15;
}

/* ============================================================
   Falone · tessere di galleria senza fotografia
   Stesso trattamento gia' usato in works.css §3bis: senza foto la
   tessera resta un rettangolo scuro piatto e si legge come
   «immagine non caricata», non come segnaposto voluto. Due segni
   tenui — sfumatura diagonale in accento al 7% e filo di contorno
   al 16% — la rendono una scelta, non un guasto.
   ⚠️ Sparisce da sé quando si assegna l'immagine: la regola vale
   solo per le tessere che NON contengono un <img>.
   ============================================================ */

.falone-gallery__item:not(:has(img)) {
  background-image: linear-gradient(135deg,
    rgba(247, 148, 29, .07), rgba(247, 148, 29, 0) 62%);
  box-shadow: inset 0 0 0 1px rgba(247, 148, 29, .16);
}

/* ripiego per i browser senza :has() — nessun danno dove l'immagine c'e',
   perche' la foto la copre */
@supports not selector(:has(img)) {
  .falone-gallery__item {
    box-shadow: inset 0 0 0 1px rgba(247, 148, 29, .16);
  }
}

/* ============================================================
   Falone · fisarmonica delle FAQ (widget Accordion di Elementor,
   non un widget nostro: stessa scelta fatta per la galleria di
   Cantieri). Qui si riporta l'aspetto allo stile Falone.
   ============================================================ */

/* ⚠️ Nessuno sfondo: la fascia grigia leggeva come un riquadro anomalo
   dietro il titolo. Le FAQ stanno sul fondo della pagina, come le
   sezioni vicine. */
.falone-faq-band { background: transparent; }

.falone-faq-band .elementor-accordion { border: 0; margin-top: 34px; }

.falone-faq-band .elementor-accordion-item {
  border: 0;
  border-top: 1px solid var(--falone-line, #e7e7e7);
}
.falone-faq-band .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--falone-line, #e7e7e7);
}

.falone-faq-band .elementor-tab-title {
  padding: 26px 0;
  background: transparent;
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--falone-ink, #262626);
}

.falone-faq-band .elementor-tab-title.elementor-active { color: var(--falone-accent, #f7941d); }
.falone-faq-band .elementor-accordion-icon { color: var(--falone-accent, #f7941d); }

.falone-faq-band .elementor-tab-content {
  padding: 0 0 28px;
  border: 0;
  background: transparent;
  max-width: 780px;
  color: var(--falone-soft-ink, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}
.falone-faq-band .elementor-tab-content p { margin: 0; line-height: 1.78; }

/* ============================================================
   Falone · targhette delle certificazioni su piu' righe
   ⚠️ .falone-evidence__list nasce come pista SCORREVOLE
   (flex-wrap: nowrap + overflow-x). Con 8 targhette funziona; con le
   18 delle certificazioni di Ristrutturazione la maggior parte resta
   fuori dallo schermo e si raggiunge solo scorrendo, senza alcun
   comando visibile. Qui la pista diventa una griglia fluida che va a
   capo, cosi' si vedono tutte.
   Vale SOLO dove il contenitore porta .falone-evidence--wrap: le
   altre pagine (Costruttori, Infrastrutture) restano come sono.
   ============================================================ */

.falone-evidence--wrap .falone-evidence__list {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: var(--falone-evidence-gap, 10px);
}

.falone-evidence--wrap .falone-evidence__list .falone-evidence__badge {
  white-space: normal;
}

/* ============================================================
   Falone · FAQ, rifinitura: schede invece di semplici filetti
   Sostituisce le regole precedenti della fisarmonica (stesso
   selettore, dichiarate dopo: vincono per ordine).
   ============================================================ */

.falone-faq-band .elementor-accordion-item {
  border: 1px solid var(--falone-line, #e7e7e7);
  border-radius: 2px;
  background: #fff;
  margin-bottom: 12px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.falone-faq-band .elementor-accordion-item:last-child { margin-bottom: 0; }

.falone-faq-band .elementor-accordion-item:hover,
.falone-faq-band .elementor-accordion-item:focus-within {
  border-color: color-mix(in srgb, var(--falone-accent, #f7941d) 45%, transparent);
  box-shadow: 0 10px 26px rgba(18, 18, 18, .06);
}

.falone-faq-band .elementor-tab-title { padding: 24px 28px; }
.falone-faq-band .elementor-tab-content { padding: 0 28px 26px; }

/* icona +/- disegnata col bordo, senza dipendere da Font Awesome.
   ⚠️ Elementor 4.2 non stampa piu' un <i>: l'icona di default e' un
   <svg class="e-font-icon-svg">, dentro due span (-closed/-opened). La
   regola nascondeva solo l'<i> di un tempo, e l'svg restava visibile
   SOPRA il segno disegnato qui sotto: due icone sovrapposte. */
.falone-faq-band .elementor-accordion-icon i,
.falone-faq-band .elementor-accordion-icon svg { display: none; }
.falone-faq-band .elementor-accordion-icon {
  position: relative; width: 20px; height: 20px; flex: 0 0 20px;
}
.falone-faq-band .elementor-accordion-icon::before,
.falone-faq-band .elementor-accordion-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; background: var(--falone-accent, #f7941d);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.falone-faq-band .elementor-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* aperta: la barra verticale sparisce e resta il segno meno */
.falone-faq-band .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg); opacity: 0;
}

/* ============================================================
   Falone · scala dei TITOLI DI SEZIONE ridotta a 56px
   Decisione dell'utente del 18/08 dopo una prova a 64/56/48px.
   La copertina (h1) NON cambia: resta clamp(4rem, 8.5vw, 8rem).

   La formula e' proporzionata all'originale, non un numero fisso:
   5.2vw → 3.89vw (3.89 × 14.4 = 56,0px a 1440), e min/max scalati
   dello stesso rapporto (0,748). Cosi' resta fluida come prima.

   ⚠️ Selettore con `body` davanti — (0,1,1) — non !important: i
   fogli dei widget dichiarano i propri `__h2` a (0,1,0) e vengono
   stampati DOPO components.css, quindi a parita' vincerebbero loro.
   ============================================================ */

/* ⚠️ RIENTRATA il 31/08 su richiesta: il modello e' la verita', e li' i
   titoli di sezione valgono clamp(2.35rem, 5.2vw, 5rem) — 74,88px a 1440,
   non 56. La riduzione a 56px del 18/08 e' stata rimossa: la scala arriva
   ora da `h2` di base e da --falone-h2, che il modello gia' dichiarava
   identici. Se un titolo va a tre righe e' cosi' anche nel modello. */
/* ⚠️ 31/08: qui c'era l'eccezione per l'intestazione delle Garanzie, che le
   dava la scala propria del modello (clamp(1.2rem, 1.9vw, 2.1rem), maiuscola).
   RIMOSSA su richiesta: quel titolo deve avere la stessa tipografia di tutti
   gli altri titoli di sezione della pagina. Ora la scala arriva da
   `--falone-h2`, come per tutti. La regola stava QUI e non in guarantees.css:
   `body .falone-guarantees__h2` vale (0,1,1) e batteva il foglio del widget,
   quindi cambiare solo quello non era bastato. */

/* ============================================================
   Falone · allineamento, larghezza e respiro dei titoli di sezione
   Decisione dell'utente del 18/08: una sola linea verticale per tutto
   il sito, x=102 (52 di margine di sezione + 50 di rientro), cioe' il
   bordo del logo. Priorita' alla coerenza interna sulla fedelta' al
   netlify — ⚠️ questo fa divergere `evidence` dal sorgente, dove
   `.evidence` non rientra: scelta consapevole.
   ⚠️ !important perche' il controllo "Rientro" dei widget scrive la
   variabile sullo STESSO elemento a (0,4,0): con una dichiarazione
   normale vincerebbe lui.
   ============================================================ */

/* ⚠️ 31/08, secondo giro: `evidence` RIENTRA qui e `split` rientra nel blocco
   dei margini interni piu' sotto. Per qualche ora erano state allineate al
   modello (x=52), poi e' arrivata la richiesta di far partire TUTTI i titoli
   dallo stesso punto: il modello non e' uniforme, l'uniformita' vince. */
body:not(.page-id-2) .falone-evidence,
body:not(.page-id-2) .falone-works,
body:not(.page-id-2) .falone-colgrid,
body:not(.page-id-2) .falone-values,
body:not(.page-id-2) .falone-special { --falone-indent: 50px !important; }

@media (max-width: 820px) {
  body:not(.page-id-2) .falone-evidence, body:not(.page-id-2) .falone-works,
  body:not(.page-id-2) .falone-colgrid, body:not(.page-id-2) .falone-values,
  body:not(.page-id-2) .falone-special { --falone-indent: 24px !important; }
}
@media (max-width: 480px) {
  body:not(.page-id-2) .falone-evidence, body:not(.page-id-2) .falone-works,
  body:not(.page-id-2) .falone-colgrid, body:not(.page-id-2) .falone-values,
  body:not(.page-id-2) .falone-special { --falone-indent: 18px !important; }
}

/* 1 · ⚠️ RITIRATO il 31/08. Qui c'era un tetto di 900px su tutti i titoli di
   sezione, nato quando il corpo era 56px. Con la scala del modello (74,88px a
   1440) quel tetto spezza le righe in un punto diverso dal modello, che usa
   larghezze PROPRIE per sezione: .section-heading 940px, .intro-title h2
   960px, .ongoing-heading 980px, .people-copy h2 820px, e nessun limite
   sull'intestazione delle Garanzie. Restano quelle, dai fogli dei widget.
   Per rimetterlo su una singola sezione basta --falone-h2-max-w. */
body .falone-h2 {
  max-width: var(--falone-h2-max-w, none);
}

/* 2 · piu' respiro fra il titolo e cio' che viene sotto */
body .falone-colgrid__head,  body .falone-values__head,
body .falone-works__head,    body .falone-evidence__head,
body .falone-cards__head,    body .falone-gallery__head {
  margin-bottom: var(--falone-head-gap, 56px);
}

/* ============================================================
   Falone · rientro a x=102 sui widget che NON ascoltano
   --falone-indent (split, colgrid, values, special, works).
   ⚠️ Impostare la variabile su questi non serviva a nulla: il loro
   CSS non la legge. Qui il rientro si applica al MARGINE INTERNO
   della fascia, così scorre tutto quanto sta dentro — intestazione,
   celle, colonne, piste — senza dover conoscere la struttura interna
   di ciascun widget.
   Si somma ai 52px di margine della fascia: 52 + 50 = 102, la linea
   del logo. Sotto le soglie segue i valori del sorgente (24 e 18).
   ⚠️ `evidence` NON e' qui: quella la variabile la legge, ed e' gia'
   a 102 dalla regola precedente. Aggiungerla la porterebbe a 152.
   ============================================================ */

/* ⚠️ 31/08, secondo giro: `split` RIENTRA. Il suo CSS non legge
   --falone-indent, quindi il rientro va sul MARGINE INTERNO della fascia. */
body:not(.page-id-2) .falone-split,
body:not(.page-id-2) .falone-closing,
body:not(.page-id-2) .falone-colgrid,
body:not(.page-id-2) .falone-values,
body:not(.page-id-2) .falone-special,
body:not(.page-id-2) .falone-works,
/* ⚠️ approach e future esistono solo su «Il nostro impegno»: erano
   sfuggiti al primo giro perche' non compaiono sulle altre pagine. */
body:not(.page-id-2) .falone-approach,
body:not(.page-id-2) .falone-future {
  padding-left: calc(var(--falone-sez-pad-x, 52px) + var(--falone-indent-x, 50px));
}

@media (max-width: 820px) {
  /* ⚠️ `approach` e `future` erano nel blocco del desktop ma non qui: sotto
     gli 820 restavano a x=102 mentre tutte le altre sezioni scendevano a 42.
     Si vedeva solo su «Il nostro impegno», l'unica pagina che li usa. */
  body:not(.page-id-2) .falone-split,  body:not(.page-id-2) .falone-colgrid,
  body:not(.page-id-2) .falone-values, body:not(.page-id-2) .falone-special,
  body:not(.page-id-2) .falone-approach, body:not(.page-id-2) .falone-future,
  body:not(.page-id-2) .falone-closing,
  body:not(.page-id-2) .falone-works { --falone-indent-x: 24px; --falone-sez-pad-x: 18px; }
}
@media (max-width: 480px) {
  /* ⚠️ `approach` e `future` erano nel blocco del desktop ma non qui: sotto
     gli 820 restavano a x=102 mentre tutte le altre sezioni scendevano a 42.
     Si vedeva solo su «Il nostro impegno», l'unica pagina che li usa. */
  body:not(.page-id-2) .falone-split,  body:not(.page-id-2) .falone-colgrid,
  body:not(.page-id-2) .falone-values, body:not(.page-id-2) .falone-special,
  body:not(.page-id-2) .falone-approach, body:not(.page-id-2) .falone-future,
  body:not(.page-id-2) .falone-closing,
  body:not(.page-id-2) .falone-works { --falone-indent-x: 18px; --falone-sez-pad-x: 18px; }
}

/* ============================================================
   Falone · respiro della fascia «progetto» (falone-special)
   La sezione Acquaviva risultava compressa: foto a filo del bordo
   destro, incollate fra loro, e colonna testo troppo vicina alla
   griglia. Qui si agisce solo sulle spaziature, tramite le variabili
   che il widget espone già — nessuna modifica alla struttura.
   ⚠️ Il rientro sinistro arriva dal padding-left della fascia
   (52 + 50 = 102): qui si porta il margine DESTRO allo stesso 52 del
   sorgente, così le foto non toccano più il bordo.
   ============================================================ */

body:not(.page-id-2) .falone-special {
  padding-right: var(--falone-special-pad-x, 52px);

  /* stacco fra colonna di testo e griglia fotografica */
  --falone-special-gap-min: 56px;
  --falone-special-gap-vw:  5.4vw;
  --falone-special-gap-max: 96px;

  /* aria fra le fotografie del collage */
  --falone-special-collage-gap: 18px;
}

/* ============================================================
   Falone · targhette delle certificazioni: stato base e hover
   Classe condivisa: vale ovunque compaia falone-evidence — oggi
   Ristrutturazione, Edilizia, Costruttori, Infrastrutture.
   ⚠️ Il fondo della fascia cambia da pagina a pagina (scuro su
   Ristrutturazione ed Edilizia, #f7f7f5 su Costruttori): per questo
   il rilievo di base e' un'OMBRA e non un colore di bordo, e l'hover
   usa l'accento, che funziona su entrambi i fondi.
   ⚠️ Niente carosello: le targhette restano tutte visibili, va a capo
   la riga (vedi .falone-evidence--wrap).
   ============================================================ */

body .falone-evidence__badge {
  transition:
    border-color .25s ease,
    box-shadow   .25s ease,
    transform    .25s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}

body .falone-evidence__badge:hover,
body .falone-evidence__badge:focus-visible {
  border-color: var(--falone-accent, #f7941d);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(18, 18, 18, .22);
}

/* ⚠️ Chi ha chiesto meno animazioni non deve vedere il sollevamento:
   resta il cambio di bordo, che e' il segnale utile. */
@media (prefers-reduced-motion: reduce) {
  body .falone-evidence__badge { transition: border-color .25s ease; }
  body .falone-evidence__badge:hover { transform: none; }
}

/* ============================================================
   Falone · fascia «progetto» allineata allo stile di Villa Mosca
   Villa Mosca (falone-feature) e Acquaviva (falone-special) sono
   widget DIVERSI: non si possono copiare le impostazioni, quindi qui
   si riproducono i valori misurati sul modello.
   Misurato su Villa Mosca a 1440px: testo 16px con interlinea 28,48
   (1,78), colore bianco al 68%, colonna di testo 458px, fascia alta
   650px con la fotografia a tutta altezza.
   ⚠️ Acquaviva aveva testo a 13,8px, interlinea 26,8, colonna 600px e
   soli 22px di margine verticale: da qui l'aria molto minore.
   ============================================================ */

body .falone-special {
  /* respiro verticale: 22px erano troppo pochi per una fascia progetto */
  --falone-special-pad-y: 96px;
  --falone-special-pad-y-tablet: 72px;

  /* tipografia del testo, identica a Villa Mosca */
  --falone-special-sx-size: 1rem;
  --falone-special-sx-lh: 1.78;
  --falone-special-lead-op: .68;
  --falone-special-lead-max: 470px;

  /* stacco sotto il titolo come nel modello */
  --falone-special-title-gap: 24px;

  /* fotografie piu' generose: riquadro meno schiacciato */
  --falone-special-collage-ratio: 1.9;
}

/* i passaggi numerati seguono la stessa scala del testo */
body .falone-special {
  --falone-special-step-text: #fff;
  --falone-special-step-text-op: .68;
  --falone-special-list-gap: 34px;
}

/* ============================================================
   Falone · colgrid a 4 colonne: margini per RIGA, non per estremo
   ⚠️ colgrid.css azzera il margine solo su :first-child e
   :last-child, con regole nth-child scritte per i casi a 2 e 3
   colonne — il commento nel foglio lo dice. A 4 colonne la prima
   cella della SECONDA riga conserva il margine e parte 22px piu' a
   destra: misurato x=124 contro 102.
   ============================================================ */

body .falone-colgrid--c4 .falone-colgrid__cell:nth-child(4n+1) { padding-left: 0; }
body .falone-colgrid--c4 .falone-colgrid__cell:nth-child(4n)   { padding-right: 0; }

/* ============================================================
   Falone · fascia «Supporto tecnico» di Infrastrutture in scuro
   Serve all'alternanza N-B-N-B-N-B-N. Il colgrid era stato clonato
   da quello chiaro di Edilizia.
   ⚠️ Effetto collaterale voluto: con 7 voci su 4 colonne l'ottava
   cella resta vuota, e sul chiaro si vedeva come un rettangolo
   grigio. Sul fondo scuro sparisce.
   ============================================================ */

body.page-id-101 .falone-colgrid {
  --falone-colgrid-bg: #121212;
  --falone-colgrid-title: #ffffff;
  --falone-colgrid-text: rgba(255, 255, 255, .62);
  --falone-colgrid-line: rgba(255, 255, 255, .16);
  --falone-colgrid-icon-stroke: var(--falone-accent, #f7941d);
}

/* ======================================================================
   ZOOM LENTO SULLE FOTOGRAFIE — dalla home a tutto il sito
   ======================================================================
   Richiesta dell'utente (19/08): portare fuori dalla home gli effetti che
   la home ha gia'.

   ⚠️ Le ENTRATE in viewport erano gia' ovunque: misurate, 42 scene su otto
   pagine, tutte armate e tutte in arrivo. L'unico effetto della home che
   mancava altrove e' lo zoom sulle fotografie: 11 elementi in home, 0 sulle
   pagine interne (4 su Infrastrutture, ereditati dalla griglia clonata).

   Sono gli stessi numeri della home — 1 -> 1.05 in 800ms — non un effetto
   nuovo: cosi' il sito si muove in un modo solo.

   ⚠️ Regole DISCENDENTI su <img>: Elementor pubblica
   `.elementor img { … }` con specificita' (0,1,1) e batterebbe una classe
   sola. Gia' preso in pieno tre volte su questo progetto.

   ⚠️ Solo sui contenitori che RITAGLIANO. Verificato uno per uno:
   works__card, svc__foto, gallery__item, special__slide e collage hanno
   `overflow: hidden`. Restano fuori future__gallery e method__content, che
   hanno `overflow: visible`: li' la fotografia ingrandita sborderebbe
   invece di riempire. */
.falone-works__card img,
.falone-svc__foto img,
.falone-gallery__item img,
.falone-special__slide img {
  transform: scale(var(--falone-zoom-from, 1));
  transition: transform var(--falone-zoom-dur, .8s) var(--falone-ease, ease);
}

.falone-works__card:hover img,
.falone-works__card:focus-within img,
.falone-svc__foto:hover img,
.falone-gallery__item:hover img,
.falone-gallery__item:focus-within img,
.falone-special__slide:hover img {
  transform: scale(var(--falone-zoom-to, 1.05));
}

/* Chi ha chiesto meno movimento non lo riceve: e' la stessa regola che
   vale per le entrate e per i caroselli. */
@media (prefers-reduced-motion: reduce) {
  .falone-works__card img,
  .falone-svc__foto img,
  .falone-gallery__item img,
  .falone-special__slide img {
    transition: none;
  }
  .falone-works__card:hover img,
  .falone-svc__foto:hover img,
  .falone-gallery__item:hover img,
  .falone-special__slide:hover img {
    transform: none;
  }
}

/* ======================================================================
   GLI <em> DEI TITOLI NON SONO IN CORSIVO
   ======================================================================
   Nei titoli l'<em> non serve a enfatizzare: e' la parola in accento — e
   in una parte dei dati e' proprio il segno di a-capo, eredita' del
   momento in cui `<span class="falone-accent">` non era scrivibile.
   Il colore arancione arrivava gia' da altre regole; lo STILE no, e undici
   parole su sette pagine restavano in corsivo. Trovate misurando ogni
   <em> di ogni pagina, non a occhio.

   ⚠️ Corretto prima sul remoto e poi qui: e' il caso in cui il remoto era
   avanti al locale. Le due dichiarazioni ora coincidono. */
body .falone-hero__title em,
body .falone-feature__h2 em,
body .falone-contact__panel-title em,
body .falone-page-hero__h1 em,
body .falone-split__h2 em,
body .falone-works__h2 em,
body .falone-colgrid__h2 em,
body .falone-svc__h2 em,
body .falone-value__h2 em {
  color: var(--falone-accent, #f7941d);
  /* ⚠️ Il `font-style: normal` che stava qui e' stato RIMOSSO il 31/08 su
     richiesta: nel modello ogni <em> dei titoli e' in corsivo
     (`h2 em`, `.hero-title em`, `.contact-panel h2 em`). Era lo scarto che
     rendeva «del futuro.» dritto invece che inclinato. */
}

/* ======================================================================
   LE FAQ SULLA LINEA DEL RESTO
   ======================================================================
   Il titolo «Rispondiamo alle vostre domande» era gia' a x=102 come tutti
   gli altri, ma l'elenco a fisarmonica sotto partiva da 53: la fascia ha
   52px di margine e l'accordion non riceveva il rientro di 50 che tutte
   le altre sezioni hanno. Misurato uguale su Infrastrutture,
   Ristrutturazione ed Edilizia.

   ⚠️ Il rientro va sull'ACCORDION, non sulle singole voci: le schede
   hanno un contorno, e spostando il testo invece del riquadro sarebbe
   rimasto il bordo fuori squadra. */
/* ⚠️ Due elementi, non uno: il TITOLO della fascia e l'elenco a
   fisarmonica sono widget diversi, fratelli dentro lo stesso contenitore.
   La prima volta avevo rientrato solo l'accordion e dato per buono anche
   il titolo, perche' la mia sonda aveva pescato l'h2 della sezione sopra
   invece di quello delle FAQ. Il titolo era rimasto a 52. */
.falone-faq-band > .elementor-widget-heading,
.falone-faq-band .elementor-accordion {
  margin-left: var(--falone-faq-indent, var(--falone-indent-x, 50px));
  margin-right: var(--falone-faq-indent-right, 0);
}

/* ⚠️ Qui c'era `margin-left: 0` sotto gli 820, scritto quando si credeva che
   il rientro delle sezioni fosse azzerato sotto la soglia. NON lo e': vale 24
   a 820 e 18 a 480, e il titolo delle FAQ restava l'unico a x=52 mentre tutti
   gli altri stavano a 42 (misurato su tre pagine, 31/08). */
@media (max-width: 820px) {
  .falone-faq-band > .elementor-widget-heading,
  .falone-faq-band .elementor-accordion { margin-left: var(--falone-faq-indent, 24px); }
}
@media (max-width: 480px) {
  .falone-faq-band > .elementor-widget-heading,
  .falone-faq-band .elementor-accordion { margin-left: var(--falone-faq-indent, 18px); }
}

/* ======================================================================
   LE SCHEDE RISPONDONO AL PASSAGGIO
   ======================================================================
   Richiesta dell'utente (20/08): il sito era troppo fermo. Le entrate in
   viewport c'erano gia' — 42 scene, con la cascata di 90ms fra un figlio e
   l'altro — e lo zoom sulle fotografie pure. Mancava la risposta al
   passaggio del mouse sulle schede: si muovevano le foto dentro, non le
   schede.

   Un sollevamento di 3px e un'ombra tenue: la stessa grammatica delle
   targhette delle Garanzie, che gia' lo facevano. Non e' un effetto nuovo,
   e' quello esteso a chi non ce l'aveva.

   ⚠️ Le regole stanno su `a` e su contenitori di `img`: Elementor azzera
   `box-shadow` su `.elementor a` con specificita' (0,1,1), quindi servono
   almeno due classi. Trappola gia' presa tre volte su questo progetto. */
/* ⚠️ Solo a entrata FINITA (`.falone-in`). Alcune schede portano loro
   stesse `data-falone-in`, e in quello stato hanno gia' un
   `transform: translateY(28px)` che le tiene in basso: un secondo
   transform sull'hover vincerebbe e le farebbe comparire dal posto
   sbagliato. Misurato sulla griglia della home, che risultava a +28
   invece che a -3. */
[data-falone-scene].falone-in .falone-works__card,
[data-falone-scene].falone-in .falone-services__card,
body .falone-svc__card,
[data-falone-scene].falone-in .falone-cards__card {
  transition:
    transform  var(--falone-dur-fast, .28s) var(--falone-ease, ease),
    box-shadow var(--falone-dur-fast, .28s) var(--falone-ease, ease);
}

[data-falone-scene].falone-in .falone-works__card:hover,
[data-falone-scene].falone-in .falone-works__card:focus-within,
[data-falone-scene].falone-in .falone-services__card:hover,
[data-falone-scene].falone-in .falone-services__card:focus-within,
[data-falone-scene].falone-in .falone-cards__card:hover,
/* ⚠️ Le schede dei servizi NON stanno dentro una scena: il widget
   servicecards non emette `data-falone-scene`, quindi non ha entrata e non
   ha nessun transform con cui litigare. Per loro il prefisso della scena
   non serve — e con quello escludevano sé stesse. */
body .falone-svc__card:hover {
  transform: translateY(var(--falone-scheda-lift, -3px));
  box-shadow: 0 14px 30px rgba(18, 18, 18, .12);   /* ripiego */
  box-shadow:
    0 var(--falone-scheda-ombra-y, 14px) var(--falone-scheda-ombra-b, 30px)
    color-mix(in srgb, var(--falone-black, #121212) 12%, transparent);
}

/* ⚠️ Chi ha chiesto meno movimento non riceve nemmeno questo: e' la stessa
   regola che vale per entrate, zoom e caroselli. */
@media (prefers-reduced-motion: reduce) {
  [data-falone-scene] .falone-works__card,
  [data-falone-scene] .falone-svc__card,
  [data-falone-scene] .falone-services__card,
  [data-falone-scene] .falone-cards__card { transition: none; }

  [data-falone-scene] .falone-works__card:hover,
  [data-falone-scene] .falone-svc__card:hover,
  [data-falone-scene] .falone-services__card:hover,
  [data-falone-scene] .falone-cards__card:hover { transform: none; box-shadow: none; }
}


/* ============================================================
   Falone · TUTTI GLI OCCHIELLI DELLO STESSO ARANCIONE
   Richiesta esplicita del cliente (31/08, sesto giro): «i titoletti in ogni
   sezione falli tutti di questo arancione». Annulla di proposito tutte le
   sfumature «fedeli al modello» introdotte in precedenza — l'occhiello
   attenuato #b7b7b7 (`.falone-eyebrow--muted`, `falone-services__eyebrow`,
   `falone-guarantees` di Infrastrutture...), il grigio ereditato dal modello
   su `.section-heading > p` quando include l'occhiello, e il colore legato
   all'ink delle fasce scure (Metodo, schede di Costruttori).

   ⚠️ `!important`, qui inevitabile: i fogli dei singoli widget si stampano
   TUTTI dopo questo file (`components.css` e' il primo della catena), con
   specificita' diverse fra loro — un `body .falone-eyebrow` (0,1,1) non
   basterebbe contro un `.falone-guarantees__eyebrow` con var() nel foglio
   del widget, che vince a parita' di posizione. Una regola sola, qui, vince
   su tutti senza dover toccare una dozzina di fogli diversi.
   ============================================================ */
.falone-eyebrow {
  color: var(--falone-accent, #f7941d) !important;
}

/* ============================================================
   Falone · «Il nostro impegno» in pausa (11/09)
   Richiesta del cliente: nascondere TUTTO il contenuto della pagina in
   attesa dei testi definitivi. Nascosto via CSS, non rimosso dal
   `_elementor_data` (intatto): quando arrivano i testi basta cancellare
   questo blocco, senza ricostruire nulla.
   Il posto vuoto lo prende una sola fascia segnaposto aggiunta in coda
   ai dati della pagina.
   ⚠️ NON legarlo all'ID pagina: un ID locale puo' coincidere con l'ID
   REMOTO di un'altra pagina (id incrociati, vedi CLAUDE.md/memoria).
   E' successo davvero l'11/09: 81 e' Impegno in locale ma Ristrutturazione
   sul remoto, e le due condividono anche lo stesso css_classes generico
   `falone-page-hero-root` sui contenitori — la regola per-pagina ha
   spento le prime quattro fasce di Ristrutturazione sul sito pubblico.
   Ogni contenitore da nascondere porta invece la marca dedicata
   `falone-in-pausa`, scritta nel `_elementor_data` di QUESTA pagina e di
   nessun'altra: non serve piu' alcun selettore per ID. */
.falone-in-pausa {
  display: none;
}

/* ============================================================
   Falone · «Costruttori di Valori» riportata al modello (11/09)
   Richiesta esplicita del cliente: questa pagina torna identica al
   modello, deroga alla linea unica dei titoli (§10). Solo #storia: il
   widget falone-split non ha un controllo di rientro proprio (a
   differenza di falone-evidence, che qui e' gia' al suo predefinito di
   52px). Marca dedicata sul contenitore, non l'ID pagina — stesso
   motivo del blocco sopra. */
.falone-modello-52 #storia.falone-split {
  padding-left: 52px;
}
@media (max-width: 820px) {
  .falone-modello-52 #storia.falone-split { padding-left: 18px; }
}

/* ============================================================
   Falone · «Parla con Falone» riempie lo schermo (11/09)
   Segnalato dal cliente: la pagina e' fatta di questa sola sezione (non
   una fra tante come sulla home), e con l'altezza minima di 640px
   pensata per la home restava una fascia corta con molto vuoto sopra il
   piede — «non e' completa». Qui riempie il resto della finestra sotto
   l'header, e il contenuto (pannello e modulo) si centra in verticale
   invece di restare ancorato in cima. Marca dedicata sul contenitore,
   non l'ID pagina. */
.falone-piena-altezza .falone-contact {
  min-height: calc(100svh - 70px);
}
.falone-piena-altezza .falone-contact__panel,
.falone-piena-altezza .falone-contact__form-wrap {
  align-content: center;
}
@media (max-width: 820px) {
  .falone-piena-altezza .falone-contact {
    min-height: auto;
  }
}