/* ============================================================
   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(--s4);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;}

/* ============================================================
   Articoli (5.3): elenco cronologico e pagina di lettura.
   Una pagina da leggere, non da guardare: una colonna, testo
   scuro su fondo chiaro, l'arancio pieno solo sul bottone finale.
   ============================================================ */
/* «Articoli» è un'altra pagina, non un punto di questa: sta accanto al
   bottone, resta visibile anche da telefono, e le ancore non vanno a capo */
.nav-voci a{white-space:nowrap;}
.nav-pagina{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);
  font-size:var(--t-xs);font-weight:600;color:var(--mu);text-decoration:none;
  white-space:nowrap;position:relative;
}
.nav-pagina:hover,.nav-pagina[aria-current="page"]{color:var(--tx);}
.nav-pagina[aria-current="page"]::after{
  content:"";position:absolute;left:var(--s2);right:var(--s2);bottom:8px;height:2px;
  background:var(--dec-piano);border-radius:2px;
}
@media (max-width:1140px){ .nav-voci{display:none;} }

.pagina-articoli{padding-top:var(--s8);}
.pagina-testa{margin-bottom:var(--s5);max-width:66ch;}
/* titoli di pagina e di articolo: sui telefoni i 40px della scala
   spezzano un titolo lungo in cinque righe, quindi scendono fino a 28 */
.pagina-testa h1,.articolo-testa h1{font-size:clamp(28px,3.2vw + 16px,40px);line-height:1.15;}
.pagina-testa h1{margin-bottom:var(--s3);}

.briciole{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
  margin-bottom:var(--s5);
}
.briciole a{color:var(--mu);text-underline-offset:3px;}
.briciole a:hover{color:var(--tx);}

/* filtro per tema: link veri, ognuno con il suo indirizzo */
.temi-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s6);}
.temi-etichetta{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);margin-right:var(--s1);}
.tema-chip{
  display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);
  border:1px solid var(--ln);border-radius:var(--pill);background:var(--cs);
  font-size:var(--t-xs);font-weight:600;color:var(--mu);text-decoration:none;
  transition:color var(--ease),border-color var(--ease);
}
.tema-chip:hover{color:var(--tx);border-color:var(--ln-forte);}
.tema-chip[aria-current="page"]{color:var(--tx);border-color:var(--tx);}

/* l'elenco: data a sinistra in monospazio, come un registro */
.elenco-articoli{border-top:1px solid var(--ln);}
.voce-articolo{
  position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);
  gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--ln);
}
.voce-data{font-family:var(--mono);font-size:var(--t-xs);color:var(--mu);padding-top:3px;white-space:nowrap;}
.voce-titolo{font-size:var(--t-h3);line-height:1.3;margin-bottom:var(--s2);}
.voce-titolo a{color:var(--tx);text-decoration:none;}
.voce-titolo a::after{content:"";position:absolute;inset:0;}
.voce-titolo a:focus-visible{outline:none;}
.voce-articolo:focus-within{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--rb);}
.voce-articolo:hover .voce-titolo a{
  text-decoration:underline;text-decoration-color:var(--dec-piano);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.voce-sommario{font-size:var(--t-sm);color:var(--mu);line-height:1.65;max-width:62ch;}
.voce-meta{margin-top:var(--s2);font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);}
.elenco-coda{margin-top:var(--s5);font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);}
.elenco-coda a{color:var(--tx);text-underline-offset:3px;}
#articoli .elenco-coda{font-family:inherit;}
#articoli .elenco-coda .btn--quieto{margin-left:calc(-1 * var(--s4));}
.vuoto-articoli{padding:var(--s5);border:1px dashed var(--ln-forte);border-radius:var(--rs);color:var(--mu);font-size:var(--t-sm);}
.vuoto-articoli strong{color:var(--tx);}
.vuoto-articoli a{color:var(--tx);}

/* ---------- la pagina dell'articolo ---------- */
.articolo{--misura:680px;padding:var(--s8) 0 var(--s9);}
.articolo-testa{max-width:var(--misura);margin-bottom:var(--s7);padding-bottom:var(--s6);border-bottom:1px solid var(--ln);}
.articolo-testa h1{margin-bottom:var(--s4);}
.articolo-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);margin-bottom:var(--s5);
}
.articolo-meta span + span::before{content:"·";margin-right:var(--s3);}
.articolo-sommario{font-size:18px;line-height:1.6;color:var(--mu);max-width:62ch;}

.prosa{max-width:var(--misura);font-size:var(--t-lead);line-height:1.8;}
.prosa > * + *{margin-top:var(--s4);}
.prosa h2{font-size:var(--t-h2);line-height:1.3;margin-top:var(--s7);}
.prosa h3{font-size:var(--t-h3);margin-top:var(--s6);}
.prosa h2 + *,.prosa h3 + *{margin-top:var(--s3);}
.prosa ul,.prosa ol{padding-left:var(--s5);}
.prosa ul{list-style:disc;}
.prosa ol{list-style:decimal;}
.prosa li + li{margin-top:var(--s2);}
.prosa li::marker{color:var(--mu);}
.prosa strong{font-weight:700;}
.prosa a{color:var(--tx);text-decoration-color:var(--dec-piano);text-underline-offset:3px;}
.prosa blockquote{border-left:3px solid var(--ln-forte);padding-left:var(--s4);color:var(--mu);}
.prosa .prosa-nota{font-size:var(--t-sm);color:var(--mu);padding-top:var(--s4);border-top:1px solid var(--ln);margin-top:var(--s6);}

/* la chiusa decisionale: la stessa tinta dell'app, con parola e forma */
.chiusa-decisionale{
  max-width:var(--misura);margin-top:var(--s7);padding:var(--s4) var(--s5);
  background:var(--zona-decidere);border:1px solid var(--zona-decidere-bordo);border-radius:var(--rs);
}
.chiusa-etichetta{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s2);
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--dec);
}
.chiusa-etichetta::before{
  content:"";width:8px;height:8px;border:1.5px solid currentColor;border-radius:2px;transform:rotate(45deg);
}
.chiusa-testo{font-size:var(--t-lead);font-weight:600;line-height:1.55;}

.invito-articolo{
  max-width:var(--misura);margin-top:var(--s6);padding:var(--s5);
  display:flex;gap:var(--s5);align-items:center;justify-content:space-between;
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);box-shadow:var(--ombra-1);
}
.invito-titolo{font-weight:700;margin-bottom:var(--s1);}
.invito-testo{font-size:var(--t-sm);color:var(--mu);line-height:1.6;}
.invito-articolo .btn{flex:none;}

.articoli-vicini{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:var(--misura);margin-top:var(--s7);}
a.vicino{display:flex;flex-direction:column;gap:var(--s1);min-height:44px;}
.vicino--prima{text-align:right;}
.vicino-verso{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);}
.vicino-titolo{font-size:var(--t-sm);font-weight:600;line-height:1.4;color:var(--tx);}

@media (max-width:768px){
  .tema-chip{min-height:44px;}
  .pagina-articoli,.articolo{padding-top:var(--s6);}
  .invito-articolo{flex-direction:column;align-items:stretch;}
  .invito-articolo .btn{width:100%;}
}
@media (max-width:640px){
  .voce-articolo{grid-template-columns:1fr;gap:var(--s1);}
  .articoli-vicini{grid-template-columns:1fr;}
  .vicino--prima{text-align:left;}
  .vicino-vuoto{display:none;}
  .articolo-sommario{font-size:var(--t-lead);}
}
.paginazione{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);}