/* =========================================================================
   Alessandro Manutenzioni Edili — foglio di stile
   Terza direzione, quella buona: contemporanea e ariosa.
   Carta calda, inchiostro, fotografia grande, filetti sottili.
   Titoli in Figtree (grottesca calda), testo in Inter.

   🔤 PER CAMBIARE I FONT SI TOCCA SOLO --titolo E --testo, QUI SOTTO.
   Nella cartella assets/font/ c'è anche Plus Jakarta Sans, già pronta.
   ========================================================================= */

/* --- Font self-hosted: nessuna richiesta a Google, nessun cookie di terzi --- */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(../font/figtree.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../font/plusjakartasans.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../font/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../font/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. TOKEN ---------- */
:root{
  /* 🔤 I DUE FONT DEL SITO */
  --titolo:"Figtree",system-ui,sans-serif;
  --testo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --carta:#F8F6F2;
  --carta-2:#F0ECE5;
  --carta-3:#E4DED4;
  --inchiostro:#15171B;
  --testo-col:#585D65;
  --testo-tenue:#9BA1A9;
  --giallo:#FFC42E;
  --giallo-2:#E5A800;
  --linea:#E0DAD0;
  --linea-scura:#2E333B;
  --bianco:#FFFFFF;

  --t-xs:.75rem; --t-s:.875rem; --t-m:1.0625rem; --t-l:1.1875rem;
  --t-xl:clamp(1.375rem,1.1rem + 1.2vw,1.8rem);
  --t-2xl:clamp(1.8rem,1.35rem + 2.1vw,2.75rem);
  --t-3xl:clamp(2.2rem,1.55rem + 3vw,3.6rem);
  --t-4xl:clamp(2.6rem,1.7rem + 4.2vw,4.6rem);
  --t-5xl:clamp(3rem,1.9rem + 5.4vw,5.6rem);

  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  --sp-7:2.75rem; --sp-8:3.5rem; --sp-9:4.5rem; --sp-10:6rem;

  --max:1220px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px;
  --r-l:22px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--testo);font-size:var(--t-m);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* niente cursore a barretta sul testo: sembrava di dover scrivere nella pagina.
     Il testo resta selezionabile, cambia solo la forma del puntatore. */
  cursor:default;
}
input,textarea,select{cursor:text}
a,button,summary,label,[role="slider"],.galleria button{cursor:pointer}
.ba,.ba__maniglia{cursor:ew-resize}
.galleria button{cursor:zoom-in}
h1,h2,h3,h4,p,li,span,figcaption{caret-color:transparent}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--titolo);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin:0}
p{margin:0 0 var(--sp-4)}
ul{margin:0;padding:0;list-style:none}
strong,b{font-weight:600}

::selection{background:var(--giallo);color:var(--inchiostro)}
:focus-visible{outline:2px solid var(--inchiostro);outline-offset:4px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--inchiostro);color:var(--carta);padding:var(--sp-3) var(--sp-5);font-weight:600}
.skip:focus{left:0}

