/* La guida di ESKIT (eskit.app/guida/, /en/guide/): sopra stile.css e compendio.css.
   Pensata prima per il telefono: testo e schermate uno sotto l'altro; dal
   tablet in su le schermate stanno accanto al testo. */
.guida .sotto{margin-bottom:26px}
.guida h2{font-family:Cinzel,serif;font-weight:700;letter-spacing:.02em;line-height:1.2}
.sezione-titolo{font-size:1.3rem;margin:8px 0 14px}

/* l'indice: i capitoli in schede numerate, con le sezioni sotto */
.capitoli{list-style:none;display:grid;gap:14px;margin-bottom:36px}
.capitoli>li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.capitoli>li>a{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--text)}
.capitoli>li>a:hover b{color:var(--acc2)}
.capitoli .num{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 1.05rem Cinzel,serif;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.capitoli b{display:block;font:700 1.12rem Cinzel,serif;transition:color .2s}
.capitoli small{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;margin-top:2px}
.capitoli ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0 52px}
.capitoli ul a{display:inline-block;font-size:.84rem;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);text-decoration:none}
.capitoli ul a:hover{border-color:rgba(220,20,60,.5)}

/* la pagina di un capitolo */
.capitolo-num{display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.capitolo-num svg{width:18px;height:20px}
.sommario{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:34px}
.sommario h2{font:600 .78rem Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sommario ol{padding-left:1.3em;columns:2 220px;column-gap:28px}
.sommario li{margin:3px 0;break-inside:avoid}
.sommario a{color:var(--text);text-decoration:none}
.sommario a:hover{color:var(--acc2)}

.voce{display:grid;gap:18px;padding:30px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.voce h2{font-size:1.45rem;margin-bottom:12px}
.voce .testo{max-width:68ch}
.voce p{margin-bottom:12px}
.voce strong{color:#fff}
.passi,.punti{margin:4px 0 14px 1.3em}
.passi li,.punti li{margin:6px 0;padding-left:4px}
.passi li::marker{color:var(--acc2);font-weight:700}
.punti li::marker{color:var(--acc2)}
.nota{margin:10px 0 14px;padding:12px 14px;border-radius:14px;background:rgba(220,20,60,.08);border:1px solid rgba(220,20,60,.28);font-size:.94rem}
.nota b{color:var(--acc2);margin-right:4px}
.immagini{display:flex;gap:14px;flex-wrap:wrap}
.immagini figure{flex:1 1 0;min-width:0;max-width:250px}
.immagini img{width:100%;border-radius:22px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}
@media (min-width:860px){
  .voce{grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:start}
  .voce.senza-immagini{grid-template-columns:1fr}
  .immagini{flex-direction:column;position:sticky;top:84px}
  .immagini figure{flex:none;width:250px}
}

.capitoli-vicini{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:34px 0 30px;padding-top:24px;border-top:1px solid var(--line)}
.capitoli-vicini a{text-decoration:none;color:var(--text);font-weight:600}
.capitoli-vicini a:hover{color:var(--acc2)}
.capitoli-vicini small{display:block;font-size:.74rem;font-weight:500;color:var(--muted);letter-spacing:.06em}
.capitoli-vicini .succ{text-align:right}
.capitoli-vicini .tutti{font-size:.86rem;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
@media (max-width:560px){.capitoli-vicini{grid-template-columns:1fr 1fr}.capitoli-vicini .tutti{grid-column:1/-1;grid-row:2;justify-self:center}}
.invito-guida{display:grid;gap:10px;justify-items:start;margin:10px 0 20px}
.invito-guida p{font-size:.9rem;color:var(--muted);max-width:46ch}
.pdf{margin:-14px 0 26px}.pdf a{font-weight:600}
