/* ==========================================================================
   AXIONIV — Guide (/guide/*)
   Stessa struttura delle altre pagine (pagehead, .sec, .sechead, .rail,
   .ctabox): qui solo i componenti propri della guida. La pagina mostra che
   cosa conta e lascia ad Axioniv il come: ogni sezione chiude con un invito.
   ========================================================================== */

/* Testata piu' bassa delle altre pagine: il confronto deve affiorare subito */
.pagehead.p-guide{--ph-x:58%;--ph-rot:-6deg;--ph-cell:124px;min-height:74vh;min-height:74dvh}

/* --- Confronto prima/dopo, fascia larga --- */
.gmedia{max-width:980px;margin:0 auto}
.gmedia .ba{box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(201,162,75,.12)}
.gtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.gtab{position:relative;display:flex;flex-direction:column;gap:8px;padding:6px 6px 10px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(15,21,38,.55);color:var(--mist);font:inherit;font-size:13px;text-align:center;
  transition:border-color var(--r-fast) var(--ease),color var(--r-fast) var(--ease),transform var(--r-press) var(--ease)}
.gtab img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;opacity:.7;transition:opacity var(--r-fast) var(--ease)}
.gtab:hover{color:var(--cream);border-color:rgba(201,162,75,.35)}
.gtab:hover img{opacity:1}
.gtab:active{transform:scale(.98)}
.gtab[aria-pressed="true"]{color:var(--cream);border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,75,.35)}
.gtab[aria-pressed="true"] img{opacity:1}
.gmedia .cap{margin-top:14px}

/* --- Invito di chiusura di ogni sezione --- */
.ghook{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:48px;text-align:center}
.ghook p{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--cream);max-width:40ch}

/* --- Binario dei vantaggi a quattro voci --- */
@media(min-width:768px){.rail.four{grid-template-columns:repeat(4,1fr)}}

.sechead p.lead2{margin-top:18px;font-size:17px;color:var(--mist);max-width:56ch}

/* --- Le 10 cose --- */
.grules{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:600px){.grules{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grules{grid-template-columns:repeat(5,1fr)}}
.grule{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:16px;
  border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);
  transition:border-color var(--r-base) var(--ease),transform var(--r-base) var(--ease),background-color var(--r-base) var(--ease)}
.grule:hover{border-color:rgba(201,162,75,.25);background:rgba(255,255,255,.04);transform:translateY(-3px)}
.grule .top{display:flex;align-items:center;justify-content:space-between}
.grule .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--gold);
  background:rgba(201,162,75,.09);border:1px solid rgba(201,162,75,.22)}
.grule .no{font-family:var(--serif);font-size:22px;color:rgba(201,162,75,.4)}
.grule h3{margin-top:20px;font-size:22px;line-height:1.15;color:var(--cream)}
.grule p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--mist)}

/* --- Così no / così sì --- */
.gpairs{display:grid;gap:56px}
@media(min-width:1024px){.gpairs{grid-template-columns:repeat(2,1fr);gap:56px 48px}}
.gpair .imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gpair figure{position:relative;margin:0}
.gpair .frame{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0b1020}
.gpair .frame img{width:100%;height:100%;object-fit:cover;display:block}
.gpair .badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;backdrop-filter:blur(4px);z-index:2}
.gpair .badge.no{background:rgba(40,14,10,.75);color:#F0A48A;border:1px solid rgba(227,154,126,.45)}
.gpair .badge.si{background:rgba(7,10,18,.75);color:var(--gold-light);border:1px solid rgba(201,162,75,.5)}
.gpair h3{margin-top:20px;font-size:24px;color:var(--cream)}
.gpair p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--mist);max-width:52ch}

