/* =====================================================================
   pronto.css — foglio di stile pubblico di «Pronto!» (Pronto Surprise)
   Palette UFFICIALE (decisione Luca 14/07/2026, opzione B, §22.1):
   blu #2D6CFF + arancione #FF7A18 su fondo scuro reale del sito.
   Accessibilità (§22.3): base 16px+, contrasto AA, pulsanti grandi, mobile-first.
   Nessuna risorsa esterna (CSP self, §34.1: zero tracker di terze parti).
   ---------------------------------------------------------------------
   NOTA FONT: il sito usa Space Grotesk / Inter / JetBrains Mono (OFL, self-hostabili).
   Qui si usano gli stack con fallback di sistema. Per il match tipografico esatto,
   inserire i .woff2 in assets/fonts/ e abilitare i @font-face commentati sotto.
   ===================================================================== */

/* @font-face { font-family:"Inter"; src:url("fonts/Inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
   @font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
   @font-face { font-family:"JetBrains Mono"; src:url("fonts/JetBrainsMono.woff2") format("woff2"); font-weight:400 700; font-display:swap; } */

:root{
  --bg:#03061A; --bg2:#060C26; --panel:#0A1330; --panel-2:#0d1838;
  --ink:#D7E2FF; --muted:#8294C0; --faint:#56689B; --white:#fff;
  --line:rgba(120,150,220,.16); --line-2:rgba(120,150,220,.28);
  --accento:#2D6CFF; --accento-hi:#5B9BFF; --accento-lo:#185FA5; --accento-soft:#9EC0FF;
  --caldo:#FF7A18; --caldo-hi:#FFA24D;
  --ok:#3ddc97; --ko:#ff6b6b;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --maxw:920px; --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  background:radial-gradient(1200px 640px at 50% -12%, #0b1638 0, var(--bg) 62%) fixed;
}
a{color:var(--accento-hi)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* --- intestazione brand --- */
.topbar{padding:22px 0 6px}
.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand img{height:44px; width:auto; display:block}
.brand .word{font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-1px}
.brand .word b{color:var(--caldo)}
.brand .tag{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--accento-hi); text-transform:uppercase; opacity:.9}
.status-dot{font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px}
.status-dot i{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); display:inline-block}

/* --- hero landing --- */
.hero{padding:26px 0 10px; text-align:center}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(34px,7vw,58px); line-height:1.02; margin:.1em 0 .18em; letter-spacing:-1.5px}
.hero h1 b{color:var(--caldo)}
.hero .lead{font-size:clamp(17px,2.6vw,21px); color:var(--muted); max-width:640px; margin:0 auto 6px}
.hero .sla{display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:9px 16px; border:1px solid var(--line-2);
  border-radius:999px; font-family:var(--mono); font-size:13px; color:var(--accento-hi); background:rgba(45,108,255,.08)}

/* --- card / wizard --- */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  border-radius:18px; padding:26px 28px; margin:22px 0; box-shadow:0 24px 70px rgba(0,0,0,.4)}
@media (max-width:560px){ .card{padding:20px 16px} }

