/* Reportly — foglio di stile condiviso: index.html, privacy.html, termini.html
   come-si-usa.html NON usa questo file: ha variabili e classi proprie. */

*{ margin:0; padding:0; box-sizing:border-box; }

:root{ --bg:#0e1116; --fg:#f5f6f7; --muted:#8b93a0; --soft:#e7e9ec;
       --accent:#3b82f6; --line:rgba(255,255,255,0.10); --card:rgba(255,255,255,0.035);
       --label:#8b93a0; --velo:rgba(14,17,22,0.78); --ombra:rgba(0,0,0,0.45);
       --errore:#f2837b; }

@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#14171c; --muted:#6b7280; --soft:#3a424f;
         --accent:#2563eb; --line:#e2e5ea; --card:#f6f7f9;
         --label:#2563eb; --velo:rgba(255,255,255,0.82); --ombra:rgba(16,24,40,0.10);
         --errore:#b3261e; }
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:18px;
}

.wrap{ max-width:720px; margin:0 auto; padding:0 24px; }

/* ---------- Testata fissa ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--velo);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, padding .25s ease;
  padding:20px 0;
}
header.staccata{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px var(--ombra); padding:12px 0; }
.testata{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.logo{ height:30px; width:auto; display:block; transition:height .25s ease; }
header.staccata .logo{ height:26px; }

nav.menu{ display:flex; flex-wrap:wrap; gap:22px; font-size:15px; }
nav.menu a{
  position:relative; color:var(--muted); text-decoration:none;
  padding-bottom:3px; transition:color .2s ease;
}
nav.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
nav.menu a:hover{ color:var(--fg); }
nav.menu a:hover::after,
nav.menu a.attiva::after{ transform:scaleX(1); }
nav.menu a.attiva{ color:var(--fg); }

/* ---------- Apertura della home ---------- */
.hero{ padding:72px 0 76px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:30px; line-height:1.35; font-weight:600; letter-spacing:-0.4px; color:var(--fg); }
.hero .mail{ margin-top:28px; }
.hero .sotto{ font-size:15px; color:var(--muted); margin-top:14px; }

/* ---------- Apertura delle pagine di testo ---------- */
.title{ padding:48px 0 40px; border-bottom:1px solid var(--line); }
.title h1{ font-size:34px; line-height:1.2; font-weight:700; letter-spacing:-0.6px; }
.updated{ margin-top:14px; font-size:15px; color:var(--muted); }

/* ---------- Corpo ---------- */
section{ padding:56px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }

h2{ font-size:14px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--label); margin-bottom:24px; }
h3{ font-size:19px; font-weight:700; color:var(--fg); margin:26px 0 8px; }
p{ color:var(--soft); margin-bottom:18px; }
p:last-child{ margin-bottom:0; }
ul{ margin:0 0 16px 22px; color:var(--soft); }
li{ margin-bottom:10px; }
li:last-child{ margin-bottom:0; }
strong{ color:var(--fg); font-weight:700; }
section a{ color:var(--accent); }

.step{ margin-bottom:30px; }
.step:last-child{ margin-bottom:0; }
.step-title{ font-weight:700; color:var(--fg); margin-bottom:6px; }
.step-title .n{ color:var(--accent); margin-right:8px; }

.mail{
  display:inline-block; margin-top:10px; padding:16px 26px;
  background:var(--accent); color:#fff !important; text-decoration:none;
  border-radius:10px; font-weight:700; font-size:19px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 30px -14px var(--accent);
}
.mail:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px var(--accent); }
.mail:active{ transform:translateY(0); }

.note{ background:var(--card); border:1px solid var(--line); border-radius:12px;
       padding:22px 24px; }
.note p{ font-size:16px; color:var(--muted); }

footer{ padding:48px 0 64px; font-size:14px; color:var(--muted); letter-spacing:0.5px; }
footer a{ color:var(--soft); text-decoration:none; border-bottom:1px solid var(--line);
          transition:color .2s ease, border-color .2s ease; }
footer a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.foot-sep{ margin:0 10px; color:var(--line); }

/* ---------- Comparse ----------
   La classe .js la mette lo script: senza JavaScript non si nasconde niente. */
html.js .rivela{ opacity:0; transform:translateY(16px); }
html.js .rivela.dentro{
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
html.js .rivela.ritardo1.dentro{ transition-delay:.06s; }
html.js .rivela.ritardo2.dentro{ transition-delay:.12s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .rivela{ opacity:1 !important; transform:none !important; }
}

@media (max-width:600px){
  body{ font-size:17px; }
  .hero h1{ font-size:24px; }
  .title h1{ font-size:28px; }
  .hero{ padding:56px 0 60px; }
  section{ padding:46px 0; }
  .testata{ gap:14px; }
  nav.menu{ gap:18px; font-size:14px; width:100%; }
  html{ scroll-padding-top:120px; }
}

.scheda{ max-width:520px; width:100%; text-align:center; }
.scheda .logo{ height:30px; width:auto; margin:0 auto 32px; }
.scheda h1{ font-size:26px; font-weight:600; line-height:1.3; letter-spacing:-0.3px;
            margin-bottom:16px; color:var(--fg); }
.scheda p{ color:var(--soft); margin-bottom:24px; }
.scheda p:last-child{ margin-bottom:0; }
.scheda .nota{ text-align:left; background:var(--card); border:1px solid var(--line);
               border-radius:12px; padding:20px 22px; margin-bottom:30px; }
.scheda .nota p{ font-size:15px; color:var(--muted); margin-bottom:0; }
.scheda .nota strong{ color:var(--fg); font-weight:700; }
.scheda .coda{ font-size:13px; color:var(--muted); margin-top:22px; }
.scheda .errore{ color:var(--errore); }

a.pulsante{
  display:inline-block; padding:15px 26px; border-radius:10px;
  background:var(--accent); color:#fff !important; text-decoration:none;
  font-weight:700; font-size:17px;
  box-shadow:0 10px 30px -14px var(--accent);
  transition:transform .2s ease, box-shadow .2s ease;
}
a.pulsante:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px var(--accent); }
a.pulsante:active{ transform:translateY(0); }

/* Rotella dell'attesa: sta dentro #azione, quindi lo script la sostituisce
   da solo con il pulsante quando arriva l'esito. */
.rotella{
  display:inline-block; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:gira .8s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rotella{ animation:none; } }