/* =========================================================
   FONT INTER OSPITATO IN LOCALE (niente chiamate a Google)
   I file .woff2 stanno nella cartella fonts/. Il browser li
   carica dal nostro sito: nessun dato del visitatore va a Google.
   ========================================================= */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
}

/* =========================================================
   FOGLIO DI STILE DI BASE — sorgente unica, vale per ogni sito nuovo

   Ripulito il 07/08/2026: 1045 righe di regole legate alle pagine del
   sito Elettrica Faber (fiere, dealer, assistenza/ticket, schede
   prodotto della ventilazione, preventivazione, timeline aziendale,
   blog e articoli, slider della home, mega-menu a tre colonne) sono
   state spostate in 3_Template/estensioni/. Nulla e' andato perso:
   ogni componente ha il suo file .css, si reinserisce copiandolo dove
   serve davvero. Da 2289 a 1244 righe.

   Qui resta solo cio' che serve a QUALUNQUE sito: variabili, reset,
   header, footer, testi, pulsanti, griglie, form, modulo contatti,
   pagine interne e le regole responsive.

   ⚠️ Restano alcune regole dentro le @media che citano classi dei
   componenti spostati (.hero-slide, .timeline, .fiera...): sono inerti
   — senza quel markup non fanno nulla — e le stesse regole sono state
   COPIATE nei file di estensione, cosi' chi reinserisce un componente
   si porta dietro anche il suo comportamento sui telefoni.

   Il CSS dice al browser COME devono apparire gli elementi HTML.
   Regola base:  selettore { proprietà: valore; }
   Esempio:      h1 { color: white; }  ->  tutti gli <h1> bianchi
   ========================================================= */

/* --- 1. VARIABILI: definiamo i colori UNA volta e li riusiamo ---
   Così cambi la palette in un punto solo. Questi sono i "3 colori che dialogano". */
:root {
  /* ══ PALETTE "GRAFITE E VERDE TECNICO" — cristianaccini.it ═══════════
     Grafite quasi nero + verde tecnico freddo + grigio carta.
     Registro sobrio e corporate: nessuna tinta calda, nessun effetto.
     Scelta OBBLIGATA dalla differenziazione: template (blu+ambra),
     demo idraulico (antracite+ruggine) e demo geometra (blu+ottone)
     sono tutte e tre "scuro freddo + accento caldo". Questo sito sta
     accanto alle demo sulla stessa pagina: se fosse il quarto della
     stessa famiglia, dimostrerebbe l'accusa da cui deve difendersi.
     ⚠️ TUTTI i rapporti qui sotto sono CALCOLATI, non scelti a occhio.
     Chi cambia palette li RICALCOLA: non se ne eredita nemmeno uno.   */
  --primario:            #191C21;  /* grafite — testate, footer, fasce scure */
  --accento:             #0F766E;  /* verde tecnico — pulsanti, evidenza */

  /* ---- Varianti del primario ---- */
  --primario-scuro:      #101317;  /* fondo del footer — bianco sopra: 18,62:1 */
  --primario-tendina:    #262C33;  /* bianco sopra: 14,09:1 */
  --primario-sfumatura:  #2F363E;  /* bianco sopra: 12,22:1 */

  /* ---- Varianti dell'accento --------------------------------------------
     Proprieta' rara e comoda di questo verde, che l'ambra del template non
     aveva: lo STESSO valore regge in tutte e due le direzioni.
       bianco SU verde .............. 5,47:1  -> ok come sfondo di pulsante
       verde SU bianco .............. 5,47:1  -> ok anche come TESTO
       verde SU grigio carta ........ 5,05:1  -> ok, di misura
       verde SU grafite ............. 1,63:1  -> ILLEGGIBILE: sulle fasce
                                                 scure serve la variante chiara */
  --accento-testo:       #0F766E;  /* l'accento pieno regge gia' come testo: 5,47:1 su bianco */
  --accento-testo-scuro: #0B5B55;  /* dove serve piu' stacco: 7,33:1 su grigio carta, 6,99:1 su verde tenue */
  --accento-su-scuro:    #2CC3B0;  /* accento sulle FASCE SCURE: 7,76:1 sul grafite */
  --accento-chiaro:      #E6F3F1;  /* fondo tenue per cerchi e icone */

  /* Colore del TESTO quando il fondo e' --accento pieno.
     ⛔ NON si eredita dal template: li' era var(--primario) perche' l'ambra
     e' chiara. Qui il verde e' scuro e il rapporto si ribalta.
       bianco su verde .... 5,47:1  -> questo
       grafite su verde ... 3,12:1  -> SOTTO SOGLIA, sarebbe stato un difetto
                                       ereditato in silenzio.               */
  --testo-su-accento:    var(--bianco);   /* #FFFFFF su #0F766E = 5,47:1 */

  /* ---- Neutri ---- */
  --bianco:              #FFFFFF;
  --nero:                #000000;
  --fondo-chiaro:        #F4F6F6;  /* grigio carta: fondo delle sezioni alternate */
  --fondo-neutro:        #E6EAEA;  /* riquadri immagine in attesa della foto */

  /* ---- Testo ---- */
  --testo:                    #14171A;  /* 17,99:1 su bianco, 16,59:1 su grigio carta */
  --testo-tenue:              #575D62;  /* 6,67:1 su bianco, 6,15:1 su grigio carta */
  --testo-tenue-chiaro:       #8B949B;  /* su fondo scuro: 5,54:1 sul grafite */
  --testo-su-scuro:           #C7CDD2;  /* 10,65:1 sul grafite */
  --testo-su-primario-scuro:  #AEB6BC;  /* 9,06:1 sul footer */

  /* ---- Bordi (separatori, non testo: nessuna soglia di contrasto) ---- */
  --bordo:               #E3E7E7;
  --bordo-campo:         #C6CCCC;  /* un campo deve vedersi che e' un campo */
  --bordo-tratteggio:    #D5DADA;

  /* ---- Stato di errore / emergenza (invariato: il rosso regge su ogni palette) ---- */
  --errore:              #C0392B;
  --errore-fondo:        #FDECEC;
  --errore-bordo:        #F3B7B7;
  --errore-titolo:       #8E2A20;
  --errore-testo:        #7A3B34;
  --errore-scuro:        #A93226;  /* stato :hover */

  /* ---- SCALA TIPOGRAFICA (aggiunta il 07/08/2026) -----------------------
     Prima di oggi il foglio conteneva 22 dimensioni di carattere diverse,
     scelte una alla volta man mano che servivano. Non e' una scala: e' un
     elenco. Il risultato si vede — due titoli dello stesso livello in due
     pagine diverse non hanno la stessa grandezza.

     Qui c'e' una scala sola, con un rapporto costante di circa 1,25.
     clamp(minimo, fluido, massimo) fa scalare il titolo con la larghezza
     della finestra: sul telefono si rimpicciolisce da solo, senza una
     media query per ogni titolo. */
  --testo-xs:   13px;
  --testo-sm:   15px;
  --testo-base: 17px;
  --testo-lg:   19px;
  --testo-xl:   clamp(20px, 1.4vw + 16px, 24px);
  --testo-2xl:  clamp(23px, 2.2vw + 16px, 30px);
  --testo-3xl:  clamp(27px, 3.4vw + 16px, 38px);
  --testo-4xl:  clamp(31px, 5vw + 15px, 48px);

  /* ---- RITMO VERTICALE ---------------------------------------------------
     Scala di spaziatura a passi di 4px. Serve a non avere piu' margini da
     18, 22 e 26px scelti a occhio: si prende il gradino piu' vicino.
     Densita' "standard": va bene per un sito di contenuto, non per un
     cruscotto pieno di dati. */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 24px;
  --spazio-6: 32px;
  --spazio-7: 48px;
  --spazio-8: 64px;
  --spazio-9: 96px;

  /* ---- Angoli e movimento ---- */
  --raggio-sm: 6px;
  --raggio:    10px;
  --raggio-lg: 16px;
  --durata:    200ms;   /* fra 150 e 300ms: sotto si perde, sopra si aspetta */
  --curva:     cubic-bezier(0.4, 0, 0.2, 1);

  /* Spessore e colore del contorno di messa a fuoco da tastiera. */
  --fuoco:        var(--accento-testo);
  --fuoco-scarto: 3px;
}

/* --- 2. RESET: azzeriamo i margini di default del browser ---
   Il * seleziona TUTTI gli elementi. box-sizing rende le misure prevedibili. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Immagini di CONTENUTO: mai piu' larghe del loro contenitore.
   ⚠️ Aggiunto l'08/08/2026 dopo un difetto vero. Il foglio aveva regole per
   .logo img, .figura-lato img e .gallery-foto img, ma NESSUNA regola generale:
   una <img> messa in una pagina fuori da quei tre componenti usciva alla sua
   larghezza naturale. Con una schermata da 1280px la pagina diventava larga
   1331px su un telefono da 390 — straripamento orizzontale su tutto il sito.
   Trovato da audit_grafico.js sulla pagina "lavori" del sito di Cristian, non
   rileggendo il codice: nessuno se ne accorge finche' non si mette una foto.
   height:auto serve a non deformarla quando l'HTML dichiara width e height.
   ⛔ Volutamente NON estesa a svg: le icone inline dichiarano width/height
   e non sono mai state un problema. Allargare la regola a tag che oggi
   funzionano e' il modo di rompere qualcosa senza motivo. */
img, video {
  max-width: 100%;
  height: auto;
}

body {
  font-family: 'Inter', sans-serif;
  /* 17px invece dei 16 di default del browser: alza di un gradino TUTTO
     ciò che non ha una misura propria (schede, tessere, footer, date).
     Ingrandire il sito una regola alla volta avrebbe lasciato indietro
     proprio i pezzi che nessuno guarda. */
  font-size: var(--testo-base);
  color: var(--testo);
  line-height: 1.6;
  background: var(--bianco);
  /* Su iOS Safari il testo viene ingrandito in orizzontale senza chiederlo. */
  -webkit-text-size-adjust: 100%;
}

/* --- 2b. TIPOGRAFIA DI BASE (aggiunta il 07/08/2026) --------------------
   Prima non esisteva: un <h1> senza classe usava il default del browser,
   32px Times-like, e ogni pagina nuova doveva inventarsi le misure.
   Adesso una pagina scritta senza nemmeno una classe esce gia' giusta.

   Le regole con una classe (.page-header h1, .colonna-larga p...) hanno
   specificita' maggiore e continuano a vincere su queste: nulla di
   esistente cambia. Queste valgono per il resto. */
main h1, main h2, main h3, main h4 {
  line-height: 1.2;
  text-wrap: balance;   /* evita il titolo con una parola sola sull'ultima riga */
}
main h1 { font-size: var(--testo-4xl); margin-bottom: var(--spazio-5); letter-spacing: -0.02em; }
main h2 { font-size: var(--testo-3xl); margin-top: var(--spazio-8); margin-bottom: var(--spazio-4); letter-spacing: -0.01em; }
main h3 { font-size: var(--testo-xl);  margin-top: var(--spazio-6); margin-bottom: var(--spazio-3); }
main h4 { font-size: var(--testo-lg);  margin-top: var(--spazio-5); margin-bottom: var(--spazio-2); }
main h1:first-child, main h2:first-child, main h3:first-child { margin-top: 0; }

/* ── LA MISURA DI LETTURA STA IN UN POSTO SOLO ─────────────────────────────
   Corretto l'08/08/2026 (5a sessione), segnalato da Cristian: "testo non
   centrato". Misurato: dentro .colonna-larga la colonna e' larga 852px ma i
   paragrafi si fermavano a 748px (68ch) incollati a sinistra, mentre i titoli
   arrivavano a 852 e la riga di pulsanti .azioni-centro si centrava su 852.
   Tre bordi destri diversi nella stessa scatola, e l'asse dei pulsanti 52px
   piu' a destra di quello del testo. Su grazie.html lo scarto era di 222px.

   Causa radice: la STESSA di .page-header p corretto ieri — un max-width
   messo sull'elemento invece che sulla colonna. Ieri l'ho tappata in un
   punto solo. Qui la misura diventa UNA variabile, e la colonna di lettura
   la eredita: chi la cambia non puo' piu' scollegare le due cose.

   Perche' px e non piu' 68ch: "ch" dipende dal corpo del singolo elemento,
   quindi due paragrafi con font diverso avevano larghezze diverse
   (.nota-obbligatori a 14px veniva 612px, 136px piu' stretto degli altri).
   748px e' quanto misuravano 68ch sul corpo del testo: la riga NON cambia. */
:root { --misura-lettura: 748px; }

main p  { margin-bottom: var(--spazio-4); max-width: var(--misura-lettura); }
main li { margin-bottom: var(--spazio-2); }
main ul, main ol { margin-bottom: var(--spazio-4); padding-left: var(--spazio-5); }
main small { font-size: var(--testo-sm); color: var(--testo-tenue); }

/* Un <h2> che apre una <section> ha margin-top:0 (regola :first-child), ma
   se la section arriva subito dopo l'<h1> i due titoli si toccano.
   Trovato guardando la pagina contatti. */
main h1 + section > h2:first-child,
main h1 + div > section:first-child > h2:first-child { margin-top: var(--spazio-6); }