/* ---------- 3. IMPIANTO ---------- */
.wrap{width:min(100% - (var(--gutter)*2),var(--max));margin-inline:auto}
.stretta{max-width:880px}
.sezione{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sezione--fitta{padding-block:clamp(2.25rem,5vw,3.5rem)}
.centro{text-align:center}
.solo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scuro{background:var(--inchiostro);color:#C6CBD2}
.scuro h1,.scuro h2,.scuro h3{color:var(--bianco)}
.crema{background:var(--carta-2)}

.occhiello{
  display:flex;align-items:center;gap:var(--sp-3);
  font-family:var(--testo);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--testo-tenue);
  margin-bottom:var(--sp-5);
}
.occhiello::before{content:"";width:30px;height:2px;background:var(--giallo);flex:none;border-radius:2px}

.titolo-sezione{font-size:var(--t-3xl);max-width:19ch}
.titolo-sezione--largo{max-width:25ch}
.sottotitolo{font-size:var(--t-l);color:var(--testo-col);max-width:56ch;line-height:1.62}
.scuro .sottotitolo{color:#A4AAB2}
.filetto{height:1px;background:var(--linea);border:0;margin:0}

/* parola in evidenza: barra gialla dietro la base della parola */
.sott{
  background:linear-gradient(var(--giallo),var(--giallo)) no-repeat 0 calc(100% - .05em);
  background-size:100% .22em;padding-bottom:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- 4. PULSANTI ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:58px;padding:.85em 1.75em;border:1.5px solid transparent;border-radius:999px;
  font-family:var(--testo);font-size:1.0625rem;font-weight:600;
  text-decoration:none;cursor:pointer;background:var(--inchiostro);color:var(--carta);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(21,23,27,.16)}
.btn--giallo{background:var(--giallo);color:var(--inchiostro)}
.btn--giallo:hover{background:var(--giallo-2)}
.btn--fantasma{background:transparent;color:var(--inchiostro);border-color:var(--linea)}
.btn--fantasma:hover{border-color:var(--inchiostro);box-shadow:none;background:rgba(21,23,27,.04)}
.scuro .btn--fantasma{color:var(--bianco);border-color:var(--linea-scura)}
.scuro .btn--fantasma:hover{background:rgba(255,255,255,.08);border-color:#5A626C}
.btn--grande{min-height:64px;font-size:1.125rem;padding:.9em 2.1em}
.btn .ico{width:1.15em;height:1.15em;flex:none}
.btn-riga{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block:var(--sp-6) var(--sp-4)}
@media (max-width:560px){.btn,.btn--grande{width:100%;font-size:1.0625rem;min-height:60px;padding:.85em 1.2em}}

.link{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:600;position:relative;padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(.3);transform-origin:left;transition:transform .4s var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link .frec{transition:transform .3s var(--ease)}
.link:hover .frec{transform:translateX(5px)}

/* ---------- 5. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--carta);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.site-header.compatto{border-bottom-color:var(--linea);background:rgba(248,246,242,.93);backdrop-filter:none}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding-block:var(--sp-4)}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
.logo svg{width:38px;height:38px;color:var(--inchiostro);flex:none}
.logo__txt{line-height:1.08}
.logo__l1{font-size:.6rem;letter-spacing:.22em;font-weight:600;color:var(--testo-tenue);display:block}
.logo__l2{font-family:var(--titolo);font-weight:800;font-size:1.0625rem;letter-spacing:-.03em;display:block;margin-top:2px}

.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a{text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--testo-col);position:relative;padding-block:.4em;transition:color .25s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--giallo);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--inchiostro)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--inchiostro);font-weight:600}

.header-tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;font-size:1rem;padding:.6em 1.3em;border-radius:999px;background:var(--inchiostro);color:var(--carta);transition:background .25s var(--ease),transform .25s var(--ease)}
.header-tel:hover{background:var(--giallo);color:var(--inchiostro);transform:translateY(-1px)}

.burger{display:none;width:46px;height:46px;border:1px solid var(--linea);border-radius:999px;background:transparent;cursor:pointer;padding:0}
.burger span{display:block;width:19px;height:1.8px;background:var(--inchiostro);margin:5px auto;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

@media (max-width:980px){
  .nav,.header-tel{display:none}
  .burger{display:block}
  .nav.aperto{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--carta);border-bottom:1px solid var(--linea);max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--sp-2) var(--gutter) var(--sp-6)}
  .nav.aperto a{padding:var(--sp-4) 0;border-bottom:1px solid var(--linea);font-family:var(--titolo);font-size:1.4rem;font-weight:700;color:var(--inchiostro)}
  .nav.aperto a::after{display:none}
}

/* ---------- 6. HERO ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5rem) 0}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-size:var(--t-4xl);margin-bottom:var(--sp-5);max-width:14ch}
.hero__sub{font-size:var(--t-l);color:var(--testo-col);max-width:46ch;line-height:1.62}
.hero__figura{position:relative;margin:0}
.hero__figura img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-l)}
.hero__nota{
  position:absolute;left:0;bottom:0;background:var(--giallo);color:var(--inchiostro);
  padding:.85rem 1.15rem;max-width:240px;font-size:.8125rem;line-height:1.45;font-weight:500;
  border-radius:0 var(--r) 0 var(--r-l);
}
.hero__tel{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;color:var(--testo-col);font-size:.9375rem}
.hero__tel a{text-decoration:none}
.hero__tel b{font-family:var(--titolo);font-weight:800;font-size:1.7rem;color:var(--inchiostro);letter-spacing:-.03em}
.hero__tel a:hover b{color:var(--giallo-2)}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .hero h1{max-width:none}
  .hero__figura img{aspect-ratio:4/3}
}

/* ---------- 7. PROMESSE ---------- */
.promesse{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.promessa{background:var(--bianco);border-radius:var(--r-l);padding:var(--sp-6);border:1px solid var(--linea)}
.promessa .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--giallo);font-family:var(--titolo);font-weight:800;font-size:.9rem;margin-bottom:var(--sp-4)}
.promessa h3{font-size:var(--t-xl);margin-bottom:var(--sp-2)}
.promessa p{color:var(--testo-col);font-size:.9375rem;margin:0;line-height:1.6}
@media (max-width:860px){.promesse{grid-template-columns:1fr;gap:var(--sp-4)}}

/* ---------- 8. BLOCCHI SERVIZIO ---------- */
.blocco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.25rem,4vw,3.5rem)}
.blocco + .blocco{border-top:1px solid var(--linea)}
.blocco--inv .blocco__testo{order:2}
.blocco__figura{overflow:hidden;border-radius:var(--r-l)}
.blocco__figura img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.1s var(--ease)}
.blocco:hover .blocco__figura img{transform:scale(1.04)}
.blocco__n{display:block;font-family:var(--testo);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--giallo-2);margin-bottom:var(--sp-3)}
.blocco h3{font-size:var(--t-2xl);margin-bottom:var(--sp-4)}
.blocco p{color:var(--testo-col)}
@media (max-width:860px){.blocco{grid-template-columns:1fr;gap:var(--sp-5)}.blocco--inv .blocco__testo{order:0}}

