/*
 * Lo stile di New Paint.
 *
 * I colori e i caratteri sono quelli della presentazione commerciale
 * (\\192.168.10.20\Documenti\COMMERCIALE): navy e arancio come il marchio.
 * Sito, presentazione e logo devono dire la stessa cosa — un cliente che
 * riceve la brochure e poi apre il sito deve riconoscere la stessa azienda.
 *
 * Sta in un file solo e non dentro ogni pagina: il browser lo scarica una
 * volta per tutte le nove pagine, e il giorno che si cambia un colore si
 * cambia qui.
 */

:root {
  --notte: #0E1A2E;
  --navy: #152440;
  --navy-2: #24344F;
  --arancio: #FF8000;
  --arancio-testo: #B85400;
  --carta: #FBFAF7;
  --carta-2: #F2EFE9;
  --testo: #16202F;
  --testo-2: #4C566B;
  --bordo: #E2DED6;
  --chiaro: #FFFFFF;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --corpo: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --tecnico: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --colonna: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--arancio-testo); }
img { max-width: 100%; }

.dentro { max-width: var(--colonna); margin: 0 auto; padding: 0 24px; }
.stretto { max-width: 46em; }
section { padding: 72px 0; }

/* L'occhiello sopra i titoli: in carattere tecnico, come i numeri delle fasi.
   Serve a dire di che sezione si tratta senza rubare il posto al titolo. */
.occhiello {
  font-family: var(--tecnico);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arancio-testo);
  margin: 0 0 .9em;
}

/* --------------------------------------------------------------- testata */
header { background: var(--chiaro); border-bottom: 1px solid var(--bordo); }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--colonna); margin: 0 auto; padding: 10px 24px;
}
/* Il marchio tondo, quello della presentazione e del gestionale: e' un bollo,
   quindi va alto piu' di un logo disteso o sparisce fra le voci del menu. */
.marchio { line-height: 0; }
.barra img { height: 84px; width: auto; }
/* Marchio a sinistra, menu in mezzo, telefono a destra: li tiene distanti il
   space-between della barra, non un margine automatico. */
.barra nav { display: flex; gap: 26px; flex: 0 0 auto; }
.barra nav a {
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: .97rem;
  white-space: nowrap;   /* «Cosa facciamo» e' una voce sola, non due righe */
}
.barra nav a:hover, .barra nav a[aria-current] { color: var(--arancio-testo); }

/* Il telefono nella testata e non in fondo: chi cerca un verniciatore ha il
   pezzo in mano e vuole chiamare, non compilare un modulo. */
.chiama {
  background: var(--navy); color: #fff !important; text-decoration: none;
  padding: 10px 18px; border-radius: 8px; font-weight: 600; white-space: nowrap;
}
.chiama:hover { background: var(--navy-2); }

/* -------------------------------------------------------------- aperture */
/* L'apertura e' chiara come il resto della pagina: nessuna scritta bianca su
   fondo scuro. Il blu dell'azienda resta dov'e' un colore e non uno sfondo per
   le parole — nel disegno, nella fascia dello spettrofotometro, nel piede. */
.apertura { background: var(--carta); }
.apertura h1, .apertura h2 { color: var(--navy); }
.apertura .occhiello { color: var(--arancio-testo); }
.apertura p { color: var(--testo-2); }
.apertura .dentro { padding-top: 64px; padding-bottom: 64px; }

/* Le aperture interne finiscono con una riga e non con un salto: prima le
   staccava il fondo blu, ora che sono chiare come la sezione dopo, senza una
   riga sembra solo un buco. */
.apertura:not(.alta) { border-bottom: 1px solid var(--bordo); }
.apertura:not(.alta) .dentro { padding-bottom: 40px; }

/* L'apertura della home: titolo e testo per primi, tutta la larghezza per il
   disegno sotto. Quelle interne no — una pagina di servizio deve entrare nel
   merito subito, non farsi guardare. */
