/* Lo stile della home. Dal 25/08/2026 si scrive qui a mano. */

:root{
  --br: oklch(0.702 0.144 42);
  --br-cupo: oklch(0.585 0.145 40);
  --br-velo: oklch(0.957 0.030 56);
  --panna: oklch(0.987 0.007 70);
  --panna-2: oklch(0.968 0.011 66);
  --pece: oklch(0.215 0.018 45);
  --pece-2: oklch(0.448 0.014 48);
  --fumo: oklch(0.618 0.012 50);
  --filo: oklch(0.897 0.012 58);
  --ok: oklch(0.55 0.10 155);
  --d:"Instrument Sans", system-ui, sans-serif;
  --t:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
/* ⚠️ Lo scorrimento morbido si accende a pagina carica, non prima: finche' si
   carica, il salto all'ancora deve essere secco. Chi arriva da un'altra pagina
   con /#prezzi gia' nell'indirizzo (il tasto della 404) fa partire al browser
   una scivolata di quattordicimila pixel mentre la pagina si sta ancora
   montando: basta un dito sullo schermo o qualche fotogramma perso e si ferma
   dove capita — ed e' cosi' che dal telefono si atterrava ogni volta altrove.
   La classe la mette home.js sul carico finito, quando il browser ha gia'
   agganciato l'ancora e non la ritocca piu': i clic sulle voci del menu
   restano morbidi, l'arrivo da fuori no. Senza JavaScript si perde solo la
   morbidezza, l'ancora funziona lo stesso. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
html.morbida{scroll-behavior:smooth}
body{margin:0;background:var(--panna);color:var(--pece);font-family:var(--t);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:700;line-height:1.04;letter-spacing:-0.025em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--br);outline-offset:3px;border-radius:6px}

/* barra di avanzamento della lettura */
.avanza{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--br);z-index:70;transition:transform .1s linear}
.tab{font-variant-numeric:tabular-nums}
.tel{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4.4vw,52px)}
.occhio{font-size:12.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--br-cupo)}

/* ---------- comparsa ---------- */
.sale{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.sale.dentro{opacity:1;transform:none}
.sale.r1{transition-delay:.08s}.sale.r2{transition-delay:.16s}.sale.r3{transition-delay:.24s}

/* ---------- barra ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
.barra.appoggiata{background:color-mix(in oklch, var(--panna) 90%, transparent);backdrop-filter:blur(14px);border-bottom-color:var(--filo)}
.barra .tel{display:flex;align-items:center;gap:clamp(14px,3vw,38px);height:82px}
/* Il marchio e la scritta stanno DENTRO l'SVG (`logo-lettering.svg`): prima la
   scritta era testo HTML accanto al solo simbolo, e le due cose non si
   allineavano mai uguali fra un browser e l'altro. Da qui in poi l'altezza e'
   l'unica misura da regolare, e le proporzioni non si possono piu' sbagliare.
   L'altezza e' piu' alta di quella del vecchio simbolo (38px) perche' dentro
   l'SVG la scritta occupa meno della meta' dell'altezza: a 38px sarebbe
   illeggibile. */
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo img{height:48px;width:auto}
@media(max-width:560px){.logo img{height:38px}}
@media(max-width:400px){.logo img{height:34px}}
.voci{display:flex;gap:clamp(14px,2.2vw,30px);font-size:15.5px;font-weight:500;color:var(--pece-2)}
.voci a{text-decoration:none;position:relative;padding:4px 0}
.voci a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--br);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.voci a:hover::after{transform:scaleX(1)}
@media(max-width:940px){.voci{display:none}}
.bot{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;font-family:var(--t);font-weight:700;font-size:15.5px;padding:13px 24px;border-radius:12px;border:1.5px solid transparent;white-space:nowrap;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .25s}
.corto{display:none}
@media(max-width:760px){.barra .bot{font-size:14px;padding:11px 16px;border-radius:10px}.lungo{display:none}.corto{display:inline}}
@media(max-width:560px){.barra .tel{height:70px;gap:10px}.barra .bot{font-size:13.5px;padding:10px 13px}}
.bot.grosso{font-size:17.5px;padding:18px 36px;border-radius:14px}
.bot.pieno{background:var(--br);color:oklch(0.995 0.008 60);box-shadow:0 10px 24px -12px oklch(0.702 0.144 42 / .8)}
.bot.pieno:hover{background:var(--br-cupo);transform:translateY(-2px);box-shadow:0 16px 30px -14px oklch(0.585 0.145 40 / .85)}
.bot.orlo{border-color:var(--filo);color:var(--pece);background:var(--panna)}
.bot.orlo:hover{border-color:var(--pece);transform:translateY(-2px)}
.bot.scuro{background:var(--pece);color:var(--panna)}
.bot.scuro:hover{background:oklch(0.14 0.02 44);transform:translateY(-2px)}