/* ---------- 9. PRIMA / DOPO ---------- */
.ba-sezione{background:var(--inchiostro);padding-block:clamp(3.5rem,8vw,6.5rem)}
.ba{position:relative;overflow:hidden;aspect-ratio:16/10;max-width:1080px;margin-inline:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#0F1114;border-radius:var(--r-l)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__dopo{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__eti{position:absolute;top:18px;font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.5em 1em;border-radius:999px;pointer-events:none;background:rgba(21,23,27,.7);color:#fff}
.ba__eti--prima{left:18px}
.ba__eti--dopo{right:18px;background:var(--giallo);color:var(--inchiostro)}
.ba__maniglia{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:rgba(255,255,255,.92);transform:translateX(-50%);cursor:ew-resize}
.ba__pomello{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.ba:hover .ba__pomello{transform:translate(-50%,-50%) scale(1.08)}
.ba__pomello svg{width:22px;height:22px;color:var(--inchiostro)}
.ba:focus-within .ba__pomello{outline:2px solid var(--giallo);outline-offset:4px}
.ba__aiuto{text-align:center;color:var(--testo-tenue);font-size:.875rem;margin-top:var(--sp-5)}
.no-js .ba{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--inchiostro)}
.no-js .ba img{position:static;clip-path:none!important;aspect-ratio:4/3}
.no-js .ba__maniglia{display:none}

/* ---------- 10. PASSI ---------- */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-7)}
.passo{padding-top:var(--sp-5);border-top:2px solid var(--inchiostro)}
.passo__n{display:block;font-family:var(--titolo);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--giallo-2);margin-bottom:var(--sp-3)}
.passo h3{font-size:var(--t-xl);margin-bottom:var(--sp-3)}
.passo p{color:var(--testo-col);font-size:.9375rem;line-height:1.6;margin:0}
@media (max-width:860px){.passi{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---------- 11. INDICE LAVORI ---------- */
.indice{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3rem);margin-top:var(--sp-7)}
@media (max-width:900px){.indice{grid-template-columns:1fr;gap:var(--sp-6)}}
.indice h3{font-family:var(--testo);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-tenue);padding-bottom:var(--sp-3);border-bottom:1px solid var(--linea);margin-bottom:var(--sp-2)}
.indice li{padding:.62em 0;border-bottom:1px solid var(--linea);font-size:1rem;display:flex;align-items:baseline;gap:.7em}
.indice li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--giallo);flex:none}
.nota{margin-top:var(--sp-7);padding:var(--sp-5) var(--sp-6);background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-l);color:var(--testo-col);font-size:.9375rem}
.nota b{color:var(--inchiostro)}

