/* Andrea Tarroni · stile condiviso delle pagine del sito (guida: ../STYLE.md)
   Spaziature: usare SOLO queste variabili, mai pixel a mano. Nomi a voce: minuscola, piccola, media, grande, grandissima, enorme. */
/* Colori, font e scala delle spaziature (--sp-xs…xxl) vengono da design/tokens.css, copia di _design/ con il tema "andrea"
   (le pagine hanno data-tema="andrea" su <html>). Qui restano solo i nomi storici di questo sito, come alias dei token. */
:root { --bg2:var(--bg-deep); --raised:var(--bg-raised); --glow:var(--accent-glow); --mono:ui-monospace,"Cascadia Code",Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--text); font:400 clamp(17px,1.2vw,19px)/1.7 var(--body); }
a { color:var(--accent-soft); }
.wrap { max-width:1020px; margin-inline:auto; padding-inline:clamp(16px,4vw,44px); }
.narrow > * { max-width:720px; margin-inline:auto; }

.topbar { border-bottom:1px solid var(--line); }
.topbar .wrap { display:flex; align-items:center; height:58px; }
.marca { font:700 17px/1 var(--display); letter-spacing:.02em; color:var(--text); text-decoration:none; }

.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding-block:var(--sp-xxl);
  background:radial-gradient(70% 90% at 85% 0%,#467ff726 0%,transparent 60%),radial-gradient(60% 80% at 5% 100%,#06429e30 0%,transparent 60%); }
.eyebrow { display:inline-block; font:600 13px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; padding:9px 14px; border-radius:999px; border:1px solid var(--line); color:var(--accent-soft); }
.hero h1 { font:700 clamp(36px,6.4vw,76px)/1.02 var(--display); letter-spacing:-.03em; margin:var(--sp-m) 0; max-width:22ch; }
.hero h1 em { display:inline-block; padding-bottom:.1em; margin-bottom:-.1em; }
.hero h1 em, h2 em { font-style:normal; color:var(--accent); }
.hero .sub { max-width:56ch; color:var(--muted); font-size:1.08em; margin:0 0 var(--sp-xl); }
.hero.centro { text-align:center; }
.hero.centro h1 { margin-inline:auto; max-width:20ch; font-size:clamp(32px,5vw,56px); }
.hero.centro .sub { margin-inline:auto; max-width:44ch; }
.hero.centro form.iscrizione { margin-inline:auto; text-align:left; }

section.bloc { padding-block:var(--sp-xxl); border-bottom:1px solid var(--line); }
h2 { font:700 clamp(26px,3.6vw,42px)/1.1 var(--display); letter-spacing:-.02em; margin:0 0 var(--sp-m); }
h3 { font:700 21px/1.2 var(--display); margin:0 0 var(--sp-xs); color:var(--text); }
p { margin:0 0 var(--sp-m); }
.muted { color:var(--muted); }
.small { font-size:.84em; color:var(--muted); }

.btn { display:inline-block; font:600 15px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; padding:17px 26px; border:0; border-radius:99px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px var(--glow); }
.btn:hover { filter:brightness(1.12); }
.btn.sm { font-size:13px; padding:11px 16px; }
.btn.fatto { background:#47e08a; color:#000; box-shadow:none; }
.btn.off { background:#26262a; box-shadow:none; color:var(--muted); cursor:default; pointer-events:none; }

form.iscrizione { display:grid; gap:var(--sp-m); max-width:520px; background:#ffffff08; border:1px solid var(--line); border-radius:20px; padding:var(--sp-l); }
form.iscrizione label { display:block; font:600 12px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
form.iscrizione input[type=text], form.iscrizione input[type=email] { width:100%; margin-top:var(--sp-xs); font:400 17px var(--body); color:var(--text); background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
form.iscrizione input:focus { outline:2px solid var(--accent-soft); border-color:transparent; }
form.iscrizione label.consenso { display:flex; gap:var(--sp-s); align-items:flex-start; font:400 14px/1.5 var(--body); letter-spacing:0; text-transform:none; color:var(--muted); }
.consenso input { flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--accent); }

.griglia { display:grid; gap:var(--sp-m); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:var(--sp-l); }
.card { background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:var(--sp-m); }
.card p { margin:0; color:var(--muted); font-size:.94em; }
.card .n { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent); font:700 15px var(--display); margin-bottom:var(--sp-s); }

.offerta { background:var(--raised); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:18px; padding:var(--sp-l); }
.offerta .prezzo { font:700 clamp(40px,6vw,64px)/1 var(--display); letter-spacing:-.03em; }
.offerta ul { padding-left:1.1em; margin:0 0 var(--sp-m); color:var(--muted); }
.offerta li { margin-bottom:var(--sp-xs); }

.blocco { margin:var(--sp-m) 0; background:var(--raised); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:14px; overflow:hidden; }
.blocco-bar { display:flex; align-items:center; gap:var(--sp-s); padding:var(--sp-s) var(--sp-m); border-bottom:1px solid var(--line); background:#101012; }
.blocco-bar .tag { font:600 13px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--text); flex:1; }
.blocco pre { margin:0; padding:var(--sp-m); overflow:auto; font:400 15px/1.6 var(--mono); color:#e4e7f0; white-space:pre-wrap; word-break:break-word; }
.passo h2 .num { display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; margin-right:.4em; font-size:.62em; border-radius:12px; background:var(--accent); color:#fff; vertical-align:middle; }
.nota { border-left:3px solid var(--accent); background:#ffffff08; border-radius:0 12px 12px 0; padding:var(--sp-s) var(--sp-m); color:var(--muted); font-size:.94em; }

.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,30px); opacity:0; background:#47e08a; color:#000; font:700 14px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; padding:13px 20px; border-radius:16px; transition:.25s; z-index:50; pointer-events:none; }
.toast.on { transform:translate(-50%,0); opacity:1; }
footer { padding:var(--sp-l) 0 var(--sp-xl); color:var(--muted); font-size:.82em; }
footer a { color:var(--muted); }
:focus-visible { outline:2px solid var(--accent-soft); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
.honey { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.errore { margin:0; color:#ff8f8f; min-height:0; }
.errore:empty { display:none; }

/* Home page: menu in alto, due percorsi, social. Solo variabili di spaziatura. */
.topbar .wrap { justify-content:space-between; gap:var(--sp-m); }
.nav { display:flex; align-items:center; gap:var(--sp-m); }
.nav a:not(.btn) { font:600 13px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.nav a:not(.btn):hover { color:var(--text); }
.hero.home h1 { font-size:clamp(34px,5.4vw,64px); max-width:24ch; text-wrap:balance; }
.cta { display:flex; flex-wrap:wrap; gap:var(--sp-s); }
.percorsi { display:grid; gap:var(--sp-m); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:var(--sp-l); }
.percorso { display:flex; flex-direction:column; gap:var(--sp-s); background:var(--raised); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:18px; padding:var(--sp-l); }
.percorso .tag { font:600 12px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); }
.percorso p { margin:0; color:var(--muted); }
.percorso .btn { align-self:flex-start; margin-top:auto; }
.social { display:flex; flex-wrap:wrap; gap:var(--sp-s); }
.chip { display:inline-block; font:600 14px/1 var(--display); letter-spacing:.08em; padding:var(--sp-s) var(--sp-m); border:1px solid var(--line); border-radius:999px; color:var(--text); text-decoration:none; }
.chip:hover { border-color:var(--accent-soft); }
@media (max-width:640px) { .nav a:not(.btn) { display:none; } }

/* Articoli, elenco e blocco "sblocca la guida". Solo variabili --sp-* e --fs-*. */
.articolo h1 { font:700 var(--fs-h2)/1.08 var(--display); letter-spacing:-.02em; margin:0 0 var(--sp-l); text-wrap:balance; }
.articolo h2 { margin-top:var(--sp-xl); }
.articolo ul, .articolo ol { padding-left:1.2em; margin:0 0 var(--sp-m); }
.articolo li { margin-bottom:var(--sp-xs); }
.articolo blockquote { margin:var(--sp-m) 0; padding:var(--sp-s) var(--sp-m); border-left:3px solid var(--accent); color:var(--muted); }
.meta { font:600 var(--fs-small)/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--sp-m); }
.meta a { color:var(--muted); }
.articoli { display:grid; gap:var(--sp-m); }
.articoli > * { max-width:none; }
.voce { display:block; background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:var(--sp-l); text-decoration:none; color:var(--text); }
.voce:hover { border-color:var(--accent-soft); }
.voce .meta { display:block; margin-bottom:var(--sp-s); }
.voce p { margin:0; color:var(--muted); }
.gate { margin:var(--sp-xl) 0; background:var(--raised); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:18px; padding:var(--sp-l); }
.gate .tag { font:600 var(--fs-small)/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); }
.gate h3 { margin-top:var(--sp-s); }
.gate p { color:var(--muted); }
.gate form.iscrizione { max-width:none; padding:0; border:0; background:none; }
.voci-home { display:grid; gap:var(--sp-m); margin-top:var(--sp-l); }
.social-pie { display:flex; flex-wrap:wrap; gap:var(--sp-s); margin-bottom:var(--sp-m); }
.articolo { padding-block:var(--sp-xxl); }
.colonna { max-width:calc(720px + 2 * clamp(16px,4vw,44px)); }
.colonna > * { max-width:none; }
.voci-home + p { margin-top:var(--sp-l); }