/* ---------- apertura ---------- */
.apre{padding:calc(82px + clamp(40px,6vw,36px)) 0 30px;position:relative}
.apre::before{
  content:"";position:absolute;inset:-10% -20% auto -20%;height:70vh;z-index:-1;
  background:radial-gradient(60% 60% at 30% 20%, oklch(0.96 0.045 60) 0%, transparent 70%);
}
.apre .tel{display:grid;grid-template-columns:1.06fr 1.22fr;gap:clamp(28px,3.4vw,44px);align-items:center}
@media(max-width:1000px){.apre .tel{grid-template-columns:1fr;gap:38px}}
.apre h1{font-size:clamp(33px,3.6vw,50px);margin:18px 0 0;line-height:1.06}
.apre h1 .col{color:var(--br-cupo)}
.apre .sotto{margin-top:22px;font-size:clamp(17px,1.9vw,20px);color:var(--pece-2);max-width:50ch}
.apre .tasti{display:flex;gap:12px;flex-wrap:nowrap;margin-top:30px}
@media(max-width:560px){.apre .tasti{flex-wrap:wrap}.apre .tasti .bot{flex:1 1 100%}}
.spunte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-top:28px;font-size:15px;color:var(--pece-2);line-height:1.4}
@media(max-width:560px){.spunte{grid-template-columns:1fr}}
.spunte span{display:flex;align-items:flex-start;gap:8px}
.spunte svg{width:16px;height:16px;flex:none;color:var(--ok);margin-top:3px}

/* finestra prodotto */
.vetro{position:relative;border-radius:16px;overflow:hidden;background:var(--panna);border:1px solid var(--filo);box-shadow:0 40px 80px -40px oklch(0.3 0.05 45 / .45), 0 6px 20px -10px oklch(0.3 0.05 45 / .25)}
.vetro .sbarra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panna-2);border-bottom:1px solid var(--filo)}
.vetro .sbarra i{width:9px;height:9px;border-radius:50%;background:oklch(0.86 0.015 60);display:block}
.vetro .sbarra span{margin-left:10px;font-size:12.5px;color:var(--fumo);font-family:var(--t)}
.vetro img{width:100%;height:auto}
.apre .vetro{transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.apre .vetro:hover{transform:perspective(1600px) rotateY(0deg) rotateX(0deg)}
@media(max-width:1000px){.apre .vetro{transform:none}}

/* ---------- nastro ---------- */
.nastro{border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);background:var(--panna-2);overflow:hidden;padding:16px 0;margin-top:clamp(30px,5vw,58px)}
.scorre{display:flex;gap:0;width:max-content;animation:scorri 34s linear infinite}
.scorre span{padding:0 30px;font-size:14.5px;font-weight:600;color:var(--pece-2);white-space:nowrap;display:flex;align-items:center;gap:12px}
.scorre span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--br);display:block}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nastro:hover .scorre{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scorre{animation:none}}

/* ---------- tour appiccicato ---------- */
.tour{padding:clamp(96px,13vw,126px) 0 clamp(40px,6vw,80px);scroll-margin-top:88px}
.cappello{max-width:60ch;margin-bottom:clamp(26px,4vw,50px)}
.cappello h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 16px}
.cappello p{color:var(--pece-2);font-size:clamp(17px,1.8vw,19.5px)}
.giro{display:grid;grid-template-columns:0.85fr 1.3fr;gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:960px){.giro{grid-template-columns:1fr;gap:20px}}
.passi{display:flex;flex-direction:column}
.passo{padding:clamp(26px,4vw,52px) 0;border-top:1px solid var(--filo);opacity:.42;transition:opacity .5s}
.passo:first-child{border-top:0}
.passo.viva{opacity:1}
.passo .n{font-family:var(--d);font-size:13px;font-weight:700;letter-spacing:0.1em;color:var(--br-cupo)}
.passo h3{font-size:clamp(22px,2.6vw,30px);margin:10px 0 10px}
.passo p{color:var(--pece-2);font-size:16.5px;max-width:46ch}
.passo p + p{margin-top:12px}
.passo ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.passo li{font-size:13.5px;background:var(--br-velo);color:var(--br-cupo);padding:6px 12px;border-radius:999px;font-weight:600}
.schermo{position:sticky;top:96px;padding-top:clamp(26px,4vw,52px)}
@media(max-width:960px){.schermo{position:static;order:-1}}
.scatto{position:relative}
.scatto figure{margin:0;position:absolute;inset:0;opacity:0;transform:scale(.985);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.scatto figure.viva{opacity:1;transform:none;position:relative}
.giro figcaption{margin-top:12px;font-size:13.5px;color:var(--fumo)}

/* schermo stretto: la figura sta dentro la sua tappa (la sposta home.js) */
.passo figure{margin:22px 0 0}
.giro.smontato .schermo{display:none}
.giro.smontato .passo{opacity:1}

/* ---------- il lavoro che sparisce ---------- */
.lavoro{padding:clamp(52px,7.5vw,96px) 0 clamp(40px,5.5vw,72px)}
.lavoro .cappello{max-width:none}
.lavoro h2{font-size:clamp(27px,3.5vw,45px);max-width:19ch}
.lavoro .sotto{margin-top:18px;font-size:clamp(16.5px,1.8vw,19px);color:var(--pece-2);max-width:none}
.lavoro .attacca{margin-top:20px;color:var(--pece);font-weight:600}

.lavori{list-style:none;margin:clamp(28px,4vw,46px) 0 0;padding:0;column-count:2;column-gap:clamp(24px,5vw,72px)}
@media(max-width:760px){.lavori{column-count:1}}
.lavori li{
  break-inside:avoid;font-family:var(--d);font-weight:500;font-size:clamp(18px,2.1vw,25px);
  line-height:1.34;padding:9px 0;color:var(--pece);
  text-decoration-line:line-through;text-decoration-thickness:2px;text-underline-offset:0;
  text-decoration-color:transparent;
  transition:color .55s cubic-bezier(.16,1,.3,1), text-decoration-color .55s cubic-bezier(.16,1,.3,1);
}
.lavori li.via{color:var(--fumo);text-decoration-color:var(--br)}

.tirasomme{margin-top:clamp(20px,2.4vw,30px)}
.tirasomme p{font-size:clamp(16.5px,1.8vw,19px);color:var(--pece-2);max-width:76ch}
.tirasomme p b{color:var(--pece);font-weight:700}
.tirasomme p + p{margin-top:10px}
.tirasomme .bot{margin-top:26px}

@media (prefers-reduced-motion: reduce){
  .lavori li{color:var(--fumo);text-decoration-color:var(--br);transition:none}
}

.attesa{aspect-ratio:1568/744;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--panna-2) 0 12px,var(--panna) 12px 24px)}
.attesa span{font-family:var(--d);font-weight:600;font-size:15px;color:var(--fumo);background:var(--panna);border:1px solid var(--filo);border-radius:999px;padding:8px 18px}

