/* ═══════════════════════════════════════════════════════════════════════════
   IACOBONE · Alvito (FR)
   Rifatto da zero il 15/08/2026.

   PERCHÉ È COSÌ.
   La prima versione era fondo quasi nero con un accento arancione: è il look
   che farebbe qualunque generatore automatico, ed è esattamente quello vietato.
   Questa è l'inversione: la pagina è CHIARA, di carta, e il buio serve da
   punteggiatura — due sezioni, non il tono di tutto.

   I CARATTERI hanno un motivo, non sono un gusto.
   · Titoli in BODONI. Giambattista Bodoni, Parma: il carattere italiano per
     eccellenza, alto contrasto, quello che si usa quando una cosa deve
     sembrare curata. Chi lava a mano vende esattamente questo, e nessun altro
     autolavaggio lo userebbe mai. Sotto i 22px Bodoni non compare: illeggibile.
   · Testo in Instrument Sans: preciso, neutro, si legge bene piccolo.

   IL COLORE viene dalla loro macchina, non da una tavolozza: il portale
   Stargate S6 è NERO E ROSSO — si vede nelle loro foto. Da lì il rosso; dalla
   calce dei paesi della valle la carta. Le varianti sono calcolate
   (build/palette.py), non scelte a occhio.

   IL MOVIMENTO ha una regola sola: deve essere il movimento della COSA, non
   un effetto addosso alla cosa. L'acqua scende, il tempo si riempie, la
   fotografia si avvicina come una macchina da presa. Niente entra "volando".
   Con «movimento ridotto» si azzera tutto, in fondo al file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⛔ QUESTA RIGA VA PRIMA DI TUTTO IL RESTO E NON SI TOCCA.
   L'attributo `hidden` del browser vale `display:none`, ma è una regola del
   foglio predefinito: QUALUNQUE nostra classe con un `display` dentro la
   scavalca. Senza questa riga, `.agenda{display:flex}` vinceva su `hidden` e il
   calendario restava a schermo VUOTO quando l'agenda non risponde — cioè
   esattamente nel momento in cui aveva promesso di sparire. Trovato provando a
   nasconderlo davvero, non leggendo il codice. */
[hidden]{display:none !important}

:root{
  --carta:#F6F2EA;
  --carta-2:#EDE7DB;
  --carta-3:#DFD6C6;
  --notte:#12161A;
  --notte-2:#1B2126;

  --rosso:#A81E14;          /* il rosso del loro portale — 6,57:1 su carta */
  --rosso-cupo:#8E1810;     /* 8,22:1 su carta */
  --rosso-chiaro:#E06A5C;   /* 5,53:1 su notte */
  --acqua:#2F5A6B;          /* 6,73:1 su carta */

  --inchiostro:#14181A;     /* 16,00:1 su carta */
  --inchiostro-2:#4B5458;   /* 6,94:1 su carta */
  --latte:#F6F2EA;
  --latte-2:#B2BDC0;        /* 9,46:1 su notte */
  --latte-3:#8E9BA0;        /* 6,36:1 su notte */

  --testata:62px;
  --barra:66px;
  --filo:1px solid color-mix(in srgb, var(--inchiostro) 20%, transparent);
  --filo-tenue:1px solid color-mix(in srgb, var(--inchiostro) 11%, transparent);
  --filo-scuro:1px solid color-mix(in srgb, var(--latte) 18%, transparent);

  --tit:'Bodoni', 'Bodoni MT', Didot, 'Times New Roman', serif;
  --testo:'Instrument', ui-sans-serif, system-ui, sans-serif;

  --margine:clamp(20px, 5.5vw, 88px);
  --colonna:min(1320px, 100%);
  --molla:cubic-bezier(.16,.84,.28,1);
}
@media (min-width:1024px){ :root{ --testata:70px; --barra:0px; } }

*,*::before,*::after{box-sizing:border-box}
/* ⛔ LO SCORRIMENTO MORBIDO STAVA SU TUTTO, E NON DOVEVA.
   `scroll-behavior:smooth` su <html> non riguarda solo i link d'àncora: rende
   lento e animato OGNI spostamento, compresi quelli che il sito fa da sé e
   quelli che chiede il browser. Effetto misurato: chiedendo di andare a 780 px
   la pagina si fermava a 532, perché lo spostamento successivo interrompeva il
   precedente e il ritardo si accumulava — e mentre la pagina era in viaggio la
   barra di chiamata cambiava stato a ogni fotogramma, lampeggiando.
   Lo scorrimento morbido serve in un caso solo: quando uno tocca una voce del
   menù. Lì lo fa il JavaScript, che sa di doverlo fare. Tutto il resto è
   immediato, come dev'essere. Senza JavaScript le àncore saltano di netto:
   funzionano lo stesso, e nessuno se ne lamenta. */
html{-webkit-text-size-adjust:100%;background:var(--carta)}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--testo);font-size:clamp(16.5px,1.06rem,18.5px);line-height:1.62;
  font-synthesis-weight:none;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:2px}

h1,h2{font-family:var(--tit);font-weight:500;line-height:1.0;letter-spacing:-.012em;
  margin:0;text-wrap:balance}
h3,h4{font-family:var(--testo);font-weight:660;line-height:1.18;letter-spacing:-.014em;margin:0}
p{margin:0}

.dentro{width:var(--colonna);margin-inline:auto;padding-inline:var(--margine)}

main>section{
  min-height:calc(100svh - var(--testata) + 2px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(54px,8vh,110px);
  scroll-margin-top:calc(var(--testata) + 2px);
  position:relative;
}
main>section.chiara{background:var(--carta);color:var(--inchiostro)}
main>section.carta{background:var(--carta-2);color:var(--inchiostro)}
main>section.scura{background:var(--notte);color:var(--latte)}
main>section+section{border-top:1px solid transparent}
main>section.chiara+section.chiara,
main>section.carta+section.carta{border-top:var(--filo)}
main>section.scura+section.scura{border-top:var(--filo-scuro)}

/* ── cappello di sezione: numerale in Bodoni + filetto che si tira ───────── */
.cappello{margin-bottom:clamp(28px,4vh,54px)}
.riga-numero{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.numero{font-family:var(--tit);font-weight:500;font-size:clamp(30px,4.2vw,52px);
  line-height:.8;color:var(--rosso);flex:0 0 auto;letter-spacing:-.02em}
.scura .numero{color:var(--rosso-chiaro)}
.etichetta{font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:640;
  flex:1 1 auto;min-width:0;padding-bottom:5px;position:relative}
.etichetta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--inchiostro) 20%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--molla)
}
.viva .etichetta::after{transform:scaleX(1)}
.chiara .etichetta,.carta .etichetta{color:var(--inchiostro-2)}
.scura .etichetta{color:var(--latte-3)}
.scura .etichetta::after{background:color-mix(in srgb,var(--latte) 22%,transparent)}

.cappello h2{font-size:clamp(34px,6.4vw,76px);max-width:19ch}
.cappello .occhiello{font-size:clamp(17px,1.16rem,21px);max-width:58ch;line-height:1.55;margin-top:18px}
.chiara .occhiello,.carta .occhiello{color:var(--inchiostro-2)}
.scura .occhiello{color:var(--latte-2)}
.occhiello strong{color:var(--inchiostro);font-weight:640}
.scura .occhiello strong{color:var(--latte)}

/* ── comparsa: solo un velo e due centesimi di risalita. Lo stato di partenza
      esiste SOLO se il JavaScript c'è (html.js), altrimenti il sito è fermo,
      non vuoto. ─────────────────────────────────────────────────────────── */
html.js .sale{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--molla), transform .8s var(--molla)}
html.js .sale.viva{opacity:1;transform:none}
html.js .sale.r2{transition-delay:.08s}
html.js .sale.r3{transition-delay:.16s}

/* ── testata ────────────────────────────────────────────────────────────── */
.testata{
  position:sticky;top:0;z-index:60;height:var(--testata);
  background:rgba(246,242,234,.94);
  backdrop-filter:saturate(1.2) blur(10px);
  color:var(--inchiostro);border-bottom:var(--filo);display:flex;align-items:center;
}
.testata .dentro{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.marchio{display:flex;align-items:baseline;gap:10px;text-decoration:none;
  color:var(--inchiostro);min-width:0;min-height:46px;align-items:center}
.marchio b{font-family:var(--tit);font-weight:500;font-size:clamp(22px,2.8vw,29px);
  letter-spacing:.005em;white-space:nowrap;line-height:1}
/* ⛔ «IACOBONE» DA SOLO NON DICE NIENTE.
   Marco l'ha visto dal telefono: in cima c'era il nome e basta. Chi arriva da
   una ricerca o da un link mandato in chat non sa se è un'officina, un bar o
   un cognome — e la parola che deve leggere per prima è proprio quella che
   mancava: AUTOLAVAGGIO. Stava nascosta sotto i 1500 px, cioè su tutto tranne
   i monitor grandi. Ora c'è sempre: sotto il nome sui telefoni (due righe che
   stanno comode nei 62 px della testata), di fianco appena c'è spazio.
   ⚠️ Il carattere non scende sotto i 13,5 px del sito: sui telefoni la riga
   si stringe con la spaziatura, non con la misura. */
.marchio{flex-direction:column;align-items:flex-start;gap:1px;justify-content:center}
.marchio span{display:block;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--inchiostro-2);white-space:nowrap;font-weight:600;line-height:1}
.marchio b{line-height:1.02}
@media (min-width:700px){
  .marchio{flex-direction:row;align-items:baseline;gap:10px}
  .marchio span{letter-spacing:.17em}
}

