:root{
  --bg:#f3f1ec;--carta:#fbfaf7;--ink:#1f1d1a;--muted:#625c53;--line2:rgba(31,29,26,.18);--pill:rgba(251,250,247,.88);
  --or:#cc7a1c;--vi:#9a5ca1;--cy:#4dbfd6;--cyt:#2e9fb7;--shadow:0 18px 50px rgba(28,24,22,.12);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121110;--carta:#1b1a17;--ink:#ece8e0;--muted:#aaa397;--line2:rgba(236,232,224,.18);--pill:rgba(27,26,23,.84);--cyt:#4dbfd6;--shadow:0 22px 60px rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121110;--carta:#1b1a17;--ink:#ece8e0;--muted:#aaa397;--line2:rgba(236,232,224,.18);--pill:rgba(27,26,23,.84);--cyt:#4dbfd6;--shadow:0 22px 60px rgba(0,0,0,.45);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit}
/* racconto a scorrimento */
.story{position:relative;height:620vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;transition:background-color .9s}
/* modalità notte: la scena diventa notturna anche col tema chiaro */
.pin.notte{background:radial-gradient(1.5px 1.5px at 12% 18%,#cfd8ff 50%,transparent 51%),radial-gradient(1px 1px at 34% 9%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 58% 22%,#dfe6ff 50%,transparent 51%),radial-gradient(1px 1px at 77% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 91% 30%,#cfd8ff 50%,transparent 51%),radial-gradient(1px 1px at 23% 41%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 47%,#e8ecff 50%,transparent 51%),linear-gradient(#05070f,#0d1426 70%,#141a2b);--ink:#e9edf3;--muted:#9aa3b2;--line2:rgba(233,237,243,.18);--pill:rgba(16,21,34,.86);--carta:#121828;--cyt:#4dbfd6;color:var(--ink);color-scheme:dark}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.intro{position:absolute;left:0;right:0;top:24px;text-align:center;padding:0 24px;transition:opacity .45s,transform .45s;pointer-events:none}
.intro .eti{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.intro h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.2vw,54px);line-height:1.03;letter-spacing:-.035em;margin:.2em auto .16em;max-width:16em}
.intro h1 em{font-style:normal;color:var(--or)}
.intro .sub{margin:0 auto;max-width:44em;color:var(--muted);font-size:14px}
.intro .giu{display:inline-block;margin-top:6px;font-size:12px;color:var(--muted);letter-spacing:.08em}
.pin:not([data-step="0"]) .intro{opacity:0;transform:translateY(-14px)}
/* tappe: sempre in alto a sinistra, area libera dal 3D importante */
.tappa{position:absolute;left:32px;top:24px;width:340px;opacity:0;transform:translateY(-8px);transition:opacity .45s,transform .45s;pointer-events:none;
  background:var(--pill);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:6px;padding:15px 18px 16px}
.tappa .n{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tappa h2{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.05;letter-spacing:-.03em;margin:.16em 0 .28em}
.tappa p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.tappa p b{color:var(--ink);font-weight:700}
.pin[data-step="1"] .tappa[data-k="1"],.pin[data-step="2"] .tappa[data-k="2"],.pin[data-step="3"] .tappa[data-k="3"],.pin[data-step="4"] .tappa[data-k="4"]{opacity:1;transform:none}
/* etichette dei servizi: a sinistra del nodo, così i cavi verso l'azienda (a destra) non le attraversano */
.svcs{position:absolute;inset:0;pointer-events:none}
.svc{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;border:0;margin:0;padding:5px 10px 6px;border-radius:999px;background:var(--pill);
  font:700 15.5px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;transform:translate(-100%,-50%);transition:color .25s,box-shadow .25s,opacity .3s;visibility:hidden;opacity:0}
.svc.vis{visibility:visible;opacity:1}
.svc i{display:none}
.svc:hover{box-shadow:0 0 0 1px var(--line2)}
.svc[aria-pressed="true"]{box-shadow:0 0 0 2px currentColor}
.svc{background:var(--carta)}
.svc.on,.svc[aria-pressed="true"]{color:var(--ink)}
.svc.gO.on,.svc.gO[aria-pressed="true"]{box-shadow:0 0 0 2px var(--or)}
.svc.gV.on,.svc.gV[aria-pressed="true"]{box-shadow:0 0 0 2px var(--vi)}
.svc.gC.on,.svc.gC[aria-pressed="true"]{box-shadow:0 0 0 2px var(--cy)}
.svc:focus-visible,.cmd:focus-visible{outline:2px dashed var(--cy);outline-offset:2px}
.svc.gO i{background:var(--or)}.svc.gV i{background:var(--vi)}.svc.gC i{background:var(--cy)}
/* frase vicino all'azienda e avvisi */
.msg{position:absolute;left:0;top:0;transform:translate(-50%,-100%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;white-space:nowrap;
  background:var(--pill);border:1px solid var(--line2);border-radius:6px;padding:7px 12px 8px}
.msg.vis{opacity:1}
.msg small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.msg b{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.msg.allarme small{color:#d6453d}.msg.risolto small{color:var(--or)}
/* barra comandi e scheda in basso */
.basso{position:absolute;left:32px;right:32px;bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}
.comandi{display:flex;flex-wrap:wrap;gap:6px;max-width:620px;pointer-events:auto;align-items:center}
.comandi .gr{display:flex;gap:4px;padding:3px;border:1px solid var(--line2);border-radius:999px;background:var(--pill)}
.comandi .et{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 4px 0 8px;align-self:center}
.cmd{border:1px solid transparent;background:transparent;border-radius:999px;padding:6px 11px;font:600 13px/1 var(--display);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cmd.solo{border-color:var(--line2);background:var(--pill)}
.cmd svg{width:15px;height:15px;flex:0 0 15px}
.cmd[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pin.notte .cmd[aria-pressed="true"]{background:#e9edf3;color:#0b0f1a}
.cmd:hover{border-color:var(--line2)}
.cmd .s{display:none}
.scheda{width:min(430px,40%);pointer-events:auto;background:var(--carta);border:1px solid var(--line2);border-left:4px solid var(--or);border-radius:4px;padding:12px 17px 13px;text-align:left;box-shadow:var(--shadow);transition:border-color .3s}
.scheda b{display:block;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.02em;margin:0 0 3px}
.scheda span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.fb{display:none}
/* al passaggio dalla versione HTML al 3D niente dissolvenze: altrimenti per un istante tutte le tappe resterebbero visibili */
.noanim .tappa,.noanim .intro,.noanim .svc,.noanim .msg{transition:none!important}
.solo-fb{display:none}.nogl .solo3d{display:none}.nogl .solo-fb{display:inline}
.dopo{display:none;max-width:900px;margin:0 auto;padding:40px 24px 70px;text-align:center;color:var(--muted);font-size:13px}
#fps{position:fixed;right:8px;top:8px;z-index:9;font:12px var(--mono);background:rgba(0,0,0,.7);color:#9f9;padding:3px 7px;border-radius:4px}
/* telefono: tappa in alto, comandi + servizi + scheda in basso, 3D al centro */
@media (max-width:640px){
  .intro{top:12px;padding:0 16px}.intro .eti{font-size:11px}.intro h1{font-size:27px}.intro .sub{display:none}
  .tappa{left:12px;right:12px;width:auto;top:10px;padding:9px 13px 10px}
  .tappa h2{font-size:19px;margin:.08em 0 .12em}.tappa p{font-size:12.5px;line-height:1.42}
  .pin{display:flex;flex-direction:column}
  .pin canvas{position:relative;inset:auto;flex:0 0 auto;width:100%}
  .basso{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:stretch;gap:6px;padding:6px 0 8px;margin-top:auto}
  .comandi{max-width:none;flex-wrap:wrap;justify-content:center;padding:0 10px;gap:5px}
  .comandi .gr{flex-wrap:nowrap;max-width:100%}
  .comandi .et{display:none}.cmd .l{display:none}.cmd .s{display:inline}.cmd{padding:6px 9px;font-size:12.5px}
  .scheda{width:auto;margin:0 10px;padding:9px 12px 10px}.scheda b{font-size:17px}.scheda span{font-size:12.5px;line-height:1.42}
  .svc{transform:translate(-50%,0);font-size:11.5px;padding:3px 7px 4px}
  .msg{white-space:normal;width:min(320px,90vw);transform:translate(-50%,0)}.msg b{font-size:16px;line-height:1.15;display:block}
}
/* movimento ridotto o niente WebGL: una sola vista d'insieme, niente scorrimento guidato */
.rm .story,.nogl .story{height:auto}
.rm .pin,.nogl .pin{position:relative;height:auto;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}
.rm .pin canvas{position:relative;height:72vh;min-height:420px}
.rm .intro,.nogl .intro{position:relative;top:0;opacity:1;transform:none;padding-top:24px;order:-1}.rm .giu,.nogl .giu{display:none}
.rm .tappe,.nogl .tappe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1200px;padding:0 24px;margin-top:10px}
.rm .tappa,.nogl .tappa{position:relative;left:auto;top:auto;width:auto;opacity:1;transform:none}
.rm .basso,.nogl .basso{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:center;margin-top:12px;width:100%}
.rm .scheda,.nogl .scheda{width:min(700px,calc(100% - 32px))}
.rm .svcs,.nogl .svcs{position:relative;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:900px;padding:12px 16px 0}
.rm .svc,.nogl .svc{position:static;transform:none;visibility:visible;opacity:1;border:1px solid var(--line2);display:flex;align-items:center;gap:7px;font-size:15px;padding:8px 12px}
.rm .svc i,.nogl .svc i{display:block;width:8px;height:8px;border-radius:50%}
.nogl canvas,.nogl .msg,.nogl .comandi{display:none}
.nogl .dopo{display:block}
.nogl .fb{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;margin:22px 16px 6px}
.fb img{width:150px;height:150px;border-radius:10px;background:#1a1b1f;padding:14px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.fb span{font-family:var(--display);font-weight:800;font-size:22px;max-width:15em;text-align:left}
@media (max-width:900px){.rm .tappe,.nogl .tappe{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rm .tappe,.nogl .tappe{grid-template-columns:1fr}.rm .pin canvas{height:70vh;min-height:380px}.rm .comandi{flex-wrap:wrap;justify-content:center}}

/* schermi molto larghi: testi, schede e comandi in proporzione */
@media (min-width:1921px){
  .tappa{width:clamp(340px,19vw,500px);padding:20px 24px 22px}.tappa h2{font-size:clamp(27px,1.6vw,38px)}.tappa p{font-size:clamp(13.5px,.78vw,17px)}.tappa .n{font-size:clamp(11.5px,.62vw,14px)}
  .svc{font-size:clamp(15.5px,.85vw,20px);padding:6px 12px 7px}
  .scheda{width:clamp(430px,24vw,600px)}.scheda b{font-size:clamp(20px,1.1vw,27px)}.scheda span{font-size:clamp(13px,.72vw,16px)}
  .cmd{font-size:clamp(13px,.7vw,16px);padding:7px 13px}.comandi{max-width:none}
  .msg b{font-size:clamp(19px,1.05vw,26px)}.msg small{font-size:clamp(10.5px,.58vw,13px)}
  .tappa,.basso{left:clamp(32px,2vw,56px)}.basso{right:clamp(32px,2vw,56px);bottom:clamp(22px,1.4vw,36px)}
}

/* ?hero: la scena dentro l'apertura della home; sfondo trasparente, niente racconto, resta solo il tasto del suono */
.hero body,.hero .pin{background:transparent}
.hero .story{height:100vh;height:100svh}
.hero .intro,.hero .tappe,.hero .dopo,.hero .scheda,.hero .msg,.hero .fb{display:none!important}
.hero .comandi .gr,.hero #cNotte,.hero #cGuasto{display:none}
.hero .basso,.hero.mob .basso{position:absolute;left:auto;right:10px;bottom:10px;width:auto;margin:0;padding:0;flex-direction:row}
/* home (07/11/2026): niente tasto del suono nella scena piccola, si sovrapponeva a «Esplora il cuore»; resta nella finestra completa */
.hero .basso,.hero.mob .basso{display:none!important}
/* immagine fissa per la home: stesso fondo del riquadro, senza tasti */
.poster .basso{display:none!important}
.poster body{background:#f3f1ec}
@media (prefers-color-scheme:dark){.poster:not([data-theme="light"]) body{background:#141310}}
.poster[data-theme="dark"] body{background:#141310}
/* home su telefono: nome accanto a ogni pallino (colonna sinistra a sinistra, destra a destra, centrale sotto) */
.hero.mob .svc{font-size:11px;padding:2px 7px 3px;white-space:nowrap}
.hero.mob .svc[data-lato="l"]{transform:translate(calc(-100% - 11px),-50%)}
.hero.mob .svc[data-lato="r"]{transform:translate(11px,-50%)}
.hero.mob .svc[data-lato="c"]{transform:translate(-50%,9px)}
.poster .svc{transition:none!important}
/* home: nomi dei servizi con il carattere dei titoli del sito, senza pillola; un alone del colore di fondo li stacca dai cavi */
.hero .svc,.hero.mob .svc{background:transparent!important;box-shadow:none!important;font-family:var(--display);font-weight:650;letter-spacing:-.01em;
  font-size:clamp(11px,3vw,15px);padding:1px 2px;color:var(--ink);text-shadow:0 0 2px var(--bg),0 0 5px var(--bg),0 0 9px var(--bg),0 0 14px var(--bg)}
/* niente sottolineature (Antonio, 31/10/2026: si accavallano al testo); il servizio attivo si riconosce dal pallino che si accende */
.hero .svc:focus-visible{outline:2px dashed var(--cy);outline-offset:3px}
.hero .svc.gO{text-decoration-color:var(--or)}.hero .svc.gC{text-decoration-color:var(--cy)}.hero .svc.gV{text-decoration-color:var(--vi)}
/* nomi lunghi su due righe, allineati verso il pallino */
.hero .svc,.hero.mob .svc{white-space:normal;max-width:7.6em;line-height:1.1}
.hero.mob .svc[data-lato="l"]{text-align:right}.hero.mob .svc[data-lato="r"]{text-align:left}.hero.mob .svc[data-lato="c"]{text-align:center;max-width:10.5em}
.poster .svc{text-decoration:none!important}
/* lampo della scossa nel punto toccato (niente con movimento ridotto) */
.scossa{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(235,250,255,.95),rgba(140,215,255,.45) 9%,rgba(77,191,214,.12) 26%,transparent 46%)}
.scossa.via{animation:scossa .5s ease-out}
@keyframes scossa{0%{opacity:1}10%{opacity:.15}18%{opacity:.9}30%{opacity:.3}100%{opacity:0}}
@media not all /* animazioni sempre attive, anche con «Riduci movimento» (Antonio, 02/11/2026) */ {.scossa{display:none}}
/* pulsante della scossa per chi usa la tastiera: compare solo quando riceve il focus */
.tasto-scossa{position:absolute;left:10px;bottom:10px;z-index:4;font:600 13px var(--display);color:var(--ink);background:var(--pill);border:1px solid var(--line2);border-radius:999px;padding:7px 12px;cursor:pointer;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.tasto-scossa:focus-visible{clip-path:none;width:auto;height:auto;outline:2px dashed var(--cy);outline-offset:2px}
/* barra di ritorno: solo quando la pagina è aperta da sola (non nella home né nella finestra) */
.torna{display:none}
.solo .torna{display:inline-flex;align-items:center;gap:8px;position:fixed;left:14px;top:12px;z-index:8;padding:7px 14px 7px 9px;border-radius:999px;
  background:var(--pill);border:1px solid var(--line2);color:var(--ink);text-decoration:none;font:600 14px var(--display);box-shadow:var(--shadow)}
.solo .torna:hover{border-color:var(--ink)}
.solo .torna:focus-visible{outline:2px dashed var(--cy);outline-offset:2px}
.solo:not(.rm):not(.nogl) .intro{top:66px}
.solo:not(.rm):not(.nogl) .tappa{top:66px}
.solo.rm .intro,.solo.nogl .intro{padding-top:66px}
@media (max-width:639px){.solo:not(.rm):not(.nogl) .intro{top:58px}.solo:not(.rm):not(.nogl) .tappa{top:58px}.solo .intro .giu{display:none}}
/* ---------- tappe del racconto: indicatore «1 di 4», Avanti/Indietro, comandi della tappa (01/11/2026) ---------- */
.passi{position:absolute;right:24px;top:20px;z-index:6;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:var(--pill);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.passi .cmd.solo{border:0;background:transparent;padding:6px 10px}
.pa-freccia{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.pa-freccia svg{width:16px;height:16px}
.pa-freccia:hover:not(:disabled){background:var(--line2)}
.pa-freccia:disabled{opacity:.3;cursor:default}
.pa-punti{display:flex;gap:2px}
.pa-punto{width:22px;height:36px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.pa-punto::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.45;transition:width .25s,opacity .25s,background-color .25s}
.pa-punto[aria-current="step"]::before{width:18px;border-radius:5px;opacity:1;background:var(--or)}
.pa-freccia:focus-visible,.pa-punto:focus-visible,.cta:focus-visible,.sl:focus-visible{outline:2px dashed var(--cy);outline-offset:2px}
/* pulsanti della tappa */
.ctx{display:none;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;pointer-events:auto}
.ctx-nota{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45;text-align:center}
.cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  font:600 15px/1 var(--display);text-decoration:none;cursor:pointer}
.cta.linea{background:transparent;color:var(--ink)}
.pin.notte .cta{border-color:#e9edf3;background:#e9edf3;color:#0b0f1a}.pin.notte .cta.linea{background:transparent;color:#e9edf3}
.sl{display:inline-block;margin-top:4px;font:600 13px var(--display);color:var(--ink);text-underline-offset:3px}
:root:not(.rm):not(.nogl) .pin[data-step="0"] .ctx0,:root:not(.rm):not(.nogl) .pin[data-step="4"] .ctx4{display:flex}
:root:not(.rm):not(.nogl):not(.hero) .pin[data-step="0"] .scheda,:root:not(.rm):not(.nogl):not(.hero) .pin[data-step="4"] .scheda{display:none}
.rm .ctx4,.nogl .ctx4{display:flex;margin-top:6px}
.hero .passi,.hero .ctx,.rm .passi,.nogl .passi,.poster .passi{display:none!important}
/* telefono: tre fasce che non si sovrappongono mai */
@media (max-width:640px){
  .mob:not(.hero):not(.rm):not(.nogl) .pin canvas{margin-top:var(--th,150px);flex-shrink:0;
    /* bordi sfumati: dove la scena è tagliata non si vede una riga netta */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 18px),transparent)}
  .mob:not(.hero):not(.rm):not(.nogl) .passi{right:8px;top:8px;padding:2px}
  .mob:not(.hero):not(.rm):not(.nogl) .passi .cmd .l,.mob:not(.hero):not(.rm):not(.nogl) .passi .cmd .s{display:none}
  .mob:not(.hero):not(.rm):not(.nogl) .intro{top:54px}
  .mob:not(.hero):not(.rm):not(.nogl) .intro .giu{display:none}
  .mob:not(.hero):not(.rm):not(.nogl) .tappa{top:54px;left:0;right:0;padding:0 16px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mob:not(.hero):not(.rm):not(.nogl) .tappa h2{font-size:21px}
  .mob:not(.hero):not(.rm):not(.nogl) .tappa p{font-size:13px}
  .mob:not(.hero):not(.rm):not(.nogl) .basso{flex-shrink:0;height:calc(150px + env(safe-area-inset-bottom));justify-content:center;gap:8px;padding:6px 0 calc(6px + env(safe-area-inset-bottom));margin-top:0;border-top:1px solid var(--line2)}
  .mob:not(.hero):not(.rm):not(.nogl) .basso .svcs,.mob:not(.hero):not(.rm):not(.nogl) .scheda,.mob:not(.hero):not(.rm):not(.nogl) .comandi{display:none}
  .mob:not(.hero):not(.rm):not(.nogl) .pin[data-step="1"] .ctx1{display:flex;padding:0 24px}
  .mob:not(.hero):not(.rm):not(.nogl) .pin[data-step="2"] .basso .svcs{display:flex}
  .mob:not(.hero):not(.rm):not(.nogl) .pin[data-step="2"] .scheda{display:block}
  .mob:not(.hero):not(.rm):not(.nogl) .pin[data-step="3"] .comandi{display:flex}
  /* i servizi come pillole scorrevoli, nei colori del logo */
  .basso .svcs{position:static;inset:auto;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:2px 12px 4px;pointer-events:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .basso .svcs::-webkit-scrollbar{display:none}
  .basso .svc{position:static;transform:none;visibility:visible;opacity:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:8px 12px;
    border:1px solid var(--line2);white-space:nowrap;scroll-snap-align:start}
  .basso .svc i{display:block;width:8px;height:8px;border-radius:50%}
  .mob:not(.hero):not(.rm):not(.nogl) .scheda{flex-shrink:0;margin:0 12px;padding:7px 12px 8px;box-shadow:none}
  .mob:not(.hero):not(.rm):not(.nogl) .scheda b{font-size:15.5px;margin:0 0 1px}
  .mob:not(.hero):not(.rm):not(.nogl) .scheda span{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mob:not(.hero):not(.rm):not(.nogl) .scheda b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* telefoni bassi: testata e fascia in basso più compatte, la scena resta visibile */
  @media (max-height:700px){.mob:not(.hero):not(.rm):not(.nogl) .tappa p{display:none}.mob:not(.hero):not(.rm):not(.nogl) .intro .eti{display:none}}
  .mob:not(.hero):not(.rm):not(.nogl) .sl{font-size:12.5px;margin-top:2px}
}
.intro .giu{display:none}   /* al suo posto il pulsante «Inizia il racconto» in basso */