/* ---------- fascia fotografica ---------- */
.fotofascia{position:relative;min-height:min(72vh,620px);display:flex;align-items:center;overflow:hidden;margin:clamp(30px,5vw,60px) 0}
.fotofascia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotofascia .velo{position:absolute;inset:0;background:linear-gradient(100deg, oklch(0.19 0.03 44 / .92) 0%, oklch(0.19 0.03 44 / .72) 42%, oklch(0.19 0.03 44 / .25) 100%)}
.fotofascia .tel{position:relative;padding-top:clamp(46px,7vw,86px);padding-bottom:clamp(46px,7vw,86px)}
.fotofascia .occhio{color:oklch(0.82 0.09 54)}
.fotofascia h2{color:oklch(0.985 0.008 60);font-size:clamp(26px,4.2vw,50px);max-width:20ch;margin:14px 0 20px}
.fotofascia p{color:oklch(0.86 0.015 58);font-size:clamp(16.5px,1.8vw,19px);max-width:56ch}
.fotofascia p + p{margin-top:14px}

/* ---------- bento ---------- */
.bento{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,110px)}
.griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1000px){.griglia{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.griglia{grid-template-columns:1fr}}
.tass{background:var(--panna-2);border:1px solid var(--filo);border-radius:18px;padding:clamp(22px,2.6vw,30px);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;position:relative;overflow:hidden}
.tass:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px oklch(0.3 0.05 45 / .6)}
.tass h3{font-size:20px;margin-bottom:8px}
.tass p{color:var(--pece-2);font-size:16px}
.tass.larga{grid-column:span 3}
.tass.media{grid-column:span 2}
.tass.stretta{grid-column:span 2}
@media(max-width:1000px){.tass.larga,.tass.media,.tass.stretta{grid-column:span 1}}
.tass.marchiata{background:var(--pece);color:oklch(0.95 0.01 60);border-color:var(--pece)}
.tass.marchiata h3{color:oklch(0.99 0.008 60)}
.tass.marchiata p{color:oklch(0.79 0.012 55)}
.tass.arancio{background:var(--br);border-color:var(--br);color:oklch(0.99 0.01 60)}
.tass.arancio h3{color:oklch(0.995 0.008 60)}
.tass.arancio p{color:oklch(0.94 0.03 58)}
.tass .segno{font-family:var(--d);font-size:13px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--br-cupo);display:block;margin-bottom:12px}
.tass.marchiata .segno,.tass.arancio .segno{color:oklch(0.85 0.06 56)}

/* ---------- chi sono: l'autore, il libro, i marchi ----------
   Fondo chiaro come il resto della pagina, staccato solo da un filo sopra.
   Il ritratto e' un ritaglio senza fondo: gli sta dietro un pannello sfumato
   e lo si appoggia al suo bordo di sotto, cosi' il taglio netto della foto
   non si vede. Dentro lo stesso pannello, dietro di lui, c'e' la copertina
   del libro: appena scoperta a sinistra, il resto glielo copre la figura. */
.autore{
  padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,80px);
  border-top:1px solid var(--filo);
  scroll-margin-top:88px;
}

.chisono{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(24px,4.4vw,60px);align-items:stretch}
@media(max-width:900px){.chisono{grid-template-columns:1fr;gap:26px}}

.ritratto{
  margin:0;position:relative;overflow:hidden;
  border-radius:24px;background:linear-gradient(180deg, var(--panna-2) 0%, var(--br-velo) 58%);
  min-height:clamp(360px,42vw,480px);display:flex;align-items:flex-end;
}
.ritratto::before{
  content:"";position:absolute;left:50%;bottom:-18%;width:118%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, oklch(0.93 0.055 56) 0%, transparent 70%);
}
.ritratto .libro{
  position:absolute;z-index:1;left:4%;top:19%;width:96%;height:auto;
}
.ritratto .io{position:relative;z-index:2;width:88%;margin:0 auto 0 0;height:auto}
@media(max-width:900px){
  /* qui la figura riempirebbe tutto il pannello e il libro sparirebbe:
     si alza il pannello e si stringe un po' la figura, cosi' resta l'aria
     in alto a sinistra dove sta la copertina */
  .chisono{align-items:start}
  .ritratto{max-width:340px;min-height:clamp(430px,124vw,500px)}
  .ritratto .io{width:86%;margin:0 auto 0 1%}
  .ritratto .libro{width:98%;left:2%;top:13%}
}

