/* ink-2 e ink-3 schiariti: i testi piccoli devono leggersi anche sopra la scena chiara */
:root{--bg:#0a0b0d;--ink:#ece8e1;--ink-2:#c3c5ca;--ink-3:#9a9ca3;--line:rgba(236,232,225,.14);
  --quota:#ff5b1f;--luce:#c45cff;--luce-2:#ff4fd8;--luce-deep:#8f5bff;--cura:#2fe3c0;--live:#3fe07c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Archivo,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#c.drag{cursor:grabbing} canvas#c.hover{cursor:pointer}
button{font:inherit;color:inherit}
.mono{font-family:"JetBrains Mono",monospace;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.serif,em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.glass{background:linear-gradient(160deg,rgba(24,25,30,.86),rgba(12,13,16,.8));border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.gone{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* testata */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-stretch:108%;font-size:15px;pointer-events:auto;text-decoration:none;color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.brand svg{width:24px;height:24px}
.ctrls{display:flex;gap:8px;align-items:center;pointer-events:auto}
.clock{padding:9px 12px;border-radius:99px;color:var(--ink-2)} .clock b{color:var(--ink);font-weight:500}
.ctl{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:color .2s,background .2s}
.ctl:hover{color:var(--ink)} .ctl[aria-pressed=true]{color:var(--ink)}
.ctl svg{width:18px;height:18px}
.lang{position:relative;display:flex;align-items:center;height:38px;padding:4px;border-radius:99px;cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em}
.lang span{position:relative;z-index:1;width:36px;text-align:center;line-height:30px;color:var(--ink-2);transition:color .3s}
.lang i{position:absolute;left:4px;top:4px;width:36px;height:30px;border-radius:99px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lang[data-v=en] i{transform:translateX(36px)}
.lang[data-v=it] span[data-l=it],.lang[data-v=en] span[data-l=en]{color:var(--bg)}

/* pallini */
#hots{position:fixed;inset:0;z-index:10;pointer-events:none}
.hot{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;cursor:pointer;color:var(--ink);transition:opacity .35s;outline:none}
.hot.hide{opacity:0;pointer-events:none}
.hot .dot{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:rgba(10,11,13,.5);border:2px solid #fff;animation:pulse 2.4s infinite}
.hot .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--c,#fff)}
.hot.lv2 .dot{width:16px;height:16px;left:-8px;top:-8px}
.hot .lbl{position:absolute;left:16px;top:calc(-15px + var(--ly, 0px));white-space:nowrap;padding:7px 12px;border-radius:99px;opacity:0;transform:translateX(-6px);transition:.25s;pointer-events:none;cursor:pointer}
/* anche l'etichetta è cliccabile, non solo il pallino */
.hot.lv1 .lbl,.hot.lv2 .lbl,.hot.edge .lbl,.hot.ring .lbl{pointer-events:auto} .hot.hide .lbl{pointer-events:none!important}
.hot.nolbl .lbl{opacity:0!important;pointer-events:none!important}
.hot .lbl:hover{background:rgba(236,232,225,.92);color:#0a0b0d}
.hot:hover .lbl,.hot:focus-visible .lbl,.hot.ring .lbl,.hot.lv1 .lbl{opacity:1;transform:none}
.hot.flip .lbl{left:auto;right:16px;transform:translateX(6px)} .hot.flip:hover .lbl,.hot.flip.lv1 .lbl{transform:none}
.hot.ring .dot{animation:pulse .7s infinite;border-color:var(--live)}
.hot .arr{display:none;position:absolute;left:-22px;top:-22px;width:44px;height:44px;transform:rotate(var(--a,0rad));pointer-events:none}
.hot .arr::before{content:"";position:absolute;left:34px;top:15px;border-left:11px solid var(--c,#fff);border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.hot.edge .arr{display:block;animation:spingi 1.6s ease-in-out infinite}
.hot.edge .lbl{opacity:1;transform:none}
.hot.edge .arr{left:-22px;top:-22px}
@keyframes spingi{0%,100%{translate:0 0}50%{translate:calc(cos(var(--a,0rad)) * 4px) calc(sin(var(--a,0rad)) * 4px)}}
.hot.lv2 .lbl{opacity:.94;transform:none;padding:5px 10px;top:calc(-12px + var(--ly, 0px));left:13px;font-size:10px;letter-spacing:.1em}
.hot.lv2.flip .lbl{left:auto;right:13px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* barra */
#bar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:2px;padding:6px;border-radius:99px;transition:opacity .6s}
#bar button{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
#bar button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
#bar button.on{background:var(--ink);color:var(--bg)}
#bar button svg{width:21px;height:21px}
/* ricerca al posto dell'orologio */
.cerca{position:relative;display:flex;align-items:center;height:38px;border-radius:99px;padding:0 14px 0 4px;width:260px}
.cerca .lente{width:30px;height:30px;border:0;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.cerca .lente svg{width:17px;height:17px}
.cerca input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:500 13px Archivo,sans-serif}
.cerca .campo{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:100%}
.cerca .campo input{position:relative;width:100%}
.fantasma{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);white-space:pre;overflow:hidden;color:var(--ink-3);pointer-events:none}
.fantasma i{font-style:normal;visibility:hidden}
.cerca input::placeholder{color:var(--ink-3)} .cerca input::-webkit-search-cancel-button{display:none}
.cerca:focus-within{border-color:rgba(236,232,225,.35)}
.risultati{position:absolute;top:46px;right:0;width:340px;border-radius:18px;padding:6px;display:none;max-height:60vh;overflow:auto}
.risultati.aperto{display:block}
.risultati button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:10px 12px;border-radius:12px;cursor:pointer}
.risultati button:hover,.risultati button.sel{background:rgba(236,232,225,.1)}
.risultati b{display:block;font-weight:650;font-size:14.5px} .risultati small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.35;margin-top:2px}
.risultati p{padding:10px 12px 6px;color:var(--ink-2);font-size:10.5px;line-height:1.5}
.risultati.glass{background:linear-gradient(160deg,rgba(20,21,25,.97),rgba(11,12,15,.96))}
.risultati .chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 10px}
.risultati .chip{width:auto;display:inline-block;padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 13.5px Archivo,sans-serif}
/* tasto indietro nella barra */
#bar #indietro.vuoto{opacity:.35;pointer-events:none}
#bar .cv{font:800 13px/1 Archivo,sans-serif;letter-spacing:.02em;border:1.6px solid currentColor;border-radius:6px;padding:4px 4px 3px}
#bar button i{position:absolute;bottom:7px;width:5px;height:5px;border-radius:50%;background:var(--c)}
#bar button.on i{display:none}
#bar .sep{width:1px;height:24px;background:var(--line);margin:0 4px}
#bar .tip{position:absolute;bottom:58px;left:50%;transform:translateX(-50%) translateY(4px);padding:6px 10px;border-radius:99px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;color:var(--ink)}
#bar button:hover .tip{opacity:1;transform:translateX(-50%)}
#btnTel.vibra svg{animation:vibra .12s infinite;color:var(--live)}
#btnTel.vibra{box-shadow:0 0 0 2px var(--live) inset}
@keyframes vibra{0%{transform:rotate(-12deg) translateX(-1px)}50%{transform:rotate(12deg) translateX(1px)}100%{transform:rotate(-12deg) translateX(-1px)}}

/* pannello */
#panel.glass{background:linear-gradient(160deg,rgba(20,21,25,.94),rgba(11,12,15,.92))}
#panel{position:fixed;z-index:25;top:78px;right:20px;max-height:calc(100vh - 172px);max-height:calc(100dvh - 172px);width:min(420px,calc(100vw - 40px));border-radius:24px;padding:26px 24px 22px;overflow:hidden;display:flex;flex-direction:column;
  transform:translateX(calc(100% + 40px));opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;pointer-events:none}
#panel.open{transform:none;opacity:1;pointer-events:auto}
#panel .corpo{overflow:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-right:-8px;padding-right:8px}
#panel .maniglia{display:none}
#panel .x{position:absolute;z-index:2;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:18px}
#panel .lab{color:var(--c);margin-bottom:14px;display:flex;align-items:center;gap:8px}
#panel .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
#panel h2{font-weight:800;font-stretch:112%;font-size:33px;line-height:.98;letter-spacing:-.02em;padding-right:34px}
#panel h2 em{color:var(--c);font-size:1.08em}
#panel p{margin-top:15px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
#panel ul{list-style:none;margin-top:16px;display:grid;gap:8px}
#panel li{display:flex;gap:10px;align-items:baseline;padding:10px 12px;border:1px solid var(--line);border-radius:14px;font-size:14.5px;background:rgba(255,255,255,.03)}
#panel li b{font-weight:650} #panel li span{color:var(--ink-2);margin-left:auto;font-size:11px;letter-spacing:.08em;text-align:right}
.ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 17px;border-radius:99px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:650;font-size:14.5px;background:transparent;cursor:pointer}
.btn.c{background:var(--c);color:#0a0b0d;border-color:transparent} .btn.ink{background:var(--ink);color:var(--bg);border-color:transparent}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.lista{display:grid;gap:10px;margin-top:18px}
.lista a,.lista button{color:var(--ink);display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);text-decoration:none;background:rgba(255,255,255,.03);cursor:pointer;text-align:left;width:100%}
.lista b{display:block;font-weight:700;font-size:15px} .lista small{color:var(--ink-2);font-size:13px}
.lista .k{width:10px;align-self:stretch;border-radius:4px;background:var(--k)} .lista em{margin-left:auto;font-style:normal;color:var(--ink-2)}
.lista img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex:none}
.tappe{margin-top:18px;display:grid;gap:0;border-left:2px solid var(--c);margin-left:6px}
.tappe div{padding:0 0 16px 18px;position:relative} .tappe div::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--c)}
.tappe b{display:block;font-size:15px} .tappe span{color:var(--ink-2);font-size:14.5px}
.galleria{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px} .galleria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.attestati{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.attestati div{padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)} .attestati b{display:block} .attestati small{color:var(--ink-2);font-size:13px}
.stampa{margin-top:14px;color:var(--live)}
.passi{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex:none}
.passi span{color:var(--ink-2);font-size:10.5px}
.passi button{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:99px;cursor:pointer;color:var(--ink)}
.passi .pv{width:40px;height:40px;flex:none;font-size:16px}
.passi .nx{margin-left:auto;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;text-align:left;max-width:70%}
.passi .nx small{color:var(--c);font-size:10px} .passi .nx b{font-weight:650;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passi .nx i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#0a0b0d;flex:none}
.passi button:hover{background:rgba(255,255,255,.09)}
#giro{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:8px;padding:10px 18px 10px 14px;border-radius:99px;cursor:pointer;color:var(--ink);font-weight:650;font-size:14px;transition:opacity .5s}
#giro svg{width:16px;height:16px;color:var(--quota)} #giro:hover{background:rgba(236,232,225,.16)}

/* video */
#video{position:fixed;inset:0;z-index:40;background:rgba(5,6,8,.82);display:grid;place-items:center;transition:opacity .4s}
.v-in{position:relative;width:min(1100px,92vw)}
.v-box{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.v-box.vert{aspect-ratio:9/16;width:min(46vh,92vw);margin:auto}
.v-box iframe,.v-box video{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-x{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;font-size:20px}
.v-t{margin-top:12px;text-align:center;color:var(--ink-2)}

/* ingresso */
#entra{position:fixed;inset:0;z-index:35;display:grid;place-items:center;pointer-events:none;transition:opacity .8s}
.cerchio{position:relative;width:190px;height:190px;border-radius:50%;border:0;background:rgba(10,11,13,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;display:grid;place-items:center;padding:24px;transform:translateY(60px)}
.cerchio b{font-weight:800;font-stretch:108%;font-size:18px;line-height:1.1;text-align:center}
.cerchio .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);animation:anello 2.6s infinite}
.cerchio .r2{animation-delay:1.3s;opacity:.6}
.cerchio:hover{background:rgba(236,232,225,.14)}
@keyframes anello{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
#entra .classico{position:absolute;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 44px);transform:translateX(-50%);pointer-events:auto;padding:11px 18px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
#entra .classico:hover{background:rgba(236,232,225,.14)}
#entra .legale{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;pointer-events:auto;font-size:10px;color:var(--ink-2);text-shadow:0 1px 6px rgba(0,0,0,.8)}
#entra .legale a{color:inherit}

/* caricamento */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#16131c,#0a0b0d 70%);transition:opacity 1s,visibility 1s}
.ld{width:min(420px,84vw);text-align:center}
.ld svg{width:74px;height:74px;margin:0 auto 24px;display:block}
.ld .nome{font-weight:800;font-stretch:112%;font-size:30px;letter-spacing:-.015em}
.ld .msg{margin-top:10px;color:var(--ink-3);min-height:1.5em}
.ld .track{margin:24px auto 0;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.ld .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--quota),var(--luce) 50%,var(--cura));transition:width .4s}

#hint{position:fixed;left:50%;bottom:146px;transform:translateX(-50%);z-index:15;padding:8px 14px;border-radius:99px;color:var(--ink-2);transition:opacity .8s;white-space:nowrap}

@media (max-width:760px){
  .top{padding:12px 14px} .brand span{display:none}
  .cerca{width:38px;padding:0;justify-content:center;transition:width .3s} .cerca input,.cerca .campo{display:none}
  .cerca.aperta{position:fixed;left:12px;right:12px;top:12px;width:auto;height:44px;padding:0 14px 0 6px;z-index:40} .cerca.aperta input{display:block;font-size:16px} .cerca.aperta .campo{display:flex}
  .risultati{position:fixed;left:12px;right:12px;top:62px;width:auto}
  .ctl{width:34px;height:34px} .lang{height:34px} .lang span{line-height:26px} .lang i{height:26px}
  #bar{gap:0;padding:5px} #bar button{width:40px;height:40px} #bar button svg{width:19px;height:19px} #bar .tip{display:none} #bar .sep{margin:0 2px}
  /* telefono: pannello compatto (circa un terzo dello schermo) con lo scorrimento interno; la maniglia lo allarga */
  #panel{top:auto;left:10px;right:10px;width:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px);max-height:34vh;max-height:34svh;transform:translateY(calc(100% + 90px));padding:14px 16px 12px;border-radius:20px;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s,max-height .4s cubic-bezier(.2,.8,.2,1)}
  #panel.esteso{max-height:66vh;max-height:66svh}
  #panel .maniglia{display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:22px;border:0;background:none;cursor:pointer}
  #panel .maniglia i{display:block;width:38px;height:4px;border-radius:4px;background:rgba(236,232,225,.35);margin:7px auto 0}
  #panel .x{top:10px;right:10px;width:32px;height:32px;font-size:16px}
  #panel .lab{margin:4px 0 8px;font-size:10px} #panel h2{font-size:22px;padding-right:36px} #panel p{margin-top:8px;font-size:14.5px;line-height:1.5}
  #panel .corpo{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent);padding-bottom:14px}
  .ctas{margin-top:12px} .btn{padding:10px 14px;font-size:14px} .lista{margin-top:12px}
  .passi{margin-top:8px;padding-top:10px} .passi .pv{width:36px;height:36px} .passi .nx{padding:6px 8px 6px 14px} .passi .nx i{width:26px;height:26px}
  #giro{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 62px)} #panel .passi span{display:none}
  #hint{bottom:128px;font-size:10px;white-space:normal;text-align:center;width:calc(100% - 40px);border-radius:16px}
  .cerchio{width:160px;height:160px} .cerchio b{font-size:16px}
}

/* versione testo */
.salta{position:fixed;left:12px;top:-60px;z-index:60;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:650;text-decoration:none}
.salta:focus{top:12px}
.testo{position:fixed;inset:0;z-index:55;overflow:auto;background:radial-gradient(120% 80% at 50% -10%,#131418,#0a0b0d 55%,#070809);transition:opacity .4s,visibility .4s;-webkit-overflow-scrolling:touch}
.testo.chiuso{opacity:0;visibility:hidden;pointer-events:none}
.t-barra{position:sticky;top:0;z-index:2;padding:14px 16px;background:linear-gradient(#0a0b0d 70%,rgba(10,11,13,0))}
.t-corpo{max-width:720px;margin:0 auto;padding:10px 20px 80px;line-height:1.6;color:var(--ink-2);font-size:16.5px}
.t-corpo h1{font-weight:800;font-stretch:112%;font-size:clamp(38px,8vw,60px);line-height:1;color:var(--ink);letter-spacing:-.02em;margin:6px 0 10px}
.t-corpo h2{font-weight:800;font-stretch:110%;font-size:clamp(26px,5vw,34px);line-height:1.08;color:var(--ink);margin:6px 0 12px}
.t-corpo h2 em,.t-corpo h3 em{font-family:"Instrument Serif",serif;font-weight:400}
.t-corpo h3{font-weight:700;font-size:19px;color:var(--ink);margin:24px 0 6px}
.t-corpo section{padding-top:36px;margin-top:36px;border-top:1px solid var(--line)}
.t-corpo p{margin:8px 0} .t-corpo ul{margin:10px 0 0 20px} .t-corpo li{margin:4px 0} .t-corpo b{color:var(--ink);font-weight:650}
.t-corpo a{color:var(--ink)}
.t-k{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.t-q{color:var(--quota)} .t-l{color:var(--luce)} .t-c{color:var(--cura)}
.t-sotto{font-size:18px;color:var(--ink)} .t-contatti{margin-top:14px}
/* domande frequenti nel pannello */
.faq{margin-top:14px;display:grid;gap:8px}
.faq details{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.faq summary{cursor:pointer;list-style:none;padding:12px 40px 12px 14px;font-weight:650;font-size:15px;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:14px;top:9px;font-size:20px;color:var(--c)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 14px 14px;font-size:14.5px}


/* accessibilità: contorno ben visibile su ciò che è selezionato con la tastiera */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hot:focus-visible{outline:none} .hot:focus-visible .dot{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.cerca input:focus-visible{outline:none}
/* "riduci movimento" attivo nel dispositivo: niente animazioni decorative */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cerchio .ring{display:none}
}
.t-piede{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}

/* porta d'ingresso della home: sito classico o laboratorio, poi link rapidi e domande frequenti */
.porta{position:fixed;inset:0;z-index:60;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:radial-gradient(60% 45% at 18% 0%,rgba(196,92,255,.2),transparent 70%),radial-gradient(45% 40% at 100% 100%,rgba(47,227,192,.1),transparent 70%),radial-gradient(40% 35% at 0% 100%,rgba(255,91,31,.1),transparent 70%),var(--bg);transition:opacity .7s,visibility .7s}
.porta.via{opacity:0;visibility:hidden;pointer-events:none}
.senza-porta .porta{display:none}
.p-in{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 36px}
.p-top{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.p-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:16px}
.p-brand svg{width:28px;height:27px}
.p-lang{display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-2);cursor:pointer;font:inherit}
.p-lang b{padding:6px 11px;border-radius:999px;font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em}
.p-lang b.on{background:var(--ink);color:var(--bg)}
.p-intro{text-align:center;padding:clamp(8px,3vh,32px) 0 clamp(18px,4vh,34px)}
.p-k,.p-n,.p-link h3{color:var(--ink-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.p-intro h1{margin:14px 0 10px;font-weight:800;font-stretch:115%;font-size:clamp(38px,6vw,86px);line-height:.95;letter-spacing:-.04em}
.p-intro h1 em,.p-t em,.p-sez h2 em{font-family:"Instrument Serif",serif;font-weight:400;font-stretch:100%;letter-spacing:0;padding-right:.06em;background:linear-gradient(90deg,#c85cff,#6f80ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-sotto{color:var(--ink-2);font-size:clamp(15px,1.4vw,18px)}
.p-scelte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.p-scelta{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:0;border-radius:28px;overflow:hidden;background:#111215;color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.9);transition:translate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.p-scelta:hover,.p-scelta:focus-visible{translate:0 -6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 50px 90px -40px rgba(196,92,255,.6)}
.p-img{display:block;aspect-ratio:16/10;overflow:hidden}
.p-img img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.p-scelta:hover .p-img img{scale:1.05}
.p-txt{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,30px)}
.p-t{font-weight:800;font-stretch:112%;font-size:clamp(28px,3.2vw,46px);line-height:1;letter-spacing:-.035em}
.p-d{color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:52ch}
.p-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:15px}
.p-go i{font-style:normal;transition:translate .3s}
.p-scelta:hover .p-go i{translate:4px 0}
#pLab .p-go{background:linear-gradient(90deg,#c85cff,#6f80ff);color:#fff}
.p-bar{display:block;height:2px;margin-top:4px;background:var(--line);border-radius:2px;overflow:hidden}
.p-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c85cff,#6f80ff);transition:width .3s}
.p-sez{margin-top:clamp(40px,8vh,80px);padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--line)}
.p-sez h2{font-weight:800;font-stretch:112%;font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.035em;margin-bottom:clamp(18px,3vh,30px)}
.p-link{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.p-link h3{margin-bottom:10px}
.p-link ul{list-style:none}
.p-link li{border-top:1px solid var(--line)}
.p-link a{display:block;padding:10px 0;color:var(--ink);text-decoration:none;font-size:15px;transition:color .2s}
.p-link a:hover{color:#d98bff}
.p-faq{border-top:1px solid var(--line);max-width:920px}
.p-faq details{border-bottom:1px solid var(--line)}
.p-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:600;font-size:clamp(15px,1.3vw,18px)}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::after{content:"+";flex:none;color:#c85cff;font-size:1.4em;line-height:1;transition:rotate .3s}
.p-faq details[open] summary::after{rotate:45deg}
.p-faq p{padding:0 0 16px;color:var(--ink-2);line-height:1.6;max-width:70ch}
.p-piede{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(40px,8vh,70px);padding-top:18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:11px}
.p-piede a{color:inherit}
@media (max-width:860px){.p-scelte{grid-template-columns:1fr}.p-link{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.p-link{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.p-scelta,.p-img img,.porta{transition:none}}