/* musica.diasio.ch · D.IAsio
   Colori del marchio: nero #04070B, azzurro ghiaccio #7FDCFF, azzurro profondo #1E9BFF, bianco ghiaccio #E9FBFF */

@font-face{font-family:"Unbounded";font-weight:300;font-display:swap;src:url(/fonts/unbounded-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(/fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:700;font-display:swap;src:url(/fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:500;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:600;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-weight:300;font-display:swap;src:url(/fonts/oswald-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-weight:500;font-display:swap;src:url(/fonts/oswald-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url(/fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fraktur";font-weight:400;font-display:swap;src:url(/fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --ink:#04070b;--ink-2:#08101a;--panel:rgba(14,26,38,.62);--panel-solid:#0b1520;
  --ice:#7fdcff;--deep:#1e9bff;--snow:#e9fbff;--text:#cfe3ee;--mute:#8aa2b3;--faint:#71899a;
  --line:rgba(127,220,255,.16);--line-2:rgba(127,220,255,.28);
  --acc:var(--ice);--acc-2:var(--deep);--glow:rgba(127,220,255,.35);
  --display:"Unbounded",system-ui,sans-serif;--body:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;--serif:"Cormorant",Georgia,serif;
  --r:16px;--wrap:1180px;--pad:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--ice)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--snow);color:var(--ink);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
h1,h2,h3{margin:0;font-weight:500;line-height:1.1;color:var(--snow)}
h2{font:500 clamp(1.7rem,3.6vw,2.7rem)/1.08 var(--display);letter-spacing:-.01em}
.kicker{font:500 .74rem/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.lead{font-size:1.12rem;color:var(--text);max-width:62ch;margin:18px 0 0}

/* Pulsanti */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:1px solid var(--line-2);border-radius:999px;background:rgba(8,16,26,.55);color:var(--snow);text-decoration:none;font:500 .78rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;touch-action:manipulation}
.btn.primario{background:linear-gradient(180deg,#bff0ff,var(--ice) 45%,#3fb6f5);color:#03121d;border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 40px -8px rgba(127,220,255,.55)}
.btn.piccolo{min-height:40px;padding:8px 16px;font-size:.66rem}
@media (hover:hover){.btn:hover{transform:translateY(-2px);border-color:var(--acc);box-shadow:0 10px 30px -10px var(--glow)}}
.btn[aria-pressed="false"]{color:var(--mute);border-style:dashed}

/* Testata */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.top.scuro{background:rgba(4,7,11,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.top-logo img{height:26px;width:auto}
.top-logo{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none}
.top.scuro .top-logo{opacity:1;transform:none;pointer-events:auto}
.top-nav{display:flex;gap:4px}
.top-nav a{color:var(--text);text-decoration:none;font:500 .7rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:14px 12px;border-radius:999px;transition:color .2s,background .2s}
@media (hover:hover){.top-nav a:hover{color:var(--snow);background:rgba(127,220,255,.08)}}

/* Hero: la spirale gira lenta sotto il marchio */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:110px 0 120px;background:radial-gradient(ellipse at 50% 46%,#0b1d2b 0%,var(--ink) 62%)}
.disco{position:absolute;left:50%;top:46%;width:min(150vmax,1700px);aspect-ratio:1;translate:-50% -50%;z-index:-2;pointer-events:none}
.disco img{width:100%;height:100%;border-radius:50%;opacity:.62;-webkit-mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.75) 44%,transparent 68%);mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.75) 44%,transparent 68%);transform:rotate(calc(var(--sp,0) * 40deg)) scale(calc(1 + var(--sp,0) * .25))}
.hero-vel{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,rgba(4,7,11,.15) 0%,rgba(4,7,11,.55) 48%,var(--ink) 92%),linear-gradient(180deg,rgba(4,7,11,.7),transparent 30%,transparent 70%,var(--ink))}
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-k{color:var(--ice);opacity:.9}
.hero-logo{width:min(900px,92vw);margin:6px auto 0}
.hero-logo img{width:100%;height:auto;filter:drop-shadow(0 0 40px rgba(30,155,255,.25))}
.hero-tag{font:300 clamp(.78rem,1.6vw,1rem)/1 var(--display);letter-spacing:.62em;text-transform:uppercase;color:var(--ice);margin:6px 0 0;padding-left:.62em}
.hero-lead{max-width:640px;margin:28px auto 0;color:var(--text);font-size:1.08rem;text-shadow:0 2px 18px var(--ink)}
.hero .btn-row{justify-content:center}
.giu{white-space:nowrap;text-align:center;position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mute);text-decoration:none;font:400 .66rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;padding:10px}
.giu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (prefers-reduced-motion:no-preference){
  .disco img{animation:gira 240s linear infinite}
  @keyframes gira{to{rotate:360deg}}
  .hero-logo{animation:emergi 1.8s cubic-bezier(.2,.7,.2,1) both}
  @keyframes emergi{from{opacity:0;filter:blur(14px);transform:scale(.96)}}
  .hero-k,.hero-tag,.hero-lead,.hero .btn-row{animation:sali 1.2s cubic-bezier(.2,.7,.2,1) both}
  .hero-tag{animation-delay:.5s}.hero-lead{animation-delay:.7s}.hero .btn-row{animation-delay:.9s}
  @keyframes sali{from{opacity:0;transform:translateY(16px)}}
  .giu svg{animation:respira 2.6s ease-in-out infinite}
  @keyframes respira{50%{transform:translateY(5px);opacity:.5}}
  .js .rv{opacity:0;translate:0 28px;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .rv.in{opacity:1;translate:0 0}
}

/* Sala d'ascolto */
.sala{padding:120px 0 40px;position:relative}
.sala-intro{margin-bottom:30px}
.brano{position:relative;padding:90px 0 110px;isolation:isolate;--e:0;--h:0}
.t-archivio{--acc:#ffb066;--acc-2:#ff6a2b;--glow:rgba(255,140,60,.38);--dim:rgba(255,226,196,.32);--lit:#fff4e6}
.t-spirale{--acc:#7fdcff;--acc-2:#1e9bff;--glow:rgba(127,220,255,.38);--dim:rgba(207,236,255,.32);--lit:#f3fcff}
.brano-fondo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 30%;opacity:calc(.13 + var(--e) * .12);filter:saturate(.9) blur(2px);-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent);transition:opacity .25s}
.brano::before{content:"";position:absolute;inset:8% 0 auto;height:70%;z-index:-1;background:radial-gradient(ellipse at 30% 40%,var(--glow),transparent 62%);opacity:calc(.25 + var(--e) * .55 + var(--h) * .35);pointer-events:none}
.brano-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.brano-head{max-width:820px;margin-bottom:38px}
.lato{font:500 .72rem/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin:0 0 12px;display:flex;align-items:center;gap:12px}
.lato::before{content:"";width:34px;height:1px;background:currentColor}
.titolo{font:600 clamp(2.6rem,7vw,5.4rem)/.95 var(--serif);font-style:italic;letter-spacing:-.01em;color:var(--lit);text-shadow:0 0 50px var(--glow)}
.meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 0}
.meta li{font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(4,7,11,.4)}
.concept{font-size:1.08rem;color:var(--text);max-width:66ch;margin:22px 0 0}
.brano-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:34px;align-items:start}

/* Video: facciata leggera, YouTube si carica solo al clic */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line),0 0 calc(30px + var(--e) * 50px) calc(var(--e) * -6px) var(--glow)}
.player iframe,.player>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;display:block;color:var(--snow);text-decoration:none}
.facade img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,7,11,.85))}
.play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;display:grid;place-items:center;background:rgba(4,7,11,.45);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1;box-shadow:0 0 0 0 var(--glow);transition:transform .3s,background .3s}
.play svg{width:34px;height:34px;fill:var(--snow);margin-left:5px}
.facade-lbl{position:absolute;left:18px;bottom:16px;z-index:1;font:500 .72rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
@media (hover:hover){.facade:hover img{transform:scale(1.035)}.facade:hover .play{transform:scale(1.08);background:var(--acc)}.facade:hover .play svg{fill:var(--ink)}}
@media (prefers-reduced-motion:no-preference){.play{animation:pulsa 2.8s ease-out infinite}@keyframes pulsa{0%{box-shadow:0 0 0 0 var(--glow)}70%,100%{box-shadow:0 0 0 26px transparent}}}
.player.attivo .facade{display:none}

/* Mappa del brano */
.mappa{position:relative;height:74px;margin-top:22px;cursor:pointer;touch-action:none;border-radius:10px}
.mappa svg{width:100%;height:100%}
.onda{fill:rgba(207,236,255,.13)}
.t-archivio .onda{fill:rgba(255,226,196,.13)}
.onda.fatta{fill:var(--acc);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);filter:drop-shadow(0 0 6px var(--glow))}
.punti{position:absolute;inset:auto 0 -6px;height:4px}
.punti i{position:absolute;top:0;width:2px;height:4px;background:var(--acc);opacity:.45;border-radius:1px}
.testa{position:absolute;top:-6px;bottom:-6px;left:var(--p,0%);width:2px;margin-left:-1px;background:var(--snow);box-shadow:0 0 12px var(--acc);opacity:0;transition:opacity .3s}
.brano.vivo .testa,.mappa:hover .testa,.mappa:focus-visible .testa{opacity:1}
.mappa-hover{position:absolute;top:-30px;transform:translateX(-50%);font:500 .7rem/1 var(--mono);background:var(--snow);color:var(--ink);padding:5px 7px;border-radius:6px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s}
.mappa:hover .mappa-hover{opacity:1}
.mappa-sotto{display:flex;align-items:flex-start;gap:16px;margin-top:14px}
.mappa{margin-bottom:0}
.mappa-sotto{position:relative;align-items:center;justify-content:space-between}
.tacche{position:absolute;left:0;right:0;top:-14px;height:10px;list-style:none;margin:0;padding:0;pointer-events:none}
.tacche li{position:absolute;top:0;width:1px;height:10px;background:var(--line-2);transition:background .3s,height .3s}
.tacche li.qui{background:var(--acc);height:14px;top:-2px;box-shadow:0 0 8px var(--glow)}
.sez-ora{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.mappa-sotto .ora{font:500 .74rem/1 var(--mono);color:var(--mute);white-space:nowrap;padding-top:2px}
.ora-t{color:var(--snow)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:20px 0 0;font:400 .7rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.legenda li{display:flex;align-items:center;gap:7px}
.legenda i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--snow))}
.azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* Testo vivo */
.testo{position:relative;background:linear-gradient(180deg,rgba(14,26,38,.72),rgba(8,14,22,.72));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.testo-head{display:flex;justify-content:space-between;gap:12px;margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.testo-firma{color:var(--faint);letter-spacing:.12em}
.testo-scroll{height:min(64vh,620px);overflow-y:auto;padding:18px 12px 46vh 10px;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-mask:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 70px),transparent);mask:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 70px),transparent);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sez{display:flex;align-items:baseline;gap:10px;margin:26px 10px 8px;font:500 .66rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.sez:first-child{margin-top:4px}
.sez::after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
.sez-t{order:2;color:var(--faint);letter-spacing:.06em}
.sez.qui .sez-n{color:var(--acc)}
.nota{margin:0 10px 10px;font:italic 400 .9rem/1.5 var(--body);color:var(--mute)}
.nota::before{content:"♪ ";color:var(--acc);font-style:normal}
.riga{position:relative;display:flex;align-items:flex-start;border-radius:10px;transition:background .3s}
.r-btn{flex:1;display:block;text-align:left;background:none;border:0;padding:7px 10px 7px 52px;cursor:pointer;position:relative;border-radius:10px;font-size:1.08rem;line-height:1.38;color:var(--dim)}
.r-t{position:absolute;left:10px;top:11px;font:400 .66rem/1 var(--mono);color:var(--faint);letter-spacing:.04em}
.cond{flex:none;width:40px;height:40px;margin:3px 2px 0 0;display:grid;place-items:center;background:none;border:0;border-radius:50%;cursor:pointer;color:var(--mute);opacity:0;transition:opacity .2s,background .2s,color .2s}
.cond svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.riga:hover .cond,.riga:focus-within .cond,.riga.on .cond,.riga.scelta .cond{opacity:1}
@media (hover:none){.cond{opacity:.55}}
@media (hover:hover){.r-btn:hover{background:rgba(127,220,255,.06)}.cond:hover{background:rgba(127,220,255,.1);color:var(--snow)}}
.w{background-image:linear-gradient(90deg,var(--wc,var(--lit)) var(--p,0%),var(--dim) var(--p,0%));-webkit-background-clip:text;background-clip:text;color:transparent;transition:text-shadow .3s}
.w.sung{--p:100%}
.riga.on .r-btn{color:var(--snow)}
.riga.on{background:rgba(127,220,255,.06)}
.t-archivio .riga.on{background:rgba(255,176,102,.07)}
.riga.on .w.sung,.riga.on .w.now{text-shadow:0 0 18px var(--glow)}
.riga.on .r-t{color:var(--acc)}
.riga.scelta{background:rgba(127,220,255,.1);box-shadow:inset 3px 0 0 var(--acc)}
.brano:not(.vivo) .w{--p:100%;--wc:var(--text)}
.brano:not(.vivo) .r-btn{color:var(--text)}

/* Stili delle voci (come nel video) */
.v-rap .r-btn{font-family:"Oswald",var(--body);font-weight:300;font-size:1.18rem;letter-spacing:.01em}
.v-rap{--c:#f2f6f8}
.v-scream .r-btn{font-family:"Anton",var(--body);font-size:1.32rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.18}
.v-scream{--c:#ff4545;--wc:#ff5a5a}
.v-growl .r-btn{font-family:"Fraktur",var(--serif);font-size:1.42rem;line-height:1.25}
.v-growl{--c:#e23b3b;--wc:#ff6a5a}
.v-sussurro .r-btn{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.32rem;letter-spacing:.01em}
.v-sussurro{--c:#fac87f;--wc:#ffd59a}
.v-pulita .r-btn,.v-falsetto .r-btn,.v-coro .r-btn{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.36rem;line-height:1.25}
.v-pulita{--c:#d2eeff;--wc:#e6f7ff}
.v-falsetto{--c:#f4fbff;--wc:#ffffff}
.v-falsetto .r-btn{font-size:1.46rem}
.t-archivio .v-coro{--c:#ffe1b8;--wc:#fff0da}
.t-archivio .v-falsetto{--c:#fff6ea;--wc:#ffffff}
.v-ragazzo .r-btn{font-family:"Oswald",var(--body);font-weight:300;font-size:1.12rem;letter-spacing:.03em}
.v-ragazzo{--c:#9ff0b8;--wc:#b8ffcb}
.v-outro .r-btn{font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.35}
.v-outro{--c:#e8d9c4;--wc:#fff3df}
.legenda .v-rap i{background:#f2f6f8}

/* Romanzi */
.romanzi{padding:110px 0;background:linear-gradient(180deg,transparent,rgba(127,220,255,.03) 40%,transparent)}
.romanzi-intro{max-width:760px;margin-bottom:44px}
.libri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.libro{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text);padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);transition:transform .3s,border-color .3s,box-shadow .3s}
.libro img{width:100%;max-width:170px;height:auto;margin:0 auto 14px;border-radius:5px;box-shadow:0 22px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.libro-g{font:500 .64rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.libro-t{font:500 1rem/1.2 var(--display);color:var(--snow)}
.libro-d{font-size:.93rem;color:var(--mute);line-height:1.5}
@media (hover:hover){.libro:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 20px 50px -20px var(--glow)}.libro:hover img{transform:rotate(-2deg) scale(1.03)}}
.romanzi-cta{margin:34px 0 0}

/* Segui */
.segui{padding:40px 0 120px}
.canali{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.canale{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;padding:30px;border-radius:20px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:linear-gradient(135deg,rgba(127,220,255,.09),rgba(14,26,38,.6));overflow:hidden;transition:transform .3s,border-color .3s}
.canale.yt{background:linear-gradient(135deg,rgba(255,60,60,.13),rgba(14,26,38,.6))}
.canale.ig{background:linear-gradient(135deg,rgba(214,90,255,.12),rgba(255,160,90,.07) 60%,rgba(14,26,38,.6))}
.canale-i{grid-row:1 / span 2;width:52px;height:52px}
.yt .canale-i{fill:#ff3b3b}
.ig .canale-i{fill:none;stroke:#f1b0ff;stroke-width:1.8}.ig .canale-i .pieno{fill:#f1b0ff;stroke:none}
.canale-n{font:500 .66rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.canale-h{font:500 clamp(1.1rem,2.4vw,1.6rem)/1.15 var(--display);color:var(--snow)}
.canale-d{grid-column:1 / -1;margin-top:14px;color:var(--text)}
.canale-cta{grid-column:1 / -1;margin-top:10px;font:500 .72rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--snow)}
@media (hover:hover){.canale:hover{transform:translateY(-4px);border-color:var(--line-2)}}

/* Piede */
.piede{border-top:1px solid var(--line);padding:56px 0 calc(40px + env(safe-area-inset-bottom));text-align:center;color:var(--mute);font-size:.92rem}
.piede-logo{width:190px;height:auto;margin:0 auto 18px;opacity:.9}
.piede-ia{margin:0 0 18px}
.piede-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;margin-bottom:16px}
.piede-nav a{color:var(--text);text-decoration:none;padding:10px 10px}
@media (hover:hover){.piede-nav a:hover{color:var(--snow);text-decoration:underline}}
.piede-c{margin:0;color:var(--mute);font-size:.82rem}

/* Barra d'ascolto: compare quando il video esce dallo schermo */
.barra{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:min(640px,calc(100% - 24px));translate:-50% 0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:18px;background:rgba(6,12,19,.86);border:1px solid var(--line-2);box-shadow:0 20px 60px -10px rgba(0,0,0,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
.barra[hidden]{display:none}
.barra-pp{width:46px;height:46px;border-radius:50%;border:0;background:var(--acc,var(--ice));display:grid;place-items:center;cursor:pointer}
.barra-pp svg{width:20px;height:20px;fill:var(--ink)}
.barra-pp .i-play{display:none}.barra.ferma .i-play{display:block}.barra.ferma .i-pausa{display:none}
.barra-info{min-width:0;text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.barra-titolo{font:500 .62rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc,var(--ice))}
.barra-riga{font:italic 500 1.06rem/1.3 var(--serif);color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06)}
.barra-prog i{display:block;height:100%;width:var(--p,0%);background:var(--acc,var(--ice))}
@media (prefers-reduced-motion:no-preference){.barra{animation:sali .4s cubic-bezier(.2,.7,.2,1)}}
.avviso{position:fixed;left:50%;top:80px;translate:-50% 0;z-index:40;padding:12px 18px;border-radius:12px;background:var(--snow);color:var(--ink);font-weight:600;font-size:.92rem;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(-8px)}
.avviso.vis{opacity:1;transform:none}

/* Pagine semplici (privacy, 404) */
.pagina{padding:120px 0 90px}
.pagina .wrap{max-width:780px}
.pagina h1{font:500 clamp(1.8rem,4vw,2.6rem)/1.1 var(--display);margin-bottom:14px}
.pagina h2{font:500 1.15rem/1.3 var(--display);margin:38px 0 10px}
.pagina p,.pagina li{color:var(--text)}
.pagina .top-logo{opacity:1;transform:none;pointer-events:auto}

/* Responsive */
@media (max-width:980px){
  .brano-grid{display:flex;flex-direction:column;gap:0}
  .stage{display:contents}
  .player{order:1}.mappa{order:2}.mappa-sotto{order:3}
  .testo{order:4;margin-top:22px}
  .legenda{order:5}.azioni{order:6}
  .testo-scroll{height:min(48vh,520px);padding-bottom:30vh}
  .libri{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--pad:18px}
  body{font-size:16px}
  .top .wrap{min-height:56px}
  .top-nav a{padding:13px 9px;font-size:.62rem;letter-spacing:.1em}
  .top-logo img{height:20px}
  .hero{padding:96px 0 110px}
  .disco{width:190vmax;top:42%}
  .hero-tag{letter-spacing:.42em;padding-left:.42em}
  .hero-lead{font-size:1rem}
  .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .sala{padding-top:90px}
  .brano{padding:64px 0 80px}
  .play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .play svg{width:28px;height:28px}
  .facade-lbl{left:12px;bottom:10px;font-size:.64rem}
  .r-btn{padding-left:12px;font-size:1.02rem}
  .r-t{display:none}
  .v-rap .r-btn{font-size:1.1rem}
  .libri{gap:14px}
  .libro{padding:14px}
  .libro-d{display:none}
  .canali{grid-template-columns:1fr}
  .canale{padding:24px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.testo-scroll{scroll-behavior:auto}}

/* Stati del testo durante l'ascolto */
.testo-scroll{position:relative}
.brano.vivo .riga.gia .w{--p:100%}
.brano.vivo .riga.gia .r-btn{opacity:.62}
.player.carica:not(.attivo) .play{animation:none;border-color:transparent;background:conic-gradient(var(--acc) 0 25%,rgba(4,7,11,.5) 0) border-box}
@media (prefers-reduced-motion:no-preference){.player.carica:not(.attivo) .play{animation:ruota 1s linear infinite}@keyframes ruota{to{rotate:360deg}}}
.mappa-sotto .ora{margin-left:auto}