/* authorized_service_center — componenti di sezione. */

.section { padding: var(--space-9) 0; background: var(--paper); }
.section--surface { background: var(--surface); }
/* LA banda scura: una sola per pagina. E' il respiro, non un tema. */
.banda { background: var(--night); color: var(--on-dark); }
.banda h2, .banda h3 { color: var(--on-dark); }
.banda p { color: var(--on-dark-muted); }

/* Numero gigante come marcatore di sezione: e' il device del riferimento di categoria. */
.num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5.6rem); line-height: .8;
  color: var(--accent); margin: 0 0 var(--space-2); letter-spacing: -.03em;
}
.banda .num { color: var(--accent-on-dark); }

/* ⚠⚠ L'intro occupa TUTTA la larghezza: titolo a sinistra, sommario a destra. Impilati, titolo e
   sommario restavano entrambi nella meta' sinistra e la destra moriva — misurato: 53-65% di
   riempimento. La misura di lettura resta sul paragrafo, ma il paragrafo ora vive in una colonna che
   sta a destra invece che sotto. */
/* ⚠⚠ UNA SOLA GEOMETRIA DI COLONNE PER TUTTA LA PAGINA. L'intro stava su `minmax(16rem,1fr) 1.5fr`
   e le griglie di contenuto su `1fr 1fr`: due seconde colonne che partivano da x DIVERSE (misurate:
   638 e 742 sulla stessa sezione). L'occhio cerca UNA linea verticale, e ne trovava due a 104px di
   distanza — che è il difetto «qui non è allineato». Chi si divide in due parti usa questa griglia e
   nessun'altra, cosi' la linea e' una sola dalla testata al pie'. */
.sezione-intro,
.fila,
.contatti__griglia {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-8);
}
.sezione-intro {
  margin-bottom: var(--space-7);
  align-items: end;
}
.sezione-intro > div { margin-bottom: 0; }
.sezione-intro > p { max-width: 56ch; margin: 0; }
@media (max-width: 900px) {
  .sezione-intro { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
}

/* ⚠⚠ LA PROSA LUNGA PRENDE TUTTA L'AREA, andando a capo DA SOLA in due colonne. Un paragrafo a
   `--measure` dentro un contenitore largo lascia meta' pagina bianca — e allargare la misura
   rovinerebbe la lettura (oltre i ~75 caratteri per riga l'occhio perde il capo). Le due colonne
   risolvono entrambe: riga corta da leggere, area piena da guardare.
   Sotto i 1000px torna a una colonna, dove il problema non esiste. */
.prosa { max-width: none; }
.prosa p { max-width: none; }
@media (min-width: 1000px) {
  .prosa--due { columns: 2; column-gap: var(--space-9); }
  .prosa--due > p { break-inside: avoid; max-width: none; }
  /* ⚠ Un capoverso SOLO non puo' avere il divieto di spezzarsi: resterebbe tutto nella prima colonna
     e la seconda meta' della pagina resterebbe bianca — cioe' il difetto che le due colonne esistono
     per togliere. Misurato: 8 righe che coprivano il 47% della larghezza. */
  .prosa--spezzabile > p { break-inside: auto; }
  .prosa--due > h3,
  .prosa--due > figure { column-span: all; }
}

/* ---------------- testata ---------------- */
.hero { position: relative; background: var(--night); overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠ Il velo e' tarato sulla ZONA DI TESTO, non sull'intero riquadro: a sinistra deve essere opaco
   abbastanza da reggere il bianco, a destra si apre per lasciare vedere la fotografia. */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,18,22,.94) 0%, rgba(16,18,22,.88) 42%, rgba(16,18,22,.25) 72%, rgba(16,18,22,.05) 100%);
}
.hero__in { position: relative; padding: var(--space-10) 0; }
.hero h1 { color: var(--on-dark); max-width: 26ch; }
.hero__lead { color: var(--on-dark-muted); max-width: 56ch; margin-top: var(--space-4); }
.hero__azioni { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__fatti { display: flex; gap: var(--space-7); margin-top: var(--space-7); flex-wrap: wrap; }
.hero__fatti div { border-left: 2px solid var(--accent-on-dark); padding-left: var(--space-3); }
.hero__fatti dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero__fatti dd { margin: var(--space-1) 0 0; color: var(--on-dark); font-size: var(--text-base); }

/* ⚠⚠ Il campo pieno stava in POSIZIONE ASSOLUTA sull'angolo della testata, e con recapiti piu'
   lunghi di quelli demo copriva le voci «Zone servite» e «In sede»: misurate 259×28px di testo
   sotto la lastra rossa. Un riquadro opaco sopra del testo non e' un difetto di gusto, e' testo
   perduto. Ora vive in una riga sua accanto ai dati: stessa posizione a vista, sovrapposizione
   impossibile per costruzione. */
.hero__base {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-6) var(--space-7);
  align-items: end; margin-top: var(--space-7);
}
.hero__base .hero__fatti { margin-top: 0; }
.hero__campo {
  background: var(--brand); color: var(--on-accent);
  padding: var(--space-5) var(--space-6); max-width: 340px;
}
@media (max-width: 900px) {
  .hero__base { grid-template-columns: 1fr; }
  .hero__campo { max-width: none; }
}
.hero__campo b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); display: block; margin-bottom: var(--space-1); }
.hero__campo span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.hero--design .hero__in--design { padding: var(--space-10) 0; }
.hero__barra { display: flex; gap: var(--space-6); list-style: none; margin: var(--space-6) 0 0; padding: 0; flex-wrap: wrap; }
.hero__barra li { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-dark-muted); border-left: 2px solid var(--accent-on-dark); padding-left: var(--space-3); }
.hero__campi { display: flex; gap: var(--space-6); margin-top: var(--space-7); flex-wrap: wrap; align-items: flex-start; }
.hero__campo--pieno { position: static; max-width: 380px; }