.apertura.alta .dentro { padding-bottom: 0; }
.apertura.alta h1 {
  max-width: 15em;
  /* Le righe spezzate dove ha senso, non dove finisce lo spazio. */
  text-wrap: balance;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.apertura.alta p { font-size: 1.1rem; max-width: 38em; line-height: 1.6; }
.apertura.alta h1 + p { margin-top: 18px; }
.apertura figure { margin: 44px 0 0; }
.apertura figure img {
  width: 100%; height: auto; display: block;
  border-radius: 14px 14px 0 0; box-shadow: var(--ombra-alta);
}

/*
 * I quattro dati sotto il titolo della home: misura massima, finiture, lotti,
 * tempo di risposta. Sono le domande che un ufficio acquisti fa sempre per
 * prime.
 *
 * Erano una riga sola di discorso, in carattere tecnico: monospazio accanto al
 * paragrafo in Source Sans, con dentro grassetti e un collegamento, si leggeva
 * come un pezzo appiccicato da un'altra pagina — «sembra slegato, hanno
 * caratteri diversi», detto il 22 settembre 2026.
 *
 * Adesso sono quattro voci con lo stesso carattere del resto, staccate da un
 * punto arancione: si leggono come dati perche' sono in fila e separati, non
 * perche' cambia il carattere. Il monospazio resta all'occhiello, che e' un
 * accento solo per blocco.
 */
.dati {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--bordo);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  max-width: 46em;
  font-size: 1rem;
  color: var(--testo-2);
}
.dati li { position: relative; padding-left: 15px; }
.dati li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arancio);
}
.dati b { color: var(--testo); font-weight: 600; }
.dati a { color: var(--testo); text-decoration-color: var(--arancio); }

