/* I colori sono quelli VERI di FAMPREP (SAT/app/app.css): copiati, non
   scelti. Se un giorno l'app di FE prende questa faccia, questi valori
   sono gia' quelli giusti e non ci sara' una seconda tavolozza in giro. */
:root{
  --bg:#0A0F1E; --panel-a:#101527; --panel-b:#0A0E1B;
  --ink:#EDEDED; --muted:#9CA3AF; --faint:#6B7280;
  --navy:#0B1D3A;
  --gold:#C8972D; --gold-hi:#E3BC63; --gold-pale:#F2DCA8;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.05);
  --good:#34D399; --good-deep:#1F7E52; --bad:#F87171;
  --paper:#FBFBF7; --paper-line:#E4E2D8; --paper-ink:#1B2437; --paper-muted:#5C6478;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; min-height:100dvh;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* la colonna: telefono prima di tutto, comoda anche da desktop */
.col{max-width:520px; margin:0 auto; padding:0 20px calc(40px + var(--sab));}

/* ── testata ─────────────────────────────────────────────── */
.top{display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--panel-b); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;}
.seal{width:26px; height:26px; border-radius:50%; background:linear-gradient(150deg,var(--gold-hi),var(--gold)); flex:0 0 auto;}
.top b{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); font-weight:600;}
.top .right{margin-left:auto; font-size:12px; color:var(--faint);}

/* ── tipografia ──────────────────────────────────────────── */
.kick{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600;}
h1{font-size:29px; line-height:1.14; letter-spacing:-.018em; font-weight:800; margin:8px 0 10px; text-wrap:balance;}
h2{font-size:21px; line-height:1.2; letter-spacing:-.014em; font-weight:700; margin:0 0 8px;}
p.lead{color:var(--muted); font-size:16px; line-height:1.55;}
p.small{color:var(--faint); font-size:13.5px; line-height:1.5;}

/* ── bottoni ─────────────────────────────────────────────── */
.btn{display:block; width:100%; text-align:center; padding:16px 18px; border:0; border-radius:999px;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold)); color:#241B06;
  font:700 16px var(--sans); letter-spacing:.01em; cursor:pointer; margin-top:14px;
  transition:transform .12s ease, filter .12s ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink); font-weight:600;}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-hi); filter:none;}
.btn:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px;}

/* ── scheda del pacchetto ────────────────────────────────── */
.pack{margin-top:18px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel-a);}
.pack .riga{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:14.5px;}
.pack .riga:last-child{border-bottom:0}
.pack .riga span:last-child{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.pack .riga em{display:block; font-style:normal; font-size:12.5px; color:var(--faint); margin-top:2px;}
.pack .tot{background:rgba(200,151,45,.10); font-weight:700;}
.pack .tot span:last-child{color:var(--gold-hi)}
.pack .free{background:rgba(52,211,153,.08); font-weight:700;}
.pack .free span:last-child{color:var(--good)}

/* ── passi numerati ──────────────────────────────────────── */
ol.passi{list-style:none; counter-reset:p; margin-top:18px;}
ol.passi li{counter-increment:p; position:relative; padding-left:38px; margin-bottom:13px; color:var(--muted); font-size:14.5px; line-height:1.5;}
ol.passi li b{color:var(--ink); font-weight:600;}
ol.passi li::before{content:counter(p); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(200,151,45,.5); color:var(--gold-hi); font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center;}

/* ── campo ───────────────────────────────────────────────── */
.campo{width:100%; margin-top:12px; padding:15px 16px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--ink); font:16px var(--sans);}
.campo::placeholder{color:var(--faint)}
.campo:focus{outline:none; border-color:rgba(200,151,45,.6)}

/* ── lettore ─────────────────────────────────────────────── */
.pagine{background:#0A0E1B; padding:14px 12px 0;}
/* la pagina non puo' MAI essere piu' larga dello schermo: senza width:100%
   la max-width della classe batte quella generica su img e il telefono
   scorre di lato. Trovato su staging il 12 set, a 430px. */
.pagina{width:100%; max-width:520px; height:auto; background:var(--paper); border-radius:3px; margin:0 auto 12px; box-shadow:0 4px 16px rgba(0,0,0,.35);}
.velo{position:relative;}
.velo::after{content:""; position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(to bottom, rgba(10,14,27,0), var(--bg) 76%); pointer-events:none;}
.fine{position:relative; z-index:2; margin-top:-90px; padding:0 20px 28px; text-align:center;}
.fine h2{margin-bottom:6px}

/* ── porte del muro ──────────────────────────────────────── */
.porta{margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:18px 17px; background:var(--panel-a);}
.porta.prima{border-color:rgba(200,151,45,.55); background:linear-gradient(180deg, rgba(200,151,45,.10), rgba(200,151,45,.02));}
.porta .et{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.porta h2{margin:6px 0 10px; font-size:19px;}
.porta ul{list-style:none; margin:0;}
.porta li{position:relative; padding-left:20px; margin-bottom:7px; color:var(--muted); font-size:14.5px; line-height:1.45;}
.porta li::before{content:""; position:absolute; left:3px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.porta .note{margin-top:10px; font-size:13.5px; color:var(--gold-pale);}

/* ── esiti ───────────────────────────────────────────────── */
.esito{margin-top:20px; border-radius:14px; padding:18px 17px; border:1px solid;}
.esito.ok{background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.42);}
.esito.attesa{background:rgba(227,188,99,.10); border-color:rgba(227,188,99,.42);}
.esito h2{margin-bottom:6px}
.esito p{color:var(--muted); font-size:14.5px;}
.bollo{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:12px;}
.esito.ok .bollo{background:rgba(52,211,153,.16); color:var(--good);}
.esito.attesa .bollo{background:rgba(227,188,99,.16); color:var(--gold-hi);}

/* ── area di carico ──────────────────────────────────────── */
.carico{margin-top:18px; border:1px dashed rgba(255,255,255,.22); border-radius:14px; padding:38px 20px; text-align:center; background:rgba(255,255,255,.02);}
.carico .ic{font-size:30px; color:var(--gold); line-height:1;}

/* ── guide di Amazon ─────────────────────────────────────── */
.guide{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px;}
.guida{border:1px solid var(--line); border-radius:10px; padding:9px; background:var(--panel-a);}
.guida .fin{background:#F2F3F5; border-radius:6px; height:64px; position:relative; overflow:hidden;}
.guida p{margin-top:7px; font-size:11.5px; color:var(--muted); text-align:center;}
.guida .l{position:absolute; left:7px; right:7px; height:5px; border-radius:3px; background:#D6DAE1;}
.guida .st{position:absolute; left:7px; color:#E8A317; font-size:10px; letter-spacing:1px;}
.guida .ok{position:absolute; left:7px; top:7px; color:#1F7E52; font-size:9px; font-weight:700;}

/* ── barra di prova, solo su staging ─────────────────────── */
.prova{position:fixed; left:0; right:0; bottom:0; z-index:50; background:#161A26; border-top:1px solid var(--line);
  padding:9px 14px calc(9px + var(--sab)); display:flex; align-items:center; gap:12px; font-size:12px; color:var(--faint);}
.prova b{color:var(--gold-hi); font-weight:600; letter-spacing:.08em; font-size:10.5px; text-transform:uppercase;}
.prova a{margin-left:auto; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12px;}
.prova a:hover{border-color:var(--gold); color:var(--gold-hi)}
body{padding-bottom:56px}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }