/* Guide (audit SEO 03/11): pagine informative nello stile della landing. Si appoggia a landing.css (variabili, .hero, .sheet, .final)
   e alla palette di seo.css (D032). Movimento solo con prefers-reduced-motion: no-preference; senza script tutto resta visibile. */
.g-hero{padding-bottom:clamp(64px,8vw,128px)}
.g-kicker{grid-column:1/-1;font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:rgba(248,243,232,.78);margin:0 0 -12px}
.g-hero h1{max-width:18ch}
.g-numeri dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ivory2)}
.g-numeri dl div{background:var(--paper);padding:22px 28px}
.g-numeri dt{font-family:var(--title);font-weight:700;color:var(--green);font-size:clamp(44px,5vw,72px);line-height:1;font-variant-numeric:tabular-nums}
.g-numeri dt small{font-size:.4em;color:var(--ink2);margin-left:2px}
.g-numeri dd{margin:8px 0 0;color:var(--ink2);font-size:var(--t-small);line-height:1.4}

.g-sec{padding:clamp(72px,9vw,144px) var(--m);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(28px,3vw,44px);background:var(--bg)}
.g-sec>*{grid-column:1/-1}
.g-ivory{background:var(--ivory2)}
.g-green{background:var(--green);color:var(--bg)}
.g-green h2{color:var(--bg)}
.g-head{grid-column:1/9;display:grid;gap:18px}
.g-head h2{font-size:var(--t-h2);line-height:1.05}
.g-head p{font-size:20px;line-height:1.5;max-width:52ch;margin:0}
.g-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.g-two p{margin:0;font-size:18px;max-width:46ch}

/* quattro requisiti come cartellini numerati; l'idoneità professionale in evidenza */
.g-req{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:req}
.g-req li{counter-increment:req;background:var(--paper);padding:28px 24px 26px;display:grid;gap:10px;align-content:start;position:relative}
.g-req li::before{content:counter(req,decimal-leading-zero);font-family:var(--title);font-weight:700;color:var(--ink3);font-size:15px}
.g-req b{font-family:var(--title);font-size:22px;line-height:1.15;color:var(--green)}
.g-req span{color:var(--ink2);font-size:15px;line-height:1.45}
.g-req .g-on{background:var(--green);transform:rotate(-1.2deg)}
.g-req .g-on b{color:var(--bg)}.g-req .g-on span{color:rgba(248,243,232,.85)}.g-req .g-on::before{color:var(--amber)}

/* requisiti per l'iscrizione: spunte disegnate */
.g-check{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-column:1/10}
.g-check li{position:relative;background:var(--paper);border:1px solid var(--line);padding:20px 24px 20px 68px;font-size:18px;line-height:1.5}
.g-check li::before{content:"";position:absolute;left:22px;top:21px;width:28px;height:28px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F3E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/18px no-repeat}

/* città: ricerca e schede verso le pagine ufficiali */
.g-citta{display:grid;gap:24px}
.g-cerca{display:grid;gap:8px;max-width:420px}
.g-cerca span{font-size:var(--t-small);color:rgba(248,243,232,.8)}
.g-cerca input{font:500 18px/1.2 var(--text);padding:16px 20px;border-radius:999px;border:0;background:var(--bg);color:var(--ink);outline:none;box-shadow:0 0 0 0 var(--amber);transition:box-shadow .2s ease}
.g-cerca input:focus-visible{box-shadow:0 0 0 3px var(--amber)}
#g-citta-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px}
#g-citta-lista a{display:grid;gap:4px;padding:20px 48px 20px 22px;background:var(--paper);color:var(--ink);text-decoration:none;position:relative;height:100%;box-sizing:border-box;transition:transform .2s var(--ease-out),background-color .2s ease}
#g-citta-lista a::after{content:"↗";position:absolute;right:20px;top:18px;font-size:20px;color:var(--green);transition:transform .2s var(--ease-out)}
#g-citta-lista b{font-family:var(--title);font-size:22px;color:var(--green)}
#g-citta-lista span{font-size:14px;color:var(--ink2)}
@media (hover:hover) and (pointer:fine){#g-citta-lista a:hover{transform:translateY(-4px)}#g-citta-lista a:hover::after{transform:translate(3px,-3px)}}
#g-citta-lista a:active{transform:scale(.98)}
.g-vuoto{margin:0;font-size:18px;max-width:60ch}

/* le due prove come fogli d'esame, con la barra dei punti e la soglia */
.g-prove{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.g-prova{padding-bottom:26px}
.g-prova>p{padding:0 28px;margin:20px 0 0;font-size:17px}
.g-prova:nth-child(1){transform:rotate(-.6deg)}.g-prova:nth-child(2){transform:rotate(.6deg);margin-top:32px}
.g-barra{margin:22px 28px 0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:var(--t-small);color:var(--ink2)}
.g-barra i{grid-column:1/-1;grid-row:2;height:12px;border-radius:99px;background:var(--line2);position:relative;overflow:hidden}
.g-barra i::before{content:"";position:absolute;inset:0;background:var(--green);transform-origin:left;border-radius:inherit}
.g-barra i::after{content:"";position:absolute;top:-4px;bottom:-4px;left:calc(var(--p) * 100%);width:3px;background:var(--amber)}
.g-barra em{font-style:normal;font-weight:700;color:var(--warn)}
.g-nota{color:var(--ink2);font-size:15px!important}

/* calcolatore: scheda di valutazione con il timbro */
.g-calc-sec{background:var(--greenbg)}
.g-calc{grid-column:3/11;padding-bottom:28px;display:grid;gap:20px}
.g-calc>*:not(.sheet-head){margin:0 28px}.g-calc .btn.bar{width:auto}
.g-range{display:grid;gap:10px;font-weight:600}
.g-range output{font-family:var(--title);font-size:22px;color:var(--green);font-variant-numeric:tabular-nums}
.g-range input{width:100%;accent-color:var(--green);height:28px}
.g-tick{display:flex;gap:12px;align-items:center;font-size:16px;cursor:pointer}
.g-tick input{width:22px;height:22px;accent-color:var(--green);flex:none}
.g-esito{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:center;border-top:1px dashed var(--line);padding-top:22px}
.g-tot{font-family:var(--title);font-weight:700;font-size:64px;line-height:1;color:var(--green);grid-row:span 2;font-variant-numeric:tabular-nums}
.g-tot small{font-size:.35em;color:var(--ink2)}
.g-timbro{justify-self:start;margin:0;white-space:nowrap;font-family:var(--title);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:26px;padding:6px 16px;border:3px solid currentColor;border-radius:8px;transform:rotate(-5deg);color:var(--ko)}
.g-timbro.ok{color:var(--ok)}
.g-perche{margin:0;color:var(--ink2);font-size:15px}

/* materie: gruppi con il peso nella prova a quiz */
.g-materie{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:12px;align-items:stretch}
.g-gruppo{background:var(--paper);padding:22px;display:grid;gap:8px;align-content:start;border-top:calc(var(--q) * 1px) solid var(--green)}
.g-gq{margin:0 0 6px;color:var(--ink2);font-size:14px}
.g-gq b{font-family:var(--title);font-size:40px;color:var(--green);display:block;line-height:1}
.g-gruppo a{color:var(--ink);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--line)}
@media (hover:hover) and (pointer:fine){.g-gruppo a:hover{color:var(--green);text-decoration-color:var(--green)}}
.g-tutti{font-size:18px;margin:0}

.g-fonti{padding:28px var(--m) 8px;background:var(--bg)}
.g-fonti p{max-width:900px;margin:0 auto;font-size:13px;color:var(--ink2);line-height:1.6}
.g-fonti a{color:var(--ink2)}

@media (max-width:900px){
  .g-head,.g-check,.g-calc{grid-column:1/-1}
  .g-req{grid-template-columns:1fr 1fr}
  .g-two,.g-prove{grid-template-columns:1fr}
  .g-prova:nth-child(2){margin-top:0}
  .g-materie{grid-template-columns:1fr 1fr}.g-materie .g-gruppo:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .g-req{grid-template-columns:1fr}
  .g-numeri dl div{padding:18px 20px}
  .g-check li{padding:18px 18px 18px 60px;font-size:17px}.g-check li::before{left:18px;top:19px}
  .g-calc>*:not(.sheet-head){margin:0 20px}
  .g-tot{font-size:52px}.g-timbro{font-size:21px}
}

@media (prefers-reduced-motion:no-preference){
  html.js .g-req .g-on.r{transform:translateY(24px) rotate(4deg)}
  html.js .in .g-req .g-on.r{transform:rotate(-1.2deg);transition:opacity .6s var(--ease-out) .3s,transform .9s cubic-bezier(.3,1.4,.5,1) .3s}
  html.js .g-check li.r::before{transform:scale(0)}
  html.js .in .g-check li.r::before{transform:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0) * 70ms + .25s)}
  html.js .g-barra i::before{transform:scaleX(0)}
  html.js .in .g-barra i::before{transform:scaleX(1);transition:transform 1.2s var(--ease-io) .4s}
  html.js .g-prova.r{transform:translateY(40px) rotate(-2deg)}
  html.js .in .g-prova.r:nth-child(1){transform:rotate(-.6deg)}
  html.js .in .g-prova.r:nth-child(2){transform:rotate(.6deg)}
  .g-timbro.timbra{animation:timbra .35s cubic-bezier(.3,1.5,.5,1)}
  @keyframes timbra{from{transform:scale(1.35) rotate(-12deg);opacity:.2}}
  .g-tot.batti{animation:batti .3s var(--ease-out)}
  @keyframes batti{50%{transform:scale(1.06)}}
  #g-citta-lista li{animation:riga .35s var(--ease-out) both}
}

/* guida attestato: certificato disegnato, percorso a tappe, selettore "che cosa vuoi fare" */
.g-cert{grid-column:7/-1;background:var(--paper);color:var(--ink);padding:34px 34px 116px;position:relative;display:grid;gap:12px;border:10px solid var(--ivory2);outline:1px solid var(--line);outline-offset:-18px;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(.8deg);transition:transform .25s var(--ease-out)}
.g-cert small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.g-cert h2,.g-cert .g-cert-t{font-family:var(--title);font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.1;color:var(--green);margin:0}
.g-cert dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.g-cert dt{color:var(--ink2)}.g-cert dd{margin:0;font-weight:600}
.g-cert .g-sigillo{position:absolute;right:26px;bottom:22px;width:84px;height:84px;border-radius:50%;border:3px solid var(--amber);color:var(--amber);display:grid;place-items:center;text-align:center;font:700 11px/1.15 var(--title);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-14deg)}
.g-percorso{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;grid-column:1/10}
.g-percorso::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:3px;background:var(--line);transform-origin:top}
.g-percorso li{position:relative;padding:0 0 34px 84px;display:grid;gap:6px}
.g-percorso li:last-child{padding-bottom:0}
.g-percorso li::before{content:counter(passo);counter-increment:passo;position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;font:700 22px var(--title)}
.g-percorso{counter-reset:passo}
.g-percorso b{font-family:var(--title);font-size:24px;color:var(--green);line-height:1.2;padding-top:12px}
.g-percorso p{margin:0;font-size:17px;max-width:56ch;color:var(--ink)}
.g-scelta{display:grid;gap:20px}
.g-opzioni{display:flex;flex-wrap:wrap;gap:10px}
.g-opzioni button{font:600 16px/1.2 var(--text);padding:14px 20px;border-radius:999px;border:2px solid var(--bg);background:transparent;color:var(--bg);cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .14s var(--ease-out)}
.g-opzioni button:active{transform:scale(.97)}
.g-opzioni button[aria-pressed="true"]{background:var(--bg);color:var(--green)}
@media (hover:hover) and (pointer:fine){.g-opzioni button:hover{background:rgba(247,243,232,.12)}.g-opzioni button[aria-pressed="true"]:hover{background:var(--bg)}}
.g-risposte{display:grid}
.g-risposta{grid-area:1/1;background:var(--paper);color:var(--ink);padding:28px 30px;display:grid;gap:10px;align-content:start;max-width:760px}
.g-risposta h3{font-family:var(--title);color:var(--green);font-size:26px;margin:0}
.g-risposta p{margin:0;font-size:17px}
html.js .g-risposta[hidden]{display:grid;visibility:hidden;opacity:0;pointer-events:none}
.g-vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.g-vs article{background:var(--paper);padding:28px;display:grid;gap:10px;align-content:start}
.g-vs h3{font-family:var(--title);color:var(--green);font-size:26px;margin:0}
.g-vs p{margin:0}
.g-allarme{background:var(--kobg);border-left:6px solid var(--ko);padding:24px 28px;display:grid;gap:8px}
.g-allarme b{font-family:var(--title);font-size:22px;color:var(--ko)}
.g-allarme p{margin:0;font-size:17px;max-width:70ch}
@media (max-width:900px){.g-cert{grid-column:1/-1}.g-percorso{grid-column:1/-1}.g-vs{grid-template-columns:1fr}}
@media (max-width:600px){.g-percorso li{padding-left:70px}.g-percorso li::before{width:46px;height:46px;font-size:19px}.g-percorso::before{left:22px}.g-cert .g-sigillo{width:66px;height:66px;font-size:9px}.g-cert{padding:26px 22px 96px}.g-cert dl{grid-template-columns:1fr;gap:2px}.g-cert dd{margin-bottom:8px}}
@media (prefers-reduced-motion:no-preference){
  html.js .g-percorso::before{transform:scaleY(0)}
  html.js .in .g-percorso::before{transform:scaleY(1);transition:transform 1.6s var(--ease-io) .2s}
  html.js .g-percorso li.r::before{transform:scale(.4);opacity:0}
  html.js .in .g-percorso li.r::before{transform:none;opacity:1;transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0) * 220ms + .2s),opacity .3s ease calc(var(--i,0) * 220ms + .2s)}
  html.js .g-cert.r{transform:translateY(40px) rotate(-3deg)}
  html.js .in .g-cert.r{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(.8deg);transition:opacity .6s var(--ease-out),transform 1s var(--ease-out)}
  html.js .g-cert .g-sigillo{transform:scale(1.6) rotate(-30deg);opacity:0}
  html.js .in .g-cert .g-sigillo{transform:rotate(-14deg);opacity:1;transition:transform .45s cubic-bezier(.3,1.5,.5,1) 1.1s,opacity .2s ease 1.1s}
  .g-risposta{transition:opacity .3s ease,transform .4s var(--ease-out)}
  html.js .g-risposta[hidden]{transform:translateY(10px)}
}