.progress{display:flex; gap:10px; margin:2px 0 22px; flex-wrap:wrap}
.progress .p{flex:1; min-width:120px; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:14px}
.progress .p .n{font-family:var(--mono); font-weight:700; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex:none}
.progress .p.on{border-color:var(--accento); color:var(--accento-hi); background:rgba(45,108,255,.1)}
.progress .p.on .n{background:var(--accento); border-color:var(--accento); color:#eaf1ff}
.progress .p.done{color:var(--accento-soft); border-color:var(--accento-lo)}
.progress .p.done .n{background:var(--accento-lo); border-color:var(--accento-lo); color:#eaf1ff}

.step{display:block}
.step h2{font-family:var(--display); font-weight:700; font-size:21px; margin:0 0 4px; color:var(--white)}
.step .hint{color:var(--muted); font-size:14.5px; margin:0 0 18px}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.grid .full{grid-column:1 / -1}
@media (max-width:560px){ .grid{grid-template-columns:1fr} }

label{display:block; margin:0 0 6px; font-size:14.5px; color:var(--accento-soft); font-weight:500}
label .req{color:var(--caldo)}
.field{margin-bottom:4px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; padding:13px 14px; border-radius:11px; border:1px solid var(--line-2);
  background:#060c22; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.4}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:40px}
textarea{min-height:130px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accento); outline-offset:1px; border-color:var(--accento)}
.counter{font-family:var(--mono); font-size:12px; color:var(--faint); text-align:right; margin-top:4px}

.check{display:flex; align-items:flex-start; gap:11px; margin:12px 0; font-size:15px; color:var(--ink)}
.check input{width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--accento)}
.check a{color:var(--accento-hi)}

.file-drop{border:1px dashed var(--line-2); border-radius:12px; padding:16px; text-align:center; color:var(--muted); font-size:14px}
.file-drop input{color:var(--muted)}

/* --- pulsanti --- */
.actions{display:flex; justify-content:space-between; gap:12px; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border:0; border-radius:12px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:16px; text-decoration:none; transition:filter .15s}
.btn-primary{color:#eaf1ff; background:linear-gradient(180deg,var(--accento-hi),var(--accento-lo))}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{color:var(--ink); background:transparent; border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(120,150,220,.08)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* --- messaggi / captcha --- */
.alert{border-radius:12px; padding:13px 15px; margin:0 0 16px; font-size:14.5px}
.alert-ko{background:rgba(255,107,107,.12); border:1px solid var(--ko); color:#ffdada}
.alert-ok{background:rgba(61,220,151,.1); border:1px solid var(--ok); color:#cffff0}
.captcha{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#060c22; border:1px solid var(--line-2);
  border-radius:11px; padding:12px 14px; margin-top:6px}
.captcha .q{font-family:var(--mono); font-size:16px; color:var(--accento-hi)}
.captcha input{max-width:120px}

/* honeypot: invisibile agli umani */
.hp{position:absolute!important; left:-9999px!important; top:-9999px!important; width:1px; height:1px; overflow:hidden}

/* --- pagina esito / conferma --- */
.esito{text-align:center; padding:10px 0}
.esito .big{font-family:var(--display); font-size:26px; font-weight:800; margin:6px 0}
.codice{font-family:var(--mono); font-size:22px; color:var(--accento-hi); background:#060c22; border:1px dashed var(--accento);
  padding:10px 16px; border-radius:12px; display:inline-block; margin:10px 0; letter-spacing:1px}

/* --- contenuto testuale (privacy) --- */
.prose{font-size:16.5px}
.prose h2{font-family:var(--display); color:var(--white); font-size:22px; margin:26px 0 8px}
.prose h3{font-family:var(--display); color:var(--accento-soft); font-size:17px; margin:20px 0 6px}
.prose p,.prose li{color:var(--ink); opacity:.94}
.prose code{font-family:var(--mono); background:#060c22; padding:2px 6px; border-radius:6px; font-size:14px}

/* --- footer legale (§34.1) --- */
.footer{margin:40px 0 26px; padding-top:20px; border-top:1px solid var(--line); text-align:center;
  color:var(--faint); font-size:13.5px; line-height:1.9}
.footer b{color:var(--muted); font-weight:500}
.footer a{color:var(--muted)}
.footer .sep{opacity:.5; margin:0 6px}

/* --- v1.0.1 (18/07/2026): link ritorno al sito + titolo rotante + riga categorie --- */
.top-destra{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.back-sito{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; letter-spacing:.5px;
  color:var(--ink); text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:8px 14px;
  transition:border-color .15s, background .15s, color .15s}
.back-sito:hover{border-color:var(--caldo); background:rgba(255,122,24,.08); color:var(--white)}
.hero h1 .ruota{display:inline-block; white-space:nowrap;
  background:linear-gradient(90deg,var(--accento-hi),var(--caldo)) no-repeat 0 94%/100% 4px;
  padding-bottom:2px; transition:opacity .28s ease, transform .28s ease}
.hero h1 .ruota.giu{opacity:0; transform:translateY(.35em)}
.cats{margin:14px auto 0; max-width:680px; font-family:var(--mono); font-size:12.5px; letter-spacing:.6px;
  color:var(--faint); text-align:center; line-height:2}
.cats i{color:var(--caldo); font-style:normal; opacity:.75; margin:0 8px}
@media (max-width:560px){ .back-sito{padding:7px 12px; font-size:12px} }
@media (prefers-reduced-motion:reduce){ .hero h1 .ruota{transition:none} }