/* ---------- 12. MOTIVI ---------- */
.motivi{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-7)}
.motivo{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-l);padding:var(--sp-6)}
.motivo h3{font-size:var(--t-xl);margin-bottom:var(--sp-3)}
.motivo p{color:var(--testo-col);margin:0}
.motivo--chiave{background:var(--giallo);border-color:var(--giallo)}
.motivo--chiave p{color:#4A3D0F}
@media (max-width:860px){.motivi{grid-template-columns:1fr}}

/* ---------- 13. CHI SONO ---------- */
.chi{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.chi{grid-template-columns:1fr}}
.chi__figura img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-l)}
.firma{display:block;font-family:var(--titolo);font-size:1.4rem;font-weight:800;color:var(--bianco);margin-top:var(--sp-5);letter-spacing:-.03em}
.firma span{display:block;font-family:var(--testo);font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-tenue);margin-top:.45rem}

/* ---------- 14. ZONA ---------- */
.comuni{display:flex;flex-wrap:wrap;gap:.6rem .5rem;margin-top:var(--sp-6)}
.comuni li{background:var(--bianco);border:1px solid var(--linea);border-radius:999px;padding:.45em 1.15em;font-size:.9375rem;color:var(--testo-col);transition:border-color .25s,color .25s,transform .25s}
.comuni li:hover{border-color:var(--inchiostro);color:var(--inchiostro);transform:translateY(-1px)}