/* pagine argomento: briciole nella parte alta, quesiti da provare, elenco completo */
.g-crumbs{grid-column:1/-1;color:rgba(248,243,232,.78);font-size:var(--t-small);margin:0 0 -16px}
.g-crumbs a{color:var(--bg)}
.g-prova-q{display:grid;gap:18px;grid-column:1/10}
.g-punti{margin:0;font-family:var(--title);font-weight:700;font-size:22px;color:var(--green)}
.g-q{background:var(--paper);border:1px solid var(--line);padding:22px 24px;display:grid;gap:10px}
.g-qid{margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.g-qid a{color:var(--ink2)}
.g-bomba{background:var(--amberbg);color:var(--warn);border:1px solid var(--amber);border-radius:999px;padding:2px 10px;font-weight:700;font-size:12px}
.g-qq{margin:0;font-family:var(--title);font-weight:700;font-size:20px;line-height:1.3;color:var(--green)}
.g-qo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-qo li{border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font-size:16px}
.g-qo li b{font-family:var(--title);color:var(--ink2);margin-right:6px}
.g-qo li.g-ok{border-color:var(--ok);background:var(--okbg)}
.g-qo button{all:unset;display:block;cursor:pointer;width:100%}
.g-gioca .g-qo li{padding:0}.g-gioca .g-qo button{padding:10px 14px;box-sizing:border-box}
.g-qe{margin:0;font-size:15px;color:var(--ink);background:var(--field);border-radius:10px;padding:12px 14px}
html.js .g-gioca.da-fare .g-qo li.g-ok{border-color:var(--line);background:none}
html.js .g-gioca.da-fare .g-qe{display:none}
html.js .g-gioca .g-qo li.no{border-color:var(--ko);background:var(--kobg)}
@media (hover:hover) and (pointer:fine){html.js .g-gioca.da-fare .g-qo li:hover{border-color:var(--green)}}
.g-gioca .g-qo button:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:8px}
.g-elenco{display:grid;gap:8px;grid-column:1/10}
.g-elenco details{background:var(--paper);border:1px solid var(--line)}
.g-elenco summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;gap:12px}
.g-elenco summary::-webkit-details-marker{display:none}
.g-elenco summary span{color:var(--ink2);font-weight:500;flex:none;font-size:14px;padding-top:2px}
.g-elenco details[open] summary{border-bottom:1px solid var(--line2)}
.g-elenco .g-q{border:0;padding:16px 18px}
.g-elenco .g-qq{display:none}
@media (max-width:900px){.g-prova-q,.g-elenco{grid-column:1/-1}}
@media (prefers-reduced-motion:no-preference){
  .g-gioca .g-qe{animation:riga .35s var(--ease-out) both}
  .g-gioca .g-qo li{transition:border-color .2s ease,background-color .2s ease}
  .g-punti.batti{animation:batti .3s var(--ease-out)}
}
.g-green .g-req .g-on{background:var(--amber)}.g-green .g-req .g-on b{color:var(--green)}.g-green .g-req .g-on span{color:var(--ink)}.g-green .g-req .g-on::before{color:var(--green)}