.voci{display:none}
@media (min-width:1024px){
  .voci{display:flex;align-items:center;gap:2px}
  .voci a{text-decoration:none;font-size:14px;font-weight:520;color:var(--inchiostro-2);
    padding:10px 11px;border-radius:4px;line-height:1.2;position:relative;white-space:nowrap}
  .voci a::after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:1px;
    background:var(--rosso);transform:scaleX(0);transform-origin:left;
    transition:transform .32s var(--molla)}
  .voci a:hover{color:var(--inchiostro)}
  .voci a:hover::after{transform:scaleX(1)}
  .voci a.chiamata{background:var(--rosso);color:#fff;font-weight:640;margin-left:10px;padding:11px 17px}
  .voci a.chiamata::after{display:none}
}

/* ⛔ IL «CHIAMA» DELLA TESTATA E QUELLO DELLA BARRA NON STANNO INSIEME.
   Trovato guardando una schermata dell'iPad in piedi: sulla prenotazione si
   vedevano DUE tasti «Chiama» nella stessa schermata, uno in cima e uno in
   fondo. La regola del sito è sempre stata «o la barra, o un pulsante nel
   contenuto, mai tutti e due» — ma quella regola guardava solo dentro <main>,
   e la testata le passava sotto il naso. Adesso si danno il cambio: quando la
   barra sale, la pastiglia si spegne; quando la barra scende, torna. Uno solo,
   sempre uno.
   Si spegne con visibility e opacity, NON con display: così il posto resta
   occupato e la testata non si riassesta a ogni scorrimento.
   `margin-left:auto` la manda accanto al panino: prima, con lo spazio di una
   tavoletta, restava a mezz'aria in mezzo alla testata e sembrava un errore
   di impaginazione. */
.solo-telefono{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 15px;border-radius:5px;flex:0 0 auto;background:var(--rosso);color:#fff;
  text-decoration:none;font-weight:640;font-size:14.5px;
  margin-left:auto;margin-right:10px;
  transition:opacity .24s ease, visibility .24s ease}
.solo-telefono i{font-style:normal}
.solo-telefono i::before{content:'Chiama'}
html.con-barra .solo-telefono{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:1024px){ .solo-telefono{display:none} }

/* ⛔ LA STESSA REGOLA VALE PER IL COMPUTER, E FINORA NON VALEVA.
   Sul telefono la pastiglia si spegneva quando saliva la barra; sul computer
   la barra non c'è, quindi non si spegneva mai — e nella prima schermata
   uscivano «Chiama 349 288 7330» nella testata e «Chiama 349 288 7330» nella
   copertina, stesse identiche parole a cento pixel di distanza. Adesso la
   regola è una sola e la applica il JavaScript: finché il contenuto offre un
   pulsante di chiamata INTERO a schermo, la testata tace.
   Si spegne con visibility, non con display: la testata non si riassesta e
   il resto delle voci non balla. */
html.chiama-nel-corpo .voci a.chiamata,
html.chiama-nel-corpo .solo-telefono{
  opacity:0;visibility:hidden;pointer-events:none}
/* senza JavaScript la classe non arriva mai: resta tutto com'è, e il numero
   nella testata c'è comunque. Meglio un doppione che un sito muto. */

.panino{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  width:46px;height:46px;flex:0 0 auto;border-radius:5px;
  background:color-mix(in srgb,var(--inchiostro) 8%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.panino i{display:block;width:20px;height:2px;background:var(--inchiostro);border-radius:2px;
  transition:transform .26s var(--molla), opacity .2s ease}
.panino[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.panino[aria-expanded="true"] i:nth-child(2){opacity:0}
.panino[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1024px){ .panino{display:none} }

.menu{position:fixed;inset:var(--testata) 0 0 0;z-index:55;background:var(--carta);
  color:var(--inchiostro);overflow-y:auto;overscroll-behavior:contain;display:none;
  padding:10px var(--margine) calc(30px + env(safe-area-inset-bottom))}
.menu.aperto{display:block}
@media (min-width:1024px){ .menu{display:none !important} }
.menu ol{list-style:none;margin:0;padding:0}
.menu li{border-bottom:var(--filo-tenue)}
html.js .menu.aperto li{opacity:0;transform:translateY(10px);animation:vocemenu .42s var(--molla) forwards}
@keyframes vocemenu{to{opacity:1;transform:none}}
.menu.aperto li:nth-child(1){animation-delay:.02s}
.menu.aperto li:nth-child(2){animation-delay:.05s}
.menu.aperto li:nth-child(3){animation-delay:.08s}
.menu.aperto li:nth-child(4){animation-delay:.11s}
.menu.aperto li:nth-child(5){animation-delay:.14s}
.menu.aperto li:nth-child(6){animation-delay:.17s}
.menu.aperto li:nth-child(7){animation-delay:.20s}
.menu.aperto li:nth-child(8){animation-delay:.23s}
.menu.aperto li:nth-child(9){animation-delay:.26s}
.menu.aperto li:nth-child(10){animation-delay:.29s}
.menu a{display:flex;align-items:baseline;gap:16px;min-height:56px;padding:15px 2px;
  text-decoration:none;color:var(--inchiostro);
  font-family:var(--tit);font-weight:500;font-size:26px;letter-spacing:-.01em}
.menu a .n{font-size:13.5px;letter-spacing:.1em;color:var(--rosso);font-weight:700;
  min-width:26px;flex:0 0 auto;font-family:var(--testo)}
/* ⛔ SUGLI SCHERMI PICCOLI IL MENÙ SI STRINGE, NON SI ALLUNGA.
   Visto guardando la schermata del panino su un iPhone SE da 320: a 26px le
   voci lunghe vanno a capo, ogni voce diventa alta 85px e sullo schermo ne
   entrano CINQUE su nove. «Prenota un posto» — la voce che vale più di tutte —
   restava sotto, e per trovarla bisogna sapere che c'è altro sotto. Su un 390
   ci stanno tutte e nove, ed è la prova che il problema non è il menù: è la
   misura del carattere su quel po' di schermo. Qui si restringe quel tanto che
   basta a farle stare su una riga sola, e i 48px di bersaglio restano interi.
   ⚠️ Anche in orizzontale: un telefono sdraiato ha 375-430 px di altezza, che
   è meno di un SE in piedi. */
@media (max-width:375px), (max-height:560px){
  .menu a{font-size:20.5px;min-height:48px;padding:10px 2px;gap:12px}
  /* ⚠️ il numeretto NON scende: 13,5px è il pavimento del sito e vale anche
     qui. Ci ero passato sotto (12,5px) per guadagnare due pixel di larghezza,
     e il banco me l'ha ributtato indietro su quattro dispositivi. Giusto così:
     una regola che si piega quando fa comodo non è una regola. */
  .menu a .n{font-size:13.5px;min-width:22px}
  .menu .azioni a{min-height:50px;font-size:15.5px}
  .menu .azioni{margin-top:14px}
}
.menu a[aria-current]{color:var(--rosso)}
.menu .fuori a{color:var(--acqua)}
.menu .fuori a .n{color:var(--acqua)}
.menu .azioni{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;min-width:0}
.menu .azioni>*{min-width:0}
.menu .azioni a{justify-content:center;border-radius:6px;min-height:58px;font-size:16.5px;
  font-family:var(--testo);font-weight:640}
.menu .azioni .tel{background:var(--rosso);color:#fff}
.menu .azioni .wa{background:#17754C;color:#fff}
.menu .coda{margin-top:22px;font-size:13.6px;color:var(--inchiostro-2);line-height:1.6}

/* ── pulsanti ───────────────────────────────────────────────────────────── */
/* «btn» non serve a niente in questo foglio: serve a chi LEGGE la pagina
   da fuori. Il collaudo cerca il primo invito all'azione fra
   `a[href^=tel:]`, `a[href*=wa.me]`, `.btn` e `button` — e il pulsante
   principale di questo sito non era nessuno dei quattro: un <a> verso
   #prenota senza etichette. Risultato: il collaudo cercava l'invito
   molto più in basso e diceva «primo pulsante sotto la piega, 6060px».
   Non aveva torto: da fuori quel pulsante non si dichiarava. Adesso sì. */
.azione,.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 24px;border-radius:5px;text-decoration:none;
  font-weight:640;font-size:16.5px;line-height:1.25;max-width:100%;text-align:center;
  transition:transform .18s var(--molla), box-shadow .18s var(--molla), filter .18s ease}
.azione:hover{transform:translateY(-2px)}
.azione:active{transform:translateY(0)}
.azione.piena{background:var(--rosso);color:#fff}
.azione.piena:hover{box-shadow:0 8px 22px -8px color-mix(in srgb,var(--rosso) 70%,transparent)}
.azione.wa{background:#17754C;color:#fff}
.azione.wa:hover{box-shadow:0 8px 22px -8px rgba(23,117,76,.7)}
.azione.vuota{border:2px solid currentColor}
.chiara .azione.vuota,.carta .azione.vuota{color:var(--inchiostro)}
.scura .azione.vuota{color:var(--latte)}
.azione.largo{width:100%}
.azioni-riga{display:flex;flex-wrap:wrap;gap:12px;max-width:100%;min-width:0}

/* ── 01 · copertina ─────────────────────────────────────────────────────────
   Il push-in cinematografico: la fotografia si avvicina lentissima, come una
   macchina da presa su un carrello. È l'unico "effetto" ammesso sulle loro
   foto vere, e non aggiunge né toglie un pixel a quello che c'è dentro. */
#lavoro{padding-block:0;padding-inline:0;display:flex;flex-direction:column;
  height:calc(100svh - var(--testata));justify-content:stretch;background:var(--notte)}

/* LA SCENA — la fotografia riempie la prima schermata intera e il titolo ci sta
   SOPRA. Non e' una fascia di testo con la foto sotto: e' una copertina.
   Il contrasto del testo non e' lasciato alla fortuna della fotografia: sotto
   le scritte c'e' un velo con un fondo pieno dichiarato (`background-color`),
   quindi il rapporto e' calcolabile e verificabile, non "sembra leggibile".
   La fotografia e' larga 1440 px VERI: e' il massimo che Instagram restituisce,
   e oltre il 5% di ingrandimento si vede. Percio' l'immagine nitida si ferma a
   1500 px e oltre quella misura il bordo lo riempie la stessa foto sfuocata:
   a fuoco non si potrebbe, sfuocata nessuno puo' accorgersene. */
/* Il titolo sta IN ALTO sopra la fotografia, non in fondo. Due motivi, e sono
   tutti e due verificabili. Il primo: nella loro foto la parte bella e' il
   cofano rosso con il getto, e sta in mezzo — coprirla con un pannello sarebbe
   sprecare la fotografia; sopra c'e' il muro del capannone, che non serve a
   nessuno. Il secondo: con il titolo in fondo, a mezza schermata di
   scorrimento si vedevano insieme il titolo della copertina e quello della
   sezione dopo, e il collaudo lo segnalava con ragione — due titoli che
   litigano nella stessa schermata. Cosi' il titolo esce di scena prima che
   arrivi il successivo. */
#lavoro .scena{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:var(--notte);isolation:isolate;width:100%;
  display:flex;flex-direction:column;justify-content:flex-start}
#lavoro .scena>picture{position:absolute;inset:0;display:block;
  width:100%;max-width:1500px;margin-inline:auto;left:0;right:0;z-index:1}

/* ── LA CORNICE, oltre i 1500 px ──────────────────────────────────────────
   La fotografia è larga 1440 pixel VERI: è tutto quello che Instagram
   restituisce, e allargarla oltre il 5% la ammorbidisce — su una copertina si
   vede. Quindi oltre quella misura NON si stira e NON si mette un fondale
   sfuocato dietro (l'ho provato: sembra un cerotto). Si fa la cosa che si fa
   in tipografia da sempre: si monta la fotografia come una TAVOLA, centrata
   nel suo campo, con un filo intorno e il margine che porta il righello delle
   tacche — lo stesso segno della sezione del tempo, che è il motivo grafico
   di tutto il sito. Non è un ripiego mascherato: è una scelta che si vede.

   Le due soglie sono diverse APPOSTA, e non è pignoleria:
     · 1501 px  la fotografia smette di riempire la finestra → da qui in poi è
                una lastra, quindi prende il filo e il velo le si stringe addosso;
     · 1600 px  il margine diventa largo almeno 50 px → solo ORA può portare
                qualcosa. Sotto quella misura le tacche sarebbero un'unghia di
                righello e il nome verticale uscirebbe tagliato a metà lettera
                dall'`overflow:hidden`: sembrerebbe un errore, non un margine.
   Le avevo messe insieme a 1521 e fra 1521 e 1600 veniva fuori esattamente
   quel pasticcio. Si misura, non si indovina. */
@media (min-width:1501px){
  #lavoro .scena>picture{
    box-shadow:0 0 0 1px color-mix(in srgb, var(--latte) 22%, transparent),
               0 34px 90px -34px rgba(0,0,0,.85);
  }
  /* ⛔ IL VELO SI FERMA DOVE FINISCE LA FOTOGRAFIA.
     Se resta largo quanto la finestra succedono due cose, e le ho viste tutte
     e due a 2560: il pannello scuro sborda sul campo delle tacche e la tavola
     non si legge piu' come un oggetto solo — sembrano due rettangoli appoggiati
     uno sull'altro; e il `backdrop-filter` va a sfocare anche il fondo scuro
     laterale, che essendo quasi nero tira su un rettangolo grigiastro dietro
     al titolo. Ancorandolo alla lastra spariscono insieme.
     La sfumatura sotto e' figlia del velo (left:0/right:0), quindi lo segue
     da sola: non va toccata. */
  #lavoro .velo{max-width:1500px;margin-inline:auto}
}
@media (min-width:1600px){
  #lavoro .scena{
    background-color:var(--notte);
    background-image:
      repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--latte) 13%, transparent) 0 1px, transparent 1px 13px);
    background-position:center calc(var(--testata) * -1);
  }
  /* il margine non resta muto: porta il nome, in piccolo, come la costa di un
     libro. Sta a sinistra perché è da lì che si comincia a leggere. */
  #lavoro .scena::after{
    content:'IACOBONE · dettagli autolavaggio';
    position:absolute;left:0;top:50%;z-index:2;
    width:calc((100% - 1500px) / 2);
    transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
    text-align:center;white-space:nowrap;overflow:hidden;
    font-size:13.6px;letter-spacing:.34em;text-transform:uppercase;font-weight:640;
    color:var(--latte-3);pointer-events:none;
  }
}
/* schermo largo ma basso (il portatile con le schede aperte, il proiettore):
   il nome verticale non ci sta in altezza e verrebbe tagliato. Sparisce. */
