/* ============================================================
   LA GUIDA PASSO PASSO, PER TUTTI (7/10/26). Nata dentro la pubblicità (ADV, tappa 6, approvata) e portata nel nucleo
   con la 0.7.0 di ADV: anche la Rivista ha la sua (gli spot nella puntata) e non deve aver bisogno della pubblicità.
   Il motore è assets/js/guida.js (addiGuida.apri); ogni schermata gli dà le sue tappe e i suoi passi.
   La scheda in basso a destra (sul telefono in fondo, a tutta larghezza; in cima se il pezzo sta in fondo alla pagina),
   il «buco» che illumina il pezzo di cui parla e il velo che prende i clic: sotto la guida non si tocca niente.
   ============================================================ */
.guida-bt{ display:inline-flex !important; align-items:center; gap:8px; width:auto !important; margin:0 !important; white-space:nowrap }
.guida-bt[hidden]{ display:none !important }
/* L'ICONA DELLA GUIDA (7/10/26, Marco: «un'icona distintiva»): una bussola, viola, la stessa sui pulsanti «Guida passo passo»
   e sulla scheda della guida. Il pulsante resta come tutti quelli del pannello (bianco, scritta nera): si riconosce dalla
   bussola. Disegnata con mask e non con <svg>: il pannello nasconde gli svg dentro i .btn. */
.guida-bt::before, .guida-ico{ content:''; display:inline-block; flex:none; width:18px; height:18px; background:#7a00df;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.2%27/%3E%3Cpath d=%27M15.6 8.4l-2 5.2-5.2 2 2-5.2z%27 fill=%27black%27/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.9%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.2%27/%3E%3Cpath d=%27M15.6 8.4l-2 5.2-5.2 2 2-5.2z%27 fill=%27black%27/%3E%3C/svg%3E") center / contain no-repeat }
.guida-ico{ width:20px; height:20px }
/* (il pannello toglie lo spazio fra i pezzi dei pulsanti: la distanza la tiene l'icona) */
.guida-bt::before{ margin-right:7px }
.guida-buco{ position:fixed; z-index:2147483646; border-radius:12px; pointer-events:none; box-shadow:0 0 0 3px #7a00df, 0 0 0 9999px rgba(15,17,21,.5);
  transition:top .3s, left .3s, width .3s, height .3s }
.guida-buco[hidden]{ display:none }
/* il velo che prende i clic: sotto la guida non si tocca niente. ⚠️ (12/10/26) Velo, luce e scheda SOPRA QUALSIASI z-index:
   sul sito di Cultura il pulsante dell'accessibilità e altri pezzi arrivano a 100010. */
.guida-blocco{ position:fixed; inset:0; z-index:2147483645; background:transparent; cursor:default; transition:background .3s }
.guida{ position:fixed; z-index:2147483647; right:24px; bottom:24px; width:min(400px, calc(100% - 48px)); display:grid; gap:12px; padding:18px 20px 16px;
  border-radius:14px; background:#fff; color:#000; box-shadow:0 20px 60px rgba(0,0,0,.35); font-size:14px; line-height:1.5 }
.guida-testa{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.guida-tappa{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a00df }
.guida-x{ width:40px; height:40px; display:grid; place-items:center; flex:none; border:1px solid #D5D8DD; border-radius:8px; background:#fff; color:#000; font-size:20px; line-height:1; cursor:pointer }
.guida-tappe{ display:grid; gap:6px }
.guida-tappe span{ display:grid; gap:4px; min-width:0 }
.guida-tappe i{ display:block; height:5px; border-radius:3px; background:linear-gradient(90deg, #7a00df calc(var(--q) * 100%), #E4E6EA calc(var(--q) * 100%)) }
.guida-tappe b{ font-size:11px; font-weight:600; line-height:1.25; overflow-wrap:anywhere }
.guida-tappe .ora b{ font-weight:800 }
.guida h3{ margin:0; font-size:18px; font-weight:700; line-height:1.3; color:#000 }
.guida p{ margin:0; font-size:14px; line-height:1.55; color:#000 }
.guida-manca{ padding-left:10px; border-left:3px solid #7a00df; font-weight:600 }
.guida-fine{ margin:0; padding-left:22px; display:grid; gap:4px; font-weight:600 }
.guida-fine li::marker{ color:#7a00df; font-weight:800 }
.guida-az{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.guida-az .btn{ width:auto; margin:0; min-height:40px }
.guida-n{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums }
.guida-fine-az{ display:flex; gap:8px }
@media (max-width:768px){
  .guida{ left:10px; right:10px; bottom:10px; width:auto; padding:14px 14px 12px; gap:10px }
  .guida h3{ font-size:16px }
  .guida p{ font-size:13.5px }
  .guida-tappe b{ display:none }
}
@media (prefers-reduced-motion:reduce){ .guida-buco{ transition:none } }
/* la scheda della guida in cima, quando il pezzo da illuminare sta in fondo alla pagina (il «top» lo scrive la guida: sotto
   le barre ferme). Due classi: vince anche sul «bottom» del telefono */
.guida.guida-alto{ bottom:auto }

/* (12/10/26, dalla guida del primo accesso di Cultura) SOTTO LA GUIDA NON SI SCORRE: la classe la mette il motore finché la
   guida è aperta (Marco: «tutto deve essere bloccato e si deve riattivare solo alla fine o alla chiusura»); la pagina la
   porta la guida (scrollTo funziona anche così). La barra di scorrimento sparisce. */
html.guida-ferma, html.guida-ferma body{ overflow:hidden !important; overscroll-behavior:none }
/* un passo senza pezzo da illuminare: il velo copre tutta la pagina */
body:has(.guida-buco[hidden]) .guida-blocco{ background:rgba(15,17,21,.5) }
/* DOVE SEI (passo.dove, Marco: «dove serve, indica le sezioni»): una riga sopra il titolo, l'ultima voce in evidenza;
   una riga sola, coi puntini se non ci sta (la frase intera nel title) */
.guida-dove{ display:flex; align-items:center; gap:6px; min-width:0; margin:0; font-size:13px; font-weight:600; white-space:nowrap }
.guida-dove::before{ content:''; flex:none; width:14px; height:14px; background:#7a00df;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z%27/%3E%3Ccircle cx=%2712%27 cy=%279.5%27 r=%272.5%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z%27/%3E%3Ccircle cx=%2712%27 cy=%279.5%27 r=%272.5%27/%3E%3C/svg%3E") center / contain no-repeat }
.guida-dove span{ overflow:hidden; text-overflow:ellipsis }
.guida-dove b{ font-weight:700; color:#7a00df }