/* Il blog di amberlop.com. Si appoggia a /legale.css (palette, testata,
   carte, tabelle, piè di pagina) e aggiunge solo quello che serve agli
   articoli: righe di servizio, citazioni, fonti, invito alla call, elenco. */
.metart{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--soft);font-size:14px;margin-top:4px}
/* il puntino sta in coda, non in testa: se la riga va a capo sul telefono
   la seconda riga non comincia con "·" */
.metart span:not(:last-child)::after{content:"·";margin-left:16px;color:rgba(147,167,196,.5)}
.percorso{font-size:13.5px;color:var(--soft);margin-top:30px}
.percorso a{color:var(--soft);text-decoration:none}
.percorso a:hover{color:var(--text)}
.percorso + .occhiello{margin-top:12px}

blockquote{border-left:3px solid var(--ambra);background:rgba(255,179,92,.06);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:16px 0;color:var(--text);font-size:16px}
blockquote cite{display:block;font-style:normal;color:var(--soft);font-size:13.5px;margin-top:6px}

.passi{counter-reset:passo;list-style:none;padding:0}
.passi li{counter-increment:passo;position:relative;padding-left:44px;margin-bottom:14px}
.passi li::before{content:counter(passo);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font:800 13px Sora,Inter,sans-serif;color:#1a1206;
  background:linear-gradient(135deg,var(--ambra-viva),var(--ambra))}

.cta{border-color:rgba(35,199,236,.35);background:linear-gradient(135deg,rgba(21,33,52,.9),rgba(15,24,40,.7))}
.bottone{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;font-size:15px;color:#06121d;
  text-decoration:none;border-radius:999px;padding:11px 20px;background:linear-gradient(120deg,var(--ciano),var(--accent2))}
.bottone:hover{color:#06121d;filter:brightness(1.08)}

.avviso{font-size:14px;color:var(--soft)}
.fonti{font-size:14.5px}
.fonti li{margin-bottom:8px;overflow-wrap:anywhere}

/* elenco articoli */
.articoli{display:grid;gap:18px;margin-top:30px}
.scheda{display:block;text-decoration:none;background:rgba(15,24,40,.62);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;transition:border-color .2s,background .2s}
.scheda:hover{border-color:rgba(143,212,239,.4);background:rgba(21,33,52,.75)}
.scheda .etichetta{margin-bottom:6px}
.scheda h2{margin:0 0 8px;font-size:clamp(20px,3.2vw,24px);color:var(--text)}
.scheda p{margin:0 0 10px}
.scheda .metart{margin:0}