/* ---------------- la FILA: testo e fotografia SULLA STESSA RIGA ----------------
   ⚠⚠ La regola dell'owner: dentro una pagina testi e immagini si ALTERNANO — non tutti i testi in
   alto e tutte le foto in fondo. Prima il contenuto di sezione finiva in un solo contenitore a
   colonne CSS, con le figure in coda: si leggeva tutto il testo e poi si guardavano tutte le foto,
   e la meta' destra di ogni fila di figure restava morta.
   La fila e' la stessa griglia dell'intro, quindi la fotografia parte ESATTAMENTE dove parte il
   sommario della sezione. Il lato si alterna mettendo la figura prima o dopo nel markup: nessun
   `order`, cosi' l'ordine di lettura resta quello visivo anche per chi usa uno screen reader. */
/* ⚠⚠ La fotografia tiene TUTTA l'altezza della fila. Con `align-items: center` la figura restava
   centrata e, quando il testo era piu' alto, sopra e sotto la foto si aprivano bande in cui la meta'
   destra era vuota: misurate 13 righe su 65 in una sola sezione. Una colonna che si allunga e una
   che resta ferma non sono due colonne, sono un blocco e un francobollo. Con `stretch` la foto
   accompagna il testo per tutta la sua altezza e la riga arriva sempre al bordo destro; `min-height`
   le impedisce di ridursi a una striscia quando il testo accanto e' di un capoverso solo. */
/* ⚠⚠ E l'altezza della fila la detta il TESTO, non la fotografia. Con l'immagine in flusso era lei
   a fissare la riga — larghezza di colonna per il suo rapporto naturale, misurati 411px contro i
   267px del testo accanto: 144px di rettangolo vuoto sotto il testo, cioe' di nuovo mezza area morta.
   Togliendo l'immagine dal flusso (assoluta dentro una figura relativa) la riga vale quanto il testo
   e la fotografia la riempie esattamente; il `min-height` sulla FIGURA e' il pavimento per quando il
   testo accanto e' di un capoverso solo. */
