/* HYSAD — Hub Guide (guide.html), versione "indice" del 06/10/2026.
   Caricato solo da questa pagina, dopo hysad-content.css. Impostazione da
   pubblicazione stampata: sommario con puntini di guida, percorsi di lettura
   in colonne, indice numerato per tema. Niente vetro, bagliori o animazioni
   infinite: le uniche transizioni sono al passaggio del mouse.
   Prefisso gh*: hysad-desktop-80.css forza con !important section, h1, h2 e
   classi generiche (.card .grid .stat .cta .label .btn .col), quindi qui i
   gruppi sono <div> e i titoli h2 hanno classi proprie con !important.
   Senza JS la pagina è completa: la barra di ricerca tiene già il suo spazio
   (visibility) e compare quando lo script la attiva (body.ghJs). */

.ghHero,.ghSos,.ghPaths,.ghIndex,.ghSimSec,.ghFieldSec,.ghEndSec{
  --gl:rgba(184,255,236,.15);--gl2:rgba(184,255,236,.085);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
.ghNo,.ghGroupNo,.ghGroupN,.ghPathTag,.ghKicker,.ghToc b,.ghCount,.ghFilters sup,.ghKbd,.ghBars b,.ghSimBig b{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Titoli di sezione comuni */
.ghHead{margin:0 0 30px}
.ghHead p{max-width:620px;margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.6}
h2.ghH2{margin:0!important;color:#f4fbf9;font-size:clamp(26px,2.6vw,36px)!important;line-height:1.1!important;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.ghHeadRow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.ghHeadRow p{margin:0}
.ghKicker{display:block;margin:0 0 12px;color:var(--k,var(--c1));font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ghTextLink{color:#eef7f5;font-size:15px;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c1),transparent 45%);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s,color .2s}
.ghTextLink:hover{color:var(--c1);text-decoration-color:var(--c1)}
.ghTextLink:focus-visible{outline:2px solid var(--c1);outline-offset:4px;border-radius:4px}

/* ---------- Hero ---------- */
section.hcSec.hcHero.ghHero{padding:calc(var(--header) + 48px) 0 clamp(30px,3.6vw,48px)!important}
.ghHero .hcCrumbs{margin-bottom:30px}
.ghHeroGrid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(32px,5vw,72px);align-items:end}
.ghHero h1.hcTitle{max-width:640px}
/* Il colore d'accento pieno, senza sfumatura né riflesso animato */
.ghHero h1 .hcGrad{background:none;-webkit-text-fill-color:currentColor;color:var(--c1)}
.ghHero .hcLead{max-width:560px;margin-top:24px}

.ghToc{padding-top:14px;border-top:2px solid #eef7f5}
.ghToc h2.ghTocT{margin:0 0 6px!important;color:#eef7f5;font-size:13px!important;line-height:1.3!important;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.ghToc ol{margin:0;padding:0;list-style:none}
.ghToc a{display:flex;align-items:baseline;gap:10px;padding:9px 0;color:#dcece8;font-size:15px;font-weight:600;line-height:1.3;transition:color .18s}
.ghToc i{flex:1;min-width:16px;border-bottom:1px dotted rgba(168,194,189,.45);transform:translateY(-4px);transition:border-color .18s}
.ghToc b{color:var(--muted);font-size:13.5px;font-weight:500}
.ghToc a:hover{color:var(--c1)}
.ghToc a:hover i{border-bottom-style:solid;border-color:color-mix(in srgb,var(--c1),transparent 40%)}
.ghToc a:hover b{color:var(--c1)}
.ghToc a:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}
.ghToc .ghTocAlt:first-of-type{margin-top:8px;padding-top:8px;border-top:1px solid var(--gl)}
.ghToc .ghTocAlt a{color:var(--muted);font-weight:500}

/* ---------- Emergenza ---------- */
section.hcSec.ghSos{padding:0 0 clamp(30px,3.6vw,46px)!important}
.ghSosBox{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:14px 0 14px 18px;border-left:3px solid #ff9b9b;background:linear-gradient(90deg,rgba(255,155,155,.09),rgba(255,155,155,0) 75%)}
.ghSosBox p{flex:1 1 380px;margin:0;color:#ffe3dc;font-size:15px;line-height:1.5}
.ghSosBox p b{color:#fff}
.ghSosAct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.ghSosTel{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:#ff9b9b;color:#1a0806;font-family:var(--mono);font-size:14.5px;font-weight:700;white-space:nowrap;transition:background .2s}
.ghSosTel:hover{background:#ffd0a0}
.ghSosLink{color:#ffd0a0;font-size:14.5px;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(255,208,160,.45)}
.ghSosLink:hover{text-decoration-color:#ffd0a0}
.ghSosTel:focus-visible,.ghSosLink:focus-visible{outline:2px solid #ffd0a0;outline-offset:3px;border-radius:6px}

/* ---------- Da dove parto? ---------- */
section.hcSec.ghPaths{padding:clamp(40px,4.6vw,64px) 0!important;border-top:1px solid var(--gl)}
.ghPathList{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ghPath{padding:4px 22px 6px;border-left:1px solid var(--gl)}
.ghPath:first-child{padding-left:0;border-left:0}
.ghPathTag{display:block;color:var(--k);font-size:12px;letter-spacing:.04em}
.ghPath h3{min-height:2.7em;margin:10px 0 16px;color:#f4fbf9;font-size:17px;line-height:1.35;font-weight:700;text-wrap:balance}
.ghPath ol{margin:0;padding:0;list-style:none;counter-reset:ghp}
.ghPath li{counter-increment:ghp}
.ghPath ol a{position:relative;display:block;padding:11px 0 11px 30px;border-top:1px solid var(--gl2);transition:color .18s}
.ghPath ol a::before{content:counter(ghp);position:absolute;left:0;top:12px;display:grid;place-items:center;width:20px;height:20px;border:1px solid color-mix(in srgb,var(--k),transparent 50%);border-radius:50%;color:var(--k);font-family:var(--mono);font-size:11px;line-height:1;transition:background .18s,color .18s}
.ghPath ol a b{display:block;color:#eef7f5;font-size:15px;font-weight:700;line-height:1.3;transition:color .18s}
.ghPath ol a>span{display:block;margin-top:3px;color:var(--muted);font-size:13.5px;line-height:1.45}
.ghPath ol a:hover b{color:var(--k)}
.ghPath ol a:hover::before{background:var(--k);color:#061110}
.ghPath ol a:focus-visible{outline:2px solid var(--k);outline-offset:2px;border-radius:6px}

/* ---------- Indice ---------- */
section.hcSec.ghIndex{padding:clamp(44px,5vw,70px) 0 clamp(30px,3.5vw,44px)!important;border-top:1px solid var(--gl);scroll-margin-top:var(--header)}
.ghBar{position:sticky;top:var(--header);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:0 0 6px;padding:12px 0;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg),0 1px 0 100vmax var(--gl);clip-path:inset(0 -100vmax -1px);visibility:hidden}
body.ghJs .ghBar{visibility:visible}
.ghSearch{position:relative;flex:0 1 270px;min-width:220px}
.ghSearch svg{position:absolute;left:0;top:50%;width:18px;height:18px;transform:translateY(-50%);color:rgba(168,194,189,.85);pointer-events:none}
.ghSearch input{width:100%;height:42px;padding:0 64px 0 28px;border:0;border-bottom:1px solid rgba(184,255,236,.28);border-radius:0;background:transparent;color:#eef7f5;font:inherit;font-size:16px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.ghSearch input::placeholder{color:rgba(168,194,189,.6)}
.ghSearch input::-webkit-search-cancel-button{display:none}
.ghSearch input:focus{border-bottom-color:var(--c1)}
.ghSearch:focus-within svg{color:var(--c1)}
.ghKbd{position:absolute;right:0;top:50%;transform:translateY(-50%);min-width:22px;padding:1px 6px;border:1px solid rgba(184,255,236,.25);border-radius:5px;color:var(--muted);font-size:12px;line-height:18px;text-align:center;pointer-events:none}
.ghSearch:focus-within .ghKbd,.ghClear:not([hidden])~.ghKbd{display:none}
.ghClear{position:absolute;right:-6px;top:50%;width:34px;height:34px;transform:translateY(-50%);border:0;border-radius:50%;background:transparent;color:#eef7f5;cursor:pointer}
.ghClear::before,.ghClear::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.ghClear::after{transform:rotate(-45deg)}
.ghClear:hover{background:rgba(255,255,255,.08)}
.ghClear:focus-visible{outline:2px solid var(--c1);outline-offset:1px}
.ghFilters{display:flex;flex-wrap:wrap;gap:4px 18px;flex:1 1 auto}
.ghF{position:relative;min-height:42px;padding:0;border:0;background:none;color:rgba(218,239,234,.68);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .18s}
.ghF sup{margin-left:2px;color:rgba(168,194,189,.7);font-size:10.5px;font-weight:500;vertical-align:5px}
.ghF::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--c1);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ghF:hover{color:#fff}
.ghF[aria-pressed="true"]{color:#fff}
.ghF[aria-pressed="true"]::after{transform:none}
.ghF:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}
.ghCount{margin:0 0 0 auto;color:var(--muted);font-size:13px;white-space:nowrap}

.ghGroup{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:0 clamp(28px,4vw,56px);padding:34px 0 10px;border-top:1px solid var(--gl)}
.ghBar+.ghList>.ghGroup:first-child{border-top:0}
.ghGroup[hidden]{display:none}
.ghGroupHead{position:sticky;top:calc(var(--header) + 92px);align-self:start;padding-bottom:20px}
.ghGroupNo{display:block;color:var(--muted);font-size:12px}
.ghGroupHead h2.ghGroupT{margin:6px 0 10px!important;color:#f4fbf9;font-size:clamp(21px,1.9vw,25px)!important;line-height:1.15!important;letter-spacing:-.025em;font-weight:800}
.ghGroupHead p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.55}
.ghGroupN{color:rgba(168,194,189,.75);font-size:12px}
.ghRows{margin:0;padding:0;list-style:none}
.ghRow[hidden]{display:none}
.ghRow a{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:0 14px;padding:19px 4px 21px 0;border-bottom:1px solid var(--gl2);isolation:isolate}
.ghRow:first-child a{padding-top:4px}
.ghRow a::before{content:"";position:absolute;inset:0 -16px 0 -16px;z-index:-1;border-radius:14px;background:color-mix(in srgb,var(--k),transparent 93%);opacity:0;transition:opacity .22s}
.ghRow:first-child a::before{top:-12px}
.ghNo{padding-top:3px;color:var(--k);font-size:13px;line-height:1.4}
.ghRowTx{display:block;min-width:0}
.ghRow h3{margin:0 0 6px;color:#f4fbf9;font-size:clamp(17px,1.45vw,19.5px);line-height:1.3;letter-spacing:-.012em;font-weight:700;text-wrap:balance;transition:color .2s}
.ghRowTx>span{display:block;max-width:600px;color:var(--muted);font-size:14.5px;line-height:1.55}
.ghRow mark,.ghRowTx mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,var(--k),transparent 62%);color:#fff}
.ghArr{position:relative;align-self:center;width:28px;height:28px;border:1px solid var(--gl);border-radius:50%;opacity:.0;transform:translateX(-6px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),border-color .22s}
.ghArr::before{content:"";position:absolute;left:8px;top:13px;width:11px;height:1.5px;background:var(--k)}
.ghArr::after{content:"";position:absolute;left:13px;top:10px;width:6px;height:6px;border-top:1.5px solid var(--k);border-right:1.5px solid var(--k);transform:rotate(45deg)}
.ghRow a:hover::before{opacity:1}
.ghRow a:hover h3{color:var(--k)}
.ghRow a:hover .ghArr{opacity:1;transform:none;border-color:color-mix(in srgb,var(--k),transparent 50%)}
.ghRow a:focus-visible{outline:2px solid var(--k);outline-offset:4px;border-radius:10px}
.ghEmpty{margin:24px 0 0;padding:22px 0;border-top:1px solid var(--gl);color:var(--muted);font-size:15.5px;line-height:1.6}
.ghEmpty a{color:var(--c1);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- Simulatore ---------- */
section.hcSec.ghSimSec{padding:clamp(40px,4.6vw,64px) 0!important;content-visibility:auto;contain-intrinsic-size:auto 560px}
.ghSim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center;padding:clamp(28px,4vw,48px);border:1px solid rgba(200,231,255,.2);border-radius:24px;background-color:rgba(255,255,255,.015);background-image:linear-gradient(rgba(200,231,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(200,231,255,.045) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.ghSimCopy{--k:#c8e7ff}
.ghSim h2.ghH2{font-size:clamp(26px,2.8vw,38px)!important}
.ghSimCopy p{margin:16px 0 26px;color:var(--muted);font-size:16px;line-height:1.65}
.ghSimBtn{background:#c8e7ff!important;border-color:#c8e7ff!important}
.ghSimFig{margin:0;padding:22px 24px;border:1px solid rgba(184,255,236,.12);border-radius:16px;background:var(--bg)}
.ghSimFig figcaption{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.5}
.ghSimBig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--gl2)}
.ghSimBig b{color:#fff;font-size:clamp(36px,4vw,50px);font-weight:600;line-height:1;letter-spacing:-.04em}
.ghSimBig span{color:#dcece8;font-size:15px}
.ghBars{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.ghBars li{display:grid;grid-template-columns:96px minmax(0,1fr) 84px;align-items:center;gap:12px;color:#dcece8;font-size:14px}
.ghTrack{position:relative;height:8px}
.ghTrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gl)}
.ghTrack i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);border-radius:2px;background:#c8e7ff;transform-origin:left}
.ghBars b{color:#fff;font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap}
.ghSimNote{margin:16px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
/* Le barre crescono mentre la figura entra nello schermo, solo dove il
   browser lo fa da sé (scroll-driven animations): niente JS, niente costi. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .ghTrack i{animation:ghGrow linear both;animation-timeline:view();animation-range:entry 25% entry 100%}
    @keyframes ghGrow{from{transform:scaleX(0)}}
  }
}

/* ---------- Sul campo ---------- */
section.hcSec.ghFieldSec{padding:clamp(30px,3.6vw,48px) 0!important;content-visibility:auto;contain-intrinsic-size:auto 420px}
.ghField{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.ghFieldCopy{--k:#d8ffad}
.ghFieldCopy p{margin:14px 0 22px;color:var(--muted);font-size:16px;line-height:1.65}
.ghStories{margin:0;padding:0;list-style:none;border-top:1px solid var(--gl)}
.ghStories a{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:0 14px;padding:18px 4px 18px 0;border-bottom:1px solid var(--gl2);isolation:isolate}
.ghStories a::before{content:"";position:absolute;inset:0 -16px;z-index:-1;border-radius:14px;background:color-mix(in srgb,var(--k),transparent 93%);opacity:0;transition:opacity .22s}
.ghStories .ghNo{padding:0}
.ghStoryT{color:#eef7f5;font-size:16px;font-weight:700;line-height:1.35;transition:color .2s}
.ghStories a:hover::before{opacity:1}
.ghStories a:hover .ghStoryT{color:var(--k)}
.ghStories a:hover .ghArr{opacity:1;transform:none;border-color:color-mix(in srgb,var(--k),transparent 50%)}
.ghStories a:focus-visible{outline:2px solid var(--k);outline-offset:4px;border-radius:10px}

/* ---------- Chiusura ---------- */
section.hcSec.ghEndSec{padding:clamp(30px,3.6vw,48px) 0 clamp(54px,6vw,84px)!important;content-visibility:auto;contain-intrinsic-size:auto 260px}
.ghEnd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px clamp(28px,4.5vw,64px);align-items:end;padding-top:36px;border-top:2px solid #eef7f5}
.ghEnd h2.ghH2{font-size:clamp(28px,3.2vw,44px)!important;line-height:1.05!important;letter-spacing:-.04em}
.ghEnd p{margin:0 0 22px;color:var(--muted);font-size:16px;line-height:1.62}
.ghEndAct{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.ghEndAct .ghTextLink{font-family:var(--mono);font-weight:500}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .ghHeroGrid{grid-template-columns:1fr;align-items:start}
  .ghToc{max-width:520px}
  .ghPathList{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .ghPath:nth-child(odd){padding-left:0;border-left:0}
  .ghGroup{grid-template-columns:1fr}
  .ghGroupHead{position:static;padding-bottom:16px}
  .ghGroupHead p{max-width:560px}
  .ghSim,.ghField,.ghEnd{grid-template-columns:1fr}
}
@media(max-width:720px){
  section.hcSec.hcHero.ghHero{padding-top:calc(var(--header) + 30px)!important}
  .ghSosBox{padding-right:0}
  .ghSosAct{width:100%}
  /* I percorsi scorrono di lato, uno per schermata, con il successivo che si intravede */
  .ghPathList{display:flex;gap:0;margin:0 -17px;padding:0 17px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 17px;scrollbar-width:none;overscroll-behavior-x:contain}
  .ghPathList::-webkit-scrollbar{display:none}
  .ghPath,.ghPath:first-child,.ghPath:nth-child(odd){flex:0 0 84%;padding:0 18px 0 0;border-left:0;scroll-snap-align:start}
  .ghPath+.ghPath{padding-left:18px;border-left:1px solid var(--gl)}
  .ghPath h3{min-height:0}
  /* La barra non resta agganciata: su un telefono ruberebbe metà schermo */
  .ghBar{position:static;box-shadow:none;clip-path:none;padding:4px 0 10px;border-bottom:1px solid var(--gl)}
  .ghSearch{flex:1 1 100%}
  .ghKbd{display:none}
  .ghFilters{flex-wrap:nowrap;gap:18px;margin:0 -17px;padding:0 17px;overflow-x:auto;scrollbar-width:none}
  .ghFilters::-webkit-scrollbar{display:none}
  .ghCount{margin:0}
  .ghRow a,.ghStories a{grid-template-columns:40px minmax(0,1fr);gap:0 10px}
  .ghArr{display:none}
  .ghRow a::before,.ghStories a::before{inset:0 -10px}
  .ghSim{padding:22px 18px;border-radius:20px}
  .ghSimFig{padding:18px 16px}
  .ghBars li{grid-template-columns:82px minmax(0,1fr) 74px;gap:10px;font-size:13.5px}
  .ghSimBtn{width:100%}
}

/* ---------- Movimento ridotto e stampa ---------- */
@media(prefers-reduced-motion:reduce){
  .ghRow a::before,.ghStories a::before,.ghArr,.ghF::after{transition:none}
}
@media print{
  .ghBar,.ghSos,.ghArr,.ghPaths{display:none!important}
  .ghGroup[hidden],.ghRow[hidden]{display:grid!important}
  .ghSimSec,.ghFieldSec,.ghEndSec{content-visibility:visible}
  .ghRow h3,.ghGroupHead h2.ghGroupT,.ghToc a{color:#111!important}
  .ghToc{border-color:#111}
}