/* ---------- 15. FAQ ---------- */
.faq{margin-top:var(--sp-7)}
.faq details{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:var(--sp-3);transition:border-color .25s var(--ease)}
.faq details[open]{border-color:var(--inchiostro)}
.faq summary{cursor:pointer;list-style:none;padding:var(--sp-5) 3.25rem var(--sp-5) var(--sp-5);position:relative;font-family:var(--titolo);font-size:var(--t-xl);font-weight:700;line-height:1.3;transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--giallo-2)}
.faq summary::after{content:"";position:absolute;right:1.4rem;top:50%;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .risposta{padding:0 var(--sp-5) var(--sp-5);color:var(--testo-col);max-width:66ch}
.faq .risposta p:last-child{margin-bottom:0}

/* ---------- 16. RILIEVO ---------- */
.rilievo{background:var(--bianco);border:1px solid var(--linea);border-left:4px solid var(--giallo);border-radius:var(--r);padding:clamp(1.5rem,4vw,2.4rem);max-width:66ch}
.rilievo h2,.rilievo h3{font-size:var(--t-2xl);margin-bottom:var(--sp-4)}
.rilievo p:last-child{margin-bottom:0}
.allerta{border-left-color:#C8452F;background:#FFF6F4}
.allerta h2{color:#C8452F}

/* ---------- 17. BANDA FINALE ---------- */
.banda{background:var(--giallo);text-align:center}
.banda .wrap{padding-block:clamp(3rem,7vw,5rem)}
.banda h2{font-size:var(--t-2xl);margin-bottom:var(--sp-5);color:var(--inchiostro)}
.banda__tel{display:inline-block;font-family:var(--titolo);font-size:var(--t-5xl);font-weight:800;line-height:1;letter-spacing:-.045em;text-decoration:none;color:var(--inchiostro);margin-bottom:var(--sp-6);transition:opacity .25s var(--ease)}
.banda__tel:hover{opacity:.72}
.banda .btn-riga{justify-content:center;margin-block:0 var(--sp-4)}
.banda__nota{margin:0;font-size:.9375rem;color:#6B5A22}

/* ---------- 18. GALLERIA ---------- */
.galleria{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
@media (max-width:860px){.galleria{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.galleria{grid-template-columns:1fr}}
.galleria button{padding:0;border:0;overflow:hidden;background:var(--carta-3);cursor:zoom-in;display:block;width:100%;border-radius:var(--r)}
.galleria img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .9s var(--ease),opacity .3s}
.galleria button:hover img{transform:scale(1.05);opacity:.94}
.lavoro{padding-block:clamp(2.25rem,5vw,3.5rem)}
.lavoro + .lavoro{border-top:1px solid var(--linea)}
.lavoro h3{font-size:var(--t-2xl);margin-bottom:var(--sp-3)}
.lavoro p{color:var(--testo-col);max-width:66ch}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,17,20,.96);display:grid;place-items:center;padding:var(--sp-5)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1200px,94vw);max-height:88vh;width:auto;border-radius:var(--r)}
.lightbox__x{position:absolute;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.4rem;cursor:pointer;transition:background .25s}
.lightbox__x:hover{background:rgba(255,255,255,.24)}

/* ---------- 19. CONTATTI ---------- */
.contatti{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-7)}
@media (max-width:860px){.contatti{grid-template-columns:1fr}}
.contatto{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-l);padding:var(--sp-7)}
.contatto--giallo{background:var(--giallo);border-color:var(--giallo)}
.contatto h2{font-size:var(--t-xl);margin-bottom:var(--sp-4)}
.contatto__grande{font-family:var(--titolo);font-size:var(--t-3xl);font-weight:800;line-height:1;letter-spacing:-.04em;text-decoration:none;display:block;margin-bottom:var(--sp-4)}

/* ---------- 20. FOOTER ---------- */
.site-footer{background:var(--inchiostro);color:#98A0A8;padding-block:var(--sp-9) var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-8)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr;gap:var(--sp-6)}}
.site-footer h2{color:var(--bianco);font-family:var(--testo);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer a{color:#98A0A8;text-decoration:none;transition:color .25s}
.site-footer a:hover{color:var(--giallo)}
.site-footer li{padding:.28em 0;font-size:.9375rem}
.footer-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-4)}
.footer-logo svg{width:34px;height:34px;color:var(--giallo);flex:none}
.footer-logo b{font-family:var(--titolo);color:var(--bianco);font-size:1.0625rem;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.footer-legale{border-top:1px solid var(--linea-scura);margin-top:var(--sp-8);padding-top:var(--sp-5);font-size:var(--t-xs);color:#6D747C;display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}

/* ---------- 21. BARRA MOBILE ---------- */
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;grid-template-columns:1fr 1fr;background:var(--inchiostro)}
.barra-mobile a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:60px;font-weight:600;font-size:1rem;text-decoration:none;color:var(--carta)}
.barra-mobile .b-tel{background:var(--giallo);color:var(--inchiostro)}
.barra-mobile svg{width:19px;height:19px}
@media (max-width:900px){.barra-mobile{display:grid}body{padding-bottom:60px}}

/* ---------- 22. COOKIE ---------- */
.cookie{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:120;background:var(--inchiostro);color:#C4C9D0;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-l);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;max-width:720px;margin-inline:auto;box-shadow:0 18px 50px rgba(0,0,0,.2)}
.cookie p{margin:0;flex:1 1 300px;font-size:.875rem;line-height:1.55}
.cookie a{color:var(--giallo)}
.cookie .btn{min-height:46px;padding:.6em 1.4em;font-size:.9375rem}
@media (max-width:900px){.cookie{bottom:72px}}

/* ---------- 23. BRICIOLE ---------- */
.briciole{font-size:.8125rem;color:var(--testo-tenue);padding-top:var(--sp-5)}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--inchiostro)}
.briciole span{margin-inline:.5em}