.fila { align-items: stretch; margin-top: var(--space-8); }
/* ⚠⚠ 18rem e' un PAVIMENTO, non una soglia. Con 27rem ogni fila era alta almeno 432px anche dove il
   testo ne occupava 110: la fotografia imponeva la riga e accanto restava un rettangolo bianco di
   320px. L'impatto fotografico non si compra allungando le foto in colonna oltre il testo che
   accompagnano — si prende con le fasce a TUTTA larghezza (`.fila--larga`, 21/9) e con le coppie,
   che hanno un rapporto proprio e non dipendono dalla lunghezza del testo.
   ⚠ 13rem e' tarato sul testo PIU' CORTO che resta appaiato a una fotografia (138px misurati): il
   pavimento deve stare entro ~70px da quello, altrimenti e' il pavimento stesso a fabbricare la
   spalla vuota. Tararlo piu' in alto «per far sembrare grandi le foto» era l'errore precedente. */
.fila > figure { margin: 0; position: relative; min-height: 13rem; overflow: hidden; }
.fila > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠⚠ IL TESTO PARTE IN ALTO, alla stessa riga della fotografia. Avevo provato a centrarlo per
   distribuire lo spazio quando il testo e' piu' corto della foto: il risultato e' che il testo
   «galleggia» a meta' altezza, staccato dal titolo della sezione che sta sopra e dal bordo superiore
   della foto che gli sta accanto — cioe' si legge come messo male, che e' peggio del vuoto che
   toglieva. Lo spazio in eccesso si elimina facendo coincidere le altezze (vedi sotto), non
   spostando il testo. */
