/* MaestroApp — Blog. Stessa identità di maestrapp.com: sfondo scuro,
   Fraunces per i titoli, Manrope per il corpo, accento indaco. */

@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#09090B;
  --bg-alt:#111113;
  --card:#18181B;
  --card-border:#27272A;
  --testo:#E4E4E7;
  --testo-forte:#F4F4F6;
  --testo-muto:#A1A1AA;
  --testo-fioco:#71717A;
  --accento:#6366F1;
  --accento-chiaro:#A5B4FC;
  --accento-testo:#C7D2FE;
  --verde:#4ADE80;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--testo);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accento-chiaro);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accento-chiaro);outline-offset:3px;}

.contenitore{max-width:1060px;margin:0 auto;padding:0 24px;}

/* ---- header ---- */
header.sito{
  position:sticky;top:0;z-index:50;
  background:rgba(9,9,11,0.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--card-border);
}
header.sito .riga{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 24px;max-width:1060px;margin:0 auto;
}
.wordmark{display:flex;align-items:baseline;gap:8px;flex-shrink:0;}
.wordmark .maestro{font-family:'Italianno',cursive;font-size:32px;color:#fff;line-height:1;}
.wordmark .app{font-size:12px;font-weight:800;letter-spacing:.28em;color:var(--accento-chiaro);}
.nav-destra{display:flex;align-items:center;gap:22px;}
.nav-destra a.accedi{color:var(--testo-muto);font-size:14px;font-weight:600;}
.nav-destra a.accedi:hover{color:var(--testo-forte);}
.nav-destra a.cta{
  background:var(--accento);color:#fff;font-size:14px;font-weight:600;
  padding:9px 16px;border-radius:10px;white-space:nowrap;
}
.nav-destra a.cta:hover{background:#4F46E5;text-decoration:none;}

/* ---- hero sezione blog ---- */
.blog-hero{
  padding:clamp(56px,8vw,92px) 24px clamp(32px,5vw,48px);
  text-align:center;
  background:radial-gradient(900px 500px at 50% 0%, rgba(99,102,241,0.18), transparent 62%);
}
.blog-hero .eyebrow{
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--testo-fioco);margin:0 0 18px;
}
.blog-hero h1{
  font-family:'Fraunces',serif;font-weight:700;font-size:clamp(34px,5vw,52px);
  line-height:1.15;color:var(--testo-forte);margin:0 0 18px;letter-spacing:-0.01em;
  text-wrap:balance;
}
.blog-hero p{
  font-size:clamp(17px,1.8vw,19px);color:var(--testo-muto);max-width:640px;
  margin:0 auto;text-wrap:pretty;
}

/* ---- griglia articoli ---- */
.griglia-articoli{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;padding:8px 24px clamp(64px,8vw,96px);max-width:1060px;margin:0 auto;
}
.scheda-articolo{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.scheda-articolo:hover{border-color:#3F3F46;transform:translateY(-2px);}
.scheda-articolo .tag{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accento-chiaro);
}
.scheda-articolo h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:21px;line-height:1.3;
  color:var(--testo-forte);margin:0;text-wrap:balance;
}
.scheda-articolo h2 a{color:inherit;}
.scheda-articolo h2 a:hover{color:var(--accento-chiaro);text-decoration:none;}
.scheda-articolo p{margin:0;color:var(--testo-muto);font-size:15px;flex:1;}
.scheda-articolo .leggi{font-size:14px;font-weight:700;color:var(--accento-chiaro);}
.scheda-articolo .leggi::after{content:" →";}

/* ---- articolo ---- */
main.articolo{padding:clamp(40px,6vw,64px) 24px 0;}
.articolo-intestazione{max-width:700px;margin:0 auto clamp(36px,5vw,52px);text-align:left;}
.articolo-intestazione .breadcrumb{
  font-size:13px;font-weight:700;color:var(--testo-fioco);margin-bottom:22px;display:block;
}
.articolo-intestazione .tag{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accento-chiaro);display:block;margin-bottom:14px;
}
.articolo-intestazione h1{
  font-family:'Fraunces',serif;font-weight:700;font-size:clamp(30px,4.2vw,44px);
  line-height:1.18;color:var(--testo-forte);margin:0 0 16px;letter-spacing:-0.01em;
  text-wrap:balance;
}
.articolo-intestazione .sottotitolo{
  font-size:18px;color:var(--testo-muto);margin:0;text-wrap:pretty;
}

.corpo-articolo{max-width:700px;margin:0 auto;padding-bottom:8px;}
.corpo-articolo h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:26px;line-height:1.3;
  color:var(--testo-forte);margin:44px 0 16px;letter-spacing:-0.005em;
}
.corpo-articolo h2:first-child{margin-top:0;}
.corpo-articolo p{font-size:17px;color:var(--testo);margin:0 0 20px;}
.corpo-articolo strong{color:var(--testo-forte);font-weight:700;}
.corpo-articolo ul,.corpo-articolo ol{
  margin:0 0 20px;padding-left:22px;font-size:17px;color:var(--testo);
}
.corpo-articolo li{margin-bottom:10px;}
.corpo-articolo li::marker{color:var(--accento-chiaro);}
.corpo-articolo em{color:var(--testo-muto);font-style:italic;}

/* ---- box CTA a fine articolo ---- */
.box-cta{
  max-width:700px;margin:52px auto 0;
  background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  padding:32px 30px;text-align:center;
  background-image:radial-gradient(500px 260px at 50% 0%, rgba(99,102,241,0.16), transparent 70%);
}
.box-cta h3{
  font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--testo-forte);
  margin:0 0 10px;text-wrap:balance;
}
.box-cta p{font-size:15.5px;color:var(--testo-muto);margin:0 0 22px;}
.box-cta .pulsante{
  display:inline-block;background:var(--accento);color:#fff;font-size:16px;font-weight:700;
  padding:13px 28px;border-radius:100px;box-shadow:0 20px 50px -20px rgba(99,102,241,0.6);
}
.box-cta .pulsante:hover{background:#4F46E5;text-decoration:none;}
.box-cta .nota{margin:14px 0 0;font-size:13px;color:var(--testo-fioco);}

/* ---- articoli correlati ---- */
.correlati{max-width:700px;margin:56px auto 0;padding-top:36px;border-top:1px solid var(--card-border);}
.correlati h3{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--testo-fioco);margin:0 0 18px;
}
.correlati ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.correlati a{font-size:16px;font-weight:600;color:var(--testo-forte);}
.correlati a:hover{color:var(--accento-chiaro);text-decoration:none;}

/* ---- footer ---- */
footer.sito{
  border-top:1px solid var(--card-border);padding:40px 24px 56px;margin-top:clamp(48px,7vw,80px);
}
footer.sito .riga{
  max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}
footer.sito .sinistra{display:flex;align-items:baseline;gap:8px;color:var(--testo-fioco);font-size:14px;}
footer.sito .sinistra .maestro{font-family:'Italianno',cursive;font-size:20px;color:var(--testo-muto);}
footer.sito .link{display:flex;gap:22px;flex-wrap:wrap;}
footer.sito .link a{color:var(--testo-muto);font-size:14px;}
footer.sito .link a:hover{color:var(--testo-forte);}

@media (max-width:560px){
  .nav-destra a.accedi{display:none;}
  .articolo-intestazione, .corpo-articolo, .box-cta, .correlati{padding-left:0;padding-right:0;}
}

@media (prefers-reduced-motion: reduce){
  .scheda-articolo{transition:none;}
}