:root { --verde:#2E6B47; --verde-chiaro:#EFF7F1; --testo:#1F2A24; --grigio:#5E6B64; --bordo:#DCE7DF; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--testo); background:#fff; line-height:1.6; }
header { background: linear-gradient(135deg, #2E6B47, #4F9A6A); color:#fff; }
.barra { max-width: 920px; margin:0 auto; padding: 14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.barra a { color:#fff; text-decoration:none; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; }
.logo img { width:34px; height:34px; border-radius:8px; background:#fff; }
nav a { margin-left:16px; font-size:15px; opacity:.95; }
main { max-width: 920px; margin: 0 auto; padding: 28px 20px 48px; }
h1 { font-size: 30px; line-height:1.25; margin: 8px 0 12px; }
h2 { font-size: 21px; margin-top: 32px; color: var(--verde); }
.eroe { background: var(--verde-chiaro); border-radius: 18px; padding: 28px; margin-bottom: 24px; }
.eroe p { font-size: 18px; color: var(--grigio); }
.pulsante { display:inline-block; background: var(--verde); color:#fff; padding: 12px 20px; border-radius: 12px; text-decoration:none; font-weight:700; margin: 6px 8px 6px 0; }
.pulsante.chiaro { background:#fff; color: var(--verde); border: 2px solid var(--verde); }
.griglia { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.scheda { border:1px solid var(--bordo); border-radius: 16px; padding: 18px; }
.scheda h3 { margin: 0 0 6px; font-size: 17px; }
.nota { color: var(--grigio); font-size: 14px; }
footer { border-top:1px solid var(--bordo); color: var(--grigio); font-size: 14px; }
footer .barra a { color: var(--verde); margin-right: 16px; }
@media (max-width: 560px) { nav a { margin-left: 10px; font-size: 14px; } h1 { font-size: 25px; } }