.fila__testo { align-self: start; }
.fila__testo > *:first-child { margin-top: 0; }
.fila__testo > p:last-child { margin-bottom: 0; }
/* Una fila con la sola fotografia grande: la figura prende TUTTE e due le colonne. */
.fila--larga > figure { grid-column: 1 / -1; aspect-ratio: 21 / 9; min-height: 0; }
@media (max-width: 900px) {
  /* ⚠ La soglia d'impatto e' tarata sulla COLONNA di un monitor: su un telefono la stessa altezza
     minima darebbe un ritaglio verticale innaturale su una foto di negozio. */
  .fila { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
  /* ⚠⚠ NON la figura a tutta larghezza. Quella ha `aspect-ratio`, e un elemento con rapporto
     dichiarato ricava la LARGHEZZA dall'altezza: con un'altezza minima di 15rem diventava larga
     240 × 21/9 = 560px dentro uno schermo da 342, cioe' 194px di trabocco orizzontale. Il gate duro
     del punteggio l'ha visto; il mio controllo di trabocco no, perche' l'avevo eseguito prima di
     scrivere questa riga. */
  .fila:not(.fila--larga) > figure { min-height: 15rem; }
}

/* ⚠⚠ Quando sotto l'intro c'e' una griglia a TRE colonne, l'intro si incolonna su quella. Con la
   griglia comune a due il sommario cadeva a 748 mentre la tessera di mezzo partiva da 536: due linee
   verticali a 212px l'una dall'altra nella stessa sezione. La regola non e' «tutto a due colonne»,
   e' «l'intro parla la lingua di cio' che introduce». */
.sezione--settori .sezione-intro,
.sezione--contratti .sezione-intro {
  grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.sezione--settori .sezione-intro > div,
.sezione--contratti .sezione-intro > div { grid-column: 1; }
.sezione--settori .sezione-intro > p,
.sezione--contratti .sezione-intro > p { grid-column: 2 / -1; max-width: none; }
@media (max-width: 900px) {
  .sezione--settori .sezione-intro,
  .sezione--contratti .sezione-intro { grid-template-columns: 1fr; }
  .sezione--settori .sezione-intro > p,
  .sezione--contratti .sezione-intro > p { grid-column: 1; }
}

/* ---------------- settori ---------------- */
.tessere { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.tessera { background: var(--paper); border: 1px solid var(--line); }
.section--surface .tessera { background: var(--paper); }
.tessera img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tessera__c { padding: var(--space-5); }
.tessera h3 { margin-bottom: var(--space-2); }
.tessera h3::after { content: ""; display: block; width: 34px; height: 3px; background: var(--brand); margin-top: var(--space-2); }
.tessera p { font-size: var(--text-base); color: var(--ink-muted); margin: 0; }

/* ---------------- il centro autorizzato ---------------- */
/* ⚠ Anche il centro sta sulla griglia comune: con `1.1fr .9fr` la sua seconda colonna cadeva a una
   x sua, diversa da quella di ogni altra sezione della stessa pagina. */
.centro__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-8); align-items: start; }
/* Fascia marchi: l'etichetta ANCORA la fascia, cosi' i marchi di terzi si leggono come PROVA
   dell'autorizzazione e non come branding altrui sul sito del cliente. */
.marchi {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  padding: var(--space-5) var(--space-6); margin-top: var(--space-5);
}
.marchi__segni { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.section--surface .marchi { background: var(--paper); }
.marchi__et { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.5; }
/* ⚠⚠ I marchi hanno peso ottico molto diverso: un wordmark e' largo e basso, una placca e' compatta e
   piena di colore. Pareggiarli su un riquadro comune fa dominare la placca — e senza NESSUN tetto
   d'altezza la placca esce grande quanto il suo file, cioe' fuori scala. L'altezza si dichiara per
   FORMA, ed e' il motivo per cui `shape` esiste nel dato. */
.marchi img { width: auto; object-fit: contain; display: block; }
.marchi__img--wordmark { height: 30px; max-width: 190px; }
.marchi__img--badge { height: 42px; max-width: 120px; }
.marchi__sep { display: none; }   /* l'etichetta sta su una riga propria: il separatore non serve piu' */

.servizi-centro { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.servizi-centro li { background: var(--paper); padding: var(--space-4); font-size: var(--text-base); display: flex; gap: var(--space-3); align-items: baseline; }
.servizi-centro b { font-family: var(--font-mono); color: var(--accent-ink); font-size: var(--text-sm); font-weight: 500; }
/* Sette voci in due colonne lascerebbero l'ultima orfana accanto a una cella vuota. */
.servizi-centro li:last-child { grid-column: 1 / -1; }

/* ---------------- gallery ---------------- */
/* ⚠ La prima tessera vale DUE colonne e DUE righe: quattro tessere uguali da 264px non superano mai
   la soglia d'impatto, e la sezione piu' fotografica del sito non portava una sola immagine grande.
   Il mosaico e' anche cio' che le toglie l'aria di provinatura. */
.griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.griglia > figure:first-child { grid-column: span 2; grid-row: span 2; }
.griglia > figure:first-child img { aspect-ratio: auto; height: 100%; }
.griglia figure { margin: 0; }
.griglia img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--night-soft); }

/* ---------------- contratti: blocchi-dati ---------------- */
.dati { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.dato { border-top: 3px solid var(--brand); padding-top: var(--space-4); }
.dato b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); display: block; line-height: 1; }
.dato span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-top: var(--space-1); }

/* ---------------- pubblico ---------------- */
/* Le tessere del pubblico si DISTRIBUISCONO sulla larghezza invece di accalcarsi a sinistra: la
   sezione non ha una fotografia da mettere a destra, quindi a riempire e' il contenuto stesso. */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.chips li {
  border: 1px solid var(--line); border-top: 3px solid var(--brand);
  padding: var(--space-4) var(--space-4) var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em;
  background: var(--paper); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chips li:hover { transform: translateY(-3px); border-color: var(--brand); }
/* ⚠ Le zone erano una GRIGLIA a colonne automatiche sotto una griglia di tessere con un numero
   DIVERSO di colonne: sei voci sotto cinque tessere, e nessuna delle due incolonnata sull'altra.
   Due griglie sovrapposte che non combaciano si leggono come un errore di allineamento. Le zone non
   sono colonne: sono un elenco. Scorrono in riga, separate, e non promettono un incolonnamento che
   non possono mantenere. */
.zone {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4); list-style: none; margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted);
}
.zone li + li::before { content: "·"; color: var(--brand); margin-right: var(--space-4); }