/* --- 2c. MESSA A FUOCO DA TASTIERA --------------------------------------
   Chi naviga col tabulatore deve VEDERE dove si trova. Prima esisteva solo
   sui campi del modulo: sui link e sui pulsanti no.

   :focus-visible (non :focus) = il contorno compare per la tastiera ma non
   al clic del mouse, che e' il motivo per cui tanti lo tolgono del tutto.
   ⚠️ Non si rimuove mai l'outline senza rimpiazzarlo: e' la prima riga
   della checklist di accessibilita'. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: var(--fuoco-scarto);
  border-radius: var(--raggio-sm);
}
/* Sulle fasce scure il contorno ambra scuro sparirebbe: qui si usa il bianco. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.cta a:focus-visible {
  outline-color: var(--bianco);
}

/* --- 2d. CHI HA CHIESTO MENO MOVIMENTO ----------------------------------
   Impostazione di sistema (Windows: "Mostra animazioni"; iOS/macOS:
   "Riduci movimento"). Chi soffre di vertigini o emicrania vestibolare la
   attiva per un motivo medico. Va rispettata: e' una preferenza dichiarata
   dall'utente, non un gusto.
   Non azzero del tutto la durata — 0,01ms invece di 0 — perche' alcuni
   script aspettano l'evento di fine transizione, che con 0 non arriva. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
}

/* --- 2e. LINK DENTRO IL CONTENUTO (aggiunta il 07/08/2026) --------------
   ⚠️ Mancava, e si vedeva su ogni pagina: telefono, email, "informativa
   privacy" e ogni altro link dentro <main> uscivano col BLU DI DEFAULT del
   browser (#0000EE). Contrasto a norma su fondo bianco — ecco perche'
   l'audit non diceva niente — ma fuori tema su un sito con una sua palette.
   Trovato da Cristian aprendo le pagine, dopo che io ne avevo guardata una.

   Regola limitata a <main>: header e footer hanno gia' i loro colori. */
main a {
  color: var(--accento-testo);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--durata) var(--curva);
}
main a:hover { color: var(--accento-testo-scuro); text-decoration-thickness: 2px; }
/* I pulsanti sono link travestiti: non devono prendere ne' colore ne' riga. */
main a.btn { text-decoration: none; }
main a.btn-primary { color: var(--bianco); }
main a.btn-ghost { color: var(--bianco); }
main a.btn-outline { color: var(--primario); }

/* --- 2f. PAGINA CONTATTI: due colonne su schermo largo -------------------
   Prima recapiti e modulo stavano incolonnati a sinistra e la meta' destra
   della pagina restava vuota. Su un sito di un artigiano la pagina contatti
   e' quella che converte: merita di stare in ordine. */
.contatti-griglia {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--spazio-8);
  align-items: start;
}
@media (max-width: 860px) {
  .contatti-griglia { grid-template-columns: 1fr; gap: var(--spazio-6); }
}

/* Una sezione che contiene solo il titolo di pagina somma i suoi 96px di
   padding ai 96 della sezione successiva: 192px di vuoto. Trovato guardando
   la pagina servizi. */
/* ⚠️ .sezione.sezione-intro, non .sezione-intro: due classi, non una.
   Fino all'08/08/2026 qui c'era `.sezione-intro { padding-bottom: 0 }` e non
   faceva NIENTE. La regola `.sezione { padding: var(--spazio-9) 0 }` sta piu'
   in basso nel foglio, ha la stessa specificita' (una classe), e a parita' di
   specificita' vince l'ultima scritta. La correzione dei "192px di vuoto" era
   stata scritta e mai applicata, su ogni pagina di intro di ogni sito.
   Nessun audit poteva prenderlo: non e' un errore, non e' una soglia, non e'
   un marcatore mancante. Si e' visto guardando una schermata. */
.sezione.sezione-intro { padding-bottom: 0; }

/* ⚠️ Rete di protezione (08/08/2026, 2ª correzione su questa regola).
   .sezione-intro esiste per NON sommare due padding quando una sezione di
   apertura ne precede un'altra. Se pero' e' l'ULTIMA cosa dentro <main>,
   azzerare il padding sotto incolla il contenuto al footer: successo su
   "Chi sono", dove i due pulsanti finivano attaccati alla fascia scura.
   Segnalato da Cristian guardando la pagina; confermato misurando
   padding-bottom (0px) prima di toccare qualsiasi cosa.
   Cosi' la classe non puo' piu' fare danni se usata sull'ultima sezione. */
main > .sezione.sezione-intro:last-child { padding-bottom: var(--spazio-9); }

/* --- 3. CONTAINER: tiene i contenuti centrati e non troppo larghi ---
   max-width evita righe lunghissime; margin auto centra; padding stacca dai bordi. */
.container {
  /* 1240 invece di 1080: su uno schermo grande il sito lasciava due
     fasce bianche larghe ai lati. La colonna di LETTURA resta stretta
     (vedi .colonna-larga): è il contenitore a crescere, non le righe di testo. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  background: var(--primario);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  /* 07/08/2026: era `center`, cioe' logo e menu incollati al centro con
     due fasce vuote ai lati. Era una scelta copiata dal sito Faber, non un
     principio: il commento originale diceva proprio "come sul sito Faber".
     E' l'ultima eredita' rimasta nell'impianto, e si vedeva solo guardando
     una schermata — nessun audit segnala un logo fuori posto.
     Logo a sinistra e menu a destra e' quello che si aspetta chiunque apra
     un sito: la convenzione qui vale piu' dell'originalita'. */
  justify-content: space-between;
  /* ⚠️ .header-inner NON e' dentro un .container — Base.astro lo mette
     direttamente dentro <header>. Finche' il contenuto era centrato non si
     notava; con logo a sinistra e menu a destra il difetto e' saltato fuori
     subito: entrambi appiccicati ai bordi dello schermo, senza un margine.
     Qui si ripetono le stesse misure del .container invece di cambiare il
     markup, cosi' nessun sito gia' consegnato cambia struttura. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  /* clamp e non un valore fisso: appena sopra la soglia dei 1000px il
     blocco logo+menu è largo quasi quanto lo schermo, e 56px fissi lo
     farebbero sbordare. Fra 24 e 56, in proporzione alla finestra. */
  gap: clamp(24px, 4vw, 56px);
  height: 70px;
}
/* Il logo ora è l'immagine vera (bianca su trasparente), non più il
   nome scritto a mano. Le regole di testo restano per sicurezza: se
   l'immagine non caricasse, il testo alternativo si vede lo stesso e
   con l'aspetto giusto. */
.logo {
  color: var(--bianco);
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 20px;
  display: flex;                  /* toglie i 4px di spazio sotto l'immagine */
  align-items: center;
  /* 44px e' il minimo per un bersaglio tattile: sotto, il dito sbaglia.
     Era 52x32 — trovato dall'audit grafico il 07/08/2026. L'altezza cresce
     con il padding, non con il carattere: il logo resta della sua misura. */
  min-height: 44px;
}
/* height fissa e width auto: il file è 568x81, qui si vede alto 30px.
   Gli attributi width/height nell'HTML servono al browser per riservare
   lo spazio prima di scaricare l'immagine, così la barra non "salta". */
.logo img { height: 30px; width: auto; display: block; }
/* ⚠️⚠️ TROVATO GUARDANDO UNO SCREENSHOT IL 07/08/2026 — difetto grosso,
   presente da quando esiste il layout Astro e mai notato.

   Il CSS qui sotto era stato scritto per il vecchio markup a mano, dove i
   link stavano DIRETTAMENTE dentro <nav>. Base.astro invece genera
   <nav class="main-nav"><ul><li><a>. Non esisteva nessuna regola per
   `.main-nav ul`: risultato, il menu usciva come un ELENCO PUNTATO
   VERTICALE, coi pallini, sopra il logo. Su tutte le pagine di ogni sito.

   E `.main-nav > a[aria-current]` non colpiva piu' niente, perche' i link
   non sono piu' figli diretti: la voce della pagina corrente non veniva
   evidenziata.

   Perche' nessuno se n'era accorto: l'audit strutturale guarda i marcatori
   e i link, non l'aspetto; l'audit grafico guarda contrasti e bersagli, e
   un menu verticale non sfora nessuna soglia; il confronto di snapshot
   dimostra che NULLA E' CAMBIATO, non che sia giusto — se il difetto c'era
   gia' prima, resta identico e passa.
   ⚠️ Terzo tipo di verifica, da qui in poi obbligatorio: GUARDARE una
   schermata. Ci sono difetti che non si trovano in nessun altro modo. */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.main-nav li { margin: 0; }
.main-nav a {
  color: var(--bianco);
  text-decoration: none;
  margin-left: 18px;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity var(--durata) var(--curva);
  /* bersaglio tattile comodo anche quando il testo e' corto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44 e' il minimo del BERSAGLIO, non del testo: "Home" e' largo 40px,
     e senza questo padding restava sotto soglia. Trovato dall'audit grafico
     subito dopo aver messo a posto l'altezza — una meta' della regola non
     basta. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--spazio-2);
}
.main-nav a:hover { opacity: 1; }
/* La voce di primo livello della pagina in cui ci si trova.
   Il ">" limita la regola ai figli diretti del menu: senza, prenderebbe
   anche i link dentro la tendina, che hanno un'evidenziazione propria
   (barretta ambra a sinistra) più in basso nel file.
   Prima qui c'era .active, mentre la tendina usava .qui: due nomi per la
   stessa idea, e l'attributo aria-current stava solo sul secondo. Ora
   comandano entrambe lo stesso attributo, così quello che si vede e
   quello che viene annunciato non possono più andare per conto proprio. */
/* Non piu' `>`: con la struttura <ul><li><a> i link non sono figli diretti
   del menu. Le voci delle tendine hanno la loro evidenziazione e stanno in
   3_Template/estensioni/menu-a-tendina.css, quindi qui non serve limitare. */
/* Stesso motivo del footer: l'accento pieno sulla barra scura puo' essere
   illeggibile. La ruggine su antracite fa 2,57:1 — trovato dall'audit appena
   il selettore ha ricominciato a colpire qualcosa. Un difetto che si nasconde
   dietro un altro difetto: finche' la regola non si applicava a niente, il
   colore sbagliato non si vedeva. */
.main-nav a[aria-current] { color: var(--accento-su-scuro, var(--accento)); opacity: 1; }

/* ⚠️ Anche questo mancava del tutto, e si vedeva: "Salta al contenuto"
   compariva come un link BLU in cima a ogni pagina di ogni sito.
   Deve stare fuori dallo schermo e comparire SOLO quando ci si arriva col
   tabulatore — e' il primo comando che incontra chi naviga da tastiera.
   Non si nasconde con display:none: cosi' sparirebbe anche per loro. */
.salta-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bianco);
  color: var(--primario);
  padding: var(--spazio-3) var(--spazio-5);
  border-radius: 0 0 var(--raggio) 0;
  font-weight: 700;
  text-decoration: none;
}
.salta-contenuto:focus {
  left: 0;
  outline: 3px solid var(--accento-testo);
  outline-offset: -3px;
}

/* PULSANTE HAMBURGER: su desktop è NASCOSTO (display:none) e compare solo
   nella media query in fondo al file. È un <button> vero, non un <div>:
   così funziona con la tastiera e i lettori di schermo lo annunciano. */
/* ⚠️⚠️ TERZO difetto della stessa famiglia, trovato il 07/08/2026 provando
   il menu su un telefono finto — non guardandolo, PREMENDOLO.

   Queste regole erano scritte per un pulsante con dentro un CARATTERE
   (font-size: 22px, tipo "☰"). Base.astro invece genera tre <span> vuoti, e
   per gli span non c'era nessuna regola: erano 0x0 e trasparenti.
   Risultato: il pulsante del menu era INVISIBILE su ogni telefono. Funzionava
   — il clic apriva il menu, aria-expanded cambiava — ma non si vedeva cosa
   premere. Un pulsante che funziona e non si vede e' un pulsante rotto.

   Era anche 26x14px, contro i 44x44 minimi. Non l'aveva visto nemmeno
   l'audit grafico perche' misurava i bersagli solo a 1280px, dove questo
   pulsante e' display:none. Corretto anche l'audit. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--raggio-sm);
  cursor: pointer;
  /* bersaglio pieno: e' il comando piu' premuto di tutto il sito da telefono */
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex: none;
}
/* Le tre barrette. currentColor le lega al colore del pulsante, cosi'
   :hover e :focus le cambiano insieme senza ripetere il colore. */
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--durata) var(--curva), opacity var(--durata) var(--curva);
}
.nav-toggle { color: var(--bianco); }
.nav-toggle:hover { border-color: var(--accento-su-scuro, var(--accento)); color: var(--accento-su-scuro, var(--accento)); }

/* Aperto: le tre barrette diventano una X. La barra di mezzo sparisce, le
   altre due ruotano. aria-expanded e' gia' gestito da script.js. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =========================================================
   TESTI DELL'APERTURA
   Queste classi nascono per l'apertura della homepage ma sono
   riusate anche dalle intestazioni delle pagine interne
   (.page-header), per questo stanno qui e non nel blocco slider.
   ========================================================= */
.hero-kicker {
  color: var(--accento);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 16px;
}
.hero-sub {
  font-size: 21px;
  color: var(--testo-su-scuro);
  max-width: 700px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- PULSANTI: due livelli di importanza (gerarchia!) --- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  transition: transform 0.15s, background 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accento); color: var(--primario); }  /* azione principale: spicca */
