/* ==========================================================================
   CARROZZERIA F.LLI COSTANTINI — Lanciano (CH) · sistema visivo
   --------------------------------------------------------------------------
   TESI
   In una carrozzeria è opaco tutto, tranne una cosa sola. Il capannone è
   grigio fondo, il mastice è tirato a spatola e carteggiato finché non
   smette di brillare, il nastro di mascheratura tiene il confine fra quello
   che si rifà e quello che resta. Poi il pezzo esce dalla cabina e per la
   prima volta riflette: sulla fiancata appena verniciata la luce del neon
   corre dritta, in una riga sola. Da lì nasce tutto: fondo di primer, testo
   di grafite, e un solo blu — quello del riflesso sul lucido.

   Conseguenze, decise prima del codice:
   · Il blu è l'unico colore vivo e vuol dire una cosa sola, «qui si agisce»:
     bottone di chiamata, anello di focus, riga del riflesso, nastro del dato
     che manca. Mai decorazione, mai due significati.
   · Una sola superficie scura in tutta la pagina — la cabina di verniciatura.
     Compare una volta, sotto la sezione del preventivo, e serve al contrasto
     che il primer non ha.
   · Niente ombre grigie da «card che galleggia»: nel capannone la luce è
     diffusa apposta, perché sotto una luce a macchie il colore non si giudica.
     L'unica elevazione ammessa è la riga di blu sotto il bottone principale.
   · Gli angoli sono appena smussati (12 fuori, 6 dentro): una lamiera piegata
     non ha lo spigolo vivo, ma nemmeno il raggio di una bolla.
   · I bordi sono le luci fra un pezzo e l'altro: capelli da 1px, non cornici.

   PALETTE E RUOLI
   Superfici   Primer      #ecefee  fondo della pagina
               Carteggiato #e3e7e6  sezioni rialzate, riquadri, passi
               Mastice     #d9dedc  pannelli e righe interne
               Cabina      #151b1d  unica superficie scura, usata una volta
   Testo       Tratto      #151b1d  primario
               Grafite     #48524f  secondario
               Limatura    #576160  etichette maiuscole (gradino più chiaro)
               Luce        #eef2f1  testo sul fondo scuro, dentro il bottone
               Nebbia      #b9c3c0  secondario sul solo fondo scuro
   Azione      Blu, rampa di cinque gradini:
               #0b3556 premuto · #0f4368 pieno e anello · #12507c testo
               #7fb6dd sulla cabina · #a3cdea :hover sulla sola cabina
   Tipografia  Franklin Gothic (insegna: titoli, etichette, bottoni)
               + Constantia (foglio: prosa, il preventivo scritto a macchina)
   Scala       12 · 14 · 17 · 19 · 23 · 30 · 40 · 56 · 72
   Ritmo       base 4px · dentro un gruppo 8/12px · tra gruppi 32/64/96px
   Forme       r12 esterno, r6 interno, 6px di padding fra i due (concentrici)

   CONTRASTI MISURATI (WCAG 2.1, formula, non stima — ogni coppia sul fondo
   su cui viene davvero renderizzata)
     Tratto su primer ............ #151b1d su #ecefee = 15.04:1   AAA
     Tratto su carteggiato ....... #151b1d su #e3e7e6 = 13.96:1   AAA
     Tratto su mastice ........... #151b1d su #d9dedc = 12.79:1   AAA
     Grafite su primer ........... #48524f su #ecefee = 6.99:1    AAA
     Grafite su carteggiato ...... #48524f su #e3e7e6 = 6.49:1    AA
     Grafite su mastice .......... #48524f su #d9dedc = 5.95:1    AA
     Limatura su primer .......... #576160 su #ecefee = 5.53:1    AA
     Limatura su carteggiato ..... #576160 su #e3e7e6 = 5.13:1    AA
     Limatura su mastice ......... #576160 su #d9dedc = 4.70:1    AA
     Blu su primer ............... #12507c su #ecefee = 7.36:1    AAA
     Blu su carteggiato .......... #12507c su #e3e7e6 = 6.83:1    AA
     Blu su mastice .............. #12507c su #d9dedc = 6.26:1    AA
     Blu-pieno su primer ......... #0f4368 su #ecefee = 8.97:1    AAA
     Blu-pieno su carteggiato .... #0f4368 su #e3e7e6 = 8.32:1    AAA
     Blu-pieno su mastice ........ #0f4368 su #d9dedc = 7.63:1    AAA
     Luce dentro il bottone ...... #eef2f1 su #0f4368 = 9.20:1    AAA
     Luce sul bottone premuto .... #eef2f1 su #0b3556 = 11.22:1   AAA
     Luce sulla cabina ........... #eef2f1 su #151b1d = 15.42:1   AAA
     Nebbia sulla cabina ......... #b9c3c0 su #151b1d = 9.64:1    AAA
     Blu-luce sulla cabina ....... #7fb6dd su #151b1d = 7.99:1    AAA
     Cabina sul bottone chiaro ... #151b1d su #7fb6dd = 7.99:1    AAA
     Cabina sul bottone premuto .. #151b1d su #a3cdea = 10.34:1   AAA

   I nastri [DA CONFERMARE] portano con sé un velo di blu al 9%: vanno
   misurati sul COMPOSITO, non sulla superficie nuda.
     Blu-pieno su velo+primer .... #0f4368 su #d8e1e4 = 7.81:1    AAA
     Blu-pieno su velo+cartegg. .. #0f4368 su #d0d9dc = 7.24:1    AAA
     Blu-pieno su velo+mastice ... #0f4368 su #c7d1d3 = 6.67:1    AA
     Blu-luce su velo+cabina ..... #7fb6dd su #222e34 = 6.39:1    AA

   La cabina ha un gradiente — il riflesso del neon sulla parete. La coppia
   va verificata sul punto PIÙ CHIARO del gradiente (#233034), non sul fondo
   dichiarato.
     Luce su punto chiaro ........ #eef2f1 su #233034 = 12.05:1   AAA
     Nebbia su punto chiaro ...... #b9c3c0 su #233034 = 7.53:1    AAA
     Blu-luce su punto chiaro .... #7fb6dd su #233034 = 6.24:1    AA

   Nessun testo sotto 4.5:1 e nessun bordo di controllo sotto 3:1. Il caso
   peggiore in pagina è 4.70:1 (Limatura sul mastice): sotto quella soglia
   non si scende, e se una coppia non passa si corregge la LUMINOSITÀ, mai
   la tinta — come si fa con una tinta metallizzata che non copre.
   ========================================================================== */

