/* Guide: articoli e strumenti interattivi */
.g-hero{padding:3rem 0 2.5rem}
.g-hero h1{font:300 clamp(2.1rem,4.8vw,3.5rem)/1.08 var(--serif);letter-spacing:-.02em;margin:.4rem 0 1rem;max-width:22ch}
.g-hero h1 .h1s{display:block;font:400 clamp(1.05rem,2vw,1.3rem)/1.4 var(--sans);letter-spacing:0;color:var(--muted);margin-top:.7rem}
.g-hero .lead{color:var(--muted);max-width:60ch;font-size:1.1rem}
.g-meta{font-size:.9rem;color:var(--muted);margin-top:1.2rem}

/* calcolatore */
.calc{background:var(--ash);padding:2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start;margin-bottom:4.5rem}
.calc h2{font:400 1.5rem/1.2 var(--serif);margin-bottom:.4rem}
.calc .c-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.6rem}
.calc fieldset{border:0;padding:0;margin:0 0 1.4rem}
.calc legend,.calc label.lb{display:block;font-weight:500;margin-bottom:.5rem}
.calc .hint{display:block;font-size:.85rem;color:var(--muted);margin-top:.35rem;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}
.chips button{font:inherit;font-size:.9rem;padding:.55rem .9rem;border:1px solid rgba(42,29,20,.25);background:#fff;border-radius:2px;cursor:pointer;color:var(--ink)}
.chips button[aria-pressed=true]{border-color:var(--brass);background:#fff6e6;box-shadow:inset 0 0 0 1px var(--brass)}
.num{display:flex;align-items:center;gap:.6rem}
.num input{font:inherit;width:6.5rem;padding:.6rem .7rem;border:1px solid rgba(42,29,20,.3);border-radius:2px;background:#fff;color:var(--ink)}
.num input:focus{outline:2px solid var(--brass);outline-offset:1px}
.num span{color:var(--muted)}
.c-out{background:#fff;padding:1.4rem 1.5rem;border-left:3px solid var(--brass)}
.c-out .big{font:300 2.6rem/1 var(--serif);margin:.2rem 0 .4rem}
.c-out .big small{font:400 1rem var(--sans);color:var(--muted)}
.c-out p{font-size:.95rem;color:var(--muted)}
.scene{width:100%;height:auto;display:block;background:#fff;margin-bottom:1.2rem}
.picks{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}
.picks a{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;background:#fff;padding:.5rem .8rem .5rem .5rem;text-decoration:none;border:1px solid rgba(42,29,20,.12)}
.picks a:hover{border-color:var(--brass)}
.picks img{width:64px;height:48px;object-fit:contain;background:#fff}
.picks b{font-weight:500;display:block}
.picks .d{font-size:.85rem;color:var(--muted)}
.picks .h{font:400 1.05rem var(--serif);white-space:nowrap}
.picks .ok{color:#3c7a3c;font-size:.8rem}
.c-cta{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}

/* articolo */
.art{max-width:70ch;padding-bottom:4rem}
.art h2{font:300 clamp(1.6rem,2.8vw,2.2rem)/1.15 var(--serif);margin:3rem 0 1rem}
.art h3{font:500 1.15rem var(--serif);margin:1.8rem 0 .5rem}
.art p{margin-bottom:1rem}
.art ol,.art ul{padding-left:1.3rem;margin-bottom:1rem}
.art li{margin-bottom:.45rem}
.art .note{background:var(--ash);padding:1.1rem 1.3rem;margin:1.5rem 0;font-size:.98rem}
.art a{color:var(--brass)}
.htable{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.97rem}
.htable th,.htable td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid rgba(42,29,20,.15)}
.htable th{font-weight:500;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.htable td:last-child,.htable th:last-child{text-align:right}

/* indice guide */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-bottom:5rem}
.glist a{text-decoration:none;display:block}
.glist .ph{aspect-ratio:4/3;background:#fff;overflow:hidden;margin-bottom:1rem}
.glist img{width:100%;height:100%;object-fit:contain}
.glist h2{font:400 1.35rem/1.2 var(--serif);margin-bottom:.4rem}
.glist p{color:var(--muted);font-size:.97rem}
.glist .soon{opacity:.55;pointer-events:none}


@media (max-width:820px){
  .calc{grid-template-columns:1fr;padding:1.5rem;gap:1.6rem;margin-left:-1.5rem;margin-right:-1.5rem}
  .c-out .big{font-size:2.2rem}
}
@media (max-width:600px){
  .calc{margin-left:-1rem;margin-right:-1rem;padding:1.3rem 1rem}
  .picks a{grid-template-columns:52px 1fr auto;gap:.7rem}
  .picks img{width:52px;height:40px}
  .htable{font-size:.9rem}
}