.btn-ghost {
  background: transparent;
  color: var(--bianco);
  border: 2px solid rgba(255,255,255,0.4);   /* azione secondaria: più discreta */
}
/* Variante per sfondi CHIARI: .btn-ghost ha il bordo bianco, che su fondo
   chiaro sparisce. La usa grazie.astro ("Torna alla home").
   ⚠️ Riportata qui il 07/08/2026: stava nel blocco del pannello "messaggio
   pronto" ed era finita fra le estensioni dismesse. La pagina grazie.html ha
   perso lo stile del pulsante finche' non e' stata rimessa — trovato dal
   confronto degli snapshot, non a occhio. Le varianti di un componente vanno
   accanto al componente, non nel blocco che per primo le ha usate. */
.btn-outline {
  background: transparent;
  color: var(--primario);
  border: 2px solid var(--bordo-campo);
  cursor: pointer;
  font-family: inherit;
}
.btn-outline:hover { border-color: var(--accento); }

.section-title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 44px;
}

/* Frase di chiusura sotto una griglia: centrata, larghezza limitata per leggibilità */
.section-note {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--testo-tenue);
  font-size: 19px;
}
/* GRID: dispone le schede in colonne che si adattano DA SOLE.
   auto-fit + minmax = "fai colonne larghe almeno 260px, poi riempi lo spazio".
   Il browser calcola quante ce ne stanno: 3 su desktop, 2 su tablet, 1 sul
   telefono. Nessuna media query necessaria per questa griglia. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.card {
  background: var(--bianco);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(20,33,61,0.06);
  border-top: 4px solid transparent;
}
/* Le schede della pagina Servizi sono LINK a tutta scheda: un bersaglio
   grande si prende meglio col dito di una parola sola. Il colore del
   testo va riportato a mano, altrimenti il browser colora tutto di blu
   e sottolinea. */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.card:hover,
a.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 33, 61, 0.13);
  border-top-color: var(--accento);
  outline: none;
}
/* La freccina dice che la scheda porta da qualche parte: senza, sembra
   un riquadro di testo come tanti e nessuno prova a cliccarlo. */
.card-vai {
  display: inline-block;
  margin-top: 14px;
  color: var(--accento-testo);   /* era --accento: 2,02:1 su bianco */
  font-weight: 600;
  font-size: 15px;
}

.card-icon { font-size: 40px; margin-bottom: 14px; }

/* =========================================================
   ICONE DISEGNATE (02/08/2026)

   Prima qui c'erano delle emoji (⚡ 🏠 🐄 …). Il problema delle emoji
   è che non le disegna il sito: le disegna il sistema operativo di chi
   guarda. La stessa pagina esce colorata e tondeggiante su Windows,
   diversa su Mac, diversa ancora su Android — e in mezzo a un sito
   sobrio si notano come corpi estranei.

   Adesso sono disegni SVG scritti dentro la pagina: identici ovunque,
   a un solo colore, e siccome usano "currentColor" prendono il colore
   del testo del contenitore, senza dover ripetere i colori qui.
   ========================================================= */
.card-icon svg  { width: 40px; height: 40px; color: var(--accento); }
.tile-icon svg  { width: 30px; height: 30px; color: var(--primario); }
.contact-icon svg { width: 24px; height: 24px; }   /* eredita l'ambra del cerchio */
/* h2 e h3 insieme, di proposito. In servizi.html le nove schede stanno
   direttamente sotto l'h1 senza una sezione che le introduca, quindi sono
   h2: un h3 lì dentro salterebbe un livello. Nelle otto pagine di servizio
   le stesse schede stanno invece sotto un h2 e restano h3. Il tag cambia
   con la posizione nella pagina, l'aspetto no. */
.card h3, .card h2 { font-size: 23px; margin-bottom: 6px; }
.card p { color: var(--testo-tenue); }
/* Sottotitolo del servizio: sta tra il titolo e la descrizione.
   Ambra e piccolo, così si distingue dal testo lungo senza gridare. */
/* Due classi insieme (.card + .card-sub) = specificità più alta di ".card p",
   quindi vince senza bisogno di !important. */
.card p.card-sub {
  color: var(--accento-testo);   /* era --accento: 2,02:1 su bianco */
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}
/* NON USATA (1/08/2026). Serviva a evidenziare la scheda "zootecnico"
   come specialità dell'azienda, ma il filetto ambra in cima faceva
   sembrare quella scheda SELEZIONATA, e adesso che le schede sono
   link lo stesso filetto compare al passaggio del mouse: due cose
   diverse che si vedevano uguali. La regola resta qui, spenta, per
   ricordare perché è stata tolta. */
/* .card-highlight { border-top-color: var(--accento); } */

/* =========================================================
   CTA / CONTATTI
   ========================================================= */
.cta { background: var(--primario); color: var(--bianco); padding: 64px 0; }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta h2 { font-size: 32px; margin-bottom: 8px; }
.cta p { color: var(--testo-su-scuro); }
.cta-contacts { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--primario-scuro); color: var(--testo-su-primario-scuro); padding: 48px 0 28px; font-size: 15px; }
/* Stesso problema e stessa soluzione dell'header: nessun .container attorno. */
.footer-inner { display: flex; gap: 56px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.footer-col p { margin-bottom: 4px; }
/* Nel footer il logo è la stessa immagine bianca: il fondo è #0E1729,
   quindi si legge. Un po' più piccolo che nella barra, perché lì è
   l'insegna del sito mentre qui è la firma in calce. */
.footer-logo { height: 26px; width: auto; display: block; margin-bottom: 14px; }
.footer-head { color: var(--bianco); font-weight: 700; margin-bottom: 8px; }
.footer-col a { color: var(--accento); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }

/* ⚠️ TROVATO DALL'AUDIT GRAFICO IL 07/08/2026, su tutte e 5 le pagine.
   Esisteva solo `.footer-col a`, ma il layout Astro NON usa .footer-col:
   mette i link dentro <p class="footer-copy">. Risultato: il link
   "Privacy e cookie" usciva col BLU DI DEFAULT del browser (#0000EE) sul
   fondo scuro del footer — contrasto 1,90:1 contro i 4,5 richiesti,
   praticamente invisibile. Ed e' il link che per legge deve esserci.
   Causa di fondo: il CSS era stato scritto per il vecchio markup a mano e
   nessuno ha ricontrollato dopo il passaggio ad Astro. Una classe che il
   markup non usa piu' non protegge niente.
   Ora la regola parte dal contenitore, non dalla colonna: qualunque link
   dentro il footer e' coperto, comunque sia strutturato. */
/* --accento-su-scuro esiste perche' un accento non e' detto che si legga sul
   proprio fondo scuro: dipende dalla tinta. L'ambra #FCA311 sul blu notte va
   bene (8,5:1), ma una ruggine #B4552D sull'antracite da' 2,57:1 ed e'
   illeggibile. Chi cambia palette DEVE ricalcolare questo valore, non
   ereditarlo. Se non e' definito, si usa --accento: il fallback tiene in piedi
   i siti che non l'hanno impostato. */
.site-footer a { color: var(--accento-su-scuro, var(--accento)); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--bianco); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 32px; padding-top: 18px; }
/* era #6B7382 sul fondo scuro del footer: 3,75:1, sotto soglia, su tutte e 27 le pagine */
.footer-copy { font-size: 13px; color: var(--testo-tenue-chiaro); }

/* =========================================================
   PAGINE INTERNE (Azienda, Servizi, Contatti)
   Queste classi vivono nello STESSO file: ogni pagina .html
   le richiama e le riusa. Un solo stile per tutto il sito.
   ========================================================= */

/* Intestazione compatta delle pagine interne (un mini-hero) */
.page-header {
  background: var(--primario);
  color: var(--bianco);
  padding: 64px 0;
  text-align: center;
}
.page-header h1 { font-size: 44px; margin-bottom: 10px; }
/* ⚠️ margin auto (corretto l'08/08/2026, segnalato da Cristian).
   .page-header ha text-align:center, ma il <p> eredita una max-width di
   lettura (884px) SENZA margini automatici: il blocco restava incollato a
   sinistra e il testo veniva centrato DENTRO un blocco non centrato.
   Misurato: contenitore centrato a 640px, paragrafo centrato a 486 — 154px
   piu' a sinistra, su ogni intestazione di pagina di ogni sito.
   La stessa correzione esisteva gia' a due righe di distanza, su .prose, con
   tanto di commento che la spiega: c'era, ma solo li'.
   (.prose e' stata tolta il 17/08/2026: non la usava nessuna pagina. Il caso
   resta scritto qui perche' e' il motivo per cui QUESTA regola esiste.) */
.page-header p {
  color: var(--testo-su-scuro);
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Riga di pulsanti a chiusura di una sezione di testo ---
   Nasce da una segnalazione di Cristian: i due pulsanti in fondo a "Chi sono"
   erano a 16px dal testo (sembravano parte del paragrafo) e allineati a
   sinistra. Qui distanza e centratura sono decise una volta sola. */
.azioni-centro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-4);
  justify-content: center;
  margin-top: var(--spazio-7);
}

/* Sezione generica bianca con respiro sopra e sotto */
.section { padding: 84px 0; }
.section-alt { background: var(--fondo-chiaro); }

/* Blocco di testo: max-width tiene le righe corte e leggibili */
/* 760px e non 960: con testo da 19px una riga di 960 arriva a ~110
   caratteri, si legge male e si perde il capo riga. A 760 si sta fra
   65 e 80, che è la misura giusta. margin auto tiene la colonna al
   centro del contenitore, che ora è molto più largo di lei. */

/* Blocco riferimenti normativi: più leggibile del semplice testo in grassetto */
.refs {
  background: var(--fondo-chiaro);
  border-left: 4px solid var(--accento);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 36px;
  text-align: center;
}
.refs p {
  color: var(--testo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
}
.refs p:last-child { margin-bottom: 0; }

/* Striscia di numeri chiave (fatti, non stime) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-num { font-size: 46px; font-weight: 800; color: var(--accento); }
.stat-label { color: var(--testo-tenue); font-weight: 600; margin-top: 4px; }

/* =========================================================
   PAGINA SERVIZI
   ========================================================= */

/* Blocco in evidenza a DUE COLONNE (testo a sinistra, riquadro a destra).
   Su schermo largo stanno affiancate; le rendiamo responsive più avanti. */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.feature h2 { font-size: 32px; margin-bottom: 14px; }
.feature > div > p { color: var(--testo-tenue); font-size: 17px; }

/* Il riquadro colorato della colonna destra */
.feature-box {
  background: var(--fondo-chiaro);
  border-radius: 12px;
  padding: 32px;
}
.feature-box h3 { font-size: 20px; margin-bottom: 14px; }

/* LISTA con spunte: togliamo i pallini di default e mettiamo una ✓ ambra.
   ::before inserisce un contenuto PRIMA di ogni voce, via CSS. */
.check-list { list-style: none; }
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: var(--testo-tenue);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accento);
  font-weight: 800;
}

/* =========================================================
   FORM
   Struttura: ogni campo sta in un .field con la sua <label>.
   La label è SEMPRE presente (accessibilità): il placeholder da solo
   sparisce appena scrivi, la label no.
   ========================================================= */
/* max-width da sola limita la larghezza ma lascia il blocco a sinistra.
   "margin: 0 auto" distribuisce lo spazio avanzato in parti uguali a
   destra e a sinistra: è questo che lo centra sotto al titolo. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }   /* il campo occupa TUTTA la riga (da prima all'ultima colonna) */
