/* ═══════════════════════════════════════════════════════════════════════════
   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;justify-content:stretch}
#lavoro .griglia{flex:1 1 auto;display:grid;gap:clamp(22px,3.2vh,38px);
  grid-template-rows:auto auto;align-content:center;padding-block:clamp(26px,4.5vh,52px)}
#lavoro h1{font-size:clamp(38px,7.4vw,78px);max-width:15ch;letter-spacing:-.018em;line-height:.98}
#lavoro h1 em{font-style:italic;color:var(--rosso);display:block}
#lavoro .sotto{font-size:clamp(17px,1.2rem,21.5px);max-width:50ch;color:var(--inchiostro-2);line-height:1.52}
#lavoro .prima{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,26px);justify-content:center}
#lavoro .foto{position:relative;overflow:hidden;background:var(--carta-3);order:-1;
  height:clamp(150px,28svh,260px);max-height:calc((100vw - var(--margine)*2)/2)}
#lavoro .foto img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
  transform:scale(1.045)}
html.js #lavoro .foto img{animation:carrello 26s ease-out both}
@keyframes carrello{from{transform:scale(1.0)}to{transform:scale(1.09)}}
#lavoro .didascalia{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 11px;
  font-size:13.5px;letter-spacing:.02em;color:#F2EDE4;
  background-color:rgba(10,12,14,.82);
  background-image:linear-gradient(to top, rgba(8,10,12,.55) 0%, rgba(8,10,12,0) 100%)}
#lavoro .nastro{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro-2);font-weight:640}
@media (min-width:960px){
  #lavoro .griglia{grid-template-columns:1.02fr .98fr;grid-template-rows:1fr;
    gap:clamp(34px,4vw,72px);align-items:center}
  #lavoro .foto{order:0;height:auto;aspect-ratio:1.16;max-height:100%;align-self:center}
}

/* ── 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)}
.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: si carica solo se la apri tu ────────────────────────────────── */
.mappa{position:relative;background:var(--notte-2);border:var(--filo-scuro);overflow:hidden;
  min-height:300px;display:flex}
.mappa iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
.mappa .velo{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;font:inherit;
  width:100%;min-height:300px;background:var(--notte-2);color:var(--latte);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:28px;text-align:center;transition:background .3s ease}
.mappa .velo:hover{background:#232A30}
.mappa .velo strong{font-family:var(--tit);font-weight:500;font-size:29px;line-height:1.05}
.mappa .velo span{font-size:15.2px;color:var(--latte-2);max-width:38ch;line-height:1.5}
.mappa .velo em{font-style:normal;font-size:13.6px;color:var(--latte-3);max-width:40ch;line-height:1.5}
.mappa .velo .finto{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 24px;background:var(--rosso);color:#fff;border-radius:5px;font-weight:640;
  font-size:16.5px;margin-top:6px}

/* ── 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)}
.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) + 2px)}
@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}
  #lavoro .prima{gap:15px}
  .cappello{margin-bottom:20px}
}
@media (max-width:959px){ #lavoro .sotto.seconda{display:none} }
@media (max-height:700px){ #lavoro .nastro{display:none} }
@media (max-height:430px){ #lavoro .foto{display:none} }
@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 .foto img{animation:none !important;transform:scale(1.02) !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 .sotto.seconda{display:none}
  #lavoro .prima{gap:13px}
  #lavoro .griglia{padding-block:16px;gap:16px}
  #lavoro .foto{height:clamp(110px,18svh,150px)}
  #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}
}