/* ============================================================
   UpZid — solo per il sito pubblico
   ============================================================ */

.nav-sito{
  position:sticky;top:0;z-index:40;
  background:var(--nav);
  border-bottom:1px solid var(--ln);
  backdrop-filter:blur(16px) saturate(1.4);
}
.nav-interna{
  max-width:1080px;margin:0 auto;padding:0 var(--s6);
  height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--s5);
}
.nav-voci{display:flex;gap:var(--s5);margin-left:var(--s5);}
.nav-voci a{
  font-size:var(--t-xs);font-weight:600;color:var(--mu);
  text-decoration:none;padding:var(--s2) 0;position:relative;
}
.nav-voci a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--dec-piano);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--ease);
}
.nav-voci a:hover{color:var(--tx);}
.nav-voci a:hover::after{transform:scaleX(1);}
.nav-azioni{margin-left:auto;display:flex;align-items:center;gap:var(--s2);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:var(--s9) 0 var(--s9);
  overflow:hidden;
}
/* la macchia arancione che respira: l'unico movimento d'ambiente
   della pagina, confinato all'hero e spento con prefers-reduced-motion */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% 8%, color-mix(in srgb,var(--A) 17%,transparent), transparent 62%),
    radial-gradient(620px 380px at 12% 28%, color-mix(in srgb,var(--B) 13%,transparent), transparent 62%);
  animation:respiro 22s ease-in-out infinite;
}
@keyframes respiro{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.95;}
  50%{transform:translate3d(-1.5%,1.5%,0) scale(1.05);opacity:1;}
}
.hero > *{position:relative;z-index:1;}

.hero-griglia{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:var(--s8);align-items:center;
}
.hero-testo h1{max-width:17ch;margin-bottom:0;}
.sotto-titolo{
  display:block;width:72px;height:4px;border-radius:var(--pill);
  background:var(--gradiente);margin:var(--s4) 0 var(--s5);
}
.hero-occhiello{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--pill);
  border:1px solid color-mix(in srgb,var(--dec-piano) 34%,var(--ln));
  background:var(--cs);box-shadow:var(--ombra-1);
  margin-bottom:var(--s5);color:var(--dec);
}
.hero-occhiello .punto{
  width:7px;height:7px;border-radius:var(--pill);background:var(--dec-piano);
  animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dec-piano) 45%,transparent);}
  60%{box-shadow:0 0 0 7px transparent;}
}
.hero .guida{margin-bottom:var(--s5);}
.hero-azioni{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3);}

/* ---------- la dimostrazione ---------- */
.dimostrazione{
  background:var(--cs);
  border:1px solid var(--ln);
  border-radius:var(--r);
  box-shadow:var(--ombra-3);
  overflow:hidden;
}
.dim-testa{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border-bottom:1px solid var(--ln);background:var(--card);
}
.dim-pallino{
  width:9px;height:9px;flex:none;margin-top:5px;border-radius:var(--pill);
  background:var(--gradiente);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--A) 16%,transparent);
}
.dim-titolo{font-size:var(--t-sm);font-weight:700;}
.dim-sotto{font-size:var(--t-xs);color:var(--mu);}
.dim-chips{padding:var(--s3) var(--s4);border-bottom:1px solid var(--ln);}
.dim-dialogo{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.dim-dialogo .battuta{margin:0;}
.dim-dialogo .testo{display:block;min-height:1.6em;}
.dim-dialogo #dim-frase::after{
  content:"";display:inline-block;width:2px;height:1em;vertical-align:-2px;
  margin-left:2px;background:currentColor;animation:lampeggia 1s steps(1) infinite;
}
@keyframes lampeggia{50%{opacity:0;}}
.dimostrazione .albero{border:0;border-radius:0;border-top:1px solid var(--ln);}

/* ---------- le tre situazioni ---------- */
.situazione{display:flex;flex-direction:column;gap:var(--s3);}
.sit-segno{
  width:36px;height:36px;border-radius:var(--rb);
  display:grid;place-items:center;
  background:var(--dec-bg);color:var(--dec);
  border:1px solid color-mix(in srgb,var(--dec-piano) 26%,transparent);
}
.sit-segno svg{width:18px;height:18px;}
.situazione h3{font-size:var(--t-lead);line-height:1.35;}
.situazione p{font-size:var(--t-sm);color:var(--mu);}

/* ---------- confronto ---------- */
.confronto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4);margin-top:var(--s6);}
.confronto-col h3{font-size:var(--t-lead);margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--ln);}
.confronto-col li{position:relative;padding-left:var(--s5);margin-bottom:var(--s3);font-size:var(--t-sm);color:var(--mu);}
.confronto-col li:last-child{margin-bottom:0;}
.confronto-col li::before{
  content:"";position:absolute;left:0;top:.68em;width:12px;height:1px;background:var(--ln-forte);
}
.confronto--upzid{
  border-color:color-mix(in srgb,var(--dec-piano) 34%,var(--ln));
  background:linear-gradient(180deg,var(--dec-bg),transparent 55%),var(--cs);
}
.confronto--upzid li{color:var(--tx);}
.confronto--upzid li::before{
  top:.45em;width:9px;height:5px;background:none;
  border:solid var(--dec-piano);border-width:0 0 2px 2px;transform:rotate(-45deg);
}