.field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--primario);
}
.field input,
.field textarea {
  font-family: inherit;      /* senza questo gli input userebbero il font di sistema, non Inter */
  font-size: 16px;
  color: var(--testo);
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: 8px;
  padding: 11px 13px;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
/* :focus-visible = quando l'elemento è selezionato da tastiera o click.
   Il contorno ambra dice all'utente dove si trova. Non rimuovere mai
   l'outline senza metterne uno alternativo: si perde la navigazione da tastiera. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
  border-color: var(--accento);
}
.field-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--testo-tenue);
  line-height: 1.5;
}
.field-consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
/* ⚠️ max-width AGGIUNTA IL 07/09/2026 — correzione alla RADICE di un difetto
   noto e mai chiuso. Il 10/08, sulla demo del ristorante, l'audit grafico
   segnalo' una .form-note a ~95 caratteri per riga (max consigliato 75): fu
   accorciato il TESTO, cioe' curato il sintomo. La causa e' questa classe, che
   non ha mai avuto un limite di larghezza, e il 07/09 la stessa cosa e'
   ricomparsa a ~115 caratteri sulla demo del parrucchiere.
   📌 Portata a mano su tutte e sei le copie del foglio lo stesso giorno: ogni
      progetto ha la sua, e una correzione qui non arriva alle altre da sola. */
.form-note {
  grid-column: 1 / -1;
  max-width: 75ch;
  font-size: 13px;
  color: var(--testo-tenue);
  background: var(--fondo-chiaro);
  border-left: 3px solid var(--accento);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
}

/* =========================================================
   FASCIA SCURA di chiusura (la frase "a fianco del cliente")
   ========================================================= */
.band-dark {
  background: var(--primario);
  color: var(--bianco);
  padding: 40px 0;
  text-align: center;
}
.band-dark p {
  max-width: 920px;
  margin: 0 auto;
  font-size: 19px;
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE — le regole che adattano il sito agli schermi piccoli

   COME SI LEGGE una media query:
     @media (max-width: 900px) { ... }
   significa "da 900px di larghezza IN GIÙ, applica queste regole".
   Vanno in fondo al file: nel CSS, a parità di specificità, vince
   l'ultima regola scritta.

   Le griglie .cards .tiles .stats .gallery NON compaiono qui: usano
   auto-fit e si riorganizzano da sole a qualsiasi larghezza.

   Parole lunghe (indirizzi email, URL) mandate a capo invece di
   sfondare il contenitore: è la causa più comune di scorrimento
   orizzontale indesiderato.
   ========================================================= */
body { overflow-wrap: break-word; }

/* Piede appiccicato in fondo (aggiunto l'08/08/2026).
   ⚠️ Difetto vero, visto guardando la pagina "grazie": su una pagina piu'
   corta della finestra il footer restava a meta' schermo con una fascia
   bianca sotto, come se il sito fosse finito male. Riguarda ogni pagina
   breve di ogni sito: conferme d'invio, esiti, 404.
   Il footer NON e' position:fixed — resta nel flusso e scorre normalmente
   sulle pagine lunghe: e' solo il <main> che si allunga se avanza spazio. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ---------------------------------------------------------
   FINO A 1000px — il menu diventa a tendina
   Soglia scelta sulla voce più lunga, "Sistemi di ventilazione e
   centraline": sotto questa larghezza non sta più in riga col logo.
   --------------------------------------------------------- */
@media (max-width: 1000px) {
  /* flex e non block: le tre barrette sono impilate in colonna. */
  .nav-toggle { display: flex; }

  /* Qui in riga ci sono solo logo e pulsante hamburger: vanno ai due
     estremi, non centrati assieme come il blocco del desktop. */
  .header-inner { justify-content: space-between; gap: 0; }

  /* Il menu esce dal flusso e si appoggia sotto la barra.
     top: 70px = l'altezza di .header-inner. */
  .main-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--primario);
    flex-direction: column;
    padding: 8px 24px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }
  /* La classe .open viene aggiunta e tolta da script.js al clic */
  .main-nav.open { display: flex; }

  /* ⚠️ CORRETTO L'08/08/2026 — trovato PREMENDO il pulsante a 390px.
     Il menu si apriva con le voci tutte attaccate su una riga sola:
     "HomeAree di attivitàLo studioContatti".

     Stessa causa radice dei quattro difetti del 07/08: CSS scritto per un
     markup che non esiste piu'. Qui sotto c'era `.main-nav { flex-direction:
     column }`, giusta quando i link erano figli diretti di <nav>. Oggi il
     contenitore flessibile e' `.main-nav ul`, ed e' in riga: incolonnare il
     <nav> non incolonna niente. Stesso motivo per cui `.main-nav a:last-child`
     non toglieva l'ultimo bordo — ogni <a> e' figlio unico del suo <li>.

     Nessun audit poteva prenderlo: a 390px il menu e' display:none finche'
     non lo si apre, quindi i controlli lo guardano chiuso. Si e' visto
     cliccando il pulsante e fotografando la pagina dopo. */
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .main-nav li { width: 100%; }
  .main-nav a {
    display: block;
    margin-left: 0;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .main-nav li:last-child a { border-bottom: none; }
}

/* ---------------------------------------------------------
   FINO A 900px — i blocchi a due colonne si impilano
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .feature,
  .fiere-grid,
  .form-grid,
  .azienda-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* L'infografica non deve più restare agganciata mentre si scorre:
     su una colonna sola darebbe fastidio invece che aiutare. */
  .azienda-figure { position: static; }

  /* Sul telefono i campi affiancati diventano troppo stretti da compilare */
  .form-grid { gap: 18px; }

  .hero-slider { padding: 72px 0 56px; }
  .section { padding: 56px 0; }
  .cta { padding: 48px 0; }
}

/* ---------------------------------------------------------
   FINO A 640px — telefono: testi più piccoli, meno spazio sprecato
   I titoli pensati per il desktop qui occuperebbero mezzo schermo.
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding: 0 18px; }

  /* La scheda dati passa a una colonna: le regole stanno più in basso,
     subito dopo .scheda-dati. Qui non funzionavano: le media query non
     aggiungono specificità, e la regola base che viene dopo nel file vinceva. */

  .logo { font-size: 17px; }

  .hero-slider { padding: 56px 0 44px; }
  .hero-slide h1, .hero-slide .hero-titolo { font-size: 28px; }
  .hero-sub { font-size: 17px; }
  .hero-kicker { font-size: 12px; }

  /* Sotto una certa larghezza due bottoni affiancati si spezzano male:
     meglio uno per riga, larghi tutta la colonna e facili da centrare col dito. */
  .hero-actions, .cta-contacts { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-contacts .btn { text-align: center; }

  .page-header { padding: 48px 0; }
  .page-header h1 { font-size: 27px; }
  .page-header p { font-size: 16px; }

  .section-title { font-size: 25px; margin-bottom: 32px; }
  .quote-band { padding: 48px 0; }
  .quote-band blockquote { font-size: 19px; }
  .cta h2 { font-size: 23px; }
  .fiera h2 { font-size: 20px; }
  .feature h2 { font-size: 23px; }

  .stat-num { font-size: 32px; }

  .closing { font-size: 17px; }

  /* La timeline aveva 36px di rientro + il pallino fuori dal bordo:
     su schermo stretto rubano larghezza preziosa al testo. */
  .timeline { padding-left: 24px; }
  .timeline-item::before { left: -33px; width: 13px; height: 13px; }

  .feature-box { padding: 24px 20px; }
  .card { padding: 26px 22px; }
  .tile { padding: 28px 18px; }
  .tile-icon { width: 54px; height: 54px; font-size: 24px; }
  .tile-icon svg { width: 26px; height: 26px; }

  /* Le tre colonne del footer una sotto l'altra, con meno distanza */
  .footer-inner { gap: 28px; flex-direction: column; }

  .btn { padding: 13px 22px; font-size: 15px; }
}

/* ---------------------------------------------------------
   FINO A 380px — telefoni piccoli (iPhone SE e simili)
   --------------------------------------------------------- */
@media (max-width: 380px) {
  .hero-slide h1, .hero-slide .hero-titolo { font-size: 24px; }
  .logo { font-size: 15px; }
  }

/* =========================================================
   PAGINA CONTATTI
   ========================================================= */

/* Recapiti a sinistra, modulo a destra. Sotto i 900px si impilano:
   la regola sta qui sotto e NON insieme alle altre nella sezione
   responsive più in alto. Motivo: quella sezione viene prima di questa
   riga nel foglio, e a parità di specificità in CSS vince l'ultima
   regola scritta — l'impilamento sarebbe stato annullato da questa. */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;   /* al modulo serve un po' più di spazio */
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .contatti-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* I quattro riquadri: indirizzo, telefono, email, social */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.contact-card {
  background: var(--fondo-chiaro);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}
.contact-icon {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--accento);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
/* h2 in contatti.html (i quattro recapiti stanno sotto l'h1), h3 in
   assistenza.html (stanno sotto un h2). Stessa resa. */
.contact-card h3, .contact-card h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primario);
  margin-bottom: 8px;
}
.contact-card p, .contact-card a {
  color: var(--testo-tenue);
  font-size: 15px;
  text-decoration: none;
}
.contact-card a:hover { color: var(--accento); }
.social-links { display: flex; gap: 14px; justify-content: center; }
.social-links a { font-weight: 600; }

/* Il menu a tendina del tipo di richiesta: va vestito a mano, perché
   i select non ereditano il font né i bordi degli altri campi. */
.field select {
  font-family: inherit;
  font-size: 16px;
  color: var(--testo);
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: 8px;
  padding: 11px 13px;
  width: 100%;
  cursor: pointer;
}
.field select:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
  border-color: var(--accento);
}

/* =========================================================
   SCHEDA DATI (etichetta → valore)
   Usa <dl>, <dt>, <dd>: sono i tag pensati per le coppie
   "termine e sua definizione". Con dei <p> l'aspetto sarebbe
   lo stesso, ma il browser non saprebbe che "Beneficiario" e
   "Elettrica Faber S.r.l." sono legati fra loro — e un lettore
   di schermo li leggerebbe come frasi slegate.
   ========================================================= */
/* ⚠️ 13/08/2026 — la prima colonna era FISSA a 190px. Misurato sul menu della
   demo ristorante: la scheda e' larga 1192px, l'etichetta "Primo, secondo,
   contorno, acqua e caffe'" veniva strizzata in 190px e andava a capo su tre
   righe, mentre il valore "€ 16,00" aveva 926px di spazio vuoto. 10 celle su
   16 andavano a capo anche su geometra/privacy.
   Ora l'etichetta prende quanto le serve (max-content), con il minimo storico
   di 190px e un tetto di 340px perche' su una scheda stretta non mangi il
   valore. ⚠️ Il minimo NON puo' essere `min-content`: provato il 13/08, la
   griglia collassava la colonna a 174px e le etichette andavano a capo lo
   stesso — cioe' il difetto restava con una regola nuova.
   ⛔ Non si torna a una misura fissa: l'etichetta piu' lunga cambia da pagina a
      pagina, e un numero scritto qui va bene per una sola di esse. */
.scheda-dati {
  display: grid;
  grid-template-columns: minmax(190px, max-content) 1fr;
  gap: 10px 24px;
  /* ⚠️ 13/08: la scheda si stendeva per tutta la larghezza del contenitore
     (1192px sul menu della demo ristorante) mentre il suo contenuto ne chiede
     ~600: restavano centinaia di pixel di vuoto a destra dei valori.
     Si ferma alla colonna di lettura, la stessa del testo intorno, cosi' la
     pagina ha UN bordo destro e non due. */
  max-width: var(--misura-lettura);
  background: var(--fondo-chiaro);
  border-radius: 12px;
  padding: 24px 26px;
  margin: 28px 0;
}
.scheda-dati > *:nth-child(odd) { max-width: 340px; }
.scheda-dati dt {
  font-weight: 700;
  color: var(--primario);
  font-size: 15px;
}
.scheda-dati dd {
  color: var(--testo-tenue);
  font-size: 15px;
  margin: 0;
}
.scheda-dati dd strong { color: var(--testo); font-size: 17px; }

/* Sul telefono le due colonne fisse non ci stanno: 190px + 24 di gap + il
   valore superavano lo schermo di 5px. L'etichetta va sopra il valore.
   Questo blocco DEVE stare dopo .scheda-dati, altrimenti non si applica. */
@media (max-width: 640px) {
  .scheda-dati { grid-template-columns: 1fr; gap: 4px 0; padding: 20px; }
  .scheda-dati dd { margin-bottom: 12px; }
  .scheda-dati dd:last-child { margin-bottom: 0; }
}

/* =========================================================
   LINK DENTRO IL TESTO CORRENTE
   (timeline dell'azienda, articoli del blog)
   Senza questa regola userebbero il blu sottolineato di default
   del browser, che con la palette navy/ambra stona.

   La sottolineatura RESTA, non si toglie: un link riconoscibile
   solo dal colore è invisibile a chi non distingue bene i colori.
   Il colore lo rende evidente, la sottolineatura lo rende certo.
   ========================================================= */
.timeline-item a,
.articolo p a {
  color: var(--primario);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accento);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;   /* stacca la riga dalle lettere: si legge meglio */
}
.timeline-item a:hover,
.articolo p a:hover {
  color: var(--accento);
}

/* =========================================================
   PAGINE DEI SERVIZI — testo con la foto a lato
   Come sul sito Faber: l'immagine sta a fianco del testo, non in mezzo,
   e la didascalia sta sotto l'immagine. Una foto piazzata dentro al
   testo lo spezza a metà e costringe a riprendere il filo due volte.
   ========================================================= */
.testo-figura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px;
  align-items: start;
}

.figura-lato { margin: 0; }
.figura-lato img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
/* Didascalia: più piccola e tenue del testo normale, così si legge
   come commento alla foto e non come un paragrafo dell'articolo. */
.figura-lato figcaption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* Sotto i 900px la foto va sopra al testo: affiancata in 300px
   diventerebbe un francobollo. */
@media (max-width: 900px) {
  .testo-figura { grid-template-columns: 1fr; gap: 28px; }
  .figura-lato { order: -1; }
}

/* =========================================================
   SPALLA LATERALE delle pagine servizio  (aggiunta 02/08/2026)

   Prima qui c'era solo il riquadro con la citazione: alto 150px
   contro un testo lungo 400-800px, quindi mezzo schermo restava
   bianco. E la citazione ripeteva parola per parola la frase che
   aveva accanto, quindi si leggeva due volte la stessa cosa.

   Adesso la colonna contiene due cose che servono a chi legge:
   come chiedere un preventivo, e gli altri servizi. Nessun testo
   aziendale nuovo: sono etichette di navigazione e recapiti che
   stanno già nel footer e nel menu.
   ========================================================= */
.spalla {
  display: grid;
  gap: 20px;
  align-content: start;
}

/* NOTA — perché la spalla NON è agganciata (position: sticky).
   Provato il 02/08/2026 e tolto dopo la misura: la spalla è alta ~700px
   e il contenitore le lascia meno spazio di così prima di finire, quindi
   invece di fermarsi sotto la barra scorreva via lo stesso. Su uno schermo
   basso il primo riquadro sarebbe finito dietro l'intestazione.
   Un effetto che funziona a metà confonde più di quanto aiuta. */