/* --- Ritocchi sì, inganni no --- */
.glimit{display:grid;gap:14px}
@media(min-width:800px){.glimit{grid-template-columns:1fr 1fr}}
.glimit .col{padding:28px 28px 24px;border-radius:16px;border:1px solid rgba(201,162,75,.22);background:rgba(15,21,38,.5)}
.glimit .col.no{border-color:rgba(227,154,126,.3)}
.glimit h3{font-size:24px;color:var(--cream)}
.glimit ul{list-style:none;margin-top:16px;display:grid;gap:12px}
.glimit li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:#D5D9E2}
.glimit li::before{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.glimit .si li::before{content:"✓";color:var(--gold);border:1px solid rgba(201,162,75,.5)}
.glimit .no li::before{content:"✕";color:#E39A7E;border:1px solid rgba(227,154,126,.5)}

/* --- Il test --- */
.gcheck{max-width:820px;margin:0 auto;padding:40px;border-radius:24px;border:1px solid rgba(201,162,75,.2);
  background:linear-gradient(180deg,rgba(22,30,51,.8),rgba(10,14,26,.8))}
@media(max-width:640px){.gcheck{padding:28px 20px}}
.gcheck .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.gcheck h2{font-size:clamp(28px,3.4vw,40px)}
.gcheck .hint{margin-top:10px;font-size:15px;color:var(--mist)}
.gcheck .count{font-family:var(--serif);font-size:34px;color:var(--gold-light);line-height:1}
.gcheck .count small{font-size:18px;color:var(--mist-dim)}
.gbar{margin-top:20px;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.gbar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--gold-sheen);transition:width var(--r-slow) var(--ease)}
.gcheck ol{list-style:none;margin-top:24px;display:grid;gap:4px}
.gcheck label{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:12px;cursor:pointer;font-size:16px;line-height:1.45;color:#D5D9E2;
  transition:background-color var(--r-fast) var(--ease)}
.gcheck label:hover{background:rgba(255,255,255,.03)}
.gcheck input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:1px solid rgba(201,162,75,.55);
  display:grid;place-content:center;cursor:pointer;transition:background-color var(--r-fast) var(--ease)}
.gcheck input::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform var(--r-fast) var(--spring)}
.gcheck input:checked{background:var(--gold)}
.gcheck input:checked::after{transform:rotate(45deg) scale(1)}
.gdone{display:none;margin-top:24px;padding:20px 22px;border-radius:16px;border:1px solid rgba(201,162,75,.35);background:rgba(201,162,75,.07)}
.gdone.on{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.gdone p{font-size:16px;line-height:1.5;color:var(--cream);max-width:46ch}

/* --- Domande frequenti --- */
.gfaq{max-width:820px;margin:0 auto}
.gfaq details{border-top:1px solid rgba(255,255,255,.08);padding:20px 0}
.gfaq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
.gfaq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--serif);font-size:22px;color:var(--cream)}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"+";flex:none;color:var(--gold);font-family:var(--sans);font-size:22px;line-height:1;transition:transform var(--r-base) var(--ease)}
.gfaq details[open] summary::after{transform:rotate(45deg)}
.gfaq details p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--mist);max-width:68ch}

/* --- Guide testuali generate da docs/seo/tools/nuova_guida.py --- */
.gdate{margin-top:18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist-dim)}
.gprose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75;color:var(--mist)}
.gprose h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.15;color:var(--cream);margin-bottom:24px}
.gprose p{margin:0 0 18px}
.gprose strong{color:var(--cream);font-weight:500}
.gprose a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gprose a:hover{color:var(--gold)}
.gprose ul,.gprose ol{margin:0 0 22px;padding-left:22px}
.gprose li{margin-bottom:10px}
.gprose li::marker{color:var(--gold)}
.gprose .ghook{margin-top:36px}
.gtable{margin:8px 0 26px;overflow-x:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px}
.gtable table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.gtable th{text-align:left;font-weight:500;color:var(--cream);background:rgba(201,162,75,.08);padding:14px 16px}
.gtable td{padding:13px 16px;border-top:1px solid rgba(255,255,255,.06);vertical-align:top}
.gfaq details ul,.gfaq details ol{margin-top:12px;padding-left:22px;color:var(--mist)}

@media (prefers-reduced-motion: reduce){
  .grule,.gtab,.gbar i,.gcheck input::after{transition:none}
  .grule:hover{transform:none}
}