/* ---------------- contatti ---------------- */
/* La geometria di `.contatti__griglia` e' quella COMUNE, dichiarata una volta sola piu' in alto:
   qui restava una seconda dichiarazione con uno scarto proprio, che vinceva per ordine e spostava la
   colonna di 6px rispetto all'intro che le sta sopra. */
.tel-grande { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--accent-ink); text-decoration: none; display: block; margin: 0 0 var(--space-4); }
.recapiti { margin: 0; font-family: var(--font-mono); font-size: var(--text-base); }
.recapiti dt { color: var(--ink-muted); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--space-4); }
.recapiti dd { margin: var(--space-1) 0 0; }
.orari { list-style: none; margin: 0; padding: 0; }
.spunte { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.spunte li { padding-left: var(--space-5); position: relative; margin-bottom: var(--space-2); font-size: var(--text-base); }
.spunte li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 3px; background: var(--brand); }
.contatti__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.contatti__foto { margin: 0 0 var(--space-4); }
.indirizzo { font-family: var(--font-mono); font-size: var(--text-base); }

/* ---------------- richiamo finale ---------------- */
/* ⚠ Anche il richiamo finale sta sulla griglia comune: con `1.2fr .8fr` il riquadro d'azione
   partiva da una x sua e la fascia si riempiva al 74%. */
.sezione--richiamo .richiamo__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-8); align-items: center; }
.richiamo__azione { background: var(--night-soft); padding: var(--space-6); }
.richiamo__azione b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); display: block; color: var(--on-dark); }
.richiamo__azione span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-dark-muted); display: block; margin: var(--space-2) 0 var(--space-5); }

/* ---------------- testata di pagina ----------------
   Il template di pagina e' minimo e NON stampa il titolo: senza questa testata una pagina di progetto
   resta senza <h1>, e la pagina «funziona» comunque — e' un difetto che solo un controllo lo vede. */
.page-head { background-color: var(--night); color: var(--on-dark); padding: var(--space-10) 0 var(--space-9); position: relative; overflow: hidden; }
/* Velatura obliqua di accento sul contenitore VERO: la banda smette di essere un rettangolo piatto. */
.page-head { background-image: linear-gradient(115deg, #101216 0%, #16181d 55%, rgba(163,4,17,.55) 100%); }
/* ⚠ La testata usa la GRIGLIA COMUNE: era su `minmax(18rem,1fr) 1.2fr`, cioe' una terza geometria
   dopo quelle dell'intro e dei contenuti, e la sua seconda colonna partiva da una x sua. */
/* ⚠⚠ Titolo a TUTTA larghezza, occhiello e sommario nella riga sopra. Con titolo a sinistra e
   sommario a destra, un titolo che andava su due righe lasciava scoperto tutto l'angolo in alto a
   destra: misurato il 48% di riempimento sulle pagine col titolo lungo, contro il 95% su quelle col
   titolo corto — cioe' il vuoto compariva o no a seconda della lunghezza della parola. Cosi' invece
   la testata si riempie sempre: due elementi corti affiancati in alto, e sotto il titolo che occupa
   la riga intera. */
/* ⚠⚠ Titolo e sommario stanno nella STESSA riga della griglia. Mettendo il sommario in riga con
   l'occhiello, la prima riga si alzava all'altezza del sommario (due righe di testo contro una
   parola) e spingeva il titolo molto piu' in basso: occhiello e sommario finivano in cima, il titolo
   staccato sotto, e la testata si leggeva come tre pezzi scollegati. Ora l'occhiello annuncia, e
   sotto titolo e sommario si affiancano — il sommario appoggiato in basso, cosi' chiude sulla stessa
   linea dell'ultima riga del titolo. */
.page-head .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-8); align-items: start; }
.page-head .eyebrow { color: var(--accent-on-dark); grid-column: 1; grid-row: 1; margin: 0; }
.page-head h1 { color: var(--on-dark); max-width: none; grid-column: 1; grid-row: 2; margin-top: 0; }
.page-head__lead { color: var(--on-dark-muted); margin: 0; max-width: 46ch; grid-column: 2; grid-row: 2; align-self: end; }
@media (max-width: 900px) {
  .page-head .container { grid-template-columns: 1fr; }
  .page-head h1 { grid-column: 1; grid-row: 2; }
  .page-head__lead { grid-column: 1; grid-row: 3; align-self: start; }
}
@media (max-width: 900px) {
  .page-head .container { grid-template-columns: 1fr; }
  .page-head__lead, .page-head h1, .page-head .eyebrow { grid-column: 1; }
}