.spalla-box {
  background: var(--fondo-chiaro);
  border-radius: 12px;
  padding: 24px 26px;
  border-top: 4px solid var(--accento);
}

.spalla-box h3 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.3;
}

/* Il pulsante prende tutta la larghezza della spalla: bersaglio grande,
   si preme bene anche col dito. */
.spalla-box .btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

/* Il numero di telefono: grande abbastanza da leggersi al volo. */
.spalla-tel {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}
.spalla-tel a { color: var(--primario); text-decoration: none; }
.spalla-tel a:hover { text-decoration: underline; }

/* Elenco degli altri servizi: senza pallini, con una riga sottile
   di separazione, come le voci di un indice. */
.spalla-servizi {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spalla-servizi li + li { border-top: 1px solid rgba(20,33,61,0.10); }
.spalla-servizi a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  color: var(--testo);
  text-decoration: none;
}
.spalla-servizi a:hover { color: var(--accento); }

/* Sotto i 900px .testo-figura passa già a una colonna sola (regola più
   sopra), quindi la spalla scende sotto al testo da sé: non serve altro. */

/* --- Fotogallery degli impianti realizzati (pagina fotovoltaico) ---
   Riusa la griglia .gallery, ma qui dentro ci sono foto vere e non i
   riquadri grigi segnaposto di azienda.html. */
/* Stesso problema delle tessere della home: le foto sono 6 e nel
   contenitore da 1240px ne entravano 4 per riga, quindi 4+2. Tre
   colonne fisse: 3+3. */
.gallery-foto { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .gallery-foto { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-foto { grid-template-columns: 1fr; } }

.gallery-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  display: block;
}

/* --- Video (pagina impianti zootecnici) --- */
.video-grid {
  display: grid;
  /* min(360px, 100%): sotto i 360px di spazio il minimo diventa la larghezza
     disponibile invece di restare inchiodato a 360px. Con minmax(360px, 1fr)
     la colonna sbordava di 3px sul telefono: auto-fit non scende sotto il minimo. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 24px;
}
.video-item { margin: 0; }
.video-item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--nero);       /* evita il lampo bianco prima del poster */
}
.video-item figcaption {
  margin-top: 10px;
  font-size: 16px;
  color: var(--testo-tenue);
}

/* =========================================================
   UTILITÀ — ultimo blocco del foglio
   Poche classi per casi che tornano su più pagine. Esistono per
   NON scrivere style="" dentro l'HTML: uno stile messo
   nell'attributo batte qualunque regola di questo file, e quando
   qualcosa non torna non lo si trova più cercando qui.
   Stanno in fondo apposta: a parità di specificità vince l'ultima
   regola scritta, quindi da qui si può correggere quanto sopra.
   ========================================================= */

/* Titolo di una colonna dentro un blocco a due colonne.
   Non è .section-title: quello è il titolo DELLA PAGINA, 36px e centrato. */
.titolo-colonna { font-size: 24px; margin-bottom: 12px; }
/* Il paragrafo che segue subito il titolo di colonna fa da occhiello:
   non serve una classe nell'HTML, basta la posizione. */
.titolo-colonna + p { color: var(--testo-tenue); margin-bottom: 24px; }

/* Sottotitolo interno a un articolo del blog: sta sotto un h2 di `main`
   (--testo-3xl) e divide il corpo del testo. Lo stacco sopra è più largo di quello sotto
   perché il titolo appartiene al testo che segue, non a quello che precede. */
.titolo-paragrafo { font-size: 22px; margin: 36px 0 8px; }

/* .section-title allineato a sinistra: sopra un modulo il titolo centrato
   non si lega ai campi, che partono da sinistra. */
/* ⚠️ `margin-inline: 0` e non solo `text-align: left`: la regola dei titoli
   centrati (in fondo al foglio) imposta anche `margin-inline: auto`, e senza
   questa riga il titolo restava centrato come blocco. */
.titolo-sinistra { text-align: left; margin-inline: 0; margin-bottom: 24px; }

/* Nota del modulo quando sta FUORI dalla griglia dei campi (dopo </form>):
   lì grid-column non ha effetto e serve centrarla a mano. */
.form-note-centrata { max-width: 720px; margin: 20px auto 0; }

/* .section-note serve normalmente a chiudere una sezione (margin-top: 40px).
   Qui invece introduce ciò che viene dopo, quindi lo spazio va sotto. */
.section-note-sopra { margin: 0 auto 32px; }

.spazio-sopra   { margin-top: 24px; }   /* stacco di un paragrafo isolato */
.stacco-sezione { margin-top: 72px; }   /* nuova sezione dentro la stessa pagina */
/* --- COLONNA DI LETTURA -------------------------------------------------
   Si mette sul .container di una pagina di solo testo. Larghezza = la misura
   di lettura + i 48px di padding del .container (box-sizing: border-box),
   cosi' il CONTENUTO della colonna e' largo esattamente quanto un paragrafo:
   titoli, testo e riga di pulsanti hanno lo stesso bordo sinistro, lo stesso
   bordo destro e lo stesso asse di centratura.
   margin-inline: auto anche qui, per quando non e' accoppiata a .container.
   ⚠️ Non rimettere un max-width sugli elementi interni: e' quello il difetto. */
.colonna-larga {
  max-width: calc(var(--misura-lettura) + 48px);
  margin-inline: auto;
}
/* Dentro una colonna di lettura niente si stringe ulteriormente: la misura
   la decide la colonna, una volta sola. */
.colonna-larga p,
.colonna-larga .messaggio-grande,
.colonna-larga .nota-obbligatori { max-width: none; }


/* ============================================================================
   MODULO CONTATTI
   ----------------------------------------------------------------------------
   Aggiunto il 06/08/2026 insieme a invia.php.
   Nessun colore scritto a mano: tutto passa dalle variabili di :root, cosi'
   cambiando --primario e --accento cambia anche il modulo.
   ========================================================================== */

/* ---- Recapiti ---------------------------------------------------------- */

.lista-recapiti {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  gap: 14px;
}

.lista-recapiti li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.lista-recapiti .etichetta {
  min-width: 90px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* ---- Struttura del modulo ----------------------------------------------
   max-width: una riga di campo larga tutto lo schermo su un monitor grande
   e' scomoda da leggere e da compilare. */

.modulo-contatti {
  max-width: 620px;
  display: grid;
  gap: 22px;
}

.campo {
  display: grid;
  gap: 7px;
}

.campo label {
  font-weight: 600;
  font-size: 15px;
  color: var(--testo);
}

/* L'asterisco non e' l'unico segnale: sotto il modulo c'e' la frase che ne
   spiega il significato, e i campi hanno aria-required per chi non vede. */
.campo .obbligatorio {
  color: var(--errore);
  margin-left: 2px;
}

.campo .facoltativo {
  font-weight: 400;
  font-size: 14px;
  color: var(--testo-tenue);
}

/* ---- Campi -------------------------------------------------------------
   font: inherit — senza, i campi userebbero il carattere di sistema e
   sembrerebbero incollati da un altro sito.
   min-height 46px: un bersaglio piu' piccolo e' difficile da centrare col
   pollice. La soglia consigliata dalle WCAG e' 44px. */

.modulo-contatti input[type="text"],
.modulo-contatti input[type="email"],
.modulo-contatti input[type="tel"],
.modulo-contatti textarea {
  font: inherit;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  color: var(--testo);
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modulo-contatti textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

.modulo-contatti input:hover,
.modulo-contatti textarea:hover {
  border-color: var(--testo-tenue);
}

/* Il fuoco si vede in modo inequivocabile: bordo piu' scuro E alone.
   Il solo cambio di colore non basta a chi distingue male le tinte. */
.modulo-contatti input:focus-visible,
.modulo-contatti textarea:focus-visible,
.modulo-contatti button:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-color: var(--primario);
}

/* Campo obbligatorio lasciato vuoto DOPO che l'utente ci e' passato.

   ⚠️ CORRETTO L'08/08/2026. Prima c'era :not(:placeholder-shown), con il
   commento "esclude i campi mai toccati". NON ESCLUDEVA NIENTE: i campi del
   modulo non hanno l'attributo placeholder, quindi :placeholder-shown non
   corrisponde mai e la sua negazione e' sempre vera. Risultato: il modulo si
   apriva con nome, email e messaggio gia' bordati di rosso, prima che il
   visitatore avesse scritto una lettera.

   Nessun audit poteva prenderlo: il colore e' a norma di contrasto, il campo
   ha la sua etichetta, la struttura e' giusta. Si e' visto guardando la
   schermata della pagina contatti.

   :user-invalid fa quello che il commento diceva: colpisce solo dopo che
   l'utente ha interagito col campo. Sostenuto da Chrome, Firefox, Safari ed
   Edge nelle versioni in circolazione; dove non c'e', la regola viene
   ignorata e il campo resta col bordo normale — che e' il ripiego giusto. */
.modulo-contatti input:required:user-invalid,
.modulo-contatti textarea:required:user-invalid {
  border-color: var(--errore-bordo);
}

/* ---- Consenso privacy --------------------------------------------------
   La casella sta a fianco del testo, non sopra: deve essere evidente a cosa
   si riferisce. align-items: start la tiene allineata alla prima riga anche
   quando il testo va a capo su tre righe. */

.campo-consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.campo-consenso input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--primario);
  flex-shrink: 0;
  cursor: pointer;
}

.campo-consenso label {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

.campo-consenso input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 3px;
}

.nota-obbligatori {
  margin: 0;
  font-size: 14px;
  color: var(--testo-tenue);
}

/* ---- Trappola per i robot ----------------------------------------------
   NON si usa display:none: alcuni programmi automatici saltano proprio i
   campi nascosti in quel modo, e la trappola non scatterebbe. Il campo qui
   e' fuori dallo schermo ma tecnicamente presente e compilabile.
   aria-hidden e tabindex="-1" nell'HTML lo tengono fuori dai lettori di
   schermo e dal percorso del tabulatore: una persona non lo incontra mai. */

.campo-nascosto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Messaggio di esito ------------------------------------------------ */

.esito {
  padding: 15px 18px;
  margin-bottom: 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.5;
}

.esito:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.esito-errore {
  background: var(--errore-fondo);
  border-color: var(--errore-bordo);
  color: var(--errore-titolo);
}

/* ---- Pulsante durante l'invio ------------------------------------------
   Il pulsante disattivato resta leggibile: 0.6 di opacita' su un testo gia'
   a basso contrasto lo renderebbe illeggibile a chi ha problemi di vista. */

.modulo-contatti button[disabled] {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}

/* ---- Pagina di conferma ------------------------------------------------ */

.messaggio-grande {
  font-size: 19px;
  line-height: 1.6;
  max-width: 620px;
}

/* ---- Schermi stretti ---------------------------------------------------- */

@media (max-width: 600px) {
  .lista-recapiti .etichetta { min-width: 0; width: 100%; }
  .modulo-contatti { gap: 18px; }
}

/* =========================================================
   COMPONENTI DI PAGINA
   Scritti il 07/08/2026 per la demo 1 (Termoidraulica) e PROMOSSI QUI
   l'08/08/2026, mentre si costruiva la demo 2.

   Perche' sono stati spostati: erano rimasti dentro la cartella della
   demo 1. La demo 2 avrebbe dovuto copiarseli, e da quel momento
   sarebbero esistite due copie destinate a divergere in silenzio —
   esattamente il problema delle "tre copie di style.css" gia' pagato
   il 06/08. Il foglio sorgente e' UNO: e' questo.

   Nessuna immagine di terzi: le figure sono SVG disegnati a mano.
   Al posto delle foto ci sono riquadri dichiarati: su un sito vero ci
   vanno le fotografie del cliente, non foto stock.
   ========================================================= */

/* --- Avviso "sito dimostrativo": presente su ogni pagina --- */
.avviso-demo {
  background: var(--accento-chiaro);
  border-bottom: 3px solid var(--accento);
  color: var(--accento-testo-scuro);
  font-size: var(--testo-sm);
  padding: var(--spazio-3) 0;
  line-height: 1.5;
}
.avviso-demo strong { color: var(--accento-testo-scuro); }

/* --- Apertura della home --- */
.hero {
  background: var(--primario);
  color: var(--bianco);
  padding: var(--spazio-9) 0;
}
.hero-griglia {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--spazio-8);
  align-items: center;
}
.hero h1 { font-size: var(--testo-4xl); margin-bottom: var(--spazio-4); letter-spacing: -0.02em; }
.hero .occhiello {
  display: inline-block;
  font-size: var(--testo-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accento-su-scuro);
  margin-bottom: var(--spazio-3);
}
.hero p { color: var(--testo-su-scuro); font-size: var(--testo-lg); max-width: 52ch; margin-bottom: var(--spazio-5); }
.hero-azioni { display: flex; gap: var(--spazio-3); flex-wrap: wrap; }

/* Riquadro al posto della foto: dichiarato, non un'immagine finta. */
.foto-attesa {
  background: var(--primario-tendina);
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: var(--raggio-lg);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-3);
  padding: var(--spazio-5);
  text-align: center;
  color: var(--testo-su-scuro);
  font-size: var(--testo-sm);
}
.foto-attesa svg { opacity: 0.7; }
.foto-attesa.chiara {
  background: var(--fondo-neutro);
  border-color: var(--bordo-campo);
  color: var(--testo-tenue);
}

