/* =============================================================================
   enerdata · landing (cartella smartways.it/enerdata)
   Impianto chiaro e arioso, sul modello delle agenzie (cantierecreativo.net):
   pagina bianca, card con icone a gradiente, casi d'uso con schermata e
   risultato, chiusura "a portata di call". Palette di casa smart ways
   (blu notte + ciano) usata come accento, non come fondo.
   ========================================================================== */
:root{
  --navy:#0e2c58; --navy-d:#081d3c; --navy-x:#04101f;
  --cyan:#29abe2; --cyan-c:#21D4FD; --cyan-p:#0f8fc7; --cyan-t:#e8f6fd;
  --verde:#2fa866; --ambra:#e9a825; --viola:#6f5cf0; --rosa:#f0607e;
  --bg:#fff; --bg2:#f5f8fc; --bg3:#eaf1f8; --riga:#e2e9f1;
  --testo:#0d1826; --testo2:#4e6076; --testo3:#8397ad;
  --chiaro:#c9dcee; --chiaro2:#93b2ce;
  --head:'Questrial','Century Gothic','Segoe UI',sans-serif;
  --sans:'Inter','Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
  --max:1240px; --gut:2rem; --r:18px; --r2:12px;
  --ombra:0 26px 70px -28px rgba(13,36,73,.35);
  --ombra2:0 10px 30px -16px rgba(13,36,73,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--testo);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--cyan);color:#04203f}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap.stretto{max-width:860px}