:root{
  /* — Superfici. Tre di primer, una di cabina. Mai una quinta — */
  --primer:      #ecefee;
  --carteggiato: #e3e7e6;
  --mastice:     #d9dedc;
  --cabina:      #151b1d;

  /* — Testo: grigi freddi con un filo di verde, mai neri puri. Il nero
       assoluto su un fondo di primer fa un buco, come una velatura
       stesa senza fondo sotto. Limatura è il gradino più chiaro (5.53:1). — */
  --tratto:   #151b1d;
  --grafite:  #48524f;
  --limatura: #576160;
  --luce:     #eef2f1;
  --nebbia:   #b9c3c0;

  /* — Blu: la rampa d'azione. Un colore, un significato — */
  --blu-premuto: #0b3556;
  --blu-pieno:   #0f4368;
  --blu:         #12507c;
  --blu-luce:    #7fb6dd;   /* solo sulla cabina */
  --blu-chiaro:  #a3cdea;   /* solo :hover sulla cabina */
  --blu-velo:    rgba(18, 80, 124, 0.09);
  --blu-riga:    rgba(11, 53, 86, 0.30);

  /* — Bordi: le luci fra un pezzo e l'altro. Capelli, non cornici — */
  --luce-filo:   rgba(21, 27, 29, 0.16);
  --luce-tenue:  rgba(21, 27, 29, 0.08);
  --luce-cabina: rgba(238, 242, 241, 0.18);

  /* — Caratteri. Due famiglie sole, accoppiate per contrasto vero:
       il grottesco è l'insegna dipinta sopra la serranda, il serif è il
       preventivo battuto a macchina e appoggiato sul banco. — */
  --insegna: "Franklin Gothic Medium", "Franklin Gothic", "Trebuchet MS", Candara, system-ui, sans-serif;
  --foglio:  Constantia, Cambria, "Palatino Linotype", ui-serif, Georgia, serif;

  /* — Scala tipografica — */
  --t12:12px; --t14:14px; --t17:17px; --t19:19px; --t23:23px;
  --t30:30px; --t40:40px; --t56:56px; --t72:72px;

  /* — Ritmo, base 4 — */
  --s4:4px;   --s6:6px;   --s8:8px;   --s12:12px; --s16:16px;
  --s24:24px; --s32:32px; --s48:48px; --s64:64px; --s96:96px;

  /* — Forme concentriche: 6 dentro + 6 di aria = 12 fuori — */
  --r-interno:4px; --r-medio:6px; --r-esterno:12px;

  /* — Curva d'entrata. Sull'interfaccia non si usa mai la curva che parte
       piano: fa sembrare che il click non sia arrivato. — */
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);

  --banco:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--primer);
  color:var(--tratto);
  font-family:var(--foglio);
  font-size:var(--t17);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block}