@media (min-width:1600px) and (max-height:560px){ #lavoro .scena::after{display:none} }
#lavoro .banda{min-height:0}
/* IL CARRELLO. Prima era uno `scale`, ed era sbagliato per due motivi che si
   vedono solo misurando: un elemento trasformato ha un riquadro trasformato,
   quindi la foto risultava piu' larga della finestra e piu' bassa della piega;
   e ingrandire una fotografia oltre i suoi pixel veri la ammorbidisce davvero.
   Qui la macchina da presa si muove SULLA fotografia invece di ingrandirla:
   scorre l'inquadratura, non la stira. Geometria immobile, nessun pixel
   inventato, stesso effetto. */
#lavoro .scena picture{display:block;width:100%;height:100%}
/* L'inquadratura si ferma in alto: cosi' restano dentro il getto e il cofano,
   e la targa sfocata scivola sotto il bordo invece di stare in mezzo. */
#lavoro .scena img{width:100%;height:100%;object-fit:cover;object-position:50% 4%}
html.js #lavoro .scena img{animation:carrello 26s ease-out both}
@keyframes carrello{from{object-position:50% 22%}to{object-position:50% 4%}}

/* IL VELO. Il fondo pieno e' dichiarato in `background-color`, non affidato a
   un gradiente: cosi' il rapporto di contrasto e' un numero che si calcola, e
   il collaudo lo verifica davvero invece di indovinarlo sopra una fotografia.
   Il gradiente sopra serve solo a far sfumare il bordo alto del velo. */
#lavoro .velo{position:relative;z-index:2;width:100%;
  background-color:rgba(9,11,13,.80);
  -webkit-backdrop-filter:blur(3px) saturate(.9);backdrop-filter:blur(3px) saturate(.9)}
/* La sfumatura sta SOTTO il velo, non dentro: cosi' il pannello non ha un bordo
   netto che taglia la fotografia in due, e sfuma dentro la carrozzeria. */
#lavoro .velo::after{content:'';position:absolute;left:0;right:0;top:100%;
  height:clamp(90px,18vh,190px);pointer-events:none;
  background-image:linear-gradient(to bottom, rgba(9,11,13,.80) 0%, rgba(9,11,13,.40) 46%, rgba(9,11,13,0) 100%)}
#lavoro .banda{flex:0 0 auto;display:flex;flex-direction:column;
  gap:clamp(12px,1.9vh,20px);padding-block:clamp(18px,2.6vh,32px) clamp(16px,2.2vh,26px)}
#lavoro h1{font-size:clamp(36px,7vw,72px);max-width:16ch;letter-spacing:-.018em;
  line-height:.98;color:var(--latte)}
#lavoro h1 em{font-style:italic;color:var(--rosso-chiaro);display:block}
#lavoro .sotto{font-size:clamp(17px,1.2rem,21.5px);max-width:52ch;color:var(--latte-2);line-height:1.5}
#lavoro .nastro{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--latte-3);font-weight:640}
#lavoro .azione.vuota{border-color:color-mix(in srgb, var(--latte) 55%, transparent);
  color:var(--latte);background:transparent}
#lavoro .azione.vuota:hover{background:var(--latte);color:var(--notte);border-color:var(--latte)}
/* Da dove viene la fotografia: si dice, non si lascia intuire. Sul telefono
   ruberebbe alla foto lo spazio che le serve, e li' sparisce. */
