/* ═══════════════════════════════════════════════════════════════════════════
   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}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;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}
.marchio span{display:none;font-size:13.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--inchiostro-2);white-space:nowrap;font-weight:600}
@media (min-width:1500px){ .marchio span{display:inline} }

.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}
}

.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}
.solo-telefono i{font-style:normal}
.solo-telefono i::before{content:'Chiama'}
@media (min-width:1024px){ .solo-telefono{display:none} }

.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)}
.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 ───────────────────────────────────────────────────────────── */
.azione{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;
  box-shadow:0 0 70px 26px rgba(9,11,13,.45)}
/* il fondale: solo oltre i 1500 px, e solo sfuocato */
#lavoro .scena::before{content:'';position:absolute;inset:-40px;z-index:0;
  background-color:var(--notte);background-image:var(--fondale);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(34px) brightness(.72) saturate(.85)}
@media (max-width:1520px){ #lavoro .scena::before{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} }
@media (min-width:960px){
  #lavoro .banda{display:grid;grid-template-columns:1.15fr auto;
    grid-template-areas:"tit azioni" "sotto nastro";
    align-items:start;column-gap:clamp(30px,4vw,64px);row-gap:clamp(14px,2vh,22px)}
  #lavoro h1{grid-area:tit}
  #lavoro .sotto{grid-area:sotto;align-self:start}
  #lavoro .azioni-riga{grid-area:azioni;justify-content:flex-end}
  #lavoro .nastro{grid-area:nastro;justify-content:flex-end;text-align:right}
}

/* ── 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}
.confronto .intesta{display:flex;flex-direction:column;gap:7px}
.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:80ch}

/* ── barra di chiamata ──────────────────────────────────────────────────── */
.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%,transparent);
  padding-bottom:env(safe-area-inset-bottom);
  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:var(--barra);
  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)}
.nota-privacy{font-size:13.8px;line-height:1.56;color:var(--inchiostro-2)}
/* 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}
.avviso-disdetta{font-size:14.4px;line-height:1.55;color:var(--inchiostro-2);
  border-top:var(--filo-tenue);padding-top:12px}
.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   → il riflesso che attraversa il titolo di copertina
     · 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 · IL RIFLESSO SUL TITOLO. Una lama di luce attraversa il titolo della
      copertina, come il getto che passa sulla vernice bagnata. Non tocca il
      colore del testo: è uno strato sopra, quindi il contrasto resta quello
      dichiarato e il collaudo può ancora misurarlo. ─────────────────────── */
#lavoro h1{position:relative;isolation:isolate}
html.js #lavoro h1::after{content:'';position:absolute;inset:-6% -12%;z-index:1;
  pointer-events:none;mix-blend-mode:overlay;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  background-size:260% 100%;background-position:120% 0;
  animation:getto 9s cubic-bezier(.32,0,.2,1) 1.1s infinite}
@keyframes getto{
  0%   {opacity:0;background-position:130% 0}
  6%   {opacity:1}
  26%  {opacity:1;background-position:-40% 0}
  32%  {opacity:0;background-position:-40% 0}
  100% {opacity:0;background-position:-40% 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. ──────── */
.confronto{--onda:0}
html.js .confronto td.mano,html.js .confronto th.mano{position:relative;isolation:isolate}
html.js .confronto td.mano::before,html.js .confronto th.mano::before{
  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)}
html.js .confronto.viva td.mano::before,html.js .confronto.viva th.mano::before{transform:scaleY(1)}
html.js .confronto.viva tbody tr:nth-child(1) td.mano::before{transition-delay:.10s}
html.js .confronto.viva tbody tr:nth-child(2) td.mano::before{transition-delay:.20s}
html.js .confronto.viva tbody tr:nth-child(3) td.mano::before{transition-delay:.30s}
html.js .confronto.viva tbody tr:nth-child(4) td.mano::before{transition-delay:.40s}
html.js .confronto.viva tbody tr:nth-child(5) td.mano::before{transition-delay:.50s}
html.js .confronto.viva tbody tr:nth-child(6) td.mano::before{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 h1::after,
  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::before,html.js .confronto th.mano::before{
    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)}