/* Il grottesco fa l'insegna: titoli, etichette, bottoni, cifre dei passi.
   Nella prosa non entra mai — lì il carattere è quello del foglio. */
h1,h2,h3,.marchio__nome{
  font-family:var(--insegna);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
h1{font-size:clamp(34px, 6.6vw, var(--t72))}
h2{font-size:clamp(25px, 4.4vw, var(--t40))}
h3{font-size:var(--t19);letter-spacing:-0.01em}
p{text-wrap:pretty}
em{font-style:italic}

/* Constantia di serie stampa cifre minuscole di stile antico: su un numero
   di telefono e su una targhetta di dati sono illeggibili. Qui le cifre
   tornano alte e a larghezza fissa, così «0872 714381» non cambia forma
   da un blocco all'altro. */
.cifre{
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:0.01em;
}

/* Anello di focus: 2px pieni di blu, staccati di 2. Verificato su tutte e
   tre le superfici chiare (7.63:1 la peggiore). Sulla cabina passa al
   blu-luce (7.99:1). Nessun outline viene mai tolto senza sostituto. */
:focus-visible{
  outline:2px solid var(--blu-pieno);
  outline-offset:2px;
}
.cabina :focus-visible,.chiama-fisso:focus-visible{outline-color:var(--blu-luce)}

.salta{
  position:absolute;left:var(--s12);top:-72px;z-index:20;
  background:var(--cabina);color:var(--luce);
  padding:var(--s12) var(--s16);border-radius:var(--r-medio);
  font-family:var(--insegna);font-size:var(--t14);font-weight:600;
  text-decoration:none;
  transition:transform 160ms var(--uscita);
}
.salta:focus-visible{transform:translateY(84px)}

/* ---------- Impalcatura ---------- */
.banco{width:100%;max-width:var(--banco);margin-inline:auto;padding-inline:var(--s24)}
@media (max-width:420px){.banco{padding-inline:var(--s16)}}

/* Il divario TRA gruppi non scende mai sotto il doppio di quello DENTRO:
   96/64 fuori, 32 fra i blocchi di una sezione, 8/12 dentro un blocco. */
main{display:block}
.campata{padding-block:var(--s96)}
.campata--carteggiata{background:var(--carteggiato);border-block:1px solid var(--luce-tenue)}
.sezione{display:flex;flex-direction:column;gap:var(--s32)}
.testata{display:flex;flex-direction:column;gap:var(--s12);max-width:64ch}
.conduce{font-size:var(--t19);color:var(--grafite);max-width:66ch;line-height:1.55}

/* ---------- Etichetta: grottesco maiuscolo, tracking positivo ---------- */
.etichetta{
  font-family:var(--insegna);
  font-size:var(--t12);
  font-weight:600;
  line-height:1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--limatura);
}
.etichetta--luce{color:var(--blu-luce)}

/* ---------- Il nastro di mascheratura.
     Non è un errore ed è la cosa più onesta della pagina: segna il confine
     fra quello che so e quello che deve dirmi il titolare, esattamente come
     il nastro segna il confine fra il pezzo da rifare e quello che resta.
     Tre segnali insieme — colore blu, bordo tratteggiato, parentesi quadre
     nel testo — così vale anche per chi il colore non lo distingue.
     Il testo è blu-PIENO e non blu: il nastro porta il proprio velo, e su
     una riga già velata il gradino più chiaro perderebbe terreno. -------- */