/* ---------------- prosa (privacy e pagine di progetto) ---------------- */
.prosa h2 { font-size: var(--text-lg); text-transform: none; margin: var(--space-6) 0 var(--space-3); }
.prosa h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }
.settore__foto { margin: var(--space-6) 0 0; }
.settore__foto img { width: 100%; max-height: 460px; object-fit: cover; display: block; }

/* ---------------- modulo contatti ----------------
   ⚠ Il verticale rende un modulo: senza queste regole restano campi di sistema con l'etichetta
   incollata di fianco e un pulsante slavato. Il modulo e' una superficie del sito, non un residuo. */
.modulo { margin-top: var(--space-8); }
.modulo h2 { margin-bottom: var(--space-3); }

.contact-form { margin-top: var(--space-5); max-width: 640px; }
.contact-form p { margin: 0 0 var(--space-4); max-width: none; }
.contact-form label {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.contact-form input,
.contact-form textarea {
  display: block; width: 100%;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur) var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-ink); outline: none; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.contact-form button[type="submit"] { width: auto; min-width: 12rem; }

/* Il modulo dichiarato non attivo: l'avviso e' parte del modulo, non una nota a margine. */
.fp-form-avviso {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface); border-left: 3px solid var(--brand);
  font-size: var(--text-base); color: var(--ink-muted); max-width: 640px;
}
.fp-form-avviso a { color: var(--accent-ink); }

/* ---------------- campiture: il piatto e' la cosa che invecchia un sito ----------------
   ⚠ Il misuratore conta le campiture DISTINTE sugli elementi grandi: un gradiente su uno pseudo-
   elemento non esiste per lui, e nemmeno per l'occhio quando e' troppo tenue. Ogni fascia qui sotto
   porta una campitura sua, dentro la palette gia' verificata — nessun colore nuovo. */