/* ---------- tipi di percorso ---------- */
.tipo-percorso{display:flex;flex-direction:column;gap:var(--s3);}
.tipo-percorso h3{font-size:var(--t-h3);}
.tipo-percorso p{font-size:var(--t-sm);color:var(--mu);}
.tipo-percorso--for{border-top:3px solid var(--for-piano);}
.tipo-percorso--dec{border-top:3px solid var(--dec-piano);}
.esempio{
  border-top:1px solid var(--ln);padding-top:var(--s3);margin-top:auto;
  font-size:var(--t-sm);color:var(--mu);
}
.esempio strong{color:var(--tx);}

/* ---------- lista d'attesa ---------- */
.zona--lista{
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--A) 12%,transparent), transparent 55%),
    var(--zona);
  box-shadow:var(--ombra-2);
}
.modulo-lista{max-width:440px;}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* la spina del sito vive sul fondo pagina */
.sezione .nodo{background:var(--bg);}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-griglia{grid-template-columns:1fr;gap:var(--s7);}
  .hero-testo h1{max-width:22ch;}
  .nav-interna{padding:0 var(--s5);}
  .nav-voci{gap:var(--s4);}
}
@media (max-width:860px){
  .nav-voci{display:none;}
}
@media (max-width:768px){
  .hero{padding:var(--s7) 0 var(--s8);}
  .nav-interna{padding:0 var(--s4);}
  .hero-azioni .btn{width:100%;}
  .dim-dialogo{padding:var(--s3);}
}

/* ---------- piede: contatti, pagine legali, social ---------- */
.piede-riga{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  justify-content:space-between;align-items:center;
}
.social{display:flex;gap:var(--s2);align-items:center;}
.social-btn{
  width:44px;height:44px;border-radius:var(--rb);
  border:1px solid var(--ln);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--mu);transition:var(--ease);
}
.social-btn:hover{
  color:var(--dec);border-color:var(--ln-forte);
  background:var(--cs);transform:translateY(-1px);
}
.social-btn svg{width:18px;height:18px;fill:currentColor;}
@media (max-width:640px){
  .piede-riga{justify-content:flex-start;}
  .social{width:100%;}
}

/* ---------- rilievo dei blocchi: appena percettibile ----------
   Un blocco sì e uno no cambia superficie. Non è decorazione: serve
   a far capire dove finisce un discorso e ne comincia un altro. */
.sezione--rilievo{
  background:var(--zona-spazio);
  border-top:1px solid var(--zona-spazio-bordo);
  border-bottom:1px solid var(--zona-spazio-bordo);
}
.sezione--rilievo + .sezione{border-top:0;}

/* le due forme di percorso portano la loro tinta, come nell'applicazione:
   è qui che il codice colore si impara, prima ancora di entrare */
.tipo-percorso--for{background:var(--zona-capire);border-color:var(--zona-capire-bordo);}
.tipo-percorso--dec{background:var(--zona-decidere);border-color:var(--zona-decidere-bordo);}
.tipo-percorso--for .esempio,.tipo-percorso--dec .esempio{border-top-color:rgba(15,22,32,.12);}
html[data-theme="dark"] .tipo-percorso--for .esempio,
html[data-theme="dark"] .tipo-percorso--dec .esempio{border-top-color:rgba(255,255,255,.12);}

/* ---------- il blocco di Zid ---------- */
.sezione--zid{background:var(--zona-decidere);
  border-top:1px solid var(--zona-decidere-bordo);
  border-bottom:1px solid var(--zona-decidere-bordo);}
.sezione--zid + .sezione{border-top:0;}
.zid-presentazione{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:var(--s7);align-items:center;
}
.zid-parole h2{font-size:var(--t-h2);margin:var(--s2) 0 var(--s3);}
.zid-parole .guida{margin-bottom:var(--s4);max-width:58ch;}
.zid-cose{display:grid;gap:var(--s3);max-width:58ch;}
.zid-cose li{
  font-size:var(--t-sm);color:var(--mu);line-height:1.65;
  padding-left:var(--s4);position:relative;
}
.zid-cose li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--dec-piano);transform:rotate(45deg);
}
.zid-cose strong{color:var(--tx);}
@media (max-width:820px){
  .zid-presentazione{grid-template-columns:1fr;gap:var(--s5);}
  .zid-presentazione .zid-scena{max-width:280px;}
}

/* il pill non si allarga quanto la scheda */
.tipo-percorso .pill{align-self:flex-start;}