#lavoro .didascalia{font-size:13.6px;letter-spacing:.02em;color:var(--latte-3);margin:0}
@media (max-width:820px),(max-height:640px){ #lavoro .didascalia{display:none} }
/* ⛔ LA PRIMA SCHERMATA HA UNA AZIONE SOLA, E STA DOVE FINISCE DI LEGGERE.
   Due cose sbagliate insieme, viste guardando la copertina da 1440 come la
   guarderebbe un cliente:
   ① l'azione stava in alto a DESTRA, all'altezza della prima riga del titolo,
      mentre il testo finisce in basso a sinistra. L'occhio leggeva titolo →
      sottotitolo → didascalia e trovava il pulsante prima di aver finito, in
      un angolo che non c'entrava niente con quello che stava leggendo. Adesso
      il pulsante sta sotto il sottotitolo, dove la lettura si chiude: è lì che
      uno decide, ed è lì che deve trovare il tasto.
   ② c'erano DUE pulsanti quasi uguali di peso, «Prenota» e «Chiama», che si
      dividevano l'attenzione a metà. Sul computer il numero è già nella
      testata, grande e rosso, e non se ne va mai: nella copertina resta la
      sola azione per cui questo sito esiste. Sul TELEFONO il «Chiama» della
      copertina resta, perché lì la testata non lo mostra e la barra in fondo
      è ancora giù: toglierlo lascerebbe la prima schermata senza telefono.
   ⚠️ Ed è anche quello che chiude il buco nella testata: la copertina non ha
   più un `tel:` sul computer, quindi la pastiglia rossa non si spegne più e
   la barra delle voci resta piena fino al bordo. */
@media (min-width:960px){
  #lavoro .banda{display:grid;grid-template-columns:minmax(0,1.15fr) auto;
    grid-template-areas:"tit nastro" "sotto ." "azioni dida";
    align-items:start;column-gap:clamp(30px,4vw,64px);row-gap:clamp(12px,1.8vh,20px)}
  #lavoro h1{grid-area:tit}
  #lavoro .sotto{grid-area:sotto;align-self:start}
  #lavoro .azioni-riga{grid-area:azioni;justify-content:flex-start;margin-top:2px}
  #lavoro .nastro{grid-area:nastro;justify-content:flex-end;text-align:right;
    align-self:start;padding-top:10px}
  /* ⚠️ La didascalia ha bisogno del suo posto, se no il CSS la infila nella
     prima cella libera: finiva in mezzo al vuoto, alta quanto il sottotitolo,
     e sembrava una seconda colonna di testo che nessuno aveva chiesto. Sta in
     basso a destra, allineata al pulsante: la composizione si chiude con
     l'azione da una parte e la nota di servizio dall'altra, e il titolo in
     alto a sinistra ha il nastro come contrappeso in alto a destra. */
  #lavoro .didascalia{grid-area:dida;align-self:end;text-align:right;
    justify-self:end;max-width:52ch;text-wrap:balance}
}
/* ⛔ SUL COMPUTER IL SECONDARIO CAMBIA CANALE, NON SPARISCE.
   Tolto il «Chiama» doppione dalla copertina, sul computer la prima schermata
   restava senza nessun modo di contattarli DENTRO il contenuto: il numero
   c'era solo nella testata, e l'audit l'ha segnalato con ragione — chi arriva
   deve poter rispondere subito, e un pulsante nella barra di navigazione non è
   la stessa cosa di un invito dentro la pagina.
   La soluzione non è rimettere lo stesso numero due volte: è cambiare canale.
   Sul computer, accanto a «Prenota un posto», c'è «Scrivici su WhatsApp» —
   parole diverse, canale diverso, nessuna ripetizione, e il telefono resta
   in testata per chi preferisce chiamare.
   Sul TELEFONO resta «Chiama», perché lì la testata il numero non lo mostra e
   la barra in fondo è ancora giù: è l'unico modo di chiamare in quella
   schermata. Due dispositivi, due contesti, due secondari giusti. */
.solo-grande{display:none}
@media (min-width:1024px){
  #lavoro .azione.vuota:not(.solo-grande){display:none}
  #lavoro .solo-grande{display:inline-flex}
}

/* ── 02 · il confronto ──────────────────────────────────────────────────── */
.didascalia-tabella{font-size:14.5px;color:var(--inchiostro-2);margin-bottom:16px;line-height:1.5;max-width:70ch}
.confronto{width:100%;border-collapse:collapse;font-size:15.6px;table-layout:fixed}
.confronto th,.confronto td{text-align:left;vertical-align:top;padding:16px 14px;border-top:var(--filo-tenue)}
.confronto thead th{border-top:0;padding-top:0;padding-bottom:16px;vertical-align:bottom}
.confronto tbody th{width:21%;font-family:var(--testo);font-weight:700;font-size:13.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--inchiostro-2);padding-left:0}
/* ⛔ LE TRE INTESTAZIONI BALLAVANO.
   «A · PORTALE» stava 46 px più in alto di «B · SELF SERVICE» e «C · A MANO»,
   e il motivo è banale: «Il rullo automatico» va a capo, gli altri due no, e
   le celle sono allineate in basso — così i titoli combaciavano e le
   etichettine sopra scivolavano ognuna per conto suo. In una tabella di
   confronto è proprio la riga delle intestazioni che deve stare dritta: se
   quella è storta, il lettore non si fida di quello che c'è sotto.
   Qui l'etichetta è ancorata in alto e il titolo cresce verso il basso dentro
   un'altezza da due righe: etichette in fila, titoli sulla stessa base. */
.confronto .intesta{display:flex;flex-direction:column;gap:7px}
.confronto thead th{vertical-align:top}
.confronto .intesta .t{display:flex;align-items:flex-end;min-height:2.06em}
.confronto .intesta .k{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--rosso)}
.confronto .intesta .t{font-family:var(--tit);font-weight:500;font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.01em;line-height:1.02}
.confronto td.mano,.confronto th.mano{background:color-mix(in srgb,var(--rosso) 6%,transparent)}
.confronto .no{color:var(--rosso-cupo)}
.confronto tbody tr:last-child td,.confronto tbody tr:last-child th{padding-bottom:0}
@media (max-width:859px){
  .confronto,.confronto tbody,.confronto tr,.confronto th,.confronto td{display:block;width:auto}
  .confronto thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .confronto tbody tr{padding:22px 0 6px;border-top:2px solid var(--inchiostro)}
  .confronto tbody tr:first-child{border-top:0;padding-top:0}
  .confronto tbody th{width:auto;padding:0 0 12px;border-top:0;font-size:13.6px;color:var(--inchiostro)}
  .confronto tbody td{padding:11px 0;border-top:var(--filo-tenue)}
  .confronto tbody td::before{content:attr(data-col);display:block;font-size:13.5px;
    letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--inchiostro-2);margin-bottom:5px}
  .confronto td.mano{background:transparent;border-left:3px solid var(--rosso);padding-left:13px}
  .confronto td.mano::before{color:var(--rosso)}
}

/* ── 03 · le due ore ────────────────────────────────────────────────────── */
.orologio{display:grid;grid-template-columns:56px 1fr;gap:0}
.riga-tempo{position:relative;grid-column:1;grid-row:1 / -1;width:56px}
.righello{position:sticky;top:calc(var(--testata) + 16px);width:56px;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.righello svg{width:56px;height:clamp(200px,34svh,330px);display:block;overflow:visible}
.righello .ora{font-family:var(--tit);font-size:16px;font-weight:500;color:var(--latte-3);letter-spacing:.02em}
.passi{grid-column:2;display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.passo{display:grid;grid-template-columns:1fr;gap:13px;padding:22px 0 26px;
  border-top:var(--filo-scuro);opacity:.34;
  transition:opacity .6s var(--molla)}
.passo.viva{opacity:1}
.passo:first-child{border-top:0}
.passo .testo{display:flex;flex-direction:column;gap:10px;min-width:0}
.passo .quando{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--latte-3)}
.passo.viva .quando{color:var(--rosso-chiaro)}
.passo h3{font-family:var(--tit);font-weight:500;font-size:clamp(26px,3.4vw,38px);
  letter-spacing:-.01em;line-height:1.04}
.passo p{color:var(--latte-2);font-size:16px;line-height:1.6;max-width:60ch}
.passo figure{margin:0;overflow:hidden;background:var(--notte-2);display:flex;flex-direction:column}
.passo figcaption{font-size:13.7px;line-height:1.45;color:var(--latte-3);padding:9px 0 0}
.passo.senza-foto .testo{grid-column:1/-1}
.passo figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transform:scale(1.02);transition:transform 1.4s var(--molla)}
.passo.viva figure img{transform:scale(1)}
@media (min-width:800px){
  .passo{grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
  .passo .testo{grid-column:1}
  .passo figure{grid-column:2;grid-row:1;align-self:start;height:220px}
  .passo figure img{aspect-ratio:auto;height:100%}
}
.somma{margin-top:28px;padding-top:24px;border-top:2px solid var(--rosso-chiaro);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px}
.somma b{font-family:var(--tit);font-size:clamp(34px,5.4vw,60px);font-weight:500;color:var(--rosso-chiaro)}
.somma span{color:var(--latte-2);font-size:16.5px;max-width:50ch}

/* ── 04 · i lavori ──────────────────────────────────────────────────────── */
.lavori{display:grid;gap:0 clamp(24px,3vw,52px);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:700px){ .lavori{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .lavori{grid-template-columns:repeat(3,1fr)} }
/* con QUATTRO elementi tre colonne lasciano un orfano nell'ultima riga */
.lavori.quattro{grid-template-columns:1fr}
@media (min-width:700px){ .lavori.quattro{grid-template-columns:1fr 1fr} }
.lavoro{border-top:var(--filo);padding:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.lavoro h3{font-family:var(--tit);font-weight:500;font-size:clamp(24px,2.6vw,31px);
  letter-spacing:-.008em;line-height:1.05}
.lavoro p{color:var(--inchiostro-2);font-size:15.8px;line-height:1.58}
.lavoro .dettaglio{font-size:14.6px;color:var(--inchiostro);line-height:1.5;margin-top:auto;
  padding-top:10px;border-top:var(--filo-tenue)}
.lavoro .dettaglio b{color:var(--rosso-cupo);font-weight:640}

/* ── blocchi ────────────────────────────────────────────────────────────── */
.duetto{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){ .duetto{grid-template-columns:1fr 1fr;gap:clamp(34px,4.5vw,76px)} }
.blocco h3{font-family:var(--tit);font-weight:500;font-size:clamp(26px,3.2vw,38px);
  margin-bottom:14px;line-height:1.04}
.blocco p{color:var(--inchiostro-2);line-height:1.62;font-size:16.2px}
.scura .blocco p{color:var(--latte-2)}
.elenco{list-style:none;margin:18px 0 0;padding:0}
.elenco li{padding:13px 0 13px 26px;border-top:var(--filo-tenue);position:relative;
  font-size:15.8px;line-height:1.52}
.scura .elenco li{border-top:var(--filo-scuro)}
.elenco li::before{content:'';position:absolute;left:0;top:22px;width:13px;height:1px;
  background:var(--rosso);transform-origin:left;transform:scaleX(0);
  transition:transform .5s var(--molla)}
.viva .elenco li::before{transform:scaleX(1)}
.viva .elenco li:nth-child(2)::before{transition-delay:.06s}
.viva .elenco li:nth-child(3)::before{transition-delay:.12s}
.viva .elenco li:nth-child(4)::before{transition-delay:.18s}
.scura .elenco li::before{background:var(--rosso-chiaro)}

.cifre{display:flex;flex-wrap:wrap;gap:20px 44px;align-items:baseline;
  padding:22px 0;border-block:var(--filo);margin-block:24px}
.scura .cifre{border-block:var(--filo-scuro)}
.cifre div{display:flex;flex-direction:column;gap:4px;min-width:0}
.cifre b{font-family:var(--tit);font-size:clamp(32px,4.6vw,52px);font-weight:500;
  color:var(--acqua);line-height:1}
.scura .cifre b{color:var(--latte)}
.cifre span{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-2);font-weight:640}
.scura .cifre span{color:var(--latte-3)}

/* ── mappa ──────────────────────────────────────────────────────────────── */
.mappa{position:relative;background:var(--notte-2);border:var(--filo-scuro);overflow:hidden;
  display:flex;min-height:clamp(300px,42svh,430px)}
.mappa iframe{width:100%;height:100%;min-height:inherit;border:0;display:block;position:relative;z-index:1}
/* se Google non si carica (rete lenta, blocco, estensione) resta scritto sotto
   l'indirizzo, invece di un rettangolo scuro che non dice niente */
.mappa-sotto{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:26px;
  font-family:var(--tit);font-size:26px;font-weight:500;color:var(--latte);line-height:1.15}
.mappa-sotto span{font-family:var(--testo);font-size:14.6px;font-weight:400;
  color:var(--latte-3);max-width:36ch;line-height:1.5}

/* ── contatti ───────────────────────────────────────────────────────────── */
.scheda{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:900px){ .scheda{grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,72px)} }
.dati{list-style:none;margin:0;padding:0}
.dati li{display:flex;flex-direction:column;gap:4px;padding:15px 0;border-top:var(--filo-scuro)}
.dati li:first-child{border-top:0;padding-top:0}
.dati .k{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--latte-3)}
.dati .v{font-size:18.5px;line-height:1.4}
.dati .v a{color:var(--latte);text-decoration-color:color-mix(in srgb,var(--latte) 45%,transparent);
  text-underline-offset:3px;display:inline-flex;align-items:center;min-height:30px}