.nastro{
  display:inline-block;
  padding:2px var(--s6);
  border:1px dashed var(--blu-pieno);
  border-radius:var(--r-interno);
  color:var(--blu-pieno);
  background:var(--blu-velo);
  font-family:var(--insegna);
  font-size:var(--t14);
  font-weight:600;
  letter-spacing:0.02em;
}
.nastro--luce{
  color:var(--blu-luce);
  border-color:var(--blu-luce);
  background:rgba(127,182,221,0.12);
}
.nastro-riga{margin-top:var(--s8)}

/* ---------- Segni disegnati a mano: un solo stile in tutto il sito,
     tratto 1.5 accanto al testo regular, 2 dentro i bottoni (semibold),
     currentColor, nessun file esterno, nessuna emoji. ------------------- */
.segno{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.segno--largo{width:22px;height:22px}
.bottone .segno{stroke-width:2}

/* ---------- Bottoni. Uno solo pieno per schermata: quello che chiama ---- */
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16)}

.bottone{
  display:inline-flex;align-items:center;gap:var(--s8);
  min-height:48px;
  padding:var(--s12) var(--s24);
  border:1px solid transparent;
  border-radius:var(--r-medio);
  font-family:var(--insegna);
  font-size:var(--t17);
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  transition:background-color 150ms ease, transform 120ms var(--uscita),
             box-shadow 150ms ease, border-color 150ms ease;
}
/* L'unica elevazione della pagina: una riga di blu sotto il bottone, come
   il filo di luce che resta sotto un pezzo appoggiato sul cavalletto. */
.bottone--blu{
  background:var(--blu-pieno);
  color:var(--luce);
  box-shadow:0 2px 0 var(--blu-riga);
}
.bottone--chiaro{
  background:var(--blu-luce);
  color:var(--cabina);
  box-shadow:0 2px 0 rgba(21,27,29,0.45);
}
.bottone--corto{padding-inline:var(--s16);min-height:44px}
.bottone:active{transform:scale(0.96)}
.bottone--blu:active{background:var(--blu-premuto)}
.bottone--chiaro:active{background:var(--blu-chiaro)}

/* Il filo è il link dentro il testo: sottolineatura vera, mai «clicca qui» */
.filo{
  display:inline-flex;align-items:center;gap:var(--s6);
  min-height:44px;
  font-family:var(--insegna);
  font-size:var(--t17);font-weight:600;
  color:var(--blu);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color 150ms ease;
}
.filo--luce{color:var(--blu-luce)}
.filo--basso{min-height:0;font-size:var(--t14)}

/* ---------- Barra alta ---------- */
.testa{border-bottom:1px solid var(--luce-tenue);background:var(--primer)}
.testa__riga{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);
  min-height:72px;
}
.marchio{display:flex;align-items:baseline;gap:var(--s8);text-decoration:none;padding-block:var(--s8)}
.marchio__nome{font-size:var(--t23);letter-spacing:-0.01em}
.marchio__anno{
  font-family:var(--insegna);
  font-size:var(--t12);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--limatura);
}
/* 24px fra voci di solo testo, come vuole la regola per i controlli senza bordo */
.voci{display:none;gap:var(--s24)}
.voci a{
  display:inline-block;padding-block:var(--s12);
  font-family:var(--insegna);font-size:var(--t14);font-weight:600;
  color:var(--grafite);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 150ms ease, border-color 150ms ease;
}
@media (min-width:900px){.voci{display:flex}}

/* ---------- Apertura ---------- */
.apertura{
  background:var(--carteggiato);
  border-bottom:1px solid var(--luce-tenue);
  overflow:hidden;
  position:relative;
}
.apertura__griglia{ position:relative; z-index:1; }
.apertura__griglia{
  display:grid;grid-template-columns:1fr;gap:var(--s48);
  padding-block:var(--s64) var(--s48);
}
@media (min-width:960px){
  .apertura__griglia{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s64);align-items:center}
}
.apertura__testo{display:flex;flex-direction:column;gap:var(--s24);min-width:0}
.apertura__testo .etichetta+h1{margin-top:calc(var(--s8) * -1)}

/* La targhetta: pannello di mastice, righe interne r6 dentro r12 con 6px
   d'aria. I raggi sono concentrici, non scelti a occhio. */