.dico h2{font-size:clamp(26px,3.5vw,43px);max-width:19ch;margin:14px 0 0}
.dico p{color:var(--pece-2);font-size:clamp(16.5px,1.8vw,18.5px);max-width:64ch}
.dico h2 + p{margin-top:22px}
.dico p + p{margin-top:14px}
.dico b{color:var(--pece);font-weight:700}

/* la firma e i marchi stanno sulla stessa riga: i loghi riempiono il vuoto
   a destra invece di aprire una fascia tutta loro */
.coda{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--filo);
  display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,1.38fr);gap:clamp(18px,3vw,32px);align-items:center;
}
@media(max-width:700px){.coda{grid-template-columns:1fr;gap:22px}}
.dico .firma{display:flex;flex-direction:column;gap:2px}
.dico .firma b{font-family:var(--d);font-size:19px;letter-spacing:-0.02em}
.dico .firma span{font-size:15px;color:var(--fumo)}

/* i loghi arrivano grigi su trasparente: su panna si scuriscono */
.marchi .eti{font-size:15px;line-height:1.35;color:var(--fumo);margin-bottom:12px}
.marchi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,2.6vw,30px)}
.marchi img{
  height:clamp(44px,4.6vw,56px);width:auto;
  filter:brightness(0);opacity:.42;
  transition:opacity .35s cubic-bezier(.16,1,.3,1);
}
.marchi li:hover img{opacity:.72}

/* ---------- garanzia ---------- */
.garanzia{background:var(--br-velo);padding:clamp(56px,8vw,110px) 0;border-top:1px solid oklch(0.91 0.028 54);border-bottom:1px solid oklch(0.91 0.028 54);scroll-margin-top:88px}
.garanzia .tel{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
@media(max-width:900px){.garanzia .tel{grid-template-columns:1fr;gap:26px}}
.garanzia h2{font-size:clamp(28px,4.4vw,52px);max-width:17ch;margin:14px 0 0}
.garanzia .parla p{color:var(--pece-2);font-size:17px}
.garanzia .parla p + p{margin-top:15px}
.garanzia .parla strong{color:var(--pece);font-weight:700}
.sigilli{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sigilli span{font-size:15px;background:var(--panna);border:1px solid oklch(0.91 0.028 54);padding:9px 15px;border-radius:999px;color:var(--pece-2)}

/* ---------- il confronto ----------
   Preso di peso da home-2-confronto.html: markup e misure identici.
   Cambiati SOLO i colori (la pagina di partenza era scura) e la riga
   appiccicata, che li' si fermava a 72px mentre la nostra barra e' alta 82.
   crema -> pece · crema-2 -> pece-2 · crema-3 -> fumo · orlo -> filo
   notte-2 -> panna · notte-3 -> panna-2 · la colonna nostra -> br-velo        */
.conf{padding:clamp(56px,8vw,110px) 0;scroll-margin-top:88px}
.testo-sez{max-width:62ch;margin-bottom:clamp(24px,3.4vw,40px)}
.testo-sez h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 16px}
.testo-sez p{color:var(--pece-2);font-size:clamp(16.5px,1.8vw,19px)}
.testo-sez p + p{margin-top:12px}

.leve{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.leve.incoda{margin-top:52px;margin-bottom:0}
.leve .dice{font-size:15px;color:var(--fumo);margin-right:6px}
.leva{background:transparent;color:var(--pece-2);border:1.5px solid var(--filo);padding:9px 16px;border-radius:999px;font-size:15px;font-weight:500;font-family:var(--t);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.leva:hover{border-color:var(--fumo);transform:translateY(-1px)}
.leva[aria-pressed="true"]{background:var(--br);border-color:var(--br);color:oklch(0.995 0.008 60);font-weight:600}

/* Niente overflow qui: la colonna «Formula Condominio» sporge sopra e sotto e
   verrebbe tagliata. (hidden faceva anche di peggio: rendeva il tabellone un
   contenitore di scorrimento e mandava il capo appiccicato SOPRA la prima riga,
   difetto che c'e' pure nella home-2 originale.) Gli angoli tondi li fanno le
   righe di testa e di coda. */
.tabellone{border:1px solid var(--filo);border-radius:16px;background:var(--panna)}
.rigone.capo > *:first-child{border-top-left-radius:15px}
.rigone.soldi > *:first-child{border-bottom-left-radius:15px}
.rigone{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;border-bottom:1px solid var(--filo)}
.rigone:last-child{border-bottom:0}
.rigone > *{padding:18px clamp(14px,1.6vw,20px)}
.rigone .col-noi{background:var(--br-velo);border-left:1px solid oklch(0.91 0.028 54);border-right:1px solid oklch(0.91 0.028 54)}
.rigone.capo{background:var(--panna-2);position:sticky;top:84px;z-index:5}
.rigone.capo > *{font-family:var(--d);font-size:13px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--pece-2)}
.rigone.capo .col-noi{color:var(--br-cupo);background:oklch(0.935 0.045 56)}
.voce b{display:block;font-size:16.5px;font-weight:600;color:var(--pece);margin-bottom:3px}
.voce span{font-size:15px;color:var(--fumo)}
.cel{font-size:15.5px;color:var(--pece-2)}
.cel.meno{color:var(--fumo)}
.cel.noi{color:var(--pece);font-weight:500}
.cel .forte{color:var(--br-cupo);font-weight:600}
.rigone.soldi{background:var(--panna-2)}
.rigone.soldi .cel, .rigone.soldi .voce b{font-family:var(--d);font-weight:700;font-size:19px;color:var(--pece)}
.rigone.soldi .cel.noi{color:var(--br-cupo);font-size:22px}
.rigone.soldi .voce span{font-family:var(--t);font-weight:400;font-size:17px;color:var(--pece-2);margin-top:6px}
.ast{font-style:normal;color:var(--br-cupo);margin-left:2px}
.dilancio{display:block;font-family:var(--t);font-weight:400;font-size:15px;color:var(--pece-2);margin-top:2px}
@media(max-width:900px){
  /* su telefono la tabella si scompone: ogni riga diventa un riquadro a se',
     staccato dagli altri. Il contenitore sparisce e il bordo passa alle righe. */
  .tabellone{border:0;background:transparent;border-radius:0}
  .rigone{grid-template-columns:1fr;border:1px solid var(--filo);border-radius:14px;background:var(--panna);margin-bottom:16px;padding:14px 0 0}
  .rigone:last-child{margin-bottom:0}
  .rigone.capo{display:none}
  .rigone > *{padding:8px 18px}
  .rigone .col-noi{border-left:0;border-right:0;margin:12px 0 0;padding:14px 18px;border-radius:0 0 13px 13px}
  .rigone.capo > *:first-child,.rigone.soldi > *:first-child{border-radius:0}
  .cel::before{content:attr(data-chi) " — ";color:var(--fumo);font-size:15px}
  .rigone.soldi{padding-top:14px}
  .rigone.soldi .col-noi{margin:12px 0 0;padding:14px 18px;border-radius:0 0 13px 13px;border-bottom:0}
  .leve{margin-bottom:26px}
  .leve.incoda{margin-top:42px}
}
.sottotab{font-size:15px;color:var(--fumo);max-width:82ch}
/* la colonna nostra sporge sopra e sotto, come una scheda messa in evidenza */
.rigone.capo .col-noi{margin-top:-24px;padding-top:42px;border-top:1px solid oklch(0.91 0.028 54);border-radius:15px 15px 0 0}
.rigone.soldi .col-noi{margin-bottom:-28px;padding-bottom:46px;border-bottom:1px solid oklch(0.91 0.028 54);border-radius:0 0 15px 15px}
.leve{margin-bottom:50px}
.sottotab{margin-top:46px}


/* l'interruttore mese/anno.
   Non riusa le leve del confronto: quelle sono a pillola e si accendevano
   tutte e due. Qui e' un interruttore solo, dentro una vaschetta, e la
   pasticca arancione sta su UNA delle due voci. Angoli semiarrotondati.
   ⚠️ Lo spazio sotto deve superare i 44px con cui la fascia consigliata
   sporge in alto, se no l'interruttore le finisce addosso. */
.quandobox{display:flex;flex-direction:column;align-items:center;gap:12px;margin:clamp(34px,4.4vw,52px) 0 clamp(58px,7vw,84px)}
.quando{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--filo);border-radius:15px;background:var(--panna-2)}
.quando .opz{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--t);font-size:16px;font-weight:600;color:var(--pece-2);
  padding:11px clamp(22px,3vw,34px);border-radius:11px;white-space:nowrap;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s;
}
.quando .opz:hover{color:var(--pece)}
.quando .opz[aria-pressed="true"]{
  background:var(--br);color:oklch(0.995 0.008 60);
  box-shadow:0 8px 18px -10px oklch(0.702 0.144 42 / .9);
}
.quando .opz[aria-pressed="true"]:hover{color:oklch(0.995 0.008 60)}
.quandobox .regalo{font-size:15px;color:var(--fumo)}
.quandobox .regalo b{color:var(--br-cupo);font-weight:700}
/* nella cassa la colonna e' stretta: l'interruttore sta in riga da solo */
.somma .quandobox{margin:18px 0 20px;gap:8px}
.somma .quando{width:100%}
.somma .quando .opz{flex:1 1 0;padding:11px 8px}

