/* =====================================================================
   Radio Zero NoVanta - sito 2026 - grafica
   Le misure sono in PERCENTUALE dello schermo e in «rem»: il carattere base
   cresce e cala con la larghezza dello schermo (fra un minimo e un massimo),
   quindi la pagina ha le stesse proporzioni da un portatile 1366 a un 4K.
   ===================================================================== */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(caratteri/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(caratteri/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(caratteri/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(caratteri/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:600;font-display:swap;src:url(caratteri/josefin-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:700;font-display:swap;src:url(caratteri/josefin-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --fondo:#0A1030; --carta:#0F1740; --bordo:#22306A; --bordo2:#2E3D80;
  --testo:#FFFFFF; --tenue:#A9B6DD; --chiaro:#C9D5F5;
  --verde:#3DFF6E; --verde2:#5CFF2E; --rosso:#FF3B3B; --celeste:#5EC8F2; --celeste2:#7FD3FF;
}
*{box-sizing:border-box}
html{font-size:clamp(13px, .42vw + 8.5px, 22px)}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
button,input{font-family:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- impaginazione PC */
.pagina{position:relative;min-height:100vh;display:flex;flex-direction:column;max-width:2400px;margin:0 auto}
.testata{display:flex;align-items:center;gap:1.1rem;padding:1.4rem 2.8% .4rem}
.logo-piccolo{width:3.2rem;height:auto;border-radius:.5rem}
.nome{margin:0;font-family:"Josefin Sans",sans-serif;font-size:2rem;font-weight:700;letter-spacing:.02em;line-height:1.1}
.frase{font-size:.95rem;color:var(--tenue);margin-top:.15rem}
.pillola{margin-left:1.8rem;display:flex;align-items:center;gap:.55rem;font-size:.88rem;font-weight:600;color:#DDE6FF;
  background:rgba(255,255,255,.05);border:1px solid var(--bordo2);border-radius:2rem;height:2.6rem;padding:0 1rem;white-space:nowrap}
.dot{width:.7rem;height:.7rem;border-radius:50%;flex-shrink:0;background:#7A869E}
.dot.v{background:var(--verde);box-shadow:0 0 10px var(--verde),0 0 3px var(--verde);animation:lampo 1.6s ease-in-out infinite}
.dot.r{background:var(--rosso);box-shadow:0 0 10px var(--rosso)}
.dot.g{animation:lampo 1.2s ease-in-out infinite}
@keyframes lampo{50%{opacity:.35}}
.info{position:absolute;top:.9rem;right:1.5%;transform:rotate(-4deg);display:flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border:1px dashed #8AA0D6;border-radius:.5rem;color:var(--chiaro);font-size:.8rem;
  text-decoration:none;background:#121A44;z-index:5}
.info svg{width:.9rem;height:.9rem}
.info:hover{background:#1A2458;color:#fff}

.corpo{flex-grow:1;display:grid;grid-template-columns:minmax(0,33fr) minmax(0,37fr) minmax(0,30fr);gap:2%;
  padding:1rem 2.8%;min-height:0}
.corpo.senza-prog{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
.sx,.dx{display:flex;flex-direction:column;gap:.8rem;min-height:0}

/* ---------------------------------------------------------------- player */
.rosso{position:relative;overflow:hidden;border-radius:1.15rem;background:url(img/fondo_rosso.jpg) center/cover;
  box-shadow:0 .6rem 1.9rem rgba(0,0,0,.45)}
.rosso:before{content:"";position:absolute;inset:0;background:rgba(40,0,0,.28);pointer-events:none}
.rosso>*{position:relative}
.player{flex-shrink:0}
.pin{padding:0;display:flex;flex-direction:column;gap:0}
/* due fasce di rosso più scuro, in alto e in basso, come nel vecchio player */
.riga-alta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem 1.2rem;
  background:rgba(25,0,0,.45);border-bottom:1px solid rgba(255,255,255,.16)}
.onair{visibility:hidden;opacity:0;transition:opacity .5s;font-family:"Josefin Sans",sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.18em;padding:.3rem .75rem .2rem;border-radius:.4rem;color:#9CFF7A;background:rgba(0,20,0,.55);
  border:2px solid #39D353;text-shadow:0 0 6px #39FF14,0 0 14px rgba(57,255,20,.7);box-shadow:0 0 10px rgba(57,255,20,.45),inset 0 0 8px rgba(57,255,20,.25)}
/* «ON AIR» si accende solo mentre si ascolta la radio; altrimenti non c'è */
body.ascolto .onair{visibility:visible;opacity:1;animation:insegna 2.4s ease-in-out infinite}
@keyframes insegna{50%{text-shadow:0 0 4px #39FF14,0 0 8px rgba(57,255,20,.5);box-shadow:0 0 6px rgba(57,255,20,.3),inset 0 0 6px rgba(57,255,20,.2)}}
.storia-btn{display:flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.35);border:0;color:#fff;border-radius:2rem;
  padding:.4rem .8rem;font-size:.82rem;cursor:pointer}
.storia-btn svg{width:1rem;height:1rem}
.storia-btn:hover{background:rgba(0,0,0,.55)}
.brano{display:flex;gap:1rem;align-items:center;min-height:0;padding:1rem 1.2rem}
.cop{width:6.6rem;height:6.6rem;flex-shrink:0;border-radius:.75rem;object-fit:cover;background:#1B1F3A;
  border:2px solid rgba(255,255,255,.25)}
.brano-txt{min-width:0}
.tit{font-size:1.35rem;font-weight:700;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.art{font-size:1.05rem;color:#FFE1E1;margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tempo{font-size:.82rem;color:#FFC9C9;margin-top:.3rem;min-height:1em}
.ctrl{display:flex;align-items:center;gap:.9rem;padding:.55rem 1.2rem;background:rgba(25,0,0,.45);
  border-top:1px solid rgba(255,255,255,.16)}
.play{width:4.4rem;height:4.4rem;flex-shrink:0;border-radius:50%;border:none;position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 28%,#2A2F38 0%,#101318 45%,#000 100%);
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.8),inset 0 6px 12px rgba(255,255,255,.12),inset 0 0 16px rgba(57,255,20,.25),0 6px 18px rgba(0,0,0,.5)}
.play:active{transform:scale(.97)}
/* anello verde che gira attorno al play solo mentre la radio suona */
.play-box{position:relative;flex-shrink:0;padding:.36rem;display:flex}
.anello{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
/* la scia: un arco verde che sfuma dietro il pallino */
.anello:before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(57,255,20,0) 0deg,rgba(57,255,20,0) 150deg,rgba(57,255,20,.25) 250deg,#39FF14 345deg,#C8FFB0 359deg,rgba(57,255,20,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .26rem),#000 calc(100% - .24rem));
          mask:radial-gradient(farthest-side,transparent calc(100% - .26rem),#000 calc(100% - .24rem));
  filter:drop-shadow(0 0 4px rgba(57,255,20,.8))}
/* il pallino luminoso che guida la scia */
.anello:after{content:"";position:absolute;top:-.14rem;left:50%;width:.5rem;height:.5rem;margin-left:-.25rem;border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0%,#C8FFB0 35%,#39FF14 70%);box-shadow:0 0 6px #39FF14,0 0 14px #39FF14,0 0 22px rgba(57,255,20,.6)}
.play.on:not(.attesa)+.anello{opacity:1;animation:gira 1.6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.play .riflesso{position:absolute;top:9%;left:20%;width:60%;height:28%;border-radius:50%;background:rgba(255,255,255,.10);filter:blur(3px)}
.play svg{position:relative;width:45%;height:45%;margin-left:6%;fill:var(--verde2);stroke:none;filter:drop-shadow(0 0 6px rgba(57,255,20,.8))}
.play.on svg{margin-left:0}
.play.invita{animation:invita 1.6s ease-in-out infinite}
.play.attesa svg{animation:lampo .8s infinite}
@keyframes invita{50%{box-shadow:inset 0 -10px 18px rgba(0,0,0,.8),inset 0 6px 12px rgba(255,255,255,.12),inset 0 0 16px rgba(57,255,20,.25),0 0 0 .5rem rgba(92,255,46,.25),0 0 1.5rem rgba(92,255,46,.6)}}
.ico-vol{width:1.4rem;height:1.4rem;color:#fff;flex-shrink:0}
.vol{flex-grow:1;min-width:0;accent-color:#2ECC40;height:1.2rem}
.vol-n{font-size:.82rem;width:2.6rem;text-align:right}

.avviso,.apri{flex-shrink:0;width:100%;min-height:2.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.55rem 1rem;border-radius:.75rem;font-weight:600;font-size:.95rem;text-align:center;line-height:1.2}
.avviso{background:rgba(92,255,46,.10);border:2px solid #39D353;color:#C9FFB8}
.avviso.on{background:rgba(255,196,0,.10);border-color:#F2B807;color:#FFE7A3}
.avviso.ko{background:rgba(255,159,10,.12);border-color:#FF9F0A;color:#FFD8A6}
.apri{border:2px solid #4FB8F0;background:rgba(79,184,240,.12);color:#CDEEFF;cursor:pointer;font-family:inherit}
.apri:hover{background:rgba(79,184,240,.24)}
.apri svg{width:1rem;height:1rem;stroke-width:2.4;transition:transform .25s}
.apri.aperto svg{transform:rotate(180deg)}
/* spettro ed equalizzatore: subito sotto il player, si aprono a TENDINA (scendono dall'alto e spingono giù i due
   pulsanti) e si richiudono risalendo. Da chiuso non occupa spazio: il margine negativo annulla lo spazio tra i blocchi */
.extra{--spazio:.8rem;display:grid;grid-template-rows:0fr;margin-top:calc(-1 * var(--spazio));flex-shrink:0;
  transition:grid-template-rows .55s cubic-bezier(.3,.7,.2,1),margin-top .55s cubic-bezier(.3,.7,.2,1)}
.extra.aperto{grid-template-rows:1fr;margin-top:0}
.extra-in{min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:.8rem;
  opacity:0;transform:translateY(-.6rem);transition:opacity .4s ease,transform .55s cubic-bezier(.3,.7,.2,1)}
.extra.aperto .extra-in{opacity:1;transform:none}
.box{padding:.7rem .9rem;display:flex;flex-direction:column;min-width:0}
.box .spettro{flex-grow:1;min-height:4.6rem}
.etic{font-size:.75rem;color:#FFE1E1;letter-spacing:.08em;margin-bottom:.5rem;display:flex;justify-content:space-between;gap:.5rem;white-space:nowrap}
.etic span{overflow:hidden;text-overflow:ellipsis}
.pres{color:var(--celeste2)}
.spettro{display:block;width:100%;height:4.6rem}
/* i preset: una riga sotto spettro ed equalizzatore, a tutta larghezza, nero e verde */
.chips{grid-column:1/-1;display:flex;gap:.35rem;background:#05080A;border:1px solid #1F3A22;border-radius:.9rem;padding:.5rem}
.chip{flex:1 1 auto;min-width:0;border-radius:.6rem;padding:.55rem .35rem;font-size:.78rem;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;background:#0B110C;color:#8FE39A;border:1px solid #23472A;cursor:pointer;
  transition:background .2s,box-shadow .2s}
.chip:hover{background:#102016;color:#C9FFB8}
.chip.on{background:linear-gradient(#1F7A33,#135223);color:#fff;border-color:#3DFF6E;
  box-shadow:0 0 10px rgba(61,255,110,.45),inset 0 0 6px rgba(61,255,110,.35)}
.eq{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.banda{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.7rem;color:#FFE1E1}
.banda span:first-child{font-weight:600;color:#C9FFB8}
.banda input{writing-mode:vertical-lr;direction:rtl;width:1.8rem;height:5.6rem;accent-color:#3DFF6E;cursor:pointer;margin:0}
.nota-ios{font-size:.78rem;color:#FFE1E1;margin:.4rem 0 0}

/* ---------------------------------------------------------------- programmazione
   Colori «Notte blu» (variante A del mockup del 24/10): discreti, non abbagliano. Il bordo esterno resta il celeste
   del sito. Risaltano solo «IN ONDA ORA» (verde) e «PROSSIMA» (azzurro). */
.prog{background:#0E1636;border:2px solid var(--celeste);border-radius:1.25rem;display:flex;flex-direction:column;
  min-height:0;overflow:hidden;box-shadow:0 .6rem 1.9rem rgba(0,0,0,.35)}
.ptit{background:#121D45;border-bottom:1px solid rgba(127,170,230,.18);padding:1rem 1.3rem .9rem}
.ptit h2{margin:0;font-family:"Josefin Sans",sans-serif;font-size:1.35rem;line-height:1.2;color:#E4E9F5}
.ptit div{font-size:.85rem;margin-top:.25rem;color:#9DB0D8}
.ptit div.pagg{font-size:.7rem;margin-top:.15rem;color:#6F87B3;letter-spacing:.01em}
.ptit div.pagg:empty{display:none}
.lista{flex-grow:1;min-height:0;overflow-y:auto;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.5rem;
  scrollbar-width:thin;scrollbar-color:#34508A transparent}
.lista::-webkit-scrollbar{width:10px}
.lista::-webkit-scrollbar-thumb{background:#34508A;border-radius:6px}
.lista::-webkit-scrollbar-track{background:transparent}
.riga{flex-shrink:0;min-height:4.8rem;display:flex;gap:.9rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:.75rem;padding:.5rem .9rem .5rem 0}
.riga.prossima{min-height:6rem;background:rgba(110,160,230,.10);border:2px solid rgba(120,170,240,.45)}
.riga.inonda{min-height:6.4rem;background:rgba(61,220,110,.07);border:2px solid rgba(61,220,110,.55)}
.ora{width:6.6rem;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  border-right:1px solid rgba(255,255,255,.08);font-size:1.6rem;font-weight:700;color:#8DB4E2;font-variant-numeric:tabular-nums}
.riga.inonda .ora{color:#4FD47F;border-right-color:rgba(61,220,110,.25)}
.badge{font-size:.58rem;letter-spacing:.04em;font-weight:700;border-radius:1rem;padding:.12rem .5rem;white-space:nowrap}
.badge.p{color:#0B1530;background:#6FA3E8}
.badge.o{color:#062A12;background:#4FD47F;display:flex;align-items:center;gap:.3rem}
.badge.o i{width:.45rem;height:.45rem;border-radius:50%;background:#062A12;animation:lampo 1s infinite}
/* 1.2.0: stato vero delle rubriche da VRS - un colore per ogni stato, nello stesso posto (accanto all'ora) */
.badge.prep{color:#2A1E06;background:#F2C26B;animation:pulsaOcra 1.8s ease-in-out infinite}
.badge.pronta{color:#06202E;background:#5EC8F2}
.badge.tx{color:#D4DAE6;background:rgba(160,170,190,.28)}
.badge.salt{color:#FFD9D9;background:rgba(220,80,80,.35)}
@keyframes pulsaOcra{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(242,194,107,.55)}50%{opacity:.72;box-shadow:0 0 .5rem .1rem rgba(242,194,107,.35)}}
.scorre{position:relative;display:block;width:4.6rem;height:2px;border-radius:1px;background:rgba(79,212,127,.35)}
.scorre i{position:absolute;top:50%;left:0;width:.42rem;height:.42rem;margin-top:-.21rem;border-radius:50%;background:#4FD47F;
  box-shadow:0 0 .35rem #4FD47F;animation:pallino 2.4s ease-in-out infinite alternate}
@keyframes pallino{from{left:0}to{left:calc(100% - .42rem)}}
.riga.prossima.pronta{border-color:rgba(94,200,242,.6)}
.riga.prossima.prep{border-color:rgba(242,194,107,.55);background:rgba(242,194,107,.07)}
.riga.trasmessa{opacity:.55}
.riga.trasmessa .ora{color:#9AA6BD}
.riga.saltata{opacity:.7}
.riga.saltata .ora{color:#E59A9A}
@media (prefers-reduced-motion:reduce){.badge.prep,.scorre i{animation:none}}
.linea{width:.38rem;flex-shrink:0;border-radius:.2rem;opacity:.85}
.rtxt{display:flex;flex-direction:column;justify-content:center;gap:.25rem;min-width:0;flex-grow:1}
.rtxt b{font-size:1.12rem;font-weight:600;color:#E4E9F5}
.rtxt small{font-size:.82rem;color:#8391B5}
/* 1.2.3: lo STATO a sinistra della linea (sotto il titolo), bollini tutti larghi uguali; la linea «sfumata» (doppio
   spessore, si dissolve alle due estremità); nella rubrica in onda il pallino avanza con il tempo e dietro di lui
   la linea si accende di verde. Un colore per ogni stato. */
.badge.grigio{color:#C3CBDD;background:rgba(160,170,190,.22)}
.stato{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}
.stato .badge{flex-shrink:0;width:5.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  padding:.14rem .3rem;letter-spacing:.01em}
.pista{position:relative;flex-grow:1;min-width:2rem;height:.8rem}
.filo{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--base,rgba(160,170,190,.28));
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.filo u{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:linear-gradient(90deg,rgba(79,212,127,.25),#4FD47F);
  transition:width 1s linear}
.testa{position:absolute;top:50%;left:0;width:.62rem;height:.62rem;margin:-.31rem 0 0 -.31rem;border-radius:50%;background:#B9FFD0;
  box-shadow:0 0 0 .14rem #4FD47F,0 0 .7rem .1rem rgba(79,212,127,.8);transition:left 1s linear;animation:respira 1.8s ease-in-out infinite}
@keyframes respira{50%{filter:brightness(1.35);transform:scale(1.12)}}
.t-onda{--base:rgba(79,212,127,.22)}
.t-prep{--base:rgba(242,194,107,.38)}
.t-pronta{--base:rgba(94,200,242,.42)}
.t-p{--base:rgba(111,163,232,.42)}
.t-g,.t-tx{--base:rgba(160,170,190,.28)}
.t-salt{--base:rgba(220,80,80,.38)}
@media (prefers-reduced-motion:reduce){.testa,.badge.o i{animation:none}.filo u,.testa{transition:none}}
.vuota{color:#9DB0D8;font-size:.95rem;text-align:center;padding:2rem 1rem}

/* ---------------------------------------------------------------- colonna destra */
.logo-box{width:100%;aspect-ratio:1158/842;container-type:size;display:flex;align-items:center;justify-content:center}
.logo090{display:block;width:min(100cqw, 100cqh * 1158 / 842);height:auto;border-radius:1rem;box-shadow:0 .6rem 1.9rem rgba(0,0,0,.35)}
.pulsanti{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:.6rem}
.btn{display:flex;align-items:center;gap:.55rem;padding:.8rem .9rem;border-radius:.75rem;color:#fff;text-decoration:none;
  font-weight:600;font-size:.92rem;border:1px solid var(--bordo2);background:#1B2558;cursor:pointer;text-align:center;justify-content:center;line-height:1.2;min-height:3rem}
.btn svg{width:1.25rem;height:1.25rem;flex-shrink:0}
.btn:hover{filter:brightness(1.15)}
.btn.whatsapp{background:#128C4A;border-color:#128C4A}
.btn.messaggio{background:#0E6A93;border-color:#0E6A93}
.sponsor{margin-top:auto;border-radius:1rem;overflow:hidden;text-align:center;color:var(--chiaro);font-size:.85rem}
.sponsor img{max-width:100%;height:auto;border-radius:1rem;display:block;margin:0 auto}
.sponsor p{margin:.4rem 0 0}

/* ---------------------------------------------------------------- piede
   1.1.0: tutto su UN SOLO RIGO, molto piccolo: icone dei social · sito · copyright */
.piede{padding:.45rem 2.8% .55rem;border-top:1px solid #1C2558;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:.9rem;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.social{display:flex;gap:.35rem;flex-wrap:nowrap;justify-content:center;flex-shrink:0}
.social a{width:1.6rem;height:1.6rem;border-radius:50%;background:#1B2558;border:1px solid var(--bordo2);color:#fff;
  display:flex;align-items:center;justify-content:center}
.social a:hover{background:#26337A}
.social svg{width:.8rem;height:.8rem}
.sito{font-size:.78rem;color:#E3EAFF;font-family:"Josefin Sans",sans-serif;letter-spacing:.03em;flex-shrink:0}
.copy{font-size:.7rem;color:#8E9CC8;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- finestre */
.velo{position:fixed;inset:0;background:rgba(3,6,20,.72);z-index:50;display:flex;align-items:center;justify-content:center;padding:2%}
.finestra{background:#101A48;border:1px solid var(--bordo2);border-radius:1rem;width:min(42rem,96%);max-height:92vh;display:flex;
  flex-direction:column;box-shadow:0 1.5rem 4rem rgba(0,0,0,.6)}
.finestra.grande{width:min(80rem,94%);height:90vh;max-height:90vh}
.fin-testa{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--bordo)}
.fin-testa h3{margin:0;font-size:1.1rem}
.chiudi{background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;width:2.6rem;height:2.6rem;border-radius:50%}
.chiudi:hover{background:rgba(255,255,255,.1)}
.fin-corpo{padding:1rem;overflow:auto;flex-grow:1}
.fin-corpo iframe{width:100%;height:100%;border:0;border-radius:.6rem;background:#fff}
.fin-corpo label{display:block;font-size:.85rem;color:var(--chiaro);margin:.7rem 0 .25rem}
.fin-corpo input[type=text],.fin-corpo input[type=email],.fin-corpo textarea{width:100%;padding:.7rem .8rem;border-radius:.6rem;
  border:1px solid var(--bordo2);background:#0A1030;color:#fff;font-size:1rem}
.fin-corpo textarea{min-height:8rem;resize:vertical}
.fin-corpo .spunta{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;color:var(--chiaro);margin-top:.8rem}
.fin-corpo .spunta a{color:var(--celeste2)}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.azioni{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.az{padding:.7rem 1.1rem;border-radius:.6rem;border:1px solid var(--bordo2);background:#1B2558;color:#fff;font-weight:600;
  font-size:.92rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem}
.az.primo{background:#0E6A93;border-color:#0E6A93}
.esito{margin-top:.8rem;font-weight:600}
.esito.ok{color:#B9FFC9}.esito.no{color:#FFB4B4}
.numero{font-size:2rem;font-weight:700;text-align:center;letter-spacing:.05em;margin:.4rem 0}
.qr{display:flex;justify-content:center;margin:.6rem 0}
.qr img,.qr svg{width:11rem;height:11rem;background:#fff;padding:.5rem;border-radius:.5rem}
.storia{list-style:none;margin:0;padding:0}
.storia li{display:flex;gap:.8rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--bordo)}
.storia img{width:2.8rem;height:2.8rem;border-radius:.4rem;object-fit:cover}
.storia .h{color:var(--tenue);font-variant-numeric:tabular-nums;width:3rem}

/* ---------------------------------------------------------------- PC: la pagina riempie lo schermo senza scorrere
   (anche con la finestra non a tutto schermo: la colonna del programma scorre SEMPRE dentro il suo riquadro;
   solo sotto i 450 pixel di altezza, finestra minuscola, scorre la pagina intera) */
@media (min-width:1101px) and (min-height:450px){
  .pagina{height:100vh}
  .corpo{overflow:hidden}
  .sx{overflow-y:auto;scrollbar-width:thin}
  /* il player cresce fino a circa il doppio quando c'è spazio, e si stringe quando si apre spettro/equalizzatore */
  .player{flex:1 1 0;min-height:15rem;max-height:34rem;container-type:size}
  .player .pin{height:100%;justify-content:space-between;padding:0}
  .player .riga-alta,.player .ctrl{padding:clamp(.45rem,2.4cqh,.9rem) clamp(1rem,4cqw,1.8rem)}
  .player .brano{flex-grow:1;gap:clamp(1rem,4cqw,2rem);padding:clamp(.7rem,3.5cqh,1.5rem) clamp(1rem,4cqw,1.8rem)}
  .player .cop{width:clamp(5rem,min(46cqh,34cqw),20rem);height:clamp(5rem,min(46cqh,34cqw),20rem);border-radius:1rem}
  .player .tit{font-size:clamp(1.25rem,min(6cqh,4.4cqw),2.4rem)}
  .player .art{font-size:clamp(1rem,min(4.4cqh,3.2cqw),1.7rem)}
  .player .tempo{font-size:clamp(.82rem,min(3cqh,2.2cqw),1.1rem)}
  .player .play{width:clamp(3.6rem,18cqh,6.2rem);height:clamp(3.6rem,18cqh,6.2rem)}
  /* il logo prende tutto lo spazio che avanza sopra pulsanti e sponsor */
  .logo-box{flex:0 1 auto;min-height:6rem}   /* grande quanto la colonna, si rimpicciolisce se manca spazio in altezza */
}

/* PC con schermo basso (es. 1366 x 768): tutto un po' più compatto, così spettro ed equalizzatore stanno nella colonna */
@media (min-width:1101px) and (max-height:860px){
  .testata{padding-top:.9rem}
  .player{min-height:13rem}
  .sx{gap:.55rem}
  .extra{--spazio:.55rem}
  .extra-in{gap:.55rem}
  .avviso,.apri{min-height:2.5rem;padding:.4rem .8rem;font-size:.9rem}
  .box{padding:.5rem .8rem}
  .etic{margin-bottom:.3rem}
  .spettro{height:3.4rem}
  .banda input{height:4rem}
  .chips{gap:.25rem;padding:.4rem}
  .chip{padding:.4rem .3rem;font-size:.72rem}
}

/* PC con la finestra bassa (non a tutto schermo, barre del browser): testata e piede più stretti */
@media (min-width:1101px) and (max-height:640px){
  .testata{padding-top:.5rem;padding-bottom:.2rem}
  .nome{font-size:1.6rem}
  .frase{font-size:.85rem}
  .pillola{height:2.2rem}
  .corpo{padding-top:.5rem;padding-bottom:.5rem}
  .player{min-height:10.5rem}
  .piede{padding:.45rem 2.8% .55rem;gap:.25rem}
  .ptit{padding:.6rem 1.1rem .55rem}
  .ptit h2{font-size:1.15rem}
  .logo-box{min-height:4rem}
}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  html{font-size:15px}
  .corpo,.corpo.senza-prog{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem}
  .prog{grid-column:1/-1;order:3;height:70vh}
  .dx{order:2}
}

/* ---------------------------------------------------------------- telefono: una colonna */
@media (max-width:700px){
  html{font-size:15px}
  .testata{flex-wrap:wrap;padding:3rem 1rem .4rem;gap:.8rem}
  .nome{font-size:1.6rem}
  .pillola{margin-left:0}
  .info{top:.7rem;right:.8rem}
  .corpo,.corpo.senza-prog{display:flex;flex-direction:column;padding:1rem;gap:1rem}
  .sx,.dx{display:contents}
  .logo-box{order:-1;max-width:18rem;margin:0 auto}
  .extra{--spazio:1rem}
  .extra-in{grid-template-columns:minmax(0,1fr)}
  .player{order:1}.extra{order:2}.avviso{order:3}.apri{order:4}
  .prog{order:5;height:34rem}
  .pulsanti{order:6}.sponsor{order:7;margin-top:0}
  .cop{width:5.5rem;height:5.5rem}
  .tit{font-size:1.15rem}
  .play{width:4rem;height:4rem}
  .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}   /* due righe da tre: i nomi si leggono interi */
  .chip{font-size:.8rem;padding:.5rem .2rem}
  .banda input{height:6rem}
  .btn{font-size:.88rem;padding:.75rem}
}
/* =====================================================================
   1.1.0 - PODCAST (compare solo se c'è almeno un episodio)
   ===================================================================== */
/* pulsanti RADIO / PODCAST nella barra in alto, a destra della pillola «In onda» */
.schede{display:flex;gap:.5rem;margin-left:.8rem}
.scheda{height:2.6rem;border-radius:2rem;padding:0 1.3rem;font-family:inherit;font-weight:700;font-size:.85rem;letter-spacing:.12em;cursor:pointer;background:transparent}
.sRadio{border:2px solid #5CFF2E;color:#5CFF2E}
.sPod{border:2px solid var(--celeste);color:var(--celeste)}
.sRadio.on{background:#5CFF2E;color:#0A1030;box-shadow:0 0 14px rgba(92,255,46,.4)}
.sPod.on{background:var(--celeste);color:#06202E;box-shadow:0 0 14px rgba(94,200,242,.45)}
/* 1.2.1: a fine episodio, per 1 minuto: dentro il contorno di PODCAST la scritta sale e sotto corre un pallino su una lineetta */
.sPod{position:relative;box-sizing:border-box}
.sPod.segnala{padding-bottom:.55rem}
.sPod.segnala::after{content:"";position:absolute;left:22%;right:22%;bottom:.42rem;height:4px;border-radius:4px;background:rgba(94,200,242,.35);pointer-events:none}
.sPod.segnala::before{content:"";position:absolute;z-index:1;bottom:calc(.42rem - 2px);left:22%;width:.5rem;height:.5rem;border-radius:50%;
  background:#7FD3FF;box-shadow:0 0 8px #5EC8F2,0 0 3px #fff;pointer-events:none;animation:vaivieni 1.6s ease-in-out infinite alternate}
@keyframes vaivieni{from{left:22%}to{left:calc(78% - .5rem)}}
/* 1.2.2: «NUOVO» sul pulsante PODCAST (episodi arrivati dall'ultima volta) e «nuovo» nell'elenco */
.sPod .nuovo{position:absolute;top:-.55rem;right:.6rem;padding:.05rem .45rem;border-radius:.6rem;background:#FF2BD6;color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;line-height:1rem;box-shadow:0 0 8px rgba(255,43,214,.6);pointer-events:none}
.sPod .nuovo[hidden]{display:none}
.enuovo{color:#fff;background:#FF2BD6;border-radius:.4rem;padding:0 .35rem;font-weight:800;font-size:.85em;letter-spacing:.03em}
/* 1.2.2: su PC i pulsanti RADIO / PODCAST vanno a destra, subito a sinistra di «Info device mobile» (sul telefono come prima) */
@media (min-width:1101px){
  .schede{margin-left:auto;margin-right:calc(11rem - 1.3%)}
}
/* il player del podcast: come quello della radio ma CELESTE invece del rosso */
.celeste{position:relative;overflow:hidden;border-radius:1.15rem;background:radial-gradient(120% 90% at 20% 10%,#2C9AD0 0%,#136A98 40%,#0A3E5E 75%,#072C44 100%);
  box-shadow:0 .6rem 1.9rem rgba(0,0,0,.45)}
.celeste:before{content:"";position:absolute;inset:0;background:rgba(0,18,32,.22);pointer-events:none}
.celeste>*{position:relative}
.celeste .riga-alta,.celeste .ctrl{background:rgba(0,20,36,.45)}
.celeste .art{color:#D8F1FF}
.celeste .tempo{color:#BDE6FF}
.onpod{color:#BDEBFF;border-color:#5EC8F2;background:rgba(0,16,30,.55);text-shadow:0 0 6px #5EC8F2,0 0 14px rgba(94,200,242,.7);box-shadow:0 0 10px rgba(94,200,242,.45),inset 0 0 8px rgba(94,200,242,.25)}
body.ascolto-pod .onpod{visibility:visible;opacity:1;animation:insegnaC 2.4s ease-in-out infinite}
@keyframes insegnaC{50%{text-shadow:0 0 4px #5EC8F2,0 0 8px rgba(94,200,242,.5)}}
.pod-info{font-size:.8rem;color:#D8F1FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.celeste .play svg{fill:var(--celeste);filter:drop-shadow(0 0 6px rgba(94,200,242,.85))}
.celeste .play{box-shadow:inset 0 -10px 18px rgba(0,0,0,.8),inset 0 6px 12px rgba(255,255,255,.12),inset 0 0 16px rgba(94,200,242,.3),0 6px 18px rgba(0,0,0,.5)}
.celeste .play.invita{animation:invitaC 1.6s ease-in-out infinite}
@keyframes invitaC{50%{box-shadow:inset 0 -10px 18px rgba(0,0,0,.8),inset 0 6px 12px rgba(255,255,255,.12),inset 0 0 16px rgba(94,200,242,.3),0 0 0 .5rem rgba(94,200,242,.25),0 0 1.5rem rgba(94,200,242,.6)}}
.celeste .anello:before{background:conic-gradient(from 0deg,rgba(94,200,242,0) 0deg,rgba(94,200,242,0) 150deg,rgba(94,200,242,.25) 250deg,#5EC8F2 345deg,#DDF5FF 359deg,rgba(94,200,242,0) 360deg);
  filter:drop-shadow(0 0 4px rgba(94,200,242,.8))}
.celeste .anello:after{background:radial-gradient(circle,#FFFFFF 0%,#DDF5FF 35%,#5EC8F2 70%);box-shadow:0 0 6px #5EC8F2,0 0 14px #5EC8F2,0 0 22px rgba(94,200,242,.6)}
.celeste .vol{accent-color:#5EC8F2}
.ctrl-pod{gap:.7rem}
.ctrl-pod2{gap:.7rem;border-top:1px solid rgba(255,255,255,.12)}
.salto{width:2.7rem;height:2.7rem;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(189,235,255,.6);background:rgba(0,0,0,.25);color:#DDF5FF;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font-family:inherit}
.salto svg{width:1.1rem;height:1.1rem}
.salto span{font-size:.55rem;font-weight:700;margin-top:-.15rem}
.salto:hover{background:rgba(0,0,0,.45)}
.barra-pod{flex-grow:1;min-width:3rem;accent-color:#5EC8F2;height:1.2rem;cursor:pointer}
.ore-pod{font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:#DDF5FF}
.vel-pod{display:flex;gap:.3rem;margin-left:auto}
.vel-pod button{font-family:inherit;font-size:.72rem;font-weight:600;color:#DDF5FF;background:rgba(0,0,0,.25);border:1px solid rgba(189,235,255,.4);border-radius:1rem;padding:.25rem .6rem;cursor:pointer}
.vel-pod button.on{background:#5EC8F2;color:#06202E;border-color:#5EC8F2}
/* in modalità podcast anche spettro ed equalizzatore diventano celesti */
.podcast .box.rosso{background:radial-gradient(120% 90% at 20% 10%,#2C9AD0 0%,#136A98 40%,#0A3E5E 75%,#072C44 100%)}
.podcast .box.rosso:before{background:rgba(0,18,32,.22)}
.podcast .etic{color:#D8F1FF}
.podcast .banda{color:#D8F1FF}
.podcast .banda input{accent-color:#5EC8F2}
/* elenco degli episodi: righe come quelle della programmazione, con «▶ Carica» a destra */
.riga.ep{align-items:center;padding:.5rem .8rem .5rem .6rem}
.riga.ep.caricato{background:rgba(94,200,242,.09);border:2px solid rgba(94,200,242,.55)}
.ecop{width:4.2rem;height:4.2rem;border-radius:.6rem;object-fit:cover;flex-shrink:0;background:#121D45}
.riga.ep .linea{align-self:stretch;background:var(--celeste)}
.efatto{color:#4FD47F;font-weight:600}
.carica{flex-shrink:0;height:2.5rem;border-radius:1.25rem;border:2px solid var(--celeste);background:rgba(94,200,242,.12);color:#DDF5FF;
  font-family:inherit;font-weight:700;font-size:.88rem;padding:0 1rem;cursor:pointer;white-space:nowrap}
.carica:hover{background:rgba(94,200,242,.25)}
/* avviso del TG in diretta (in alto, piccolo) */
.avviso-tg{position:fixed;z-index:40;left:50%;top:.8rem;transform:translateX(-50%);display:flex;align-items:center;gap:.8rem;
  background:#101A48;border:2px solid #3DFF6E;border-radius:1rem;padding:.45rem .5rem .45rem 1rem;font-size:.9rem;box-shadow:0 .8rem 2rem rgba(0,0,0,.5);max-width:94vw}
.avviso-tg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.avviso-tg button{flex-shrink:0;border:0;border-radius:.7rem;background:#3DFF6E;color:#0A1030;font-family:inherit;font-weight:700;font-size:.85rem;padding:.5rem .8rem;cursor:pointer}
.ripr{text-align:center}
.ripr img{width:7rem;height:7rem;border-radius:.8rem;object-fit:cover}
.ripr .azioni{justify-content:center}
@media (min-width:1101px) and (min-height:450px){
  .player.celeste{flex:1 1 0;min-height:15rem;max-height:34rem;container-type:size}
}
@media (max-width:700px){
  .schede{margin-left:0}
  .piede{gap:.5rem;padding:.4rem .6rem}
  .social a{width:1.45rem;height:1.45rem}
  .sito{font-size:.7rem}.copy{font-size:.62rem}
  .ctrl-pod{flex-wrap:wrap}
  .barra-pod{order:5;flex-basis:100%}
  .ore-pod{margin-left:auto}
  .player.celeste{order:1}.episodi{order:5;height:34rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 1.1.0: in modalità podcast anche i preset dell'equalizzatore sono celesti */
.podcast .chips{border-color:#1E4258}
.podcast .chip{background:#08141C;color:#9ED8F5;border-color:#21485E}
.podcast .chip:hover{background:#0E2230;color:#DDF5FF}
.podcast .chip.on{background:linear-gradient(#1E86BC,#135E86);color:#fff;border-color:#5EC8F2;box-shadow:0 0 10px rgba(94,200,242,.45),inset 0 0 6px rgba(94,200,242,.35)}

/* 1.2.0: ordinamento degli episodi (pillole) e «Salta la sigla» */
.ordina{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.ordina button{font-family:inherit;font-size:.72rem;font-weight:600;color:#BFE8FA;background:rgba(94,200,242,.08);border:1px solid rgba(94,200,242,.35);
  border-radius:1rem;padding:.28rem .7rem;cursor:pointer;white-space:nowrap}
.ordina button:hover{background:rgba(94,200,242,.16)}
.ordina button.on{color:#06202E;background:#5EC8F2;border-color:#5EC8F2}
.gruppo{flex-shrink:0;display:flex;align-items:baseline;gap:.5rem;padding:.35rem .3rem .1rem;color:#7FD3FF;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.gruppo small{color:#6F87B3;font-weight:600;text-transform:none;letter-spacing:0}
.avviso-tg.salta{top:auto;bottom:1.2rem;border-color:#5EC8F2}
.avviso-tg.salta button{background:#5EC8F2;color:#06202E}