.dati .piccolo{font-size:14.2px;color:var(--latte-2);line-height:1.52}
.paesi{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none;padding:0}
.paesi li{font-size:13.8px;padding:7px 13px;border-radius:99px;border:var(--filo-scuro);color:var(--latte-2)}

/* ── piede ──────────────────────────────────────────────────────────────── */
.piede{background:var(--notte);color:var(--latte-2);padding-block:48px;
  padding-bottom:calc(48px + var(--barra) + env(safe-area-inset-bottom));
  border-top:var(--filo-scuro);font-size:14.6px}
.piede .righe{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:800px){ .piede .righe{grid-template-columns:1.3fr 1fr 1fr} }
.piede h4{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--latte-3);
  margin-bottom:13px;font-weight:700}
.piede ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.piede a{color:var(--latte-2);text-decoration:none;display:inline-flex;align-items:center;
  min-height:34px;padding:3px 0}
.piede a:hover{color:var(--latte);text-decoration:underline;text-underline-offset:3px}
.piede .marchio-piede{font-family:var(--tit);font-weight:500;font-size:31px;color:var(--latte);
  display:block;margin-bottom:10px;line-height:1}
.piede .avviso{margin-top:34px;padding-top:20px;border-top:var(--filo-scuro);
  font-size:13.6px;color:var(--latte-3);line-height:1.6;max-width:64ch}

/* ── barra di chiamata ──────────────────────────────────────────────────── */
/* ⛔ IL SITO NON DEVE PASSARE SOTTO I BOTTONI, E PASSAVA.
   Segnalato da Marco guardandolo dal telefono, e si vedeva benissimo appena
   messo un iPhone col bordo tondo: sotto «Chiama» e «WhatsApp» restava una
   fascia alta quanto la barra di sistema (34 px sugli iPhone recenti) dove il
   calendario scorreva in chiaro. Due sbagli sommati, tutti e due miei:
     · il fondo della barra era `--latte al 16%` — cioè trasparente all'84%.
       Serviva solo a fare la fessura chiara fra i due tasti, e invece faceva
       da finestra su tutta la pagina;
     · lo spazio per la barra di sistema era `padding-bottom` del CONTENITORE,
       non dei bottoni: i due colori pieni finivano a 810 px e gli ultimi 34
       restavano scoperti.
   Ora la fascia di sicurezza se la prende ogni bottone dentro di sé, quindi il
   rosso e il verde arrivano al bordo dello schermo; e il fondo è opaco, così
   nemmeno la fessura da un pixel fa da spioncino. Il filo chiaro in cima non è
   decorazione: dice che quella è una lastra sopra la pagina, non un pezzo
   della pagina. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:color-mix(in srgb,var(--latte) 16%,var(--notte));
  box-shadow:0 -1px 0 color-mix(in srgb,var(--latte) 20%,transparent),
             0 -16px 34px -20px rgba(0,0,0,.6);
  transform:translateY(101%);transition:transform .3s var(--molla);will-change:transform}
.barra.su{transform:translateY(0)}
.barra a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:calc(var(--barra) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  text-decoration:none;color:#fff;font-weight:640;font-size:16.5px}
.barra .tel{background:var(--rosso)}
.barra .wa{background:#17754C}
@media (min-width:1024px){ .barra{display:none} }

/* ── pagine interne ─────────────────────────────────────────────────────── */
.intro-pagina h1{font-size:clamp(38px,8vw,84px);max-width:15ch;margin-bottom:20px;line-height:.98}
.intro-pagina .occhiello{font-size:clamp(17px,1.16rem,21px);max-width:58ch;line-height:1.55;color:var(--latte-2)}
.passi-numerati{list-style:none;margin:0;padding:0;counter-reset:p}
.passi-numerati li{counter-increment:p;position:relative;padding:22px 0 24px 62px;border-top:var(--filo)}
.passi-numerati li:first-child{border-top:0}
.passi-numerati li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--tit);font-weight:500;font-size:30px;color:var(--rosso);line-height:1}
.scura .passi-numerati li::before{color:var(--rosso-chiaro)}
.passi-numerati h3{font-family:var(--tit);font-weight:500;font-size:clamp(23px,2.6vw,29px);
  margin-bottom:8px;line-height:1.06}
.passi-numerati p{color:var(--inchiostro-2);font-size:15.8px;line-height:1.6;max-width:62ch}
.scura .passi-numerati li{border-top:var(--filo-scuro)}
.scura .passi-numerati p{color:var(--latte-2)}
.da-decidere{border-left:3px solid var(--acqua);padding:15px 0 15px 18px;margin-top:24px;
  font-size:15px;line-height:1.58;color:var(--inchiostro-2);max-width:64ch}
.scura .da-decidere{color:var(--latte-2);border-left-color:var(--rosso-chiaro)}
.da-decidere b{color:var(--acqua)}
.scura .da-decidere b{color:var(--rosso-chiaro)}

/* ── prenotazione ───────────────────────────────────────────────────────── */
.modulo{display:grid;gap:18px;grid-template-columns:1fr;max-width:840px}
.modulo>*{min-width:0}
@media (min-width:760px){ .modulo{grid-template-columns:1fr 1fr} }
.campo{display:flex;flex-direction:column;gap:8px}
.campo>span{font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--inchiostro-2)}
.campo em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;opacity:.8}
.campo select,.campo input{-webkit-appearance:none;appearance:none;width:100%;min-height:56px;
  padding:15px;border-radius:5px;border:2px solid color-mix(in srgb,var(--inchiostro) 22%,transparent);
  background:#fff;color:var(--inchiostro);font:inherit;font-size:16.5px;line-height:1.3;
  transition:border-color .2s ease}
.campo select{padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--inchiostro-2) 50%),
                   linear-gradient(135deg,var(--inchiostro-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 25px, calc(100% - 15px) 25px;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat}
.campo select:focus-visible,.campo input:focus-visible{border-color:var(--rosso)}
.campo input::placeholder{color:color-mix(in srgb,var(--inchiostro) 42%,transparent)}

.agenda{grid-column:1/-1;display:flex;flex-direction:column;gap:24px;min-width:0}
.agenda>*{min-width:0}
.dati-cliente>*{min-width:0}
.passo-agenda{display:flex;flex-direction:column;gap:11px}
.et-agenda{font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--inchiostro-2)}
.sfumato{letter-spacing:0;text-transform:none;font-weight:500;opacity:.85}
.giorni{display:grid;gap:9px;padding:2px 0 4px;grid-template-columns:repeat(3,1fr)}
@media (min-width:520px){ .giorni{grid-template-columns:repeat(4,1fr)} }
@media (min-width:860px){ .giorni{grid-template-columns:repeat(6,1fr)} }
@media (min-width:1200px){ .giorni{grid-template-columns:repeat(8,1fr)} }
.giorno{-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;
  width:100%;min-width:0;min-height:96px;border-radius:6px;
  border:2px solid color-mix(in srgb,var(--inchiostro) 20%,transparent);background:#fff;
  color:var(--inchiostro);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:9px 4px;line-height:1.14;
  transition:border-color .2s ease, transform .2s var(--molla), box-shadow .2s ease}