.briciole { font-size: .9rem; color: #8F8A7E; margin: 0 0 1.2em; }
.briciole a { color: var(--testo-2); text-decoration: none; }

/* -------------------------------------------------------------- bottoni */
.bottoni { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.bottone {
  /*
   * La scritta al centro della pastiglia, e non «quasi».
   *
   * I due tasti dei moduli — «Invia la richiesta», «Invia la candidatura» —
   * sono <button>, e su un button il browser non eredita l'interlinea del
   * corpo: prende la sua, che col carattere Source Sans lascia piu' spazio
   * sotto la riga di base che sopra. Risultato: la scritta sedeva un paio di
   * pixel piu' in alto del centro, e su una pastiglia arancione grande si
   * vede (detto in ufficio il 18 settembre 2026). Centrata per costruzione —
   * flex nei due versi, interlinea dichiarata — sta ferma dove deve in ogni
   * browser e anche nel PDF dell'anteprima.
   *
   * E niente stile di sistema: su iPhone Safari rimetterebbe il suo, con i
   * suoi margini interni.
   */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 9px;
  font-weight: 700; text-decoration: none; font-size: 1rem; border: 0; cursor: pointer;
  font-family: var(--corpo); line-height: 1.2; text-align: center;
  -webkit-appearance: none; appearance: none;
}
.bottone.pieno { background: var(--arancio); color: var(--notte); }
.bottone.vuoto { border: 1.5px solid #C4CAD6; color: var(--navy); background: var(--chiaro); }

/* --------------------------------------------------------------- numeri */
/* Al posto di «qualita superiore» e «tecnologie all'avanguardia»: i numeri.
   Un ufficio acquisti confronta fornitori, e gli aggettivi li ha gia' letti
   su tutti gli altri siti. */
.numeri { background: var(--carta-2); border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo); }
.numeri .dentro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px;
  padding-top: 34px; padding-bottom: 34px;
}
.numero b {
  display: block; font-family: var(--display); font-size: 2.3rem;
  line-height: 1; color: var(--navy); letter-spacing: -.02em;
}
.numero span { font-size: .95rem; color: var(--testo-2); }

/* -------------------------------------------------------------- schede */
.servizi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.carta {
  background: var(--chiaro); border: 1px solid var(--bordo); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  color: inherit;
}
.carta:hover { border-color: var(--arancio); }
.carta img { width: 100%; height: 200px; object-fit: cover; display: block; }
.carta .testo { padding: 22px 24px 26px; }
.carta h3 { margin-bottom: .4em; color: var(--navy); }
.carta p { font-size: .98rem; color: var(--testo-2); margin: 0; }

/* ---------------------------------------------------------------- fasi */
/* Le fasi numerate: la domanda vera di chi compra e' cosa succede al suo
   pezzo da quando lo manda a quando torna. */
.fasi { counter-reset: fase; display: grid; gap: 2px; margin-top: 36px; }
.fase {
  counter-increment: fase; background: var(--chiaro); border: 1px solid var(--bordo);
  padding: 20px 24px; display: grid; grid-template-columns: 54px 1fr; gap: 20px;
  align-items: baseline;
}
.fase::before {
  content: counter(fase, decimal-leading-zero);
  font-family: var(--tecnico); font-size: 1.05rem; color: var(--arancio-testo);
}
.fase b { font-family: var(--display); font-size: 1.05rem; }
.fase span { color: var(--testo-2); display: block; font-size: .98rem; }

/* --------------------------------------------------------- fascia scura */
.scura { background: var(--navy); color: #fff; }
.scura .dentro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding-top: 72px; padding-bottom: 72px;
}
.scura h2 { color: #fff; }
.scura p { color: #C9D2E0; }
.scura .occhiello { color: var(--arancio); }
/* Un collegamento sul fondo blu: l'arancione scuro delle scritte normali su
   navy non si legge (2,4 a 1). Qui vale l'arancione pieno. */
.scura a { color: var(--arancio); }
.scura img { width: 100%; border-radius: 12px; display: block; }

/* --------------------------------------------------------- due colonne */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.due-colonne .elenco { margin-top: 0; }

/* Un blocco di tre righe in mezzo alla pagina: messo a sinistra come tutto il
   resto sembrerebbe un paragrafo rimasto orfano. */
.blocco-centrato { max-width: 34em; margin: 0 auto; text-align: center; }
.blocco-centrato p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- elenchi */
.elenco { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.elenco li { padding-left: 28px; position: relative; color: var(--testo-2); }
.elenco li::before {
  content: '—'; position: absolute; left: 0; color: var(--arancio-testo);
  font-family: var(--tecnico);
}
.elenco li b { color: var(--testo); }

/* ------------------------------------------------------------ supporti */
/* Le sigle dei materiali: pastiglie in carattere tecnico, come si leggono su
   una scheda. Sono un elenco, non dei bottoni — non si cliccano. */
.materiali { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 32px; }
.gruppo > b {
  font-family: var(--tecnico); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--testo-2);
}
.sigle { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sigle li {
  font-family: var(--tecnico); font-size: .9rem; color: var(--navy);
  background: var(--chiaro); border: 1px solid var(--bordo); border-radius: 999px;
  padding: 7px 15px; white-space: nowrap;
}

/* ------------------------------------------------------------ contatti */
.contatti { background: var(--carta-2); }
.contatti .dentro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.riga-contatto { margin-bottom: 18px; }
.riga-contatto b {
  display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--testo-2); font-family: var(--tecnico);
}
.riga-contatto a, .riga-contatto span {
  font-size: 1.2rem; color: var(--navy); text-decoration: none; font-weight: 600;
}

/* -------------------------------------------------------------- moduli */
/* Le etichette stanno **sopra** le caselle e restano li'. Dentro la casella
   spariscono appena si scrive, e a meta' modulo non si sa piu' cosa si sta
   riempiendo — su un telefono succede sempre. */
.modulo { display: grid; gap: 18px; margin-top: 28px; }
.modulo .due { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input, .campo textarea {
  font-family: var(--corpo); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--bordo); border-radius: 8px; background: var(--chiaro);
  color: var(--testo); width: 100%;
}
.campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--arancio); outline-offset: 1px; border-color: var(--arancio);
}
.campo textarea { min-height: 140px; resize: vertical; }
/*
 * L'esito dell'invio, sopra il modulo.
 *
 * Lo scrive il PHP del server — «messaggio inviato», oppure che cosa non è
 * andato — e finora non aveva uno stile: usciva come un paragrafo qualsiasi in
 * mezzo agli altri, cioè non si vedeva. Verde quando è fatta, rosso quando no,
 * e in tutti e due i casi largo quanto il modulo.
 */
.esito {
  margin: 0 0 4px; padding: 10px 14px; border-radius: 8px;
  font-size: .95rem; font-weight: 600;
  border: 1px solid var(--bordo); background: var(--carta-2); color: var(--testo);
}
.esito.ok { border-color: #2E7D32; background: #EAF5EB; color: #1B5E20; }
.esito.error { border-color: #C62828; background: #FBEAEA; color: #B71C1C; }

/*
 * Il riquadro della casella anti-robot: sta fra la nota e il tasto, e ha una
 * misura sua che non si tocca. Serve solo a dargli aria intorno.
 */
.h-captcha { margin: 6px 0 2px; }

/*
 * La nota sulla privacy: piccola.
 *
 * Deve starci — dice dove sono scritte le regole — ma non e' quel che si legge
 * scrivendo a un fornitore, e larga come il testo del modulo si prendeva
 * l'attenzione dell'ultima riga, che e' del tasto. Corpo da stampato fine,
 * sotto il modulo e in disparte.
 */
.nota-modulo {
  font-size: .75rem; line-height: 1.45; color: var(--testo-2); margin-bottom: .4em;
}

/* --------------------------------------------------------- testi lunghi */
/* Privacy e trasparenza: si leggono, non si guardano. Colonna stretta,
   titoletti che si distinguono, e niente altro intorno. */
.documento { max-width: 40em; }
.documento h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy); margin-top: 2em; font-family: var(--tecnico); font-weight: 600;
}
.documento h2:first-of-type { margin-top: 0; }
.documento p { color: var(--testo-2); }

footer { background: var(--notte); color: #8E9AAD; font-size: .9rem; padding: 26px 0; }
footer .dentro { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: #C9D2E0; text-decoration: none; }
footer .poi { margin-left: auto; }

/* ------------------------------------------------------------- telefono */
/* Chi guarda un fornitore lo guarda dal telefono, spesso in reparto: tutto
   quel che sopra sta in due colonne, qui sta in una sola. */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .apertura.doppia .dentro, .scura .dentro, .contatti .dentro,
  .modulo .due { grid-template-columns: 1fr; gap: 32px; }
  .modulo .due { gap: 18px; }
  .numeri .dentro { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .servizi, .materiali, .due-colonne { grid-template-columns: 1fr; }
  .barra { flex-wrap: wrap; gap: 12px; }
  .barra img { height: 62px; }
  .barra nav { flex-wrap: wrap; }
  .barra nav { width: 100%; gap: 18px; }
  section { padding: 52px 0; }
}

/* Chi ha lo schermo scuro: gli stessi colori della presentazione. */
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #0E1A2E; --carta-2: #142238; --testo: #F2F0EB; --testo-2: #A9B4C6;
    --bordo: #2A3A55; --chiaro: #142238; --arancio-testo: #FFA347;
  }
  .barra nav a, .numero b, .riga-contatto a, .riga-contatto span,
  .carta h3, .documento h2 { color: var(--testo); }
  /*
   * ⚠️ E tutto il resto che sullo schermo chiaro è scritto in blu navy.
   *
   * `--navy` non si può ribaltare: è anche il fondo della fascia scura e del
   * tasto del telefono, e girandolo si romperebbero quelli. Quindi si
   * correggono i posti dove fa da **scritta**, uno per uno — ed erano i due
   * peggiori: il titolone dell'apertura, che su ogni pagina è la prima cosa
   * che si legge, e il tasto vuoto accanto a «Mandateci un pezzo», blu su
   * fondo blu. Visto da telefono il 18 settembre 2026: il telefono sta in
   * tema scuro, il computer dell'ufficio no, ed è per questo che da noi non
   * si vedeva.
   */
  .apertura h1, .apertura h2 { color: var(--testo); }
  .apertura .occhiello { color: var(--arancio); }
  .bottone.vuoto {
    color: var(--testo); background: var(--carta-2); border-color: var(--bordo);
  }
  .sigle li { color: var(--testo); background: var(--carta-2); }
  .fase b, .fase h3 { color: var(--testo); }
  /* La fascia scura su una pagina già scura: si stacca col bordo, non col
     colore, o diventa un rettangolo che non si distingue dal resto. */
  .scura { border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
}

/* ======================================================================
   MOVIMENTO E FINITURA
   Le cose si muovono per dire qualcosa: una scheda si alza perche' e'
   cliccabile, una sezione entra scorrendo perche' e' appena arrivata. Tutto
   sotto il mezzo secondo, e tutto si spegne per chi ha chiesto al sistema di
   non far muovere niente.
   ====================================================================== */

:root {
  --ombra: 0 1px 2px rgba(21, 36, 64, .05), 0 8px 24px -12px rgba(21, 36, 64, .18);
  --ombra-alta: 0 2px 6px rgba(21, 36, 64, .07), 0 22px 44px -18px rgba(21, 36, 64, .28);
  --scatto: .28s cubic-bezier(.2, .7, .3, 1);
}

/* Il contorno di chi naviga con il tasto TAB: si vede, ed e' arancione come
   tutto il resto. Il :focus-visible lo mostra solo a chi usa la tastiera. */
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; border-radius: 4px; }

a, .bottone, .carta, .fase { transition: color var(--scatto), background var(--scatto),
  border-color var(--scatto), transform var(--scatto), box-shadow var(--scatto); }

/* Le voci del menu: la riga arancione cresce da sinistra invece di comparire
   di colpo, e resta ferma sotto la pagina in cui si e'. */
.barra nav a { position: relative; padding-bottom: 3px; }
.barra nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--arancio); transform: scaleX(0); transform-origin: left;
  transition: transform var(--scatto);
}
.barra nav a:hover::after, .barra nav a[aria-current]::after { transform: scaleX(1); }

.chiama:hover { transform: translateY(-1px); box-shadow: var(--ombra-alta); }
.bottone:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.bottone.pieno:hover { background: #FF9326; }
.bottone.vuoto:hover { border-color: var(--arancio); }

/* Le schede dei servizi: si sollevano, e la foto dentro si avvicina appena.
   L'overflow:hidden della scheda tiene lo zoom dentro il bordo arrotondato. */
.carta { box-shadow: var(--ombra); }
.carta img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.carta:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); }
.carta:hover img { transform: scale(1.04); }

.fase:hover { border-color: var(--arancio); background: #fff; }
.apertura figure img, .scura img { box-shadow: var(--ombra-alta); }

/* L'apparizione allo scorrere, senza una riga di javascript: il browser lega
   l'animazione alla posizione dell'elemento nella finestra. Dove non c'e'
   (Firefox, per ora) non succede niente e la pagina resta quella di prima —
   e' per questo che sta dentro un @supports e non in un file a parte. */
@supports (animation-timeline: view()) {
  .servizi > *, .fasi > *, .numeri .numero, .scura .dentro > *, .contatti .dentro > * {
    animation: entra linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .carta:hover, .bottone:hover, .chiama:hover { transform: none; }
}