.targhetta{
  background:var(--mastice);
  border:1px solid var(--luce-filo);
  border-radius:var(--r-esterno);
  padding:var(--s6);
  min-width:0;
}
.targhetta__titolo{
  font-family:var(--insegna);font-size:var(--t14);font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--limatura);
  padding:var(--s16) var(--s16) var(--s12);
}
.targhetta__lista{display:flex;flex-direction:column;gap:var(--s4)}
.targhetta__voce{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s8);
  background:var(--primer);
  border-radius:var(--r-medio);
  padding:var(--s12) var(--s16);
}
.targhetta__voce dt{
  font-family:var(--insegna);font-size:var(--t14);font-weight:600;
  color:var(--grafite);
}
.targhetta__voce dd{margin:0;text-align:right;overflow-wrap:anywhere}
.targhetta__piede{padding:var(--s12) var(--s16) var(--s16);font-size:var(--t14);color:var(--grafite)}

/* ---------- Il disegno: la fiancata sul cavalletto.
     Un pannello con le sue luci, il nastro di mascheratura che taglia in
     due, la zona ancora in fondo carteggiato sotto il nastro, e sopra la
     riga dritta del neon — l'unica cosa che riflette nel capannone.
     Disegnato a mano, tratto 1.5, nessuna foto e nessuna icona scaricata. */