/* --- Fascia dell'urgenza: la cosa che un idraulico vende davvero --- */
.urgenza {
  background: var(--accento);
  color: var(--bianco);
  padding: var(--spazio-6) 0;
}
.urgenza-inner { display: flex; align-items: center; gap: var(--spazio-5); flex-wrap: wrap; justify-content: space-between; }
.urgenza h2 { font-size: var(--testo-2xl); margin: 0 0 var(--spazio-1); color: var(--bianco); }
.urgenza p { color: rgba(255,255,255,0.92); margin: 0; max-width: 60ch; }
.urgenza .numero {
  font-size: var(--testo-3xl);
  font-weight: 800;
  color: var(--bianco);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-3);
  padding: var(--spazio-3) var(--spazio-5);
  border: 3px solid var(--bianco);
  border-radius: var(--raggio);
  transition: background var(--durata) var(--curva), color var(--durata) var(--curva);
}
.urgenza .numero:hover { background: var(--bianco); color: var(--accento-testo-scuro); }

/* --- Sezioni --- */
/* ⚠️ padding-block, NON `padding: X 0` (corretto l'08/08/2026).
   `padding: X 0` azzera anche i lati, e 14 pagine su 4 progetti scrivono
   class="container sezione" sullo stesso <div>: .sezione sta piu' in basso
   nel foglio, quindi vinceva e cancellava il padding laterale di .container.
   Effetto misurato: su contatti, privacy e grazie il testo partiva da x=0 —
   ATTACCATO AL BORDO DELLO SCHERMO su un telefono da 390px.
   E' il seguito del difetto del 07/08 (.container mancante): li' il
   contenitore non c'era, qui c'e' ma gli viene tolto l'effetto.
   ⚠️ audit_grafico.js NON l'ha preso pur avendo un controllo sui margini:
   e' un buco dello strumento, annotato in CLAUDE.md. Trovato guardando la
   pagina e poi MISURANDO il padding calcolato, non leggendo il CSS. */
.sezione { padding-block: var(--spazio-9); }
.sezione.crema { background: var(--fondo-chiaro); }
.sezione > .container > h2 { margin-top: 0; }
.sottotitolo-sezione { color: var(--testo-tenue); font-size: var(--testo-lg); max-width: 62ch; margin-bottom: var(--spazio-7); }

/* --- Griglia dei servizi ---
   auto-fit riempie la riga con quante schede ci stanno: a 1240px sono
   QUATTRO. Va bene con 4 o 8 schede, non con 6 — che escono 4+2, con un buco
   a destra che si vede benissimo. Trovato da Cristian l'08/08/2026 guardando
   la home; era cosi' anche sulla demo 1 dal 07/08.

   ⚠️ IL NUMERO DI COLONNE SI SCEGLIE IN BASE AL NUMERO DI SCHEDE:
     2 · 4 · 8 schede -> .servizi-griglia         (auto-fit, va da se')
     3 · 6 · 9 schede -> .servizi-griglia griglia-3
   Non e' una raffinatezza: una griglia con un buco fa sembrare che manchi
   qualcosa, e su una pagina di servizi e' l'impressione peggiore possibile.

   ⛔ Non si risolve alzando il minmax globale: portandolo a 320px le griglie
      da 4 schede diventerebbero 3+1, cioe' lo stesso difetto spostato. */
.servizi-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spazio-5);
}

/* Tre colonne fisse: le schede sono piu' larghe e le righe di testo passano
   da ~28 a ~42 caratteri. I due scalini seguono i punti di rottura gia' usati
   dal resto del foglio (900 e 640px), non nuovi valori inventati. */
.servizi-griglia.griglia-3 { grid-template-columns: repeat(3, 1fr); }

/* CINQUE schede (o qualunque numero dispari): due colonne, e l'ultima si
   allarga su tutta la riga invece di lasciare il buco a destra.
   Nata il 13/08/2026 per officina/servizi, che ha 5 gruppi di lavorazioni:
   senza griglia le schede uscivano a piena larghezza (1192px, misurato), con
   auto-fit venivano 4 colonne da 298px e gli elenchi andavano a capo, con
   griglia-3 restava 3+2 col buco.
   ⛔ Resta valida la regola: non si aggiunge una scheda per far quadrare la
      griglia, e' la griglia che si adatta al contenuto. */
.servizi-griglia.griglia-2 { grid-template-columns: repeat(2, 1fr); }
.servizi-griglia.griglia-2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .servizi-griglia.griglia-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .servizi-griglia.griglia-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .servizi-griglia.griglia-3 { grid-template-columns: 1fr; }
}
.servizio {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-lg);
  padding: var(--spazio-6);
  transition: border-color var(--durata) var(--curva), transform var(--durata) var(--curva);
}
.sezione.crema .servizio { background: var(--bianco); }
.servizio:hover { border-color: var(--accento); transform: translateY(-3px); }
/* ⚠️ h2 E h3: la regola guardava solo h3, cosi' una scheda con un <h2> come
   titolo (legittimo: in una pagina senza h2 di sezione, il titolo della scheda
   E' di secondo livello) usciva con la dimensione globale degli h2, cioe' il
   doppio delle altre. Trovato guardando "servizi" e "lavori" l'08/08/2026.
   Il titolo interno alla scheda resta piu' piccolo del titolo della scheda. */
.servizio h2 { margin-top: 0; margin-bottom: var(--spazio-2); font-size: var(--testo-2xl); }
.servizio h3 { margin-top: 0; margin-bottom: var(--spazio-2); font-size: var(--testo-xl); }
.servizio h2 + p + h3, .servizio ul + p { margin-top: var(--spazio-4); }
.servizio p { color: var(--testo-tenue); margin-bottom: 0; font-size: var(--testo-sm); }
/* --- Schede delle demo (pagina Lavori) -------------------------------------
   Scritte il 13/08/2026 su due difetti visti da Cristian sul reso, non dedotti.
   1) Il titolo andava a capo A META' PAROLA: le demo sono QUATTRO, la riga
      diventa da quattro e la colonna interna scende a 214px. --testo-2xl vale
      30px su schermo largo e "Termoidraulica" ci misura 220px: overflow-wrap
      (break-word) la spezza. ⛔ Il difetto non e' overflow-wrap: e' un carattere
      dimensionato sul VIEWPORT dentro una colonna che il viewport non descrive.
   2) I pulsanti non erano allineati: le schede sono alte uguale (griglia), ma
      il contenuto e' di lunghezza diversa e il pulsante seguiva il testo.
      Misurato: 1244 · 1244 · 1320 · 1344 px. Con margin-top:auto vanno in fondo.
   📌 Regola scritta in lavori.astro l'08/08 e NON rispettata: «aggiungendo una
      quarta demo si rimisura prima di pubblicare». Le griglie si contano. */
.schede-demo .servizio { display: flex; flex-direction: column; }
.schede-demo .servizio h2 { font-size: clamp(21px, 1.2vw + 14px, 26px); }
.schede-demo .servizio > p:last-child { margin-top: auto; padding-top: var(--spazio-4); }

/* 🔴 08/09/2026 — LE DEMO SONO DIVENTATE CINQUE E LA GRIGLIA LE IMPAGINAVA 4+1.
   Il contenitore si ferma a ~1192px e `repeat(auto-fit, minmax(260px,1fr))` ci
   fa stare quattro colonne: la quinta scheda restava sola su una seconda riga
   con TRE POSTI VUOTI a destra. Misurato online, non dedotto: >=1440 -> 5 in
   fila · 1280 -> 4+1 · 1024-900 -> 3+2 · 768-600 -> 2+2+1 · 390 -> una per riga.
   ⛔ La regola dell'08/08 vale ancora: NON si inventa una sesta demo per far
   quadrare la griglia — e' la griglia che si adatta al contenuto.
   ✅ Scelto da Cristian l'08/09: flex con a-capo e righe CENTRATE, cosi' non
   resta un buco con NESSUN numero di schede (5 -> 3+2, 6 -> 3+3, 7 -> 3+3+1).
   ⚠️ La base e' 300px e NON 280, ed e' una misura, non un gusto: con 280
   quattro schede piu' tre spazi da 24px fanno ESATTAMENTE 1192px, cioe' la
   riga da quattro tornerebbe di nascosto. Con 300 servono 1272px: non ci sta.
   ⚠️ `max-width` a 360px perche' con `flex-grow` tre schede su un contenitore
   largo si allargherebbero fino a 381px, piu' delle schede di ogni altra
   pagina. Sotto i 640px la scheda cresce da sola e riempie la riga. */
.schede-demo { display: flex; flex-wrap: wrap; justify-content: center; }
.schede-demo > .servizio { flex: 1 1 300px; max-width: 360px; }

.servizio-icona {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--raggio);
  background: var(--accento-chiaro);
  color: var(--accento-testo);
  margin-bottom: var(--spazio-4);
}

/* --- Come si lavora: passi numerati --- */
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--spazio-6); counter-reset: passo; }
.passo { counter-increment: passo; }
.passo::before {
  content: counter(passo);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--bianco);
  font-weight: 800;
  font-size: var(--testo-lg);
  margin-bottom: var(--spazio-4);
}
.passo h3 { margin-top: 0; margin-bottom: var(--spazio-2); font-size: var(--testo-lg); }
.passo p { color: var(--testo-tenue); font-size: var(--testo-sm); margin-bottom: 0; }

/* --- Zona servita --- */
.zona-elenco { display: flex; flex-wrap: wrap; gap: var(--spazio-2); list-style: none; padding: 0; margin: 0 0 var(--spazio-5); }
.zona-elenco li {
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: 999px;
  padding: var(--spazio-2) var(--spazio-4);
  font-size: var(--testo-sm);
  font-weight: 600;
  margin-bottom: 0;
}

/* --- Riquadro di richiamo in fondo alle pagine --- */
.richiamo {
  background: var(--primario);
  color: var(--bianco);
  border-radius: var(--raggio-lg);
  padding: var(--spazio-8);
  text-align: center;
}
.richiamo h2 { margin-top: 0; color: var(--bianco); }
.richiamo p { color: var(--testo-su-scuro); margin-left: auto; margin-right: auto; }

/* --- Elenco con segno di spunta --- */
.elenco-spunte { list-style: none; padding: 0; }
.elenco-spunte li { display: flex; gap: var(--spazio-3); align-items: flex-start; margin-bottom: var(--spazio-3); }
.elenco-spunte svg { flex: none; margin-top: 3px; color: var(--accento-testo); }