.giorno:hover:not([disabled]){transform:translateY(-2px)}
.giorno .dow{font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--inchiostro-2);font-weight:700}
.giorno .num{font-family:var(--tit);font-size:30px;font-weight:500;line-height:1.05}
.giorno .mese{font-size:13.5px;color:var(--inchiostro-2)}
.giorno .liberi{font-size:13.5px;color:var(--acqua);font-weight:640;margin-top:4px}
.giorno.scelto{border-color:var(--rosso);background:color-mix(in srgb,var(--rosso) 8%,#fff);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--rosso) 30%,transparent)}
.giorno[disabled]{opacity:.42;cursor:default}
.giorno[disabled] .liberi{color:var(--inchiostro-2)}
.fasce-orarie{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;min-width:0}
.fascia{-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;min-height:70px;
  border-radius:6px;background:#fff;color:var(--inchiostro);
  border:2px solid color-mix(in srgb,var(--inchiostro) 20%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:border-color .2s ease, transform .2s var(--molla), box-shadow .2s ease}
.fascia:hover:not([disabled]){transform:translateY(-2px)}
.fascia .ora{font-family:var(--tit);font-size:26px;font-weight:500;line-height:1}
.fascia small{font-size:13.5px;color:var(--inchiostro-2)}
.fascia.scelto{border-color:var(--rosso);background:color-mix(in srgb,var(--rosso) 8%,#fff);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--rosso) 30%,transparent)}
.fascia[disabled]{opacity:.42;cursor:default}
.dati-cliente{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){ .dati-cliente{grid-template-columns:1fr 1fr} }
.riga-errore{background:color-mix(in srgb,var(--rosso) 10%,var(--carta));
  border-left:4px solid var(--rosso);padding:13px 15px;font-size:15.6px;line-height:1.5;color:var(--inchiostro)}
/* ⛔ LA MISURA DELLA RIGA. Questo paragrafo era senza tetto, e su un portatile
   largo arrivava a 133 caratteri per riga; l'avviso della disdetta a 173. A
   quella lunghezza l'occhio, tornando a capo, non ritrova la riga giusta e si
   rilegge la stessa: è il motivo per cui i giornali stanno su colonne strette
   da duecento anni. Non si vede in una schermata — si vede solo contando, ed
   è per questo che adesso il banco conta.
   ⚠️ E `ch` NON è un carattere: è la larghezza dello zero, che in questo
   carattere è più stretta della media. Le 80ch del piede davano 110 caratteri
   veri. Le misure qui sotto sono tarate sul CONTATO, non sul creduto. */
.nota-privacy{font-size:13.8px;line-height:1.56;color:var(--inchiostro-2);max-width:64ch}
/* le due domande che si fanno tutti e che il sito non aveva mai scritto */
.due-domande{display:grid;gap:16px;grid-template-columns:1fr;margin-top:22px;
  padding-top:20px;border-top:var(--filo)}
@media (min-width:640px){ .due-domande{grid-template-columns:1fr 1fr;gap:28px} }
.due-domande b{font-family:var(--tit);font-weight:500;font-size:20px;display:block;
  margin-bottom:6px;letter-spacing:-.005em}
.due-domande p{font-size:15.2px;line-height:1.55;color:var(--inchiostro-2)}
.due-domande strong{color:var(--inchiostro);font-weight:640}
/* un collegamento dentro un paragrafo resta alto quanto la riga: sul telefono
   e' un bersaglio da venti pixel. Si alza fino ai 24 minimi senza spostare il
   testo, perche' il padding verticale di un inline-block non muove la riga. */
.et-aggiunte a{display:inline-block;padding-block:5px;font-weight:640;
  color:var(--rosso-chiaro);text-underline-offset:3px}
.esito{grid-column:1/-1;background:#fff;border:var(--filo);padding:19px;
  display:flex;flex-direction:column;gap:14px}
.esito .anteprima{font-size:15.2px;line-height:1.56;background:#EAF5EC;
  border-left:3px solid #17754C;padding:13px 14px}
.esito .nota{font-size:13.8px;color:var(--inchiostro-2);line-height:1.52}
.esito.fatto{border:2px solid #17754C;background:#F4FBF6}
.fatta-titolo{font-family:var(--tit);font-size:clamp(30px,5vw,44px);font-weight:500;
  color:#0F5B3A;outline:none;line-height:1.02}
.fatta-riga{font-size:17px;line-height:1.5}
.fatta-riga b{font-family:var(--tit);font-size:22px;font-weight:500}
.fatta-codice{font-size:15px;color:var(--inchiostro-2)}
.fatta-codice b{font-family:var(--tit);letter-spacing:.16em;color:var(--inchiostro);font-size:19px}
.fatta-come{font-size:15.2px;color:var(--inchiostro-2)}

/* ── IL LAVORO CHE NON SI PRENOTA DAL SITO ───────────────────────────────────
   Il nanoceramico tiene la macchina una giornata e prima la guardano insieme.
   Dargli una casella nel calendario sarebbe stato piu' comodo da programmare e
   falso da leggere: qui il calendario sparisce e resta la strada vera. */
.avviso-avoce{font-size:15.4px;line-height:1.6;color:var(--inchiostro);
  background:color-mix(in srgb,var(--rosso-cupo) 7%,transparent);
  border-left:3px solid var(--rosso-cupo);padding:14px 16px;border-radius:0 8px 8px 0;
  max-width:64ch}
.avviso-avoce b{color:var(--rosso-cupo)}
.avviso-disdetta{font-size:14.4px;line-height:1.55;color:var(--inchiostro-2);
  border-top:var(--filo-tenue);padding-top:12px;max-width:64ch}
.avviso-disdetta b{color:var(--rosso-cupo)}

/* ── LA LISTA D'ATTESA ────────────────────────────────────────────────────────
   Una fascia piena non è un vicolo cieco: è un posto che può ancora liberarsi.
   Per questo non viene sbiadita come quelle chiuse davvero — resta viva, con il
   contorno tratteggiato, e si può toccare. */
.fascia.recuperabile{opacity:1;cursor:pointer;background:#FBF6EF;
  border-style:dashed;border-color:#C7A9A2}
.fascia.recuperabile small{color:var(--rosso-cupo);font-weight:640}
.attesa{grid-column:1/-1;background:#FBF3EC;border:2px solid var(--rosso);
  border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:13px}
.attesa.fatta{background:#F4FBF6;border-color:#17754C}
.attesa-t{font-family:var(--tit);font-size:24px;font-weight:500;line-height:1.12;
  color:var(--inchiostro)}
.attesa.fatta .attesa-t{color:#0F5B3A}
.attesa-p{font-size:15.4px;line-height:1.55;color:var(--inchiostro)}
.attesa-campi{display:grid;gap:13px;grid-template-columns:1fr}
@media (min-width:640px){ .attesa-campi{grid-template-columns:1fr 1fr} }
.azione.scarna{background:#fff;color:var(--inchiostro);
  border:2px solid rgba(20,24,26,.28)}
.azione.scarna:hover{border-color:var(--inchiostro)}

/* ── IL COLLEGAMENTO PERSONALE ────────────────────────────────────────────────
   Non c'è nessun account da fare e nessuna password da ricordare: il posto è di
   chi ha in mano questo indirizzo. Perciò va dato bene, una volta sola, grande
   abbastanza da copiarlo davvero. */
.tuo-link{background:#fff;border:var(--filo);border-radius:8px;padding:16px;
  display:flex;flex-direction:column;gap:11px}
.et-link{font-size:12.6px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--rosso-cupo);line-height:1.4}
.link-riga{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
.link-riga code{flex:1 1 210px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.4px;line-height:1.45;background:var(--carta-2);color:var(--inchiostro);
  border-radius:6px;padding:11px 12px;overflow-wrap:anywhere;display:flex;align-items:center}
.copia{-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:14.6px;
  font-weight:700;min-height:46px;padding:0 17px;border-radius:6px;border:2px solid var(--rosso);
  background:#fff;color:var(--rosso-cupo);white-space:nowrap}
.copia:hover{background:var(--rosso);color:#fff}

/* ── ritmo desktop, e finestre scomode ──────────────────────────────────── */
main>section:not(#lavoro){min-height:calc((100svh - var(--testata)) * 1.26 + 2px)}
main>section#lavoro{min-height:calc(100svh - var(--testata))}
@media (max-height:760px) and (min-width:960px){
  #lavoro h1{font-size:clamp(34px,5vw,58px)}
  #lavoro .sotto{font-size:17px;line-height:1.45}
  .cappello{margin-bottom:20px}
}
@media (max-height:700px){ #lavoro .nastro{display:none} }
/* TELEFONO: la copertina deve restare una FOTOGRAFIA, non un pannello di testo
   con una striscia di foto sopra. Quindi qui si toglie tutto quello che il
   telefono ha gia' altrove: il tasto «Chiama» sta nella testata, sempre in
   vista, e il nastro dei servizi e' la prima cosa che si legge scorrendo.
   Restano il titolo, la riga che spiega, e un pulsante solo. */
@media (max-width:640px){
  #lavoro .banda{padding-block:18px 20px;gap:12px}
  #lavoro h1{font-size:clamp(31px,8.2vw,44px);line-height:.96;max-width:14ch}
  #lavoro .sotto{font-size:16.2px;line-height:1.42;max-width:36ch}
  #lavoro .nastro{display:none}
  /* Il numero sparisce, il tasto NO: da un telefono si deve poter chiamare
     dalla prima schermata, e il tasto in testata non conta — sta fuori dal
     contenuto, e chi legge non lo cerca li'. Cosi' i due tasti stanno su una
     riga sola e la fotografia si tiene tutto il resto. */
  #lavoro .azione.vuota .num{display:none}
  #lavoro .azione{padding-inline:16px;font-size:15.4px}
  #lavoro .azioni-riga{margin-top:2px;flex-wrap:nowrap;gap:10px}
}
/* Telefono girato: la scritta si mangia tutta la schermata e della fotografia
   resterebbe una feritoia. Il velo si fa piu' compatto e la foto respira. */
@media (max-height:430px){
  #lavoro .banda{padding-block:12px 12px;gap:8px}
  #lavoro h1{font-size:clamp(24px,4.2vw,34px);line-height:1.02}
  #lavoro .sotto{display:none}
}
/* Schermi bassi: si stringe la fascia del titolo per lasciare aria alla foto. */
@media (min-width:960px) and (max-height:820px){
  #lavoro .banda{padding-block:clamp(16px,2.4vh,28px);gap:clamp(10px,1.6vh,16px)}
  #lavoro h1{font-size:clamp(32px,4.6vw,52px)}
  #lavoro .sotto{font-size:16.6px}
}
@media (max-width:520px), (max-height:700px){ .intro-pagina .occhiello.seconda{display:none} }
@media (max-height:480px){
  main>section{padding-block:26px}
  .cappello{margin-bottom:16px}
  .intro-pagina h1{font-size:clamp(28px,5.6vw,42px);margin-bottom:12px}
}

/* ── MOVIMENTO RIDOTTO: si azzera tutto, nessuna eccezione. Deve stare in
      FONDO al foglio, e con la parentesi chiusa: un @media lasciato aperto
      si mangia in silenzio tutte le regole che vengono dopo. ───────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto !important}
  .passo{opacity:1 !important}
  html.js .sale{opacity:1 !important;transform:none !important}
  .etichetta::after,.elenco li::before{transform:scaleX(1) !important}
  html.js #lavoro .scena img{animation:none !important;object-position:50% 56% !important}
}

/* ── le aggiunte: quello che NON è nel lavaggio completo ───────────────────
   Dirlo chiaro è il contrario di una rinuncia: separa quello che si dà da
   quello che si vende in più, e toglie di mezzo l'equivoco che rovina la
   riconsegna («pensavo fosse compreso»). */
.aggiunte{margin-top:38px;padding-top:26px;border-top:var(--filo-scuro)}
.et-aggiunte{font-size:16px;color:var(--latte-2);line-height:1.55;max-width:62ch;margin-bottom:18px}
.et-aggiunte strong{color:var(--rosso-chiaro);font-weight:640}
.lista-aggiunte{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(22px,3vw,48px);
  grid-template-columns:1fr}
@media (min-width:720px){ .lista-aggiunte{grid-template-columns:1fr 1fr} }
.aggiunta{border-top:var(--filo-scuro);padding:18px 0 20px;display:flex;flex-direction:column;gap:8px}
.aggiunta h3{font-family:var(--tit);font-weight:500;font-size:clamp(21px,2.2vw,26px);line-height:1.06}
.aggiunta p{color:var(--latte-2);font-size:15.4px;line-height:1.55}
.aggiunta .tempo{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rosso-chiaro);font-weight:700}

/* ── TELEFONO SDRAIATO ──────────────────────────────────────────────────────
   Misurato con audit.py: con 360-390px di altezza il primo invito a
   contattare finiva sotto la piega su tutte e tre le pagine. Qui la
   copertina si asciuga fino a stare in una schermata sdraiata. */
/* schermi bassi ma non sdraiati (iPhone SE e simili): la copertina si stringe
   quel tanto che basta a tenere i pulsanti sopra la piega. Misurato: 602>568. */
@media (max-height:620px){
  #lavoro h1{font-size:clamp(30px,7vw,44px);line-height:1.0}
  #lavoro .sotto{font-size:16px;line-height:1.44}
  #lavoro .banda{padding-block:16px;gap:14px}
  #lavoro .nastro{display:none}
}
@media (max-height:440px){
  #lavoro h1{font-size:clamp(26px,4.4vw,38px);line-height:1.02}
  #lavoro .sotto{font-size:15.5px;line-height:1.4;max-width:44ch}
  #lavoro .sotto.seconda{display:none}
  #lavoro .prima{gap:11px}
  #lavoro .griglia{padding-block:14px;gap:14px}
  #lavoro .nastro{display:none}
  .azione{min-height:46px;padding:11px 18px;font-size:15.5px}
  .intro-pagina h1{font-size:clamp(22px,4vw,30px);margin-bottom:7px}
  .intro-pagina .occhiello{font-size:15px;line-height:1.38;max-width:52ch}
  .riga-numero{margin-bottom:8px}
  .intro-pagina .azioni-riga{margin-top:14px !important}
  main>section{padding-block:18px}
  .cappello{margin-bottom:12px}
}

/* ── 06 · LE POSTAZIONI ───────────────────────────────────────────────────
   Tre blocchi distinti, uno per postazione, ciascuno con la sua lettera. Prima
   erano un blocco solo intitolato «self service» che conteneva anche il
   portale: due impianti diversi sotto lo stesso nome, e la foto sbagliata. */
.postazione{display:grid;grid-template-columns:1fr;gap:clamp(22px,3.4vw,40px);
  padding:clamp(26px,4vh,42px) 0;border-top:var(--filo-scuro)}
.postazione:first-of-type{border-top:0;padding-top:clamp(8px,1.6vh,18px)}
.post-testo{display:flex;flex-direction:column;gap:14px;min-width:0}
.post-et{display:flex;align-items:center;gap:12px;font-size:13.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--rosso-chiaro)}
.post-lettera{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border:2px solid var(--rosso-chiaro);border-radius:50%;
  font-family:var(--tit);font-size:19px;font-weight:500;letter-spacing:0;padding-top:2px}
.postazione h3{font-family:var(--tit);font-weight:500;font-size:clamp(27px,3.6vw,40px);
  letter-spacing:-.01em;line-height:1.05;color:var(--latte)}
.postazione p{color:var(--latte-2);font-size:16.2px;line-height:1.62;max-width:62ch}
.post-prima{font-weight:640;color:var(--latte)!important}
.post-foto{margin:0;overflow:hidden;background:var(--notte-2);display:flex;flex-direction:column}
.post-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.post-foto figcaption{font-size:13.7px;color:var(--latte-3);padding:10px 0 0;line-height:1.5}
@media (min-width:860px){
  .postazione{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:start}
  .post-testo.larga{grid-column:1/-1;max-width:none}
  .post-testo.larga .cifre{margin-block:4px 6px}
}
/* i passaggi del self: e' l'unico posto del sito dove sta scritto in che ordine
   si usano i programmi, e non si ripete da nessun'altra parte */
.passi-self{list-style:none;margin:6px 0 0;padding:0;counter-reset:ps;
  display:grid;gap:0}
.passi-self li{counter-increment:ps;position:relative;padding:15px 0 16px 54px;
  border-top:var(--filo-scuro)}
.passi-self li:first-child{border-top:0;padding-top:4px}
.passi-self li::before{content:counter(ps);position:absolute;left:0;top:14px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-family:var(--tit);font-size:18px;color:var(--rosso-chiaro);
  border:1px solid rgba(224,106,92,.55);border-radius:50%;padding-top:2px}
.passi-self li:first-child::before{top:0}
.passi-self b{display:block;font-size:17px;color:var(--latte);letter-spacing:-.005em}
.passi-self span{display:block;color:var(--latte-2);font-size:15.4px;line-height:1.55;
  margin-top:4px;max-width:60ch}
@media (min-width:860px){
  .passi-self{grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,52px)}
  .passi-self li:nth-child(2){border-top:0;padding-top:4px}
  .passi-self li:nth-child(2)::before{top:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL MOVIMENTO — a tema, non decorativo
   ───────────────────────────────────────────────────────────────────────────
   Regola unica: si muove la COSA, non un effetto appiccicato sopra la cosa.
   In un autolavaggio le cose che si muovono sono cinque, e sono queste:
     · l'acqua sale        → la barra in cima che si riempie scorrendo
     · il getto colpisce   → la lama di luce che attraversa la carrozzeria
     · il panno passa      → le fotografie si scoprono con una passata
     · il tempo si riempie → il filo del righello e le tacche che si accendono
     · la cera fa brillare → un colpo di luce sulla foto della cera
   Niente entra volando, niente rimbalza, niente ruota. Con «movimento ridotto»
   si spegne tutto in blocco, in fondo al file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · L'ACQUA CHE SALE. Una riga sotto la testata che si riempie mentre
      scorri: dice a che punto della pagina sei, e lo dice con l'acqua. ───── */
.livello{position:fixed;left:0;right:0;top:var(--testata);height:3px;z-index:59;
  pointer-events:none;background:color-mix(in srgb,var(--inchiostro) 8%,transparent)}
.livello i{display:block;height:100%;width:100%;transform-origin:left;
  transform:scaleX(var(--q,0));
  background:linear-gradient(90deg,var(--acqua),var(--rosso) 60%,var(--rosso-cupo));
  box-shadow:0 0 10px rgba(168,30,20,.45)}
html:not(.js) .livello{display:none}

/* ── 2 · LA LAMA DI LUCE SULLA CARROZZERIA. Un riflesso attraversa il cofano
      bagnato della copertina, come il getto che passa sulla vernice.
   ⛔ PRIMA STAVA SUL TITOLO, ED ERA SBAGLIATO. Un `mix-blend-mode:overlay` su
   un pseudo-elemento del titolo non illumina le lettere: illumina il suo
   RIQUADRO. Sullo schermo veniva fuori un rettangolo grigio-chiaro con i bordi
   netti sopra la fotografia — l'ho visto ingrandendo il tiro a 1728 e a 2560,
   e una volta visto non si puo' piu' non vederlo. Per fermarlo davvero alle
   lettere servirebbe duplicare il testo dentro il CSS: si romperebbe l'accento
   rosso di «A mano.» e il contrasto smetterebbe di essere un numero misurabile.
   Quindi la lama non passa piu' sul titolo: passa sulla CARROZZERIA, che e'
   anche il posto giusto — e' li' che il getto colpisce la vernice bagnata.
   Sta SOTTO il velo (il velo e' un figlio vero, quindi a parita' di z-index
   dipinge dopo di lei), percio' non tocca ne' il testo ne' il suo contrasto,
   ed e' ancorata alla lastra come tutto il resto. */
#lavoro h1{position:relative;isolation:isolate}
html.js #lavoro .scena::before{content:'';position:absolute;inset:0;z-index:2;
  left:0;right:0;max-width:1500px;margin-inline:auto;
  pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(102deg,transparent 42%,rgba(214,235,255,.30) 50%,transparent 58%);
  background-size:230% 100%;background-position:130% 0;
  animation:getto 11s cubic-bezier(.36,0,.24,1) 1.6s infinite}
@keyframes getto{
  0%   {opacity:0;background-position:130% 0}
  5%   {opacity:1}
  30%  {opacity:1;background-position:-30% 0}
  36%  {opacity:0;background-position:-30% 0}
  100% {opacity:0;background-position:-30% 0}
}

/* ── 3 · LA PASSATA. Le fotografie non compaiono: si scoprono, come quando il
      panno passa e sotto resta il pulito. Una diagonale, non un taglio dritto:
      il panno lo si passa così. ───────────────────────────────────────────── */
html.js .passo figure img,
html.js .post-foto img,
html.js .blocco figure img{
  clip-path:polygon(0 0, 0 0, -14% 100%, -14% 100%);
  transition:clip-path 1.15s cubic-bezier(.24,.68,.2,1), transform 1.6s var(--molla);
  transform:scale(1.07)}
html.js .passo.viva figure img,
html.js .viva .post-foto img,
html.js .blocco.viva figure img{
  clip-path:polygon(0 0, 114% 0, 100% 100%, 0 100%);
  transform:scale(1)}

/* ── 4 · IL VETRO. Qui la passata non è una metafora: la fotografia mostra un
      panno su un parabrezza, e finché il passo non arriva a schermo il vetro
      resta appannato. Poi il panno passa e il vetro si pulisce davvero. È
      l'unica animazione del sito che racconta esattamente quello che c'è
      scritto accanto. ─────────────────────────────────────────────────────── */
.passo.vetro figure{position:relative}
html.js .passo.vetro figure::after{content:'';position:absolute;inset:0;
  pointer-events:none;
  backdrop-filter:blur(3.5px) saturate(.55) brightness(1.12);
  -webkit-backdrop-filter:blur(3.5px) saturate(.55) brightness(1.12);
  background:linear-gradient(180deg,rgba(228,232,230,.30),rgba(206,214,212,.22));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:clip-path 1.5s cubic-bezier(.3,.7,.25,1) .25s}
html.js .passo.vetro.viva figure::after{
  clip-path:polygon(100% 0, 100% 0, 114% 100%, 114% 100%)}

/* ── 5 · IL TEMPO CHE SI RIEMPIE. Il filo del righello aveva già la sua corsa;
      adesso ha anche una testa che si accende, e le tacche si scaldano una
      per una man mano che i passaggi arrivano. ─────────────────────────────── */
.righello svg{overflow:visible}
#filo{transition:stroke-dashoffset .7s cubic-bezier(.3,.7,.25,1);
  filter:drop-shadow(0 0 5px rgba(224,106,92,.65))}
#testa{transition:transform .7s cubic-bezier(.3,.7,.25,1);transform-box:view-box;
  transform-origin:center}
#testa circle{fill:var(--rosso-chiaro)}
#testa circle.alone{fill:rgba(224,106,92,.30);animation:respiro 2.6s ease-in-out infinite}
@keyframes respiro{0%,100%{r:7;opacity:.45}50%{r:11;opacity:.15}}
.righello .tacca{transition:opacity .5s ease, stroke-width .5s ease}
.righello .tacca.accesa{opacity:.95;stroke-width:2.6}

/* ── 6 · LA COLONNA DEL LAVAGGIO A MANO. Nel confronto a tre è la colonna che
      conta: quando la tabella arriva a schermo si accende dall'alto in basso,
      una riga alla volta, come il lavoro che scende sulla macchina. ──────── */
/* ⛔ QUESTA ONDA HA MANGIATO UN'INTESTAZIONE PER GIORNI, E NON SE N'È ACCORTO
   NESSUNO. Sotto gli 860 px la tabella si apre in blocchi impilati, e il nome
   della colonna lo scrive `td::before` con `content:attr(data-col)`. L'onda
   qui sotto usava ANCH'ESSA `::before` sulla colonna «a mano», sta più in
   basso nel foglio e vince: `content:''` cancellava la scritta. Risultato, su
   OGNI telefono: «PORTALE AUTOMATICO», «SELF SERVICE», e poi un blocco senza
   nome — che è per giunta la colonna loro, quella che deve vincere il
   confronto. Un elemento ne ha due, di pseudo-elementi: l'onda si sposta su
   `::after` e l'intestazione si riprende il suo posto. (Da lì veniva anche lo
   sbordo di 10 px della tabella: `inset:0 -10px`.)
   ⚠️ Chi tocca questa regola guardi prima la riga 433: sono la stessa cosa
   vista da due parti. */
.confronto{--onda:0}
html.js .confronto td.mano,html.js .confronto th.mano{position:relative;isolation:isolate}
html.js .confronto td.mano::after,html.js .confronto th.mano::after{
  content:'';position:absolute;inset:0 -10px;z-index:-1;
  background:color-mix(in srgb,var(--rosso) 9%,transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .55s cubic-bezier(.3,.7,.25,1)}
/* nei blocchi impilati l'onda non serve e non deve nemmeno esistere: lì la
   colonna a mano è già segnata dal filetto rosso a sinistra, e un fondo che
   sborda di 10 px farebbe scorrere la tabella di lato per niente. */
@media (max-width:859px){
  html.js .confronto td.mano::after,html.js .confronto th.mano::after{display:none}
}
html.js .confronto.viva td.mano::after,html.js .confronto.viva th.mano::after{transform:scaleY(1)}
html.js .confronto.viva tbody tr:nth-child(1) td.mano::after{transition-delay:.10s}
html.js .confronto.viva tbody tr:nth-child(2) td.mano::after{transition-delay:.20s}
html.js .confronto.viva tbody tr:nth-child(3) td.mano::after{transition-delay:.30s}
html.js .confronto.viva tbody tr:nth-child(4) td.mano::after{transition-delay:.40s}
html.js .confronto.viva tbody tr:nth-child(5) td.mano::after{transition-delay:.50s}
html.js .confronto.viva tbody tr:nth-child(6) td.mano::after{transition-delay:.60s}

/* ── 7 · LA CERA. Un colpo di luce che attraversa la fotografia una volta,
      quando arriva a schermo: è quello che fa la cera, e null'altro. ─────── */
.passo.cerata figure{position:relative;overflow:hidden}
html.js .passo.cerata figure::before{content:'';position:absolute;inset:-30% -60%;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 42%,rgba(255,255,255,.62) 50%,transparent 58%);
  transform:translateX(-70%)}
html.js .passo.cerata.viva figure::before{animation:lucido 1.9s cubic-bezier(.4,0,.25,1) .55s 1 both}
@keyframes lucido{0%{opacity:0;transform:translateX(-70%)}
  18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(70%)}}

/* ── 8 · LE FASCE DELLA PRENOTAZIONE. Toccando una fascia il riquadro si
      riempie dal basso, come una vasca: dice «preso» senza scrivere «preso». */
.fascia{position:relative;isolation:isolate;overflow:hidden}
.fascia::before{content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--rosso) 14%,transparent);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .34s cubic-bezier(.3,.7,.25,1)}
.fascia:hover:not([disabled])::before{transform:scaleY(.34)}
.fascia[aria-pressed="true"]::before,.fascia.scelta::before{transform:scaleY(1)}

/* ── 9 · LA GOCCIA CHE CADE. Sul numerale di sezione, una goccia che scende
      lungo il filetto quando la sezione entra: due secondi, una volta sola. */
html.js .cappello .etichetta::before{content:'';position:absolute;left:0;bottom:-2px;
  width:5px;height:5px;border-radius:50%;background:var(--rosso);opacity:0}
html.js .scura .cappello .etichetta::before{background:var(--rosso-chiaro)}
html.js .viva .etichetta::before{animation:goccia 1.5s cubic-bezier(.35,0,.2,1) .25s 1 both}
@keyframes goccia{0%{opacity:0;left:0}
  12%{opacity:1}88%{opacity:1;left:calc(100% - 5px)}100%{opacity:0;left:calc(100% - 5px)}}

/* ── e con «movimento ridotto» si spegne tutto, senza lasciare niente a metà.
      Questo blocco sta DOPO le animazioni apposta: in CSS vince l'ultimo. ── */
@media (prefers-reduced-motion: reduce){
  .livello{display:none !important}
  html.js #lavoro .scena::before,
  html.js .passo.cerata.viva figure::before,
  html.js .viva .etichetta::before{animation:none !important;opacity:0 !important}
  html.js .passo figure img,html.js .post-foto img,html.js .blocco figure img{
    clip-path:none !important;transform:none !important}
  html.js .passo.vetro figure::after{display:none !important}
  html.js .confronto td.mano::after,html.js .confronto th.mano::after{
    transform:scaleY(1) !important}
  #testa circle.alone{animation:none !important}
  #filo{filter:none !important}
}

/* ── la spunta degli avvisi ─────────────────────────────────────────────────
   Non è una casella nascosta in fondo con la lentina: sta sopra il pulsante,
   si legge, e il quadratino è grande abbastanza da centrarlo col pollice. */
.spunta-avvisi{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:12px 0 2px;max-width:62ch}
.spunta-avvisi input{width:24px;height:24px;flex:0 0 auto;margin:1px 0 0;
  accent-color:var(--rosso)}
.spunta-avvisi span{font-size:15.2px;line-height:1.5;color:var(--inchiostro-2)}