/* ---- tipografia ---------------------------------------------------------- */
.h1{font:400 clamp(2.4rem,5vw,3.9rem)/1.08 var(--head);letter-spacing:-.02em;margin:0;color:var(--navy)}
.h1 em,.h2 em{font-style:normal;color:var(--cyan-p)}
.h2{font:400 clamp(1.9rem,3.3vw,2.7rem)/1.14 var(--head);letter-spacing:-.015em;margin:0;color:var(--navy)}
.h3{font:600 1.32rem/1.3 var(--sans);letter-spacing:-.01em;margin:0;color:var(--testo)}
.h4{font:600 1.02rem/1.4 var(--sans);margin:0}
.p{font-size:1.04rem;line-height:1.7;color:var(--testo2);margin:0}
.p.grande{font-size:1.2rem;line-height:1.6}
.p b{color:var(--testo);font-weight:600}
.scura .h1,.scura .h2{color:#fff}
.scura .h1 em,.scura .h2 em{color:var(--cyan-c)}
.scura .p{color:var(--chiaro)}
.scura .p b{color:#fff}

/* occhiello */
.eti{display:inline-flex;align-items:center;gap:.55rem;font:600 .76rem var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan-p)}
.eti::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.scura .eti{color:var(--cyan-s,#7fc6ef)}
/* il limite di lettura sta sul paragrafo, non sulla testata: se lo mettessi sul
   contenitore anche il titolo andrebbe a capo da solo, e il segno /n del
   compositore non servirebbe più a niente */
.testa{margin-bottom:3rem}
.testa .h2{margin:1rem 0 .9rem}
/* nessun limite nemmeno sul sottotitolo: va a capo dove lo si chiede con /n.
   Resta solo sulle testate centrate, dove senza si allargherebbe a tutta la
   pagina e perderebbe l'asse. */
.testa.centro{max-width:62ch;margin-left:auto;margin-right:auto;text-align:center}

/* ---- barra in alto: chiara di base, si scurisce sopra le fasce scure ------ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:68px;transition:background .25s,border-color .25s,box-shadow .25s;
  border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;gap:2rem;height:100%}
.nav .marchio{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.nav .marchio img{height:22px;width:auto;filter:invert(1) brightness(.25);transition:filter .25s}
.nav .marchio i{width:1px;height:20px;background:var(--riga)}
.nav .marchio span{font:600 .8rem var(--sans);letter-spacing:.04em;color:var(--cyan-p)}
.nav .voci{margin-left:auto;display:flex;gap:.1rem;align-items:center}
.nav .voci a{color:var(--testo2);text-decoration:none;font:500 .9rem var(--sans);padding:.55rem .85rem;
  border-radius:999px;transition:color .15s,background .15s}
.nav .voci a:hover{color:var(--testo);background:var(--bg3)}
.nav .voci a.on{color:var(--cyan-p)}
.nav .voci a.cta{background:var(--cyan);color:#04203f;font-weight:600;padding:.7rem 1.15rem;margin-left:.8rem}
.nav .voci a.cta:hover{background:#4dc0f0;color:#04203f}
.nav.giu{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom-color:var(--riga)}
.nav.scura .marchio img{filter:none}
.nav.scura .marchio i{background:rgba(127,198,239,.4)}
.nav.scura .marchio span{color:#7fc6ef}
.nav.scura .voci a{color:#cfe1f2}
.nav.scura .voci a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav.scura .voci a.on{color:var(--cyan-c)}
.nav.scura.giu{background:rgba(4,16,31,.86);border-bottom-color:rgba(127,198,239,.16)}
@media(max-width:1000px){.nav .voci a:not(.cta){display:none}.nav .marchio span{display:none}}

/* ---- i punti a sinistra: uno per sezione, seguono lo scorrimento --------- */
.punti{position:fixed;left:1.5rem;top:50%;transform:translateY(-50%);z-index:85;display:flex;flex-direction:column;gap:.1rem}
.punti a{position:relative;display:flex;align-items:center;gap:.8rem;text-decoration:none;padding:.4rem 0;
  color:var(--punti-testo,var(--testo2))}
.punti a::before{content:'';width:9px;height:9px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--punti-bordo,#b9c7d6);background:transparent;transition:all .2s}
.punti a span{font:600 .7rem var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.punti:hover a span,.punti.lampo a.on span{opacity:1;transform:none}
.punti a.on::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 5px rgba(41,171,226,.2)}
.punti[data-tema="scuro"]{--punti-testo:#dbeaf8;--punti-bordo:rgba(127,198,239,.6)}
@media(max-width:1180px){.punti{display:none}}

/* ---- bottoni: pillole ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;padding:.9rem 1.5rem;
  font:600 .95rem var(--sans);border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.btn i{font-size:1.1rem;transition:transform .15s}
.btn:hover i{transform:translateX(3px)}
.btn.pieno{background:var(--cyan);color:#04203f;box-shadow:0 14px 32px -14px rgba(41,171,226,.8)}
.btn.pieno:hover{background:#4dc0f0;transform:translateY(-1px)}
.btn.linea{border-color:var(--riga);color:var(--testo);background:#fff}
.btn.linea:hover{border-color:var(--cyan);color:var(--cyan-p)}
.btn.vetro{background:rgba(255,255,255,.08);border-color:rgba(180,215,240,.35);color:#eaf4fd;backdrop-filter:blur(6px)}
.btn.vetro:hover{background:rgba(255,255,255,.14);border-color:#7fc6ef}
.btn.scuro{background:var(--navy);color:#fff}
.btn.scuro:hover{background:#14396f}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}

/* ---- la scena 3D in una cornice: l'animazione originale, incorniciata ----- */
.scena{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:var(--ombra);
  border:1px solid rgba(13,36,73,.12)}
.scena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scena .velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,.05) 0%,rgba(4,16,31,0) 40%,rgba(4,16,31,.35) 100%)}
.scena .dida{position:absolute;left:1.1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(4,16,31,.72);border:1px solid rgba(127,198,239,.35);color:#eaf6ff;font:500 .78rem var(--sans);
  padding:.45rem .8rem;border-radius:999px;backdrop-filter:blur(6px)}
.scena .dida i{color:var(--cyan-c)}

/* ---- riga di fiducia sotto la hero ---------------------------------------- */
.fiducia{display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--riga)}
.fiducia span{display:inline-flex;align-items:baseline;gap:.45rem;font:500 .88rem var(--sans);color:var(--testo2)}
.fiducia b{font:400 1.35rem/1 var(--head);color:var(--navy)}
.scura .fiducia{border-top-color:rgba(127,198,239,.2)}
.scura .fiducia span{color:var(--chiaro)}
.scura .fiducia b{color:#fff}

/* ---- sezioni -------------------------------------------------------------- */
.sez{padding:6rem 0;position:relative}
.sez.corta{padding:3.5rem 0}
.sez.tinta{background:var(--bg2)}
.sez.scura{background:var(--navy-x);color:#fff}
.sez + .sez:not(.tinta):not(.scura){border-top:1px solid var(--riga)}
.sez.tinta + .sez.tinta{border-top:1px solid var(--riga)}

/* ---- "vi riconoscete": i dolori, corti ----------------------------------- */
.dolori{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
/* l'angolo del bagliore va registrato PRIMA di essere usato, altrimenti resta
   un testo qualunque e l'animazione non lo interpola */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
/* i quattro dolori: fondo rosso chiaro, e un bagliore che gira lungo il bordo.
   Il giro si ottiene con un gradiente conico che ruota dietro la tessera,
   ritagliato a cornice: è il bordo stesso a illuminarsi, non un'ombra fuori. */
.dolore{position:relative;display:flex;gap:.9rem;align-items:flex-start;
  background:#fdf2f1;border:1px solid #f6dedb;
  border-radius:var(--r2);padding:1.1rem 1.2rem;font-size:.93rem;color:var(--testo2);line-height:1.55}
/* Un alone rosato che respira intorno alla tessera. Prima era un punto
   luminoso che correva lungo il bordo: attirava l'occhio sul movimento invece
   che sul problema scritto dentro. Qui l'ombra va e viene d'intensita', senza
   spostarsi, e si anima su box-shadow perche' e' l'unica proprieta' che si
   disegna fuori dal riquadro senza essere tagliata. */
.dolore{animation:dolore-respiro 3.4s ease-in-out infinite}
@keyframes dolore-respiro{
  0%,100%{box-shadow:0 0 0 0 rgba(224,96,126,0),0 0 10px rgba(224,96,126,.1)}
  50%    {box-shadow:0 0 0 3px rgba(224,96,126,.14),0 0 18px rgba(224,96,126,.32)}}
/* sfalsate, cosi' non pulsano all'unisono */
.dolore:nth-child(2){animation-delay:-.85s}
.dolore:nth-child(3){animation-delay:-1.7s}
.dolore:nth-child(4){animation-delay:-2.55s}
/* il triangolo di avviso, in alto a destra: dice a colpo d'occhio che ognuna
   di queste tessere e' un problema, non una funzione */
.dolore::after{content:'\26A0\FE0E';position:absolute;top:.5rem;right:.65rem;
  font-size:.85rem;color:#e0607e;opacity:.5;
  pointer-events:none;line-height:1}
@media(prefers-reduced-motion:reduce){.dolore{animation:none}}
.dolore i{color:var(--rosa);font-size:1.2rem;flex-shrink:0;margin-top:.1rem}
.dolore b{display:block;color:var(--testo);font-weight:600;margin-bottom:.15rem}
@media(max-width:1000px){.dolori{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dolori{grid-template-columns:1fr}}

/* ---- card dei servizi: icone a gradiente, alla Cantiere ------------------- */
.carte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.carta{background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:1.9rem 1.8rem;
  box-shadow:var(--ombra2);transition:transform .2s,box-shadow .2s,border-color .2s}
.carta:hover{transform:translateY(-3px);box-shadow:var(--ombra);border-color:#cfe3f2}
.carta h4{margin:0 0 .5rem;font:600 1.05rem var(--sans)}
.carta p{margin:0;font-size:.94rem;color:var(--testo2);line-height:1.62}
.icona{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:1.5rem;
  margin-bottom:1.3rem;background:linear-gradient(135deg,var(--cyan),#1d6ba8);box-shadow:0 10px 24px -12px rgba(41,171,226,.9)}
.icona.g2{background:linear-gradient(135deg,#3ec37a,#0f8fc7);box-shadow:0 10px 24px -12px rgba(47,168,102,.8)}
.icona.g3{background:linear-gradient(135deg,#f5b53f,#f0607e);box-shadow:0 10px 24px -12px rgba(240,96,126,.8)}
.icona.g4{background:linear-gradient(135deg,#8b7cff,#21D4FD);box-shadow:0 10px 24px -12px rgba(111,92,240,.8)}
.icona.g5{background:linear-gradient(135deg,#0e2c58,#29abe2);box-shadow:0 10px 24px -12px rgba(14,44,88,.8)}
.icona.g6{background:linear-gradient(135deg,#f0607e,#6f5cf0);box-shadow:0 10px 24px -12px rgba(111,92,240,.8)}
.icona.piccola{width:44px;height:44px;border-radius:12px;font-size:1.25rem;margin-bottom:1rem}
@media(max-width:960px){.carte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.carte{grid-template-columns:1fr}}

/* ---- tre passaggi --------------------------------------------------------- */
.passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;position:relative}
.passo{position:relative;background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:2rem 1.8rem}
.passo .n{font:400 2.6rem/1 var(--head);color:var(--cyan-p);margin-bottom:1rem}
.passo h4{margin:0 0 .5rem;font:600 1.1rem var(--sans)}
.passo p{margin:0;font-size:.95rem;color:var(--testo2);line-height:1.62}
.passo .freccia{position:absolute;right:-1.1rem;top:2.3rem;width:2rem;height:2rem;border-radius:50%;background:#fff;
  border:1px solid var(--riga);display:grid;place-items:center;color:var(--cyan-p);font-size:1rem;z-index:2}
.passo:last-child .freccia{display:none}
@media(max-width:900px){.passi{grid-template-columns:1fr}.passo .freccia{display:none}}

/* ---- casi d'uso: schermata vera + sfida, soluzione, risultato ------------- */
.schermo{border-radius:14px;overflow:hidden;border:1px solid var(--riga);box-shadow:var(--ombra);background:#fff}
.schermo .barra{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;background:#f1f5f9;border-bottom:1px solid var(--riga)}
.schermo .barra i{width:9px;height:9px;border-radius:50%;background:#cfd8e3;display:block}
.schermo .barra span{margin-left:.6rem;font:500 .72rem var(--sans);color:var(--testo3)}
.schermo img{width:100%;display:block}
.etichette{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{display:inline-flex;align-items:center;gap:.35rem;height:28px;padding:0 .8rem;border-radius:999px;
  font:600 .74rem var(--sans);letter-spacing:.02em;border:1px solid var(--riga);background:#fff;color:var(--testo2)}
.tag i{color:var(--cyan-p);font-size:.95rem}
.tag.cy{background:var(--cyan-t);border-color:#bfe3f5;color:#0a5b85}
.tag.vd{background:#e9f8ef;border-color:#bfe8cf;color:#1f7a49}
.tag.am{background:#fff5df;border-color:#f6dfa4;color:#8a5a00}
.metr{font:400 clamp(1.5rem,2.6vw,2.05rem)/1.22 var(--head);color:var(--navy);margin:.9rem 0 1.2rem;letter-spacing:-.01em}
.ssr{display:grid;gap:1rem}
.ssr > div{padding-left:1rem;border-left:3px solid var(--cyan);font-size:.95rem;color:var(--testo2);line-height:1.62}
.ssr > div.s{border-left-color:var(--ambra)}
.ssr > div.r{border-left-color:var(--verde)}
.ssr b{display:block;font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-p);margin-bottom:.2rem}
.ssr .s b{color:#b17a00}
.ssr .r b{color:var(--verde)}
.ssr .r{color:var(--testo);font-weight:500}

/* ---- numeri --------------------------------------------------------------- */
.numeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.numero{background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:1.7rem 1.6rem}
.numero .n{font:400 clamp(2.2rem,3.8vw,3rem)/1 var(--head);color:var(--navy);letter-spacing:-.02em}
.numero .n em{font-style:normal;color:var(--cyan-p)}
.numero .e{font:600 .9rem var(--sans);color:var(--testo);margin-top:.7rem}
.numero .d{font-size:.82rem;color:var(--testo2);margin-top:.2rem;line-height:1.45}
.scura .numero{background:rgba(255,255,255,.05);border-color:rgba(127,198,239,.22)}
.scura .numero .n{color:#fff}.scura .numero .n em{color:var(--cyan-c)}
.scura .numero .e{color:#fff}.scura .numero .d{color:var(--chiaro2)}
@media(max-width:900px){.numeri{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- testimonianze e clienti --------------------------------------------- */
.voci2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.voce{background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:2rem 2rem 1.8rem;position:relative}
.voce::before{content:'\201C';position:absolute;top:.6rem;left:1.4rem;font:400 4rem/1 var(--head);color:var(--cyan);opacity:.35}
.voce p{font:400 1.2rem/1.45 var(--head);color:var(--testo);margin:1.4rem 0 0}
.voce .chi{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.voce .ini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),#1d6ba8);color:#fff;font:600 .82rem var(--sans)}
.voce .chi b{display:block;font:600 .9rem var(--sans)}
.voce .chi span{font-size:.82rem;color:var(--testo2)}
.clienti{display:flex;flex-wrap:wrap;gap:.6rem}
.clienti span{padding:.8rem 1.4rem;border:1px solid var(--riga);border-radius:999px;background:#fff;
  font:600 .82rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--testo2)}
@media(max-width:800px){.voci2{grid-template-columns:1fr}}

/* ---- profili (per chi) ---------------------------------------------------- */
.profili{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.profilo{background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:1.9rem 1.8rem}
.profilo .ruolo{font:600 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-p);margin-bottom:.5rem}
.profilo h4{margin:0 0 .6rem;font:600 1.08rem var(--sans)}
.profilo p{margin:0;font-size:.94rem;color:var(--testo2);line-height:1.62}
@media(max-width:900px){.profili{grid-template-columns:1fr}}

/* ---- elenco con segno e nota --------------------------------------------- */
.lista{list-style:none;margin:1.4rem 0 0;padding:0}
.lista li{position:relative;padding-left:1.9rem;margin-bottom:.8rem;font-size:.97rem;color:var(--testo2);line-height:1.6}
.lista li::before{content:'\2713';position:absolute;left:0;top:0;width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--cyan-t);color:var(--cyan-p);font-size:.72rem;display:grid;place-items:center;margin-top:.25rem}
.lista li b{color:var(--testo);font-weight:600}
.nota{font-size:.9rem;color:var(--testo2);background:var(--bg2);border-left:3px solid var(--cyan);border-radius:0 var(--r2) var(--r2) 0;
  padding:.9rem 1.1rem;line-height:1.6}
.nota b{display:block;color:var(--testo);font:600 .74rem var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}

/* ---- tour a schede (una variante lo usa per i casi) ---------------------- */
.tour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.4rem;align-items:start}
.tour .voci{display:grid;gap:.8rem}
.tour .scheda{background:#fff;border:1px solid var(--riga);border-radius:var(--r2);padding:1.2rem 1.3rem;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.tour .scheda:hover{border-color:#cfe3f2}
.tour .scheda.on{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(41,171,226,.15)}
.tour .scheda > b{display:block;font:600 1rem var(--sans);margin-bottom:.25rem}
.tour .scheda > span{display:block;font-size:.88rem;color:var(--testo2);line-height:1.5}
.tour .quadri > figure{display:none;margin:0}
.tour .quadri > figure.on{display:block}
@media(max-width:900px){.tour{grid-template-columns:1fr}}

/* ---- scorrimento con schermata fissa: i testi scorrono a sinistra, la
        schermata resta ferma a destra e cambia quando cambia il caso ---------- */
.scorri{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:start}
.scorri .tappa{min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;
  opacity:.35;transition:opacity .3s}
.scorri .tappa.on{opacity:1}
.scorri .quadri{position:sticky;top:110px}
.scorri .quadri > figure{margin:0;display:none}
.scorri .quadri > figure.on{display:block;animation:apparire .35s ease}
@keyframes apparire{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.scorri{grid-template-columns:1fr}.scorri .quadri{position:static}
  .scorri .quadri > figure{display:block;margin-bottom:1.2rem}.scorri .tappa{min-height:0;opacity:1}}

/* ---- giostra: i casi affiancati, si scorre di lato ------------------------ */
.giostra{position:relative}
.giostra .pista{position:relative;display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.4rem .2rem 1.2rem;scrollbar-width:none}
.giostra .pista::-webkit-scrollbar{display:none}
.giostra .tavola{flex:0 0 min(88%,1040px);scroll-snap-align:start;background:#fff;border:1px solid var(--riga);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra2)}
.giostra .tavola .schermo{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--riga)}
.giostra .tavola .corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem;padding:1.8rem 2rem 2rem}
.giostra .comandi{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.giostra .comandi button{width:44px;height:44px;border-radius:50%;border:1px solid var(--riga);background:#fff;
  color:var(--testo);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s}
.giostra .comandi button:hover{border-color:var(--cyan);color:var(--cyan-p)}
.giostra .comandi button[disabled]{opacity:.35;cursor:default}
.giostra .comandi .segni{display:flex;gap:.45rem;margin-left:.6rem}
.giostra .comandi .segni i{width:8px;height:8px;border-radius:4px;background:#c9d5e2;display:block;transition:background .2s,width .2s}
.giostra .comandi .segni i.on{background:var(--cyan);width:24px}
@media(max-width:900px){.giostra .tavola .corpo{grid-template-columns:1fr}}

/* ---- chiusura: tre bottoni, come "a portata di click" -------------------- */
.finale{padding:6.5rem 0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(41,171,226,.14),transparent 60%),var(--bg2);
  border-top:1px solid var(--riga);text-align:center}
/* la chiusura è centrata, quindi un limite serve: ma largo, così il titolo va a
   capo dove lo si chiede con /n e non a metà parola */
.finale .h2{margin:1rem auto .9rem;max-width:34ch}
.finale .p{max-width:56ch;margin:0 auto}
.azioni{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem}
.persone{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.8rem}
.persona{display:flex;gap:.9rem;align-items:center;padding:.9rem 1.3rem .9rem 1rem;background:#fff;border:1px solid var(--riga);
  border-radius:999px;text-align:left}
.persona .ini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),#1d6ba8);color:#fff;font:600 .82rem var(--sans)}
.persona b{display:block;font:600 .9rem var(--sans);color:var(--testo)}
.persona span{font-size:.8rem;color:var(--testo2)}

/* ---- piede ---------------------------------------------------------------- */
.piede{background:var(--navy-x);color:var(--chiaro2);padding:2.6rem 0;font-size:.84rem}
.piede .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.piede img{height:20px;opacity:.85}
.piede a{color:#7fc6ef;text-decoration:none}

.centro{text-align:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}