/* --- Telefoni --- */
.mono-num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* --- Prezzo di un pacchetto (aggiunto l'08/08/2026) ---
   ⚠️ Nasce da un difetto vero sul sito di Cristian: per il prezzo era stata
   usata .mono-num, che sta nella sezione "Telefoni" e imposta SOLO le cifre a
   larghezza fissa. Nessuna dimensione, nessun peso: il prezzo — cioe' il dato
   piu' importante della pagina — usciva della stessa taglia del testo normale
   e sembrava una nota a margine. Una classe presa in prestito da un altro
   scopo non da' errori: fa una cosa diversa da quella che ti aspetti. */
/* ⚠️ SPECIFICITA': il selettore deve essere anche `.servizio .prezzo` (0,2,0),
   altrimenti dentro una scheda vince `.servizio p` (0,1,1), che e' piu'
   specifico e imposta font-size: var(--testo-sm) e il colore tenue.
   Successo davvero l'08/08/2026: la regola c'era, il commento pure, e il
   prezzo continuava a uscire della taglia del testo normale. Una regola
   sovrascritta NON da' errori: tace, e il commento accanto certifica un
   lavoro che non e' stato fatto. Verificato guardando la pagina, non il CSS. */
.prezzo, .servizio .prezzo {
  font-size: var(--testo-3xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
  margin: var(--spazio-2) 0 var(--spazio-4);
}
.prezzo small { font-size: var(--testo-sm); font-weight: 400; letter-spacing: 0; color: var(--testo-tenue); }

/* --- Adattamento agli schermi piccoli --- */
@media (max-width: 860px) {
  .hero-griglia { grid-template-columns: 1fr; gap: var(--spazio-6); }
  .hero { padding: var(--spazio-7) 0; }
  .sezione { padding-block: var(--spazio-7); }   /* vedi la nota sul padding-block sopra */
  .urgenza-inner { flex-direction: column; align-items: flex-start; }
  .urgenza .numero { font-size: var(--testo-2xl); width: 100%; justify-content: center; }
  .richiamo { padding: var(--spazio-6) var(--spazio-5); }
  .foto-attesa { min-height: 200px; }
}

/* =========================================================
   CORREZIONI TROVATE DALL'AUDIT GRAFICO — 07/08/2026
   Otto difetti su sei pagine, nessuno visibile a occhio nudo.
   ========================================================= */

/* 1. IL PULSANTE PRINCIPALE ERA ILLEGGIBILE — 2,57:1 sulla demo 1.
   Il template scriveva --primario sopra --accento. Con la palette di
   partenza (blu notte su ambra) fa 7,90:1: giusto. Con l'antracite
   sulla ruggine fa 2,57:1: illeggibile.

   ⚠️ IL DIFETTO VERO NON ERA IL COLORE, ERA LA CORREZIONE.
   Il 07/08 e' stata scritta come regola fissa (`color: var(--bianco)`),
   cioe' come se il bianco fosse la risposta giusta per ogni palette.
   Non lo e': il bianco sull'ambra del template fa 2,02:1. Quella riga,
   promossa qui com'era, avrebbe rotto ogni sito costruito sulla palette
   di partenza.

   Ora la scelta e' un dato della palette, non una regola del foglio:
   ogni :root dichiara --testo-su-accento dopo AVERLO CALCOLATO.
     palette template  (ambra #FCA311)  -> primario  7,90:1
     palette demo 1    (ruggine #B4552D)-> bianco    4,91:1
     palette demo 2    (ottone #8A6410) -> bianco    5,37:1  */
.btn-primary { background: var(--accento); color: var(--testo-su-accento); }
.btn-primary:hover { background: var(--accento-testo); color: var(--bianco); }

/* 2. TESTO SULLA FASCIA D'ACCENTO — 4,41:1, sotto di un soffio.
   Era bianco al 92% di opacita' sopra la ruggine. Il 92% sembra
   irrilevante e invece costa mezzo punto di contrasto. Le trasparenze
   vanno calcolate sul fondo reale, non stimate.
   Stessa correzione del punto 1: il colore lo decide la palette. */
.urgenza p,
.urgenza h2 { color: var(--testo-su-accento); }

/* 3. TELEFONO ED EMAIL TROPPO PICCOLI DA TOCCARE — 115x27 e 154x27 px.
   Sono i due link piu' importanti della pagina contatti: se il dito
   sbaglia, la telefonata non parte. 44px e' il minimo. */
.contact-card a[href^="tel:"],
.contact-card a[href^="mailto:"],
.recapiti a[href^="tel:"],
.recapiti a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Copia dell'indirizzo email -------------------------------------------
   Nasce da un difetto vero (12/08/2026): `mailto:` su un computer senza
   programma di posta configurato non fa niente e non lo dice. Il bottoncino
   compare accanto all'indirizzo solo se il browser sa copiare negli appunti
   (lo aggiunge il JavaScript, non il markup): senza, non c'e' e resta il link. */
/* ⚠️ DIMENSIONE CORRETTA IL 07/09/2026 — misurava 51x27px contro i 44 minimi
   per un bersaglio tattile, su TUTTE E OTTO le pagine: 20 segnalazioni
   dell'audit grafico, tutte questo pulsante. Il difetto c'era dal 12/08, cioe'
   da quando il pulsante esiste, ed e' venuto fuori solo il 07/09 perche'
   `audit_grafico.js` sul sito VERO non veniva lanciato da un pezzo.
   ➡️ Gli strumenti si usano su quello che e' in produzione, non solo su quello
      che si sta costruendo.
   Come e' stato risolto: `inline-flex` con `min-height`/`min-width` a 44px.
   ⛔ NON con uno pseudo-elemento che allarga solo l'area cliccabile: sarebbe
      passato al dito e NON all'audit, che misura il riquadro dell'elemento
      (getBoundingClientRect). Un difetto che l'audit non vede piu' ma che c'e'
      ancora e' peggio del difetto.
   ⚠️ `vertical-align: middle` e non piu' `baseline`: a 44px un bottone
      allineato alla linea di base spinge giu' il testo che ha accanto. */
.copia-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  margin-left: var(--spazio-2);
  padding: 2px 10px;
  font: inherit;
  font-size: var(--testo-xs);
  line-height: 1.6;
  color: var(--testo-tenue);
  background: transparent;
  border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio-sm);
  cursor: pointer;
  vertical-align: middle;
}
.copia-email:hover { color: var(--testo); border-color: var(--testo-tenue); }
.copia-email.copiato { color: var(--accento-testo); border-color: var(--accento); }
.site-footer .copia-email { color: var(--testo-su-primario-scuro); border-color: var(--primario-sfumatura); }
.site-footer .copia-email:hover { color: var(--bianco); border-color: var(--testo-su-primario-scuro); }
.site-footer .copia-email.copiato { color: var(--accento-su-scuro); border-color: var(--accento-su-scuro); }

/* =========================================================
   COLONNA DI TESTO CENTRATA — deciso da Cristian il 13/08/2026
   ---------------------------------------------------------
   Misurato: in 33 scatole su 5 progetti il testo si fermava a 748px
   (--misura-lettura) mentre il contenitore era 1240 e i titoli 1192: il
   contenuto restava incollato a sinistra con 444px di vuoto a destra.
   ⚠️ NON si e' allargata la colonna: a 1192px una riga arriva a ~115
   caratteri e si legge male (e' il motivo per cui l'08/08 era stata fissata
   a 748). Si stringe il CONTENITORE e lo si centra, cosi' titolo e testo
   hanno LO STESSO asse e lo stesso bordo destro — il difetto dei "tre bordi
   destri" non puo' ripresentarsi qui, perche' la misura e' una sola.
   ⛔ Il testo dentro la colonna resta allineato a SINISTRA (scelta di
      Cristian): un paragrafo centrato ha il capo riga in un punto diverso a
      ogni riga e si legge peggio.
   ⚠️ Si applica SOLO alle scatole di solo testo. `:has()` esclude quelle che
      contengono una griglia, un modulo o una figura: la' il contenuto largo
      c'e' davvero, e stringere il contenitore lo mutilerebbe.
   ⚠️ Su un browser senza `:has()` la regola non si applica e la pagina resta
      com'era prima: degrada, non si rompe. */
/* ⚠️ Il criterio NON e' un elenco di classi da escludere — quello dimentica
   sempre qualcosa: il 13/08 aveva stretto a 796px due blocchi affiancati di
   `geometra/servizi` (da 603+525 a 366+318, cioe' mutilati) perche' la loro
   classe non era in elenco. Il criterio e' strutturale: si stringe solo una
   scatola fatta di SOLO TESTO, cioe' senza `<div>` figli — un div e' sempre
   un blocco di impaginazione. Le due eccezioni sono i div che testo lo
   contengono e basta: la riga di pulsanti e la scheda etichetta/valore. */
/* ⚠️ Due scritture diverse per la stessa cosa: la maggior parte delle pagine
   ha <section class="sezione"><div class="container">, ma `menu.astro` del
   ristorante usa UN elemento solo, <div class="container sezione">. La prima
   versione della regola guardava solo la forma annidata e il menu era rimasto
   fuori (visto guardando la pagina, non da uno strumento). */
.sezione > .container:not(:has(> div:not(.azioni-centro):not(.scheda-dati))):not(:has(form, table, img)),
.container.sezione:not(:has(> div:not(.azioni-centro):not(.scheda-dati))):not(:has(form, table, img)) {
  max-width: calc(var(--misura-lettura) + 48px);
}

/* La nota che chiude una sezione non ha bisogno di 96px di respiro sotto:
   sommati ai 96 della sezione dopo facevano 192px di vuoto fra la nota di
   `scadenze` e "Il promemoria" (misurato il 13/08). */
.sezione:has(> .container > .nota-obbligatori:last-child) { padding-bottom: var(--spazio-6); }

/* I quattro blocchi del footer si distribuiscono sulla larghezza invece di
   ammassarsi a sinistra: il sito ne ha 3 e si fermava a meta' riga, l'officina
   ne ha 4 e arrivava in fondo. Cosi' la disposizione e' la stessa ovunque
   qualunque sia il numero di blocchi (l'officina e' il modello, deciso il 13/08). */
/* Il modello e' il footer dell'officina: i blocchi distribuiti su UNA riga.
   Misurato il 13/08: con gap 56px la somma dei 4 blocchi piu' i tre spazi
   superava i 1192 disponibili su ristorante (1209), idraulico (1200) e
   geometra (1418), e il quarto blocco andava a capo — tre footer diversi.
   Gap a 32 e blocchi che possono stringersi: il testo lungo va a capo DENTRO
   il suo blocco invece di spingere il blocco alla riga sotto. */
.footer-inner { justify-content: space-between; gap: 24px 32px; }
.footer-inner > * { flex: 0 1 auto; min-width: 0; }
/* ⚠️ `flex-wrap: wrap` mandava il quarto blocco a capo PRIMA di lasciarlo
   stringere: con wrap il browser preferisce la riga nuova allo shrink. Sopra i
   900px la riga e' una sola e i blocchi si restringono da soli; sotto i 900
   resta la regola gia' esistente che li incolonna, quindi il telefono non
   cambia. Misurato il 13/08: il geometra ha il nome piu' lungo (465px) e senza
   questo restava l'unico footer su due righe. */
.footer-inner { flex-wrap: nowrap; }
@media (max-width: 900px) { .footer-inner { flex-wrap: wrap; } }

/* Sopra una griglia il sottotitolo non puo' essere centrato (titolo e schede
   restano a sinistra: verrebbero due assi), ma a 62ch lasciava 537px di vuoto
   a destra. A 960px il vuoto scende a 232 e la riga resta sotto i 95 caratteri
   che l'audit grafico considera il limite. Misurato il 13/08. */
.sezione > .container:has(.servizi-griglia, .passi, .cards, .gallery-foto) > .sottotitolo-sezione,
.container.sezione:has(.servizi-griglia, .passi, .cards, .gallery-foto) > .sottotitolo-sezione {
  max-width: 960px;
}
/* Una nota che chiude una scatola larga si allinea alla scatola, non alla
   colonna di lettura: su officina/scadenze stava a 748 sotto una griglia da
   1192 — il doppio bordo destro, misurato. */
.sezione > .container:has(.servizi-griglia, .cards) > .nota-obbligatori { max-width: none; }

/* =========================================================
   TESTO CENTRATO nelle sezioni di apertura e di chiusura
   ---------------------------------------------------------
   Chiesto da Cristian il 13/08 guardando le pagine: *«centra il promemoria e
   il suo testo»*, *«cosi' e' tutto geometrico»*. Misurato prima di toccare:
   gli assi erano gia' tutti a 711px, cioe' i blocchi ERANO centrati — quello
   che si vedeva storto erano i BORDI SINISTRI diversi (schede a x115, testo a
   x337). Centrare anche le righe chiude la simmetria.
   ⚠️ Perimetro stretto di proposito: SOLO l'intestazione di una pagina
   (`.sezione-intro`) e la sezione che chiude con un pulsante (`.azioni-centro`).
   Sono blocchi di 2-3 righe. ⛔ NON si estende ai testi lunghi — le privacy non
   hanno ne' l'una ne' l'altra classe (verificato su tutti e 5) e restano
   allineate a sinistra: un paragrafo lungo centrato ha il capo riga in un punto
   diverso a ogni riga e si legge peggio. */
/* ⚠️ `:not(:has(section, .elenco-menu, .scheda-dati))`: senza, la pagina del
   menu del ristorante rientrava tutta — ha il pulsante in fondo, quindi
   `.azioni-centro`, ma dentro ha CINQUE <section> di piatti, e i piatti sono
   usciti centrati. Trovato misurando `text-align` DOPO aver caricato, non
   prima: la regola precedente copriva due delle tre forme di markup e la
   terza (`.container.sezione`) era rimasta fuori — lo stesso errore di
   stamattina, ripetuto sulla stessa pagina. */
.sezione.sezione-intro > .container,
.sezione > .container:has(> .azioni-centro):not(:has(section, .elenco-menu, .scheda-dati)),
.container.sezione:has(> .azioni-centro):not(:has(section, .elenco-menu, .scheda-dati)) { text-align: center; }
/* le liste e le schede restano a sinistra anche dentro una sezione centrata,
   in TUTTE E TRE le forme di markup */
.sezione.sezione-intro > .container :is(ul,ol,dl,table),
.sezione > .container:has(> .azioni-centro) :is(ul,ol,dl,table),
.container.sezione:has(> .azioni-centro) :is(ul,ol,dl,table) { text-align: left; }

/* «Clima e elettronica»: l'ultima scheda dispari occupava tutta la riga e
   rompeva la geometria (2 + 2 + 1 largo il doppio). Resta sulla riga sua ma
   larga come le altre e centrata: 2 + 2 + 1 centrato. */
/* 🔴 CORRETTO IL 10/09/2026 — questa regola era SENZA media query, e sotto i
   640px la griglia e' a UNA colonna: `max-width: 50%` schiacciava l'ultima
   scheda a 165px su un telefono da 390px (misurato), col titolo che andava a
   capo lettera per lettera. Trovato da Cristian aprendo la demo dal telefono:
   nessun audit lo vedeva, perche' e' CSS valido e HTML valido.
   ➡️ Ora vale solo dove le colonne sono davvero due. Il punto di rottura e'
   641px perche' e' il complemento del `max-width: 640px` usato qui sopra: non
   e' un valore nuovo. ⛔ Prima di rimettere una larghezza percentuale su una
   griglia, si guarda la pagina a 390px. */
@media (min-width: 641px) {
  .servizi-griglia.griglia-2 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--spazio-5)) / 2);
    margin-inline: auto;
  }
}