/* =========================================================================
   24. MOVIMENTO
   Regole della casa:
   · ogni movimento ha un motivo, niente animazioni sparse
   · un solo handler di scroll, rAF-throttled (vedi main.js)
   · RETE DI SICUREZZA: se il JS non parte, la classe .js non viene messa e
     TUTTO resta visibile. Un contenuto invisibile e' il guasto peggiore.
   · chi ha "riduci movimento" attivo vede la pagina ferma
   ========================================================================= */

/* --- 24.1 base: senza JS non si nasconde niente --- */
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-r="2"]{transition-delay:.1s}
.js .reveal[data-r="3"]{transition-delay:.2s}
.js .reveal[data-r="4"]{transition-delay:.3s}

/* --- 24.2 titoli: salgono da dietro una maschera --- */
.js .rivela-titolo{overflow:hidden;display:block}
.js .rivela-titolo > span{
  display:block;transform:translateY(105%);
  transition:transform 1s var(--ease);
}
.js .rivela-titolo.in > span{transform:none}

/* --- 24.3 immagini: la maschera si apre e la foto si assesta --- */
.js .rivela-foto{overflow:hidden}
.js .rivela-foto img{
  transform:scale(1.14);opacity:0;
  transition:transform 1.3s var(--ease),opacity .9s var(--ease);
}
.js .rivela-foto.in img{transform:scale(1);opacity:1}

/* --- 24.4 entrata della prima schermata, senza aspettare lo scroll --- */
@keyframes sali{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .entra{opacity:0;animation:sali .95s var(--ease) forwards}
.js .entra:nth-child(1){animation-delay:.05s}
.js .entra-1{animation-delay:.05s}
.js .entra-2{animation-delay:.16s}
.js .entra-3{animation-delay:.27s}
.js .entra-4{animation-delay:.38s}
.js .entra-5{animation-delay:.5s}

/* --- 24.5 parallasse leggera: la foto scorre un filo piu' piano --- */
.js .parallasse img{will-change:transform}

/* --- 24.6 barra di avanzamento della lettura --- */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:150;
  background:var(--giallo);transform:scaleX(var(--avanzamento,0));
  transform-origin:left;pointer-events:none;
}
.no-js .progresso{display:none}

/* --- 24.7 header che si toglie di mezzo scendendo e torna salendo --- */
.site-header{transition:transform .45s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.site-header.nascosto{transform:translateY(-100%)}

/* --- 24.8 pulsanti: un riflesso che passa sopra --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn--giallo::after,.btn--fantasma::after{
  background:linear-gradient(110deg,transparent 25%,rgba(21,23,27,.09) 50%,transparent 75%);
}
.btn:hover::after{transform:translateX(120%)}

/* --- 24.9 schede: si sollevano e il bordo si accende --- */
.promessa,.motivo,.contatto,.faq details{
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.promessa:hover,.motivo:hover,.contatto:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(21,23,27,.09);
  border-color:var(--carta-3);
}
.motivo--chiave:hover{box-shadow:0 16px 40px rgba(229,168,0,.28)}

/* --- 24.10 numerini dei passi: la riga sopra si tira da sinistra --- */
.passo{position:relative}
.passo::before{
  content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;
  background:var(--giallo);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);
}
.js .passo.in::before{transform:scaleX(1)}