.fiancata{
  display:block;width:100%;max-width:540px;height:auto;margin-inline:auto;
  fill:none;stroke:var(--grafite);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.f-scocca{stroke-width:2}
.f-luci{stroke:var(--limatura)}
.f-nastro{stroke:var(--blu);stroke-width:2;stroke-dasharray:11 7}
.f-fondo{stroke:var(--limatura);opacity:0.55}
.f-riflesso{stroke:var(--blu);stroke-width:2.5}
.f-cavalletto{stroke:var(--limatura)}
.fiancata figcaption{font-size:var(--t14)}
/* La seconda colonna dell'apertura tiene insieme due cose - il disegno e la
   targhetta - e deve restare UNA cella sola: se diventassero due celle, la
   griglia a due colonne andrebbe a capo. */
.disegno-lato{display:flex;flex-direction:column;gap:var(--s24);min-width:0}
.disegno{display:flex;flex-direction:column;gap:var(--s12);min-width:0}
.disegno figcaption{font-size:var(--t14);color:var(--grafite);text-align:center}

/* ---------- Riquadri: che cosa si fa qui ---------- */
.riquadri{display:grid;grid-template-columns:1fr;gap:var(--s16)}
@media (min-width:660px){.riquadri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.riquadri{grid-template-columns:repeat(3,minmax(0,1fr))}}
.riquadro{
  display:flex;flex-direction:column;gap:var(--s8);
  min-width:0;
  padding:var(--s24);
  background:var(--primer);
  border:1px solid var(--luce-tenue);
  border-left:3px solid var(--blu);
  border-radius:var(--r-medio);
}
.riquadro__cima{display:flex;align-items:center;gap:var(--s8);color:var(--blu)}
.riquadro p{font-size:var(--t17);color:var(--grafite)}

/* ---------- Avviso: qui la pagina smette di parlare al cliente e parla
     al titolare. È l'unico blocco della pagina che dà del «voi». -------- */
.avviso{
  display:flex;gap:var(--s12);
  max-width:74ch;
  padding:var(--s16);
  background:var(--blu-velo);
  border:1px solid var(--blu);
  border-radius:var(--r-medio);
}
.avviso p{font-size:var(--t17)}
.avviso .segno{color:var(--blu);margin-top:3px}

/* ---------- I passi: da «porto l'auto» a «la riprendo» ---------------- */
.passi{display:grid;grid-template-columns:1fr;gap:var(--s16);counter-reset:passo}
@media (min-width:700px){.passi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.passi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.passo{
  display:flex;flex-direction:column;gap:var(--s8);
  min-width:0;
  padding:var(--s24);
  background:var(--carteggiato);
  border-top:2px solid var(--blu);
  border-radius:0 0 var(--r-medio) var(--r-medio);
}
.campata--carteggiata .passo{background:var(--primer)}
.passo__cifra{
  font-family:var(--insegna);font-size:var(--t30);font-weight:600;
  line-height:1;color:var(--blu);
  font-variant-numeric:lining-nums tabular-nums;
}
.passo p{color:var(--grafite)}

/* ---------- La cabina: unica superficie scura della pagina.
     Il gradiente è il neon che batte sulla parete sopra il pezzo appeso:
     interpolato in oklab, altrimenti passando per l'sRGB il blu vira al
     grigio sporco. La prima dichiarazione è la scialuppa per i browser che
     l'interpolazione non ce l'hanno. --------------------------------- */
.cabina{
  background:var(--cabina);
  background-image:radial-gradient(115% 85% at 82% 0%, #233034 0%, var(--cabina) 60%);
  background-image:radial-gradient(115% 85% at 82% 0%, in oklab, #233034 0%, var(--cabina) 60%);
  color:var(--luce);
  border-block:1px solid var(--luce-cabina);
}
.cabina h2,.cabina h3{color:var(--luce)}
.cabina p{color:var(--nebbia);max-width:66ch}
.cabina__testo{display:flex;flex-direction:column;gap:var(--s16)}
.cabina__firma{
  font-size:var(--t23);line-height:1.45;color:var(--luce);
  max-width:60ch;
  padding-left:var(--s24);
  border-left:2px solid var(--blu-luce);
}
.cabina .azioni{margin-top:var(--s16)}
.cabina__coppia{display:grid;grid-template-columns:1fr;gap:var(--s24);margin-top:var(--s32)}
@media (min-width:760px){.cabina__coppia{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32)}}
.cabina__voce{display:flex;flex-direction:column;gap:var(--s8);min-width:0}

/* ---------- Dove siamo e quando ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s32)}
@media (min-width:900px){.visita{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s48)}}
.visita__colonna{display:flex;flex-direction:column;gap:var(--s12);min-width:0}
.indirizzo{font-size:var(--t19)}
.nota{font-size:var(--t14);color:var(--grafite)}

.quando{display:flex;flex-direction:column;gap:var(--s4)}
.quando li{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s8);
  padding:var(--s12) var(--s16);
  border-radius:var(--r-medio);
  background:var(--mastice);
}
.quando span:first-child{font-family:var(--insegna);font-size:var(--t14);font-weight:600;color:var(--grafite)}

.recapito{display:flex;flex-direction:column;gap:var(--s16)}
.recapito__voce{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.recapito__voce dt{font-family:var(--insegna);font-size:var(--t14);font-weight:600;color:var(--limatura)}
.recapito__voce dd{margin:0;overflow-wrap:anywhere}

/* ---------- Piede ---------- */
.piede{
  padding-block:var(--s48) var(--s96);
  border-top:1px solid var(--luce-tenue);
}
.piede__interno{display:flex;flex-direction:column;gap:var(--s12)}
.piede__credito{font-size:var(--t14);color:var(--limatura);max-width:62ch}

/* ---------- La chiamata fissa: solo dove c'è un pollice.
     È l'unico bottone pieno che resta a schermo, e resta perché su una
     carrozzeria l'azione è una sola: sapere quanto viene e quando. ------ */
.chiama-fisso{
  position:fixed;left:var(--s12);right:var(--s12);bottom:var(--s12);z-index:10;
  display:flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:52px;
  padding:var(--s12) var(--s16);
  background:var(--blu-pieno);
  color:var(--luce);
  border-radius:var(--r-medio);
  box-shadow:0 6px 20px rgba(21,27,29,0.30);
  font-family:var(--insegna);font-size:var(--t17);font-weight:600;
  text-decoration:none;
  transition:transform 120ms var(--uscita), background-color 150ms ease;
}
.chiama-fisso:active{transform:scale(0.96);background:var(--blu-premuto)}
@media (min-width:900px){.chiama-fisso{display:none}}
@media (max-width:899px){.piede{padding-bottom:calc(var(--s96) + var(--s24))}}

/* ==========================================================================
   MOVIMENTO
   Base: le cose salgono di 12px e si accendono. 220ms, curva d'uscita,
   sfalsate di 60ms via --rit. Solo transform e opacity. Tutto sotto i 300ms.

   Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa), sempre
   dentro gli stessi vincoli:
   · .rivela--righe — le righe di un gruppo (nav, targhette, orari, recapiti,
     piede) entrano a cascata di ~50ms l'una dall'altra;
   · .neon — il riflesso del neon che corre dritto sulla fiancata appena
     verniciata: una riga di luce blu che attraversa l'apertura una volta
     ogni 13s, dietro il contenuto, spenta del tutto a movimento ridotto;
   · micro-reazioni hover su riquadri, passi, voci della cabina, righe.
   ========================================================================== */
.rivela{
  transition:opacity 220ms var(--uscita), transform 220ms var(--uscita);
  transition-delay:var(--rit, 0ms);
}
html.anima .rivela{opacity:0;transform:translateY(12px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Cascata sulle righe di un gruppo. Il gruppo è anche .rivela: entra lui,
   poi i figli uno dopo l'altro. Sei gradini bastano, dal settimo si resta
   fermi a 290ms per non far aspettare. */
html.anima .rivela--righe > *{opacity:0;transform:translateY(9px)}
html.anima .rivela--righe.dentro > *{
  opacity:1;transform:none;
  transition:opacity 210ms var(--uscita), transform 210ms var(--uscita);
}
html.anima .rivela--righe.dentro > *:nth-child(1){transition-delay:30ms}
html.anima .rivela--righe.dentro > *:nth-child(2){transition-delay:80ms}
html.anima .rivela--righe.dentro > *:nth-child(3){transition-delay:130ms}
html.anima .rivela--righe.dentro > *:nth-child(4){transition-delay:180ms}
html.anima .rivela--righe.dentro > *:nth-child(5){transition-delay:230ms}
html.anima .rivela--righe.dentro > *:nth-child(6){transition-delay:270ms}
html.anima .rivela--righe.dentro > *:nth-child(n+7){transition-delay:290ms}

/* Il riflesso del neon. Non è un fondo e non è l'azione: è una riga di luce
   che passa una volta e se ne va, dietro tutto, senza intercettare il
   puntatore. Vive solo dove il movimento è ammesso. */
.neon{display:none}
@media (prefers-reduced-motion: no-preference){
  .neon{
    display:block;position:absolute;inset:0;
    overflow:hidden;pointer-events:none;z-index:0;
  }
  .neon::before{
    content:"";position:absolute;
    top:-30%;bottom:-30%;left:0;width:9%;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(127,182,221,0.14) 42%,
      rgba(163,205,234,0.22) 52%,
      transparent 100%);
    /* durata dichiarata: luce ambientale continua, non un feedback UI;
       lineare e lenta perché è un riflesso che scorre, non una risposta. */
    animation:neon-corsa 13s linear infinite;
  }
}
@keyframes neon-corsa{
  0%   {transform:translateX(-15vw) skewX(-16deg);opacity:0}
  12%  {opacity:1}
  86%  {opacity:1}
  100% {transform:translateX(120vw) skewX(-16deg);opacity:0}
}

/* Il movimento su :hover esiste solo dove c'è davvero un puntatore fine. */
@media (hover: hover) and (pointer: fine){
  .bottone--blu:hover{background:var(--blu-premuto);transform:translateY(-1px)}
  .bottone--chiaro:hover{background:var(--blu-chiaro);transform:translateY(-1px)}
  .filo:hover{color:var(--blu-premuto)}
  .filo--luce:hover{color:var(--blu-chiaro)}
  .voci a:hover{color:var(--blu);border-bottom-color:var(--blu)}
  .chiama-fisso:hover{background:var(--blu-premuto)}

  .riquadro,.passo,.cabina__voce,.targhetta__voce{
    transition:transform 160ms var(--uscita);
  }
  .riquadro:hover,.passo:hover,.cabina__voce:hover{transform:translateY(-3px)}
  .targhetta__voce:hover{transform:translateX(2px)}
  .quando li{transition:transform 140ms var(--uscita)}
  .quando li:hover{transform:translateX(2px)}
}

/* Chi ha «riduci movimento» acceso non riceve .anima: pagina intera e ferma
   al primo disegno. Questo blocco spegne anche il resto. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  html.anima .rivela,
  html.anima .rivela--righe > *{opacity:1;transform:none}
  .neon{display:none}
}

/* Sicurezza doppia: se il JavaScript non parte, .rivela non riceve mai
   .dentro. Senza questa riga mezza pagina resterebbe invisibile. */
html:not(.anima) .rivela,
html:not(.anima) .rivela--righe > *{opacity:1;transform:none}