/* ---------------------------------------------------------------
   sito.css — home, personalizzatore e pagina segreta.
   Carta calda che galleggia sulla notte.
   --------------------------------------------------------------- */

.testata{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 0;
}
.marchio{
  font-family:var(--mano); font-size:1.5rem; color:#f0e7d3; text-decoration:none;
  display:flex; align-items:center; gap:.45em;
}
.marchio svg{ width:22px; height:22px; }
.lingue{ display:flex; gap:4px; }
.lingue button{
  font:500 .78rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  background:none; border:1.5px solid transparent; border-radius:999px;
  color:rgba(240,231,211,.55); padding:.5em .8em; cursor:pointer;
}
.lingue button[aria-pressed="true"]{ border-color:rgba(240,231,211,.4); color:#f0e7d3; }

/* ---------- home ------------------------------------------------------ */

.eroe{
  min-height:calc(100svh - 70px);
  display:grid; grid-template-rows:1fr auto;
  place-items:center; text-align:center;
  padding:24px 0 40px; gap:26px;
}
.eroe-palco{ position:relative; width:min(88vw, 380px); }

.eroe-titoli h1{
  font-family:var(--mano); font-weight:700;
  font-size:clamp(2.1rem, 7.5vw, 3.4rem);
  color:#f2e9d5; letter-spacing:.01em; margin-bottom:.15em;
}
.eroe-titoli .sotto{
  color:rgba(240,231,211,.72); max-width:34em; margin:0 auto 1.3em;
  font-size:clamp(.95rem, 2.6vw, 1.05rem);
}
.eroe-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* il foglio dimostrativo della home */
.mini-foglio{
  position:relative; margin:0 auto;
  width:100%; aspect-ratio:3/3.8;
  background:#f3ead4; border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 30px 80px -20px rgba(0,0,0,.8);
  padding:9% 10%;
  text-align:left;
  transform:rotate(-2deg);
  animation:eroe-fluttua 8.5s ease-in-out infinite;
  color:#26356f;
}
@keyframes eroe-fluttua{
  0%,100%{ transform:rotate(-2.4deg) translateY(0); }
  50%{ transform:rotate(-.8deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){ .mini-foglio{ animation:none; } }
.mini-foglio .strappo-bordo{
  position:absolute; left:0; top:0; bottom:0; width:16px;
  background:radial-gradient(circle at 0 8px, transparent 5px, #f3ead4 5.5px);
  background-size:16px 26px; background-position:0 6px;
  transform:translateX(-8px);
  display:none;
}
.mini-foglio .m-rigatura{
  position:absolute; inset:0; opacity:.5; border-radius:3px;
  background:repeating-linear-gradient(to bottom, transparent 0 28px, rgba(90,120,160,.34) 28px 29px);
  background-position:0 14%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0 10%, #000 15%);
          mask-image:linear-gradient(to bottom, transparent 0 10%, #000 15%);
}
.mini-foglio .m-luce{
  position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:
    linear-gradient(to top, rgba(255,150,55,.30), rgba(255,150,55,0) 58%),
    linear-gradient(to bottom, rgba(120,150,220,.11), rgba(120,150,220,0) 42%);
  mix-blend-mode:overlay;
}
.mini-foglio .m-grinze{
  position:absolute; inset:0; border-radius:3px; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='520'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.02' numOctaves='5' seed='11'/%3E%3CfeDiffuseLighting surfaceScale='2.4' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='125' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='400' height='520' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:cover; mix-blend-mode:multiply;
}
.mini-foglio .contenuto{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; }
.mini-foglio .m-domanda{
  font-family:'Caveat', cursive; font-weight:600;
  font-size:clamp(1.6rem, 6.4vw, 2.2rem); line-height:1.3; margin:8% 0 0;
}
.mini-caselle{ display:flex; gap:9%; margin-top:14%; }
.mini-caselle .mc{ display:flex; align-items:center; gap:.4em; font-family:'Caveat',cursive; font-size:clamp(1.2rem,4.6vw,1.6rem); }
.mini-caselle svg{ width:clamp(30px,9vw,40px); height:auto; overflow:visible; }
.mini-caselle path{ fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- sezioni ------------------------------------------------- */

.sezione{ padding:clamp(56px, 10vh, 110px) 0; }
.sezione .occhiello{ text-align:center; margin-bottom:.9em; }
.sezione h2{ text-align:center; color:#f0e7d3; margin-bottom:1.2em; }
.sezione h2 .mano{ color:#e8b06a; }

.passi{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:760px){ .passi{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.passo{
  padding:26px 24px 24px; position:relative;
  transform:rotate(var(--incl, 0deg));
}
.passo .numero{
  font-family:var(--mano); font-size:2.2rem; color:var(--rosa);
  line-height:1; margin-bottom:.35em;
}
.passo h3{ margin-bottom:.4em; }
.passo p{ color:var(--inchiostro-2); font-size:.95rem; margin:0; }

.dettagli{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:820px; margin-inline:auto; }
@media (max-width:640px){ .dettagli{ grid-template-columns:1fr; } }
.dettaglio{
  display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
}
.dettaglio .segno{ font-size:1.3rem; line-height:1.3; }
.dettaglio b{ display:block; font-weight:600; margin-bottom:.15em; }
.dettaglio p{ margin:0; font-size:.9rem; color:var(--inchiostro-2); }

.pie{
  text-align:center; color:rgba(240,231,211,.4); font-size:.8rem;
  padding:30px 0 40px;
}
.pie a{ color:rgba(240,231,211,.6); }

/* ---------- personalizzatore ----------------------------------------- */

.crea-corpo{ padding:26px 0 80px; }
.crea-testa{ text-align:center; margin:10px 0 30px; }
.crea-testa h1{ font-family:var(--mano); font-weight:700; color:#f2e9d5; font-size:clamp(1.9rem,6vw,2.8rem); }
.crea-testa p{ color:rgba(240,231,211,.65); margin:.4em auto 0; max-width:36em; }

.modulo{ display:grid; gap:18px; max-width:680px; margin-inline:auto; }
.scheda{ padding:24px 22px; }
.scheda > h3{
  font-family:var(--mano); font-size:1.45rem; color:var(--rosa);
  margin-bottom:.7em; display:flex; align-items:center; gap:.5em;
}
.scheda .campo{ margin-bottom:14px; }
.scheda .campo:last-child{ margin-bottom:0; }
.due{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .due{ grid-template-columns:1fr; } }

.gettoni{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.gettone{
  font:400 .85rem/1 var(--sans); padding:.55em .9em;
  background:rgba(29,36,51,.05); border:1.5px solid rgba(29,36,51,.16);
  border-radius:999px; cursor:pointer; color:var(--inchiostro-2);
  transition:all .15s ease;
}
.gettone:hover{ border-color:var(--inchiostro); color:var(--inchiostro); transform:rotate(-.6deg); }

.scelte{ display:flex; flex-wrap:wrap; gap:8px; }
.scelta{ position:relative; }
.scelta input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.scelta span{
  display:inline-block; font:500 .85rem/1 var(--sans);
  padding:.6em 1em; border:1.5px solid rgba(29,36,51,.2); border-radius:999px;
  color:var(--inchiostro-2); transition:all .15s ease; cursor:pointer;
}
.scelta input:checked + span{ background:var(--inchiostro); color:var(--crema); border-color:var(--inchiostro); }
.scelta input:focus-visible + span{ outline:3px solid var(--rosa); outline-offset:2px; }

.crea-azioni{
  position:sticky; bottom:0; z-index:5;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(7,10,20,.92) 60%, transparent);
  margin-top:6px;
}

.velo-anteprima{
  position:fixed; inset:0; z-index:60; background:#05070f;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.velo-anteprima.aperto{ opacity:1; pointer-events:auto; }
.chiudi-anteprima{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); left:12px; z-index:70;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18);
  color:#e8dfd0; font-size:1.2rem; cursor:pointer;
}

.errore-modulo{
  color:#ffb3a7; text-align:center; font-size:.9rem; min-height:1.4em; margin-top:10px;
}

/* ---------- pagina segreta ------------------------------------------- */

.lui-corpo{ padding:26px 0 80px; max-width:680px; margin-inline:auto; }
.lui-testa{ text-align:center; margin:8px 0 26px; }
.lui-testa h1{ font-family:var(--mano); font-weight:700; color:#f2e9d5; font-size:clamp(1.8rem,6vw,2.6rem); }
.lui-testa .stato-riga{ margin-top:.5em; color:rgba(240,231,211,.6); font-size:.9rem; }

.blocco{ padding:22px; margin-bottom:16px; }
.blocco h3{ font-family:var(--mano); font-size:1.4rem; color:var(--rosa); margin-bottom:.6em; }

.riga-link{
  display:flex; gap:8px; align-items:center;
  background:rgba(29,36,51,.05); border:1.5px dashed rgba(29,36,51,.25);
  border-radius:10px; padding:10px 12px;
}
.riga-link code{
  flex:1; font:500 .88rem/1.4 ui-monospace, monospace; color:var(--inchiostro);
  word-break:break-all;
}
.mini-btn{
  font:500 .8rem/1 var(--sans); padding:.6em .9em; border-radius:999px;
  border:1.5px solid var(--inchiostro); background:var(--inchiostro); color:var(--crema);
  cursor:pointer; white-space:nowrap;
}
.mini-btn.vuoto{ background:transparent; color:var(--inchiostro); }
body.notte .pannello a.mini-btn{ color:var(--crema); text-decoration:none; }
body.notte .pannello a.mini-btn.vuoto{ color:var(--inchiostro); }
.mini-btn:disabled{ opacity:.5; }

.condividi{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.cronologia{ list-style:none; margin:0; padding:0; }
.cronologia li{
  display:flex; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(29,36,51,.12);
  font-size:.92rem; align-items:baseline;
}
.cronologia li:last-child{ border-bottom:0; }
.cronologia .quando{ color:var(--tenue); font-size:.78rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cronologia .cosa{ flex:1; }
.cronologia li.viva{ animation:entra-ev .5s ease; }
@keyframes entra-ev{ from{ opacity:0; transform:translateX(-8px); } }

.attesa-battito{ color:var(--tenue); font-size:.9rem; display:flex; align-items:center; gap:.5em; }
.attesa-battito .pallino{
  width:8px; height:8px; border-radius:50%; background:var(--rosa);
  animation:battito 1.6s ease-in-out infinite;
}
@keyframes battito{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.5); opacity:1; } }

.esito{ text-align:center; padding:26px 22px; }
.esito .verdetto{ font-family:var(--mano); font-weight:700; font-size:3rem; line-height:1; }
.esito.si .verdetto{ color:#1d7a4f; }
.esito.no .verdetto{ color:var(--rosso); }
.esito .quando-verdetto{ color:var(--tenue); font-size:.85rem; margin-top:.4em; }
.esito .messaggio-lei{
  font-family:'Caveat',cursive; font-size:1.5rem; line-height:1.3; color:var(--biro);
  margin-top:.8em; padding-top:.8em; border-top:1px dashed rgba(29,36,51,.15);
}

.azioni-lui{ display:flex; gap:8px; flex-wrap:wrap; }

.avviso-segreto{
  font-size:.82rem; color:var(--inchiostro-2); background:#fff7df;
  border:1.5px solid rgba(185,139,62,.4); border-radius:10px; padding:10px 12px; margin-top:10px;
}

.velo-replay{ position:fixed; inset:0; z-index:60; background:#05070f; display:none; }
.velo-replay.aperto{ display:block; }