/* --- 24.11 voci dell'indice: entrano una dopo l'altra --- */
.js .indice.in li{animation:sali .6s var(--ease) backwards}
.js .indice.in li:nth-child(1){animation-delay:.02s}
.js .indice.in li:nth-child(2){animation-delay:.06s}
.js .indice.in li:nth-child(3){animation-delay:.1s}
.js .indice.in li:nth-child(4){animation-delay:.14s}
.js .indice.in li:nth-child(5){animation-delay:.18s}
.js .indice.in li:nth-child(6){animation-delay:.22s}
.js .indice.in li:nth-child(7){animation-delay:.26s}
.js .indice.in li:nth-child(8){animation-delay:.3s}

/* --- 24.12 comuni: nastro che scorre piano --- */
.nastro{overflow:hidden;margin-top:var(--sp-6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nastro__pista{display:flex;width:max-content;gap:.5rem;animation:scorri 42s linear infinite}
.nastro:hover .nastro__pista{animation-play-state:paused}
.nastro li{flex:none}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.no-js .nastro__pista{animation:none;flex-wrap:wrap}

/* --- 24.13 prima/dopo: un invito, una volta sola --- */
@keyframes invito{
  0%{left:50%} 22%{left:36%} 55%{left:64%} 100%{left:50%}
}
.js .ba.invita .ba__maniglia{animation:invito 2.4s var(--ease)}
.ba__pomello svg{transition:transform .3s var(--ease)}
.ba:hover .ba__pomello svg{transform:scale(1.12)}

/* --- 24.14 galleria: le foto entrano sfalsate --- */
.js .galleria.in button{animation:sali .7s var(--ease) backwards}
.js .galleria.in button:nth-child(2){animation-delay:.07s}
.js .galleria.in button:nth-child(3){animation-delay:.14s}
.js .galleria.in button:nth-child(4){animation-delay:.21s}
.js .galleria.in button:nth-child(5){animation-delay:.28s}
.js .galleria.in button:nth-child(6){animation-delay:.35s}

/* --- 24.15 link del menu e voci: micro-interazioni --- */
.comuni li,.nastro li{transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.comuni li:hover,.nastro li:hover{transform:translateY(-3px);background:var(--giallo);border-color:var(--giallo);color:var(--inchiostro)}
.logo svg{transition:transform .5s var(--ease)}
.logo:hover svg{transform:rotate(-6deg) scale(1.06)}
.footer-logo svg{transition:transform .5s var(--ease)}
.site-footer a:hover{letter-spacing:.005em}

/* --- 24.16 entrata morbida della pagina --- */
@keyframes apri{from{opacity:0}to{opacity:1}}
.js body{animation:apri .5s var(--ease)}

/* --- 24.17 chi ha chiesto meno movimento, non lo vede --- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .entra,.js .rivela-titolo > span,.js .rivela-foto img{
    opacity:1!important;transform:none!important;animation:none!important}
  .js .indice.in li,.js .galleria.in button{animation:none!important}
  .nastro__pista{animation:none!important;flex-wrap:wrap}
  .js body{animation:none}
  .js .ba.invita .ba__maniglia{animation:none}
}

/* ---------- 25. 404 / TESTO ---------- */
.errore{text-align:center;padding-block:clamp(4rem,12vw,8rem)}
.errore .codice{display:block;font-family:var(--titolo);font-size:var(--t-5xl);font-weight:800;color:var(--carta-3);line-height:1;letter-spacing:-.05em}
.testo{max-width:70ch}
.testo h2{font-size:var(--t-xl);margin:var(--sp-8) 0 var(--sp-4)}
.testo h2:first-of-type{margin-top:var(--sp-6)}
.testo a{color:var(--inchiostro)}