/* ---------- prezzi ----------
   Lo stesso stacco di .tour e .autore: la barra e' fissa e alta 82 (70 da
   telefono), senza questo il bordo della sezione finisce sotto e chi arriva
   da fuori con /#prezzi crede di essere atterrato a meta' di qualcos'altro. */
.prezzi{padding:clamp(56px,8vw,110px) 0;scroll-margin-top:88px}
.fasce{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:1040px){.fasce{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.fasce{grid-template-columns:1fr}}
.fascia{position:relative;background:var(--panna);border:1.5px solid var(--filo);border-radius:20px;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.fascia:hover{transform:translateY(-5px);box-shadow:0 26px 44px -32px oklch(0.3 0.05 45 / .6)}

/* la fascia consigliata sporge in alto, col cappello attaccato sopra (come SiteGround) */
.fascia.top{border-color:var(--br);border-width:2px;box-shadow:0 20px 44px -34px oklch(0.702 0.144 42 / .75);margin-top:-44px;padding-top:calc(clamp(22px,2.6vw,30px) + 44px + 16px)}
.fascia .bollo{font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--br-cupo);height:16px}
.fascia.top .bollo{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:center;background:var(--br);color:oklch(0.995 0.008 60);border-radius:17px 17px 0 0}

.fascia h3{font-size:24px;margin:10px 0 6px}
.fascia .quanti{font-size:15.5px;line-height:1.5;color:var(--pece-2);min-height:4.5em}

/* prezzo di listino barrato + quanto si risparmia, sopra al prezzo di lancio */
.fascia .prima{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;font-size:16px;color:var(--fumo);min-height:30px}
.fascia .prima s{text-decoration-thickness:1.5px}
.risparmio{font-style:normal;font-size:15px;font-weight:700;color:var(--br-cupo);background:var(--br-velo);border-radius:999px;padding:4px 12px;white-space:nowrap}

.euro{display:flex;align-items:baseline;gap:6px;margin:6px 0 2px;font-family:var(--d)}
.euro b{font-size:clamp(38px,4.2vw,48px);font-weight:700;letter-spacing:-0.035em;line-height:.9}
.euro i{font-style:normal;font-family:var(--t);font-size:15px;font-weight:600;color:var(--pece-2)}
.euro:not(:has(b)) i{font-family:var(--d);font-size:24px;font-weight:700;color:var(--pece)}

.creditiai{margin-top:8px;font-size:15px;line-height:1.4;color:var(--pece-2)}
.creditiai b{font-family:var(--d);font-weight:700;color:var(--br-cupo)}
.fascia .acond{margin:14px 0 22px;padding-top:15px;border-top:1px solid var(--filo);font-size:15px;color:var(--pece-2)}
.fascia .acond b{font-family:var(--d);font-size:18px;color:var(--pece)}
.fascia .bot{margin-top:auto;width:100%}
.rinnovo{margin-top:14px;font-size:15px;line-height:1.45;color:var(--fumo);min-height:4.35em}

/* In colonna singola le schede stanno una sotto l'altra: la sporgenza della
   fascia in evidenza le farebbe accavallare. ⚠️ Va dichiarato QUI, dopo
   `.fascia.top`: a parita' di specificita' vince l'ultima regola scritta. */
@media(max-width:600px){
  .fasce{margin-top:0;gap:22px}
  .fascia.top{margin-top:0}
}

/* «sempre dentro»: tutto quello che il programma fa, per gruppi */
.sempre{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--filo);padding-top:clamp(30px,4vw,46px)}
.sempre .titolo{font-family:var(--d);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:-0.02em;color:var(--pece);margin-bottom:clamp(22px,3vw,34px)}
.gruppi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,34px)}
@media(max-width:1100px){.gruppi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.gruppi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gruppi{grid-template-columns:1fr}}
.gruppo h4{margin:0 0 10px;font-family:var(--d);font-weight:700;font-size:16px;color:var(--br-cupo);letter-spacing:0.02em}
.gruppo ul{margin:0;padding:0;list-style:none}
.gruppo li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.45;color:var(--pece-2)}
.gruppo li + li{margin-top:7px}
.gruppo li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--br);opacity:.55}