/* ============================================================================
   TITOLI DI SEZIONE CENTRATI, E DI UNA MISURA SOLA — chiesto da Cristian il
   20/08/2026 guardando le pagine ONLINE (13 sezioni fotografate).
   ----------------------------------------------------------------------------
   ⚠️ La disuniformita' non era fra sezioni: era fra PROGETTI. Misurato prima di
   toccare, sulle pagine online: officina e ristorante usavano `.section-title`
   (36px, centrato, 44px sotto), sito / idraulico / geometra avevano l'h2 nudo
   (38px, a sinistra, 16px sotto). Due titoli di sezione diversi in cinque
   progetti che si presentano allo stesso cliente, e nessuno strumento lo vede.
   ✅ Deciso: una regola sola in CSS, `.section-title` tolto dai 4 punti che lo
   usavano (ristorante/index x2, officina/index x2). Ora la misura e' una.

   PERIMETRO — deciso da Cristian, non dedotto:
   ✅ si centrano SOLO il titolo e il sottotitolo di sezione;
   ⛔ paragrafi, elenchi e testo dentro le schede restano a SINISTRA — e' la
      decisione del 13/08/2026, che resta in piedi per la stessa ragione di
      allora (un paragrafo centrato ha il capo riga in un punto diverso a ogni
      riga e si legge peggio);
   ⛔ le pagine privacy restano fuori: sono testo legale lungo, e un titolo
      centrato sopra un paragrafo a sinistra fa due assi. L'esclusione non e'
      indovinata dal CSS, e' dichiarata nel markup con `.testo-legale` sul
      contenitore delle 5 privacy — un'esclusione che non si vede nel markup
      e' un'esclusione che il prossimo che tocca il file cancella per sbaglio.

   ⚠️ MISURATO, NON DEDOTTO — 20/08/2026. La regola e' stata iniettata in un
   iframe su TUTTE E 37 le pagine online e sono stati confrontati `text-align`,
   `font-size` e `margin-bottom` calcolati di OGNI elemento, prima contro dopo:
   90 elementi cambiano, 0 sulle 5 privacy, 0 sulle 5 pagine 404.
   Perimetro della misura: 1280px di larghezza, pagine online del 17/08.

   ⚠️ `> :is(h1, h2)` e' un figlio DIRETTO apposta: gli h2 che stanno DENTRO le
   schede (lavori, servizi, scadenze) sono nipoti e non si devono muovere. La
   terza riga (`> section > :is(h1,h2)`) serve al menu del ristorante, dove
   ogni categoria sta dentro un <section class="spazio-sopra"> e quindi il
   figlio diretto non la prende: e' la stessa trappola delle "due scritture
   diverse per la stessa cosa" gia' incontrata su `menu.astro` il 13/08.
   ⚠️ Su un browser senza `:has()` / `:is()` la pagina resta com'era: degrada,
   non si rompe.
   ============================================================================ */
:is(.sezione > .container, .container.sezione):not(.testo-legale) > :is(h1, h2):not(.titolo-sinistra),
:is(.sezione > .container, .container.sezione):not(.testo-legale) > .sottotitolo-sezione,
:is(.sezione > .container, .container.sezione):not(.testo-legale) > section > :is(h1, h2):not(.titolo-sinistra) {
  text-align: center;
  margin-inline: auto;
}

/* Dentro una sezione che il pulsante finale centra per intero (regola del
   13/08), il TESTO torna a sinistra: restano centrati solo titolo e
   sottotitolo, per la regola qui sopra.
   ⚠️ `:has(> h2)` non e' un vezzo: senza, la regola prendeva anche `grazie` e
   `404`, che sono blocchi di due righe nati per stare centrati — misurato, 6
   elementi su 10 pagine sbagliati. Un h2 dentro il contenitore e' il segno che
   li' c'e' un discorso lungo, non un messaggio breve.
   ⚠️ `p:not(.sottotitolo-sezione)`: `:has()` alza la specificita' quanto il suo
   argomento piu' pesante, quindi senza questa esclusione il sottotitolo
   tornava a sinistra vincendo sulla regola di sopra.
   ⚠️ `.servizio, .passo, .card`: e' il difetto della foto 12. Le schede dei
   passi del ristorante erano centrate mentre su idraulico e geometra sono a
   sinistra — e la stessa cosa capitava a officina/"Cosa facciamo", che nessuno
   aveva fotografato. La causa non e' la demo: e' questa regola. */
:is(.sezione > .container, .container.sezione):has(> .azioni-centro):has(> h2) > p:not(.sottotitolo-sezione),
:is(.sezione > .container, .container.sezione):has(> .azioni-centro) :is(.servizio, .passo, .card) {
  text-align: left;
}

/* Stacco sotto il titolo quando sotto c'e' una griglia e NON c'e' un
   sottotitolo a fare da respiro: e' il 44px che `.section-title` dava a
   officina e ristorante e che si sarebbe perso togliendo la classe.
   ⚠️ Legato alla griglia, non all'assenza di sottotitolo: la prima versione
   guardava solo "non ha un sottotitolo" e staccava di 44px anche i titoletti
   interni di `chi-sono`, allontanandoli dal paragrafo a cui appartengono
   (misurato: 10 elementi invece di 6). Un titolo si stacca da cio' che
   introduce solo se cio' che introduce e' un blocco, non una frase. */
:is(.sezione > .container, .container.sezione):not(.testo-legale) > h2:has(+ :is(.servizi-griglia, .passi, .cards, .gallery-foto)) {
  margin-bottom: 44px;
}


/* ═════════════════════════════════════════════════════════════════════════
   CENTRATURA — 12/09/2026, chiesta da Cristian guardando le pagine
   -------------------------------------------------------------------------
   Il foglio centrava gia' TITOLO e SOTTOTITOLO di ogni sezione (regola del
   20/08) ma lasciava a sinistra tutto il resto: su ogni pagina c'erano due
   assi, uno per il titolo e uno per il corpo. Qui il corpo segue il titolo.
   ⚠️ Detto una volta e non ripetuto: su un paragrafo di 4-5 righe le righe
   centrate partono da una x diversa ogni volta e si leggono peggio. Scelta
   di Cristian, presa vedendo l'alternativa (blocco centrato con righe a
   sinistra): centratura piena, colonna intera.
   ⛔ Restano FUORI, e non per dimenticanza:
      · `.testo-legale` — le privacy. Un testo legale lungo centrato non si
        legge, ed e' l'unica pagina che qualcuno deve poter rileggere riga
        per riga. L'esclusione esisteva gia', qui non si tocca.
      · i campi del modulo e le loro etichette (un'etichetta centrata sopra
        un campo largo non si capisce a quale campo appartiene).
      · gli elenchi con la spunta: la spunta deve stare incolonnata, o non
        e' piu' un elenco. Si centra il BLOCCO, non le righe.
   ⛔ Non tocca le demo: ognuna ha la sua copia di style.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 1. Il corpo della sezione segue il titolo --------------------------
   Le tre forme di markup sono le stesse gia' elencate nella regola del
   20/08 (`.sezione > .container`, `.container.sezione`, e il caso del menu
   del ristorante): se ne cambia una sola, una pagina resta indietro. */
:is(.sezione > .container, .container.sezione):not(.testo-legale) {
  text-align: center;
}

/* ⚠️ `margin-inline: auto` NON e' decorativo. `main p` ha
   `max-width: var(--misura-lettura)` (748px) senza margini automatici:
   dentro una colonna piu' larga — `.colonna-larga` misura 852px — il blocco
   resta incollato a sinistra e il testo viene centrato DENTRO un blocco non
   centrato, cioe' 52px fuori asse. E' lo stesso difetto corretto l'08/08 su
   `.page-header p`: senza questa riga tornerebbe identico su chi-sono e su
   servizi. */
:is(.sezione > .container, .container.sezione):not(.testo-legale) p {
  margin-inline: auto;
}

/* --- 2. Quello che deve restare allineato a sinistra --------------------
   Un elenco si centra spostando il BLOCCO, non le righe: `width: fit-content`
   lo stringe sul contenuto e `margin-inline: auto` lo mette in mezzo, cosi'
   le spunte restano incolonnate.
   ⚠️ `max-width: 100%` o su telefono la voce piu' lunga sfonda la colonna. */
:is(.sezione > .container, .container.sezione) :is(ul, ol, dl, table) {
  text-align: left;
}
:is(.sezione > .container, .container.sezione) .elenco-spunte {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Modulo: etichette, campi e note restano a sinistra. Un'etichetta centrata
   sopra un campo largo 620px non dice piu' a quale campo appartiene. */
:is(.sezione > .container, .container.sezione) :is(form, label, .campo, .nota-obbligatori, .messaggio-errore) {
  text-align: left;
}

/* --- 3. Le due regole del 13/08 che rimandavano il testo a sinistra -----
   Erano il complemento della centratura di allora: dentro una sezione
   centrata dal pulsante finale, il testo tornava a sinistra. Ora la scelta
   e' l'opposta, quindi vanno ribaltate — non cancellate: restano dove sono,
   con il loro commento, e qui vengono scavalcate a parita' di selettore
   (vince l'ultima). Chi legge il foglio dall'alto trova entrambe le storie. */
:is(.sezione > .container, .container.sezione):has(> .azioni-centro):has(> h2) > p:not(.sottotitolo-sezione),
:is(.sezione > .container, .container.sezione):has(> .azioni-centro) :is(.servizio, .passo, .card) {
  text-align: center;
}

/* --- 4. Schede -----------------------------------------------------------
   Vale ovunque: «Cosa faccio» in home, i pacchetti di Servizi, le schede
   delle demo. Gli elenchi dentro le schede seguono la regola 2. */
.servizio { text-align: center; }

/* --- 5. Colonna «Dove lavoro» (home) ------------------------------------
   `.zona-elenco` e' una riga flessibile di etichette: il `text-align` non
   la sposta, la sposta `justify-content`. */
.zona-elenco { justify-content: center; }

/* --- 6. «Come lavoro» — percorso orizzontale ----------------------------
   Prima: quattro colonne con il numero in alto a sinistra e il testo sotto,
   cioe' quattro blocchi affiancati che non dicevano di essere una sequenza.
   Ora i quattro numeri stanno in fila su una linea continua: si legge che
   il secondo viene dopo il primo.
   ⚠️ `grid-template-columns: repeat(4, 1fr)` fisso e non `auto-fit`: la
   linea di collegamento ha senso solo se i numeri stanno TUTTI sulla stessa
   riga. Con auto-fit, a 900px sarebbero diventati 3+1 e la linea avrebbe
   collegato il terzo al nulla.
   ⚠️ Sotto i 720px si incolonna e la linea sparisce: quattro cerchi da 44px
   piu' i testi non stanno in 390px, e un percorso che va a capo non e' piu'
   un percorso. */
@media (min-width: 721px) {
  .passi { grid-template-columns: repeat(4, 1fr); gap: var(--spazio-5); }
  .passo { position: relative; padding-top: 64px; }
  .passo::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
  }
  /* Il segmento di linea parte dal bordo destro del cerchio e arriva al
     bordo sinistro del cerchio dopo. `top: 21px` e' il centro di un cerchio
     alto 44 meno 1px di spessore della linea: sta sull'asse dei numeri, non
     sopra o sotto. */
  .passo::after {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(50% + 30px);
    right: calc(-50% + 30px);
    height: 2px;
    background: var(--bordo);
  }
  .passo:last-child::after { display: none; }
}
/* Su telefono il cerchio torna sopra il testo, centrato. */
@media (max-width: 720px) {
  .passo::before { margin-inline: auto; }
}

/* --- 7. Riquadro di chiusura -------------------------------------------
   `.richiamo` ha gia' il fondo scuro e il testo centrato. Qui si aggiunge
   solo il respiro fra il testo e il pulsante: nella home il pulsante e' un
   figlio diretto e prendeva i 16px di un paragrafo qualunque. */
.richiamo .btn { margin-top: var(--spazio-4); }
.richiamo p:last-of-type { margin-bottom: 0; }

/* --- 8. Pagina Contatti -------------------------------------------------
   Rifatta a colonna unica: vedi il commento in cima a contatti.astro per il
   perche'. Qui ci sono solo le misure. */
.contatti-colonna {
  max-width: 680px;
  margin-inline: auto;
}
/* Riga dell'email: e' il recapito vero, non una voce di elenco. Riquadro
   chiaro, indirizzo grande, pulsante «copia» accanto. */
.recapito-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-3);
  background: var(--fondo-chiaro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-lg);
  padding: var(--spazio-5);
  margin-bottom: var(--spazio-5);
}
.recapito-email a {
  font-size: var(--testo-xl);
  font-weight: 700;
  word-break: break-word;
}
.recapito-email .etichetta {
  display: block;
  width: 100%;
  font-size: var(--testo-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-2);
}

/* Il modulo ha `max-width: 620px` (regola del foglio, scritta quando stava in
   una colonna larga): dentro la colonna da 680px restava spostato di 30px a
   sinistra rispetto al titolo e al riquadro dell'email sopra — tre assi
   diversi, di nuovo. Qui la colonna e' gia' stretta, quindi il modulo la
   riempie. */
.contatti-colonna .modulo-contatti { max-width: none; }

/* La riga «Per chi oggi su internet non c'è.» era incollata alla prima voce
   dell'elenco: `.servizio p` ha `margin-bottom: 0` (serve quando il paragrafo
   CHIUDE la scheda) e nessuna regola rimetteva lo stacco quando sotto
   continua qualcosa. Misurato sui pacchetti di Servizi: 0px fra il paragrafo
   e la prima voce, contro i 12px fra una voce e l'altra. */
.servizio p + ul { margin-top: var(--spazio-4); }