/* Pagine di approfondimento per la ricerca su Google: stessi colori e caratteri del sito 3D, senza la scena 3D, leggere dal telefono */
:root{
  --ink:#0f0f0f; --ink-2:#1a1a1a; --paper:#f3f4f2; --muted:#c3c9cd; --dim:#9aa2a7; --line:rgba(255,255,255,.12);
  --teal:#3b8b8b; --teal-2:#4fa8a8; --teal-deep:#2d5a5a; --orange:#ff8c00;
  --ndvi-lo:#c43d2c; --ndvi-mid:#e9c94a; --ndvi-hi:#2f9e4f;
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper)}
body{font-family:var(--f-body);font-size:17px;line-height:1.65}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;max-width:52rem;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.08em;color:var(--teal-2);text-decoration:none;min-height:44px}
.logo img{width:36px;height:36px;display:block}
.top a.torna{color:#d1d5db;text-decoration:none;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px}
main{max-width:52rem;margin:0 auto;padding:16px 16px 48px}
.badge{display:inline-block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-2);background:rgba(45,90,90,.22);border:1px solid rgba(45,90,90,.5);border-radius:4px;padding:4px 10px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2.2rem,7vw,3.6rem);margin:14px 0 16px}
h2{font-size:clamp(1.6rem,4.6vw,2.2rem);margin:48px 0 14px}
h3{font-size:1.15rem;margin:0 0 6px}
.grad{background:linear-gradient(135deg,#3b8b8b,#4fa8a8,#ff8c00);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0 0 14px;color:var(--muted)}
p strong,li strong{color:var(--paper);font-weight:600}
.lead{font-size:1.15rem}
a{color:var(--teal-2)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 4px}
.stat{background:rgba(42,42,42,.6);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-family:var(--f-mono);font-weight:500;font-size:1.1rem;color:var(--teal-2);overflow-wrap:anywhere}
.stat b.o{color:var(--orange)}
.stat small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
figure{margin:20px 0}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coppia div{position:relative}
.coppia img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line)}
.coppia span{position:absolute;top:8px;left:8px;font:500 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(15,15,15,.82);color:var(--paper);padding:3px 8px;border-radius:4px}
.legenda{display:flex;align-items:center;gap:10px;margin-top:10px;font:500 .72rem var(--f-mono);text-transform:uppercase;color:var(--muted)}
.legenda i{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ndvi-lo),var(--ndvi-mid),var(--ndvi-hi))}
figcaption{font-size:.92rem;color:var(--dim);margin-top:8px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-2)}
td:first-child{color:var(--dim)}
tr:last-child td{border-bottom:0}
ul.lista,ol.passi{margin:0 0 14px;padding-left:1.3em;color:var(--muted)}
ul.lista li,ol.passi li{margin-bottom:8px}
.key{border-left:3px solid var(--orange);padding-left:14px;color:var(--paper);font-family:var(--f-display);font-size:1.25rem}
details{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--ink-2)}
summary{cursor:pointer;padding:12px 16px;min-height:44px;font-weight:600;color:var(--paper)}
details p{padding:0 16px 4px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.btn{font:600 1rem var(--f-body);border-radius:6px;padding:13px 22px;min-height:48px;text-decoration:none;display:inline-flex;align-items:center;border:1px solid transparent}
.btn.orange{background:var(--orange);color:#fff}
.btn.ghost{color:var(--teal-2);border-color:rgba(79,168,168,.5)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.contact{font-family:var(--f-mono);font-size:.95rem;color:var(--muted)}
.contact a.ig{display:inline-block;padding:12px 0;text-decoration:none}
footer{max-width:52rem;margin:0 auto;padding:20px 16px 40px;border-top:1px solid var(--line);font-size:.9rem;color:var(--dim)}
footer a{display:inline-block;padding:6px 0}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top a.torna{font-size:.92rem}
}
.indice{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;background:var(--ink-2);padding:14px 16px;margin-bottom:12px}
.indice h3{font-family:var(--f-mono);font-weight:500;font-size:1.1rem;color:var(--teal-2)}
.indice p{margin:0 0 6px}
.indice small{display:block;font:500 .74rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.leggi{border:1px solid rgba(79,168,168,.5);border-radius:10px;padding:14px 16px;margin:28px 0 0}
.leggi a{display:inline-block;padding:6px 0;font-weight:600}
figure img.shot{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line)}