/* ---------- domande ---------- */
.domande{padding:clamp(30px,5vw,60px) 0 clamp(56px,8vw,110px);border-top:1px solid var(--filo)}
.domande .tel{display:grid;grid-template-columns:0.8fr 1.3fr;gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:900px){.domande .tel{grid-template-columns:1fr;gap:24px}}
.domande h2{font-size:clamp(28px,3.8vw,44px);margin-top:14px}
.dom{border-bottom:1px solid var(--filo)}
.dom summary{
  list-style:none;cursor:pointer;padding:22px 0;font-family:var(--d);font-weight:700;font-size:clamp(17px,1.9vw,20px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after{content:"";width:12px;height:12px;flex:none;border-right:2.5px solid var(--br);border-bottom:2.5px solid var(--br);transform:rotate(45deg) translateY(-3px);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.dom[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.dom .risp{padding:0 0 22px;color:var(--pece-2);font-size:16.5px;max-width:62ch}
.dom .risp p + p{margin-top:12px}

/* ---------- chiusa ---------- */
.chiusa{position:relative;overflow:hidden;padding:clamp(64px,9vw,124px) 0}
.chiusa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chiusa .velo{position:absolute;inset:0;background:linear-gradient(180deg, oklch(0.702 0.144 42 / .93), oklch(0.585 0.145 40 / .95))}
.chiusa .tel{position:relative;text-align:center}
.chiusa h2{color:oklch(0.995 0.008 60);font-size:clamp(30px,5.2vw,64px);max-width:18ch;margin:0 auto}
.chiusa p{color:oklch(0.95 0.03 58);font-size:clamp(17px,1.9vw,20px);max-width:52ch;margin:20px auto 0}
.chiusa p:last-of-type{margin-bottom:32px}
.chiusa .tasti{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Il piede: a sinistra chi siamo per la legge, a destra i tre rimandi.
   Sotto i 15px non si scende: era a 14,5 e i dati fiscali si leggevano male. */
.pie{padding:40px 0 46px;font-size:15px;color:var(--fumo);border-top:1px solid var(--filo)}
.pie .tel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 44px;align-items:start}
.pie .chi p{margin:0 0 4px}
.pie .ditta{font-family:var(--d);font-weight:700;font-size:16px;color:var(--pece);letter-spacing:-0.01em}
.pie a{text-decoration:none;color:var(--pece-2);border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.pie a:hover{color:var(--pece);border-bottom-color:var(--filo)}
.pie .rimandi{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pie .rimandi button{font:inherit;color:var(--pece-2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.pie .rimandi button:hover{color:var(--pece);border-bottom-color:var(--filo)}
.pie .nota{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid var(--filo)}
@media(max-width:720px){.pie .tel{grid-template-columns:1fr;gap:14px}.pie .rimandi{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){
  /* anche `html.morbida`, se no la classe che mette home.js vincerebbe di peso */
  html,html.morbida{scroll-behavior:auto}
  .sale{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* =========================================================================
   Il popup dei contatti.
   E' un <dialog> vero: la trappola del fuoco e il tasto Esc li fa il browser,
   noi ci mettiamo solo l'apparizione, il loader e la faccia di conferma.
   ========================================================================= */
.finestra{padding:0;border:0;background:transparent;color:var(--pece);
  width:min(580px,calc(100vw - 28px));max-width:none;max-height:none;margin:auto}
.finestra::backdrop{background:oklch(0.215 0.018 45 / .58);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.finestra[open]::backdrop{opacity:1}
.finestra[open].chiudendo::backdrop{opacity:0}
@starting-style{.finestra[open]::backdrop{opacity:0}}

.finestra .riquadro{position:relative;background:var(--panna);border:1px solid var(--filo);
  border-radius:22px;box-shadow:0 40px 90px -40px oklch(0.215 0.018 45 / .55), 0 4px 14px -8px oklch(0.215 0.018 45 / .3);
  padding:clamp(26px,4vw,38px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(22px) scale(.975);
  transition:opacity .3s ease,transform .46s cubic-bezier(.16,1,.3,1)}
.finestra[open] .riquadro{opacity:1;transform:none}
.finestra[open].chiudendo .riquadro{opacity:0;transform:translateY(10px) scale(.985);transition-duration:.2s,.2s}
@starting-style{.finestra[open] .riquadro{opacity:0;transform:translateY(22px) scale(.975)}}

.finestra .serra{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;
  background:none;border:0;border-radius:10px;color:var(--fumo);cursor:pointer;
  transition:background .25s,color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.finestra .serra svg{width:19px;height:19px}
.finestra .serra:hover{background:var(--panna-2);color:var(--pece);transform:rotate(90deg)}

.finestra h2{font-size:clamp(27px,3.6vw,34px);margin:8px 0 0}
.finestra .dice{font-size:16.5px;color:var(--pece-2);margin-top:10px;max-width:46ch}

/* la scorciatoia WhatsApp, prima del modulo: chi ha fretta non compila niente */
.finestra .canale{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;
  text-decoration:none;background:var(--br-velo);border:1px solid oklch(0.702 0.144 42 / .28);border-radius:14px;
  transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.finestra .canale:hover{border-color:var(--br);transform:translateY(-2px);box-shadow:0 12px 26px -16px oklch(0.585 0.145 40 / .8)}
.finestra .canale > svg:first-child{width:26px;height:26px;flex:0 0 auto;color:var(--br-cupo)}
.finestra .canale span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.finestra .canale b{font-size:16px}
.finestra .canale i{font-style:normal;font-size:15px;color:var(--pece-2)}
.finestra .canale .freccia{width:18px;height:18px;margin-left:auto;flex:0 0 auto;color:var(--br-cupo);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.finestra .canale:hover .freccia{transform:translateX(4px)}

.finestra .oppure{display:flex;align-items:center;gap:14px;margin:22px 0 20px;font-size:15px;color:var(--fumo)}
.finestra .oppure::before,.finestra .oppure::after{content:"";height:1px;background:var(--filo);flex:1}

.finestra .campo{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.finestra label{font-size:15px;font-weight:700;color:var(--pece)}
.finestra .mica{font-weight:400;color:var(--fumo)}
/* 16px e' il minimo: sotto, iOS zooma da solo appena tocchi il campo */
.finestra input[type=email],.finestra input[type=tel],.finestra textarea{
  font-family:var(--t);font-size:16.5px;line-height:1.5;color:var(--pece);
  background:oklch(1 0 0 / .7);border:1.5px solid var(--filo);border-radius:12px;padding:12px 14px;width:100%;
  transition:border-color .22s,box-shadow .22s,background .22s}
.finestra textarea{resize:vertical;min-height:104px}
.finestra input::placeholder,.finestra textarea::placeholder{color:oklch(0.72 0.01 55)}
.finestra input:hover,.finestra textarea:hover{border-color:oklch(0.84 0.014 56)}
.finestra input:focus,.finestra textarea:focus{outline:none;background:var(--panna);
  border-color:var(--br);box-shadow:0 0 0 4px oklch(0.702 0.144 42 / .16)}
.finestra .campo.storto input,.finestra .campo.storto textarea{border-color:oklch(0.58 0.19 27)}
.finestra .campo.storto input:focus,.finestra .campo.storto textarea:focus{box-shadow:0 0 0 4px oklch(0.58 0.19 27 / .15)}

.finestra .nota{display:none;font-style:normal;font-size:15px;color:oklch(0.52 0.19 27)}
.finestra .nota.viva{display:block;animation:fc-nota .32s cubic-bezier(.16,1,.3,1)}
.finestra .nota-tutto{margin-top:12px}
@keyframes fc-nota{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* il consenso: la casella vera resta, ma la disegniamo noi */
.finestra .assenso{display:flex;align-items:flex-start;gap:11px;margin-top:4px;font-weight:400;
  font-size:15px;color:var(--pece-2);cursor:pointer;line-height:1.5}
.finestra .assenso input{position:absolute;opacity:0;width:1px;height:1px}
.finestra .quadro{flex:0 0 auto;width:22px;height:22px;margin-top:1px;display:grid;place-items:center;
  background:var(--panna);border:1.5px solid var(--filo);border-radius:7px;color:oklch(0.995 0.008 60);
  transition:background .22s,border-color .22s}
.finestra .quadro svg{width:14px;height:14px;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s cubic-bezier(.16,1,.3,1)}
.finestra .assenso:hover .quadro{border-color:var(--br)}
.finestra .assenso input:checked + .quadro{background:var(--br);border-color:var(--br)}
.finestra .assenso input:checked + .quadro svg{stroke-dashoffset:0}
.finestra .assenso input:focus-visible + .quadro{outline:3px solid var(--br);outline-offset:3px}
.finestra .assenso.storto .quadro{border-color:oklch(0.58 0.19 27)}
.finestra .detto a{color:var(--br-cupo);text-decoration:underline;text-underline-offset:2px}

.finestra .esca{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* il bottone che manda: stessa larghezza in tutti e tre gli stati, se no balla */
.finestra .manda{width:100%;margin-top:20px;position:relative}
.finestra .dice-attesa,.finestra .ruota{display:none}
.finestra .ruota{width:20px;height:20px}
.finestra[data-stato="manda"] .manda{pointer-events:none;background:var(--br-cupo)}
.finestra[data-stato="manda"] .dice-manda{display:none}
.finestra[data-stato="manda"] .dice-attesa{display:inline}
.finestra[data-stato="manda"] .ruota{display:inline-block;animation:fc-ruota .85s linear infinite}
@keyframes fc-ruota{to{transform:rotate(360deg)}}

.finestra .minuta{margin-top:14px;font-size:15px;color:var(--fumo);text-align:center}

/* le due facce: il modulo e la conferma. Una alla volta, in dissolvenza */
.finestra .faccia[data-faccia="fatto"]{display:none;text-align:center;padding:14px 0 6px}
.finestra[data-stato="fatto"] .faccia[data-faccia="modulo"]{display:none}
.finestra[data-stato="fatto"] .faccia[data-faccia="fatto"]{display:block;animation:fc-faccia .5s cubic-bezier(.16,1,.3,1)}
@keyframes fc-faccia{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.finestra .faccia[data-faccia="fatto"] .dice{margin:12px auto 0}
.finestra .faccia[data-faccia="fatto"] .tasti{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* il segno di spunta si disegna da solo: e' la conferma, non un'icona ferma */
.finestra .bollino{display:inline-grid;place-items:center;width:76px;height:76px;color:var(--br)}
.finestra .bollino svg{width:76px;height:76px}
.finestra .bollino .giro{stroke-dasharray:145;stroke-dashoffset:145;opacity:.32}
.finestra .bollino .segno{stroke-dasharray:44;stroke-dashoffset:44}
.finestra[data-stato="fatto"] .bollino .giro{animation:fc-giro .7s cubic-bezier(.16,1,.3,1) forwards}
.finestra[data-stato="fatto"] .bollino .segno{animation:fc-spunta .42s .3s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fc-giro{to{stroke-dashoffset:0}}
@keyframes fc-spunta{to{stroke-dashoffset:0}}

/* quando il popup e' aperto la pagina sotto non scorre */
body.ferma{overflow:hidden}

@media(max-width:560px){
  .finestra{width:calc(100vw - 20px)}
  .finestra .riquadro{border-radius:18px;max-height:calc(100dvh - 24px)}
  .finestra .faccia[data-faccia="fatto"] .tasti .bot{flex:1 1 100%}
}

/* chi ha chiesto meno movimento vede gli stessi stati, senza il movimento */
@media(prefers-reduced-motion:reduce){
  .finestra .riquadro,.finestra[open] .riquadro{transition:opacity .01s;transform:none}
  .finestra .serra:hover{transform:none}
  .finestra .canale:hover{transform:none}
  .finestra .bollino .giro,.finestra .bollino .segno{stroke-dashoffset:0;animation:none}
  .finestra[data-stato="fatto"] .faccia[data-faccia="fatto"]{animation:none}
  .finestra[data-stato="manda"] .ruota{animation-duration:1.6s}
}

/* =========================================================================
   Il bottone WhatsApp fisso, in basso a destra su tutte le pagine.
   Bianco con orlo e glifo arancione: si vede sulla panna del sito senza
   diventare il primo elemento della pagina, che resta il testo.
   ========================================================================= */
/* z-index 50: sotto la barra in cima (60) e sotto la riga di avanzamento (70).
   Col popup dei contatti non serve gara: e' un <dialog> aperto con showModal(),
   e il browser lo mette nel piano di sopra insieme al suo velo. */
.wapp{position:fixed;right:22px;bottom:22px;z-index:50;
  width:58px;height:58px;display:grid;place-items:center;
  background:#fff;border:2px solid var(--br);border-radius:50%;color:var(--br);
  box-shadow:0 12px 26px -14px oklch(0.215 0.018 45 / .45);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .25s}
.wapp svg{width:29px;height:29px}
/* stesso sollevamento delle altre schede cliccabili del sito */
.wapp:hover{background:var(--br-velo);transform:translateY(-2px);
  box-shadow:0 16px 30px -14px oklch(0.585 0.145 40 / .85)}

/* da telefono si rimpicciolisce e si stringe al bordo: la pagina e' gia'
   stretta, e il pollice arriva comunque. */
@media(max-width:560px){
  .wapp{right:16px;bottom:16px;width:52px;height:52px}
  .wapp svg{width:26px;height:26px}
}
@media(max-width:400px){
  .wapp{right:13px;bottom:13px;width:48px;height:48px}
  .wapp svg{width:24px;height:24px}
}

/* chi ha chiesto meno movimento vede lo stesso bottone, fermo */
@media(prefers-reduced-motion:reduce){
  .wapp:hover{transform:none}
}