/* La banda scura respira con un alone di accento, invece di essere un rettangolo pieno. */
.banda {
  background-image:
    radial-gradient(72rem 40rem at 88% -10%, rgba(230,6,23,.22), transparent 62%),
    linear-gradient(180deg, #0d0f13 0%, var(--night) 42%, #14171c 100%);
}
/* La banda chiara ha una sua luce, cosi' non e' «il grigio di prima». */
.section--surface {
  background-image: linear-gradient(168deg, var(--paper) 0%, var(--surface) 46%, var(--surface-alt) 100%);
}
/* Le tessere dei settori: un velo dal basso, che le stacca dal fondo. */
.tessera { background-image: linear-gradient(180deg, var(--paper) 62%, var(--surface) 100%); }
/* Il campo rosso della testata: pieno, ma con profondita'. */
.hero__campo { background-image: linear-gradient(135deg, #f2101f 0%, var(--brand) 48%, #b8040f 100%); }
/* Il richiamo finale. */
.richiamo__azione { background-image: linear-gradient(150deg, #1f232a 0%, var(--night-soft) 70%); }
/* La fascia dei marchi. */
.marchi { background-image: linear-gradient(100deg, var(--paper) 60%, var(--surface) 100%); }
/* Il blocco-dati dei contratti. */
.dati { background-image: linear-gradient(180deg, transparent 0%, rgba(230,6,23,.05) 100%); padding-bottom: var(--space-6); }
/* Le colonne della pagina contatti. */
.contatti__tre > div { background-image: linear-gradient(200deg, var(--paper) 70%, var(--surface-alt) 100%); padding: var(--space-6); border: 1px solid var(--line); }

/* ---------------- fotografie nelle pagine di progetto ----------------
   ⚠ Una fotografia grande NON e' un vezzo: sotto il 18% del viewport l'immagine non porta impatto,
   e una pagina di soli paragrafi legge come un documento, non come un sito. */
.settore__foto--grande { margin: var(--space-7) 0 0; }
.settore__foto--grande img { width: 100%; max-height: none; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
/* ⚠ Due colonne come tutto il resto: con uno scarto suo la seconda fotografia partiva da 728
   mentre ogni altra seconda colonna della pagina parte da 748 — 20px di sfasamento, invisibili da
   soli e molto visibili in colonna con il resto. */
.duetto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-8); }
.duetto figure { margin: 0; }
/* 5/4 invece di 4/3: a 548px di colonna sono 438px, sopra la soglia d'impatto. */
.duetto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
/* Le figure escono dalle colonne di testo e prendono tutta la riga. */
.prosa--due > figure, .prosa--due > .duetto { column-span: all; }
@media (max-width: 900px) { .duetto { grid-template-columns: 1fr; } .settore__foto--grande img { aspect-ratio: 16 / 10; } }

/* Striscia di provini: quattro al massimo, a filo, con un taglio che li tiene coerenti. */
.striscia { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.striscia figure { margin: 0; overflow: hidden; }
.striscia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform var(--dur) var(--ease); }
.striscia figure:hover img { transform: scale(1.04); }
.prosa--due > .striscia { column-span: all; }
/* La vetrina fotografica della pagina contatti ha una campitura sua. */
.sezione--vetrina { background-image: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%); padding-top: var(--space-7); }

/* ---------------- pagina contatti: tre colonne di pari peso ---------------- */
/* ⚠ `align-items: start` lasciava tre schede di ALTEZZE DIVERSE una accanto all'altra: il disallineamento
   si legge come trascuratezza. Con lo stretch i riquadri chiudono sulla stessa riga. */
.contatti__tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.contatti__tre > div { display: flex; flex-direction: column; }
/* Il numero grande dentro una colonna stretta andava a capo: qui la misura si taratura sulla COLONNA. */
.contatti__tre .tel-grande { font-size: clamp(1.4rem, 2.1vw, 1.9rem); white-space: nowrap; }
.contatti__tre .indirizzo { margin-top: auto; }
.contatti__tre figure img { aspect-ratio: 16 / 10; }
.contatti__tre .eyebrow { margin-bottom: var(--space-3); }
.orari--grande { font-family: var(--font-mono); font-size: var(--text-md); line-height: 2; }
.contatti__tre figure { margin: 0 0 var(--space-4); }
.contatti__tre figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Il modulo a tutta larghezza: campi su due colonne, messaggio e invio a piena riga.
   ⚠ Il modificatore vale DA SOLO, non solo dentro la banda scura: la stessa forma serve anche alla
   sezione contatti della home, che non e' una banda. Legarlo a `.sezione--modulo` significava che
   altrove `--largo` non faceva nulla e il modulo restava una colonna stretta. */
.contact-form--largo {
  max-width: none; display: grid; grid-template-columns: 1fr 1fr;
  /* ⚠ Lo scarto fra le colonne e' quello della griglia comune: con un valore suo i campi partivano
     da 736 mentre tutto il resto della pagina partiva da 748. */
  gap: var(--space-4) var(--space-8);
}
.contact-form--largo .contact-form__largo { grid-column: 1 / -1; }
.contact-form--largo .fp-form-avviso { grid-column: 1 / -1; max-width: none; }
.sezione--modulo .contact-form label { color: var(--on-dark-muted); }
.sezione--modulo .contact-form input,
.sezione--modulo .contact-form textarea {
  background: var(--night-soft); border-color: rgba(255,255,255,.18); color: var(--on-dark);
}
.sezione--modulo .contact-form input:focus,
.sezione--modulo .contact-form textarea:focus { border-color: var(--accent-on-dark); }
.sezione--modulo .fp-form-avviso {
  grid-column: 1 / -1; max-width: none;
  background: var(--night-soft); color: var(--on-dark-muted); border-left-color: var(--accent-on-dark);
}
.sezione--modulo .fp-form-avviso a { color: var(--accent-on-dark); }
@media (max-width: 900px) {
  .contatti__tre { grid-template-columns: 1fr; gap: var(--space-7); }
  /* ⚠⚠ Un indirizzo di posta e' UNA parola di 27 caratteri: in monospaziato a 17px misura 275px e
     non ha dove andare a capo, quindi impone la sua larghezza alla colonna della griglia, che a
     360px sfonda la pagina di 5px. `min-width: 0` toglie alla colonna il vincolo di contenere il
     figlio piu' largo; `overflow-wrap` da' alla parola il permesso di spezzarsi. Servono entrambi:
     la prima da sola sposta il trabocco dentro la colonna, la seconda da sola non basta se un'altra
     parola lunga compare domani. */
  .contatti__tre > * { min-width: 0; }
  .recapiti dd, .recapiti dd a, .indirizzo { overflow-wrap: anywhere; }
  .contact-form--largo { grid-template-columns: 1fr; }
}

/* ---------------- barra fissa mobile ---------------- */
.cta-bar { display: none; }

@media (max-width: 900px) {
  .tessere, .centro__griglia, .contatti__griglia, .dati, .sezione--richiamo .richiamo__row { grid-template-columns: 1fr; }
  .griglia { grid-template-columns: repeat(2, 1fr); }
  .servizi-centro { grid-template-columns: 1fr; }
  /* Su schermo stretto il velo non puo' essere orizzontale: il testo sta SOPRA la foto, non di fianco.
     ⚠ La prima fermata era a .72 e l'occhiello ci misurava 4,36 — sotto AA per il testo piccolo.
     Il numero e' stato alzato finche' la MISURA sul pixel non e' passata, non finche' sembrava giusto. */
  .hero__veil { background: linear-gradient(180deg, rgba(16,18,22,.88) 0%, rgba(16,18,22,.95) 55%); }
  .cta-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
  .cta-bar a { padding: var(--space-4); text-align: center; text-decoration: none; font-weight: 600; font-size: var(--text-base); }
  .cta-bar__1 { background: var(--brand); color: var(--on-accent); }
  .cta-bar__2 { background: var(--night); color: var(--on-dark); }
  body { padding-bottom: 58px; }
}


/* ---------------- i DUE pesi del mono ----------------
   Il registro tecnico e' la firma del verticale, e fino a qui chiedeva un peso solo — il 400 — che
   il tema non serviva: tutto veniva reso col 500 per ripiego, dai recapiti alle micro-etichette.
   Ora il 400 c'e', e i due pesi hanno un compito ciascuno:
     · 400 per i DATI a misura di lettura — recapiti, indirizzo, orari, elenchi;
     · 500 per le MICRO-ETICHETTE maiuscole e spaziate, che sotto 0,8rem su grigio con il 400 si
       sfilacciano.
   Sta in fondo a components.css perche' alcune di queste regole nascono in base.css: a pari
   specificita' vince l'ultima caricata, e questo foglio e' l'ultimo. */
.wordmark__tag,
.footer__dl dt,
.hero__fatti dt,
.hero__campo span,
.dato span,
.marchi__et,
.contact-form label { font-weight: 500; }