/* ============================================================
   UpZid — Fondamenta V3
   Token, superfici, tipografia, impaginato.
   Rispetto alla V2: più superficie e più profondità. Ogni zona
   ha un contenitore riconoscibile; niente testo appoggiato sul
   fondo pagina. Le ombre sono morbide e multi-livello, i raggi
   12-16px, le transizioni 200-260ms.
   ============================================================ */

/* ---------- Font self-hosted (nessuna chiamata a terzi) ---------- */
@font-face{
  font-family:'DM Sans';
  src:url('/fonts/DMSans-Variable.woff2') format('woff2-variations'),url('/fonts/DMSans-Variable.woff2') format('woff2');
  font-weight:100 1000; font-stretch:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('/fonts/DMSans-Italic-Variable.woff2') format('woff2-variations'),url('/fonts/DMSans-Italic-Variable.woff2') format('woff2');
  font-weight:100 1000; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('/fonts/DMMono-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('/fonts/DMMono-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}

/* ---------- Token indipendenti dal tema ---------- */
:root{
  --A:#F18E17;
  --B:#FFE843;
  --gradiente:linear-gradient(135deg,#F18E17,#FFE843);

  --r:16px; --rs:12px; --rb:8px; --pill:999px;
  --ease:.22s cubic-bezier(.32,.72,0,1);
  --ease-lento:.4s cubic-bezier(.32,.72,0,1);
  --topbar-h:56px;
  --rail-w:238px;
  --rail-w-chiuso:66px;
  --pannello-w:400px;

  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* Scala tipografica V4 — alzata di un gradino rispetto allo style guide.
     Motivo: da schermo grande i testi secondari (13.5 / 12 / 11px) risultavano
     troppo piccoli da leggere. La gerarchia e i rapporti restano gli stessi,
     cambiano i valori. Su telefono i due gradini più bassi tornano indietro,
     perché lì la densità è già alta (vedi il blocco responsive in fondo). */
  --t-h1:40px; --t-h2:22px; --t-h3:19px; --t-lead:16px;
  --t-body:15px; --t-sm:14px; --t-xs:13px; --t-2xs:12.5px; --t-3xs:12px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:28px; --s7:40px; --s8:56px; --s9:80px;

  --colonna:74ch;
}

/* ---------- Tema chiaro ---------- */
:root,
html[data-theme="light"]{
  --bg:#eef1f7;                 /* fondo pagina, leggermente più profondo della card */
  --zona:#f7f9fc;               /* fondo di una zona */
  --cs:#ffffff;                 /* superficie sollevata */
  --tx:#0b1220;
  --mu:#4d5c70;
  --card:rgba(15,22,32,.045);
  --ln:rgba(15,22,32,.10);
  --ln-forte:rgba(15,22,32,.18);
  --nav:rgba(247,249,252,.88);

  --dec:#9a5006;                /* decisionale come TESTO (4.5:1 su chiaro) */
  --dec-piano:#e07812;          /* decisionale su superfici, bordi, riempimenti */
  --for:#1d5fd1;
  --for-piano:#2f6fe0;
  --done:#07734f;
  --done-piano:#0e9068;
  --err:#b42318;
  --dec-bg:rgba(224,120,18,.10);
  --for-bg:rgba(29,95,209,.08);
  --done-bg:rgba(7,115,79,.08);
  --err-bg:rgba(180,35,24,.07);

  --pgbg:rgba(15,22,32,.10);
  --focus:#0b1220;

  /* tinte di funzione: il fondo dice a che serve la zona.
     Stesso codice delle pill formativo/decisionale, esteso ai contenitori. */
  --zona-capire:#eef4fd;      --zona-capire-testa:#e2ecfb;   --zona-capire-bordo:#c9dcf6;
  --zona-decidere:#fdf3e8;    --zona-decidere-testa:#fbe9d6;  --zona-decidere-bordo:#f3d6b4;
  --zona-spazio:#f4f6fa;      --zona-spazio-testa:#eceff5;    --zona-spazio-bordo:#dde2ec;

  --svg-branch:rgba(11,18,32,.28);
  --svg-accent:#e07812;
  --svg-node-fill:#ffffff;
  --svg-node-stroke:rgba(224,120,18,.65);
  --svg-text:#4d5c70;

  --ombra-1:0 1px 2px rgba(15,22,32,.05), 0 2px 8px rgba(15,22,32,.04);
  --ombra-2:0 2px 4px rgba(15,22,32,.05), 0 12px 32px rgba(15,22,32,.09);
  --ombra-3:0 4px 8px rgba(15,22,32,.06), 0 24px 56px rgba(15,22,32,.14);
  color-scheme:light;
}

/* ---------- Tema scuro ---------- */
html[data-theme="dark"]{
  --bg:#070a0f;
  --zona:#0d131b;
  --cs:#121a25;
  --tx:#e8f0fc;
  --mu:#8ba6bf;
  --card:rgba(255,255,255,.04);
  --ln:rgba(255,255,255,.09);
  --ln-forte:rgba(255,255,255,.2);
  --nav:rgba(13,19,27,.88);

  --dec:#F18E17;
  --dec-piano:#F18E17;
  --for:#60a5fa;
  --for-piano:#60a5fa;
  --done:#34d399;
  --done-piano:#34d399;
  --err:#fb8a7a;
  --dec-bg:rgba(241,142,23,.14);
  --for-bg:rgba(96,165,250,.13);
  --done-bg:rgba(52,211,153,.12);
  --err-bg:rgba(251,138,122,.12);

  --pgbg:rgba(255,255,255,.09);
  --focus:#FFE843;

  --zona-capire:#0d1622;      --zona-capire-testa:#101d2d;   --zona-capire-bordo:#1b3b5e;
  --zona-decidere:#171208;    --zona-decidere-testa:#1e1809;  --zona-decidere-bordo:#3a2a10;
  --zona-spazio:#0d131b;      --zona-spazio-testa:#111823;    --zona-spazio-bordo:#1d2634;

  --svg-branch:rgba(232,240,252,.4);
  --svg-accent:#F18E17;
  --svg-node-fill:#121a25;
  --svg-node-stroke:rgba(241,142,23,.7);
  --svg-text:#8ba6bf;

  --ombra-1:0 1px 2px rgba(0,0,0,.5);
  --ombra-2:0 2px 6px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.42);
  --ombra-3:0 4px 10px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.5);
  color-scheme:dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070a0f; --zona:#0d131b; --cs:#121a25;
    --tx:#e8f0fc; --mu:#8ba6bf;
    --card:rgba(255,255,255,.04); --ln:rgba(255,255,255,.09); --ln-forte:rgba(255,255,255,.2);
    --nav:rgba(13,19,27,.88);
    --dec:#F18E17; --dec-piano:#F18E17; --for:#60a5fa; --for-piano:#60a5fa;
    --done:#34d399; --done-piano:#34d399; --err:#fb8a7a;
    --dec-bg:rgba(241,142,23,.14); --for-bg:rgba(96,165,250,.13);
    --done-bg:rgba(52,211,153,.12); --err-bg:rgba(251,138,122,.12);
    --pgbg:rgba(255,255,255,.09); --focus:#FFE843;
    --zona-capire:#0d1622; --zona-capire-testa:#101d2d; --zona-capire-bordo:#1b3b5e;
    --zona-decidere:#171208; --zona-decidere-testa:#1e1809; --zona-decidere-bordo:#3a2a10;
    --zona-spazio:#0d131b; --zona-spazio-testa:#111823; --zona-spazio-bordo:#1d2634;
    --svg-branch:rgba(232,240,252,.4); --svg-accent:#F18E17;
    --svg-node-fill:#121a25; --svg-node-stroke:rgba(241,142,23,.7); --svg-text:#8ba6bf;
    --ombra-1:0 1px 2px rgba(0,0,0,.5);
    --ombra-2:0 2px 6px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.42);
    --ombra-3:0 4px 10px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--tx);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
a{color:inherit;}
ul,ol{list-style:none;}
[hidden]{display:none !important;}

.solo-stretto{display:none !important;}
@media (max-width:768px){
  .solo-largo{display:none !important;}
  .solo-stretto{display:inline-flex !important;}
}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--rb);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   Tipografia
   ============================================================ */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.22;}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);letter-spacing:-.015em;}
h3{font-size:var(--t-h3);letter-spacing:-.01em;}

.occhiello{
  font-family:var(--mono);
  font-size:var(--t-3xs);
  color:var(--mu);
  letter-spacing:.03em;
}
.guida{font-size:var(--t-lead);color:var(--mu);max-width:66ch;line-height:1.65;}
.attenuato{color:var(--mu);}
.mono{font-family:var(--mono);font-size:var(--t-xs);}
.piccolo{font-size:var(--t-sm);}
.testo p+p{margin-top:var(--s3);}
.testo p{max-width:70ch;}
.testo strong{font-weight:700;}

.elenco li{position:relative;padding-left:var(--s4);margin-bottom:var(--s2);}
.elenco li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:7px;height:1px;background:var(--ln-forte);
}

/* ============================================================
   Superfici — il pezzo che mancava nella V2
   ============================================================ */

/* zona: il contenitore di una porzione di schermata.
   Ha un fondo proprio e, se serve, una testa tinta. */
.zona{
  background:var(--zona);
  border:1px solid var(--ln);
  border-radius:var(--r);
  box-shadow:var(--ombra-1);
  overflow:hidden;
  margin-bottom:var(--s6);
}
.zona-testa{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--ln);
  background:var(--card);
}
.zona-testa .icona{
  width:32px;height:32px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;
  background:var(--cs);border:1px solid var(--ln);color:var(--mu);
}
.zona-testa .icona svg{width:16px;height:16px;}
.zona-testa h2{font-size:var(--t-h3);}
.zona-testa .sotto{font-size:var(--t-xs);color:var(--mu);width:100%;}
.zona-testa .coda{margin-left:auto;display:flex;gap:var(--s2);align-items:center;}
/* una zona dice a che serve anche dal fondo:
   azzurro = qui si capisce, arancio = qui si decide, neutro = il tuo spazio */
.zona--capire{background:var(--zona-capire);border-color:var(--zona-capire-bordo);}
.zona--capire > .zona-testa{background:var(--zona-capire-testa);border-bottom-color:var(--zona-capire-bordo);}
.zona--capire > .zona-testa .icona{color:var(--for);border-color:var(--zona-capire-bordo);}
.zona--capire > .zona-piede{background:var(--zona-capire-testa);border-top-color:var(--zona-capire-bordo);}

.zona--decidere{background:var(--zona-decidere);border-color:var(--zona-decidere-bordo);}
.zona--decidere > .zona-testa{background:var(--zona-decidere-testa);border-bottom-color:var(--zona-decidere-bordo);}
.zona--decidere > .zona-testa .icona{color:var(--dec);border-color:var(--zona-decidere-bordo);}
.zona--decidere > .zona-piede{background:var(--zona-decidere-testa);border-top-color:var(--zona-decidere-bordo);}

.zona--spazio{background:var(--zona-spazio);border-color:var(--zona-spazio-bordo);}
.zona--spazio > .zona-testa{background:var(--zona-spazio-testa);}

/* l'etichetta che nomina la funzione, in alto a destra nella testa */
.zona-funzione{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-3xs);
  padding:3px 9px;border-radius:var(--pill);
}
.zona--capire .zona-funzione{color:var(--for);background:var(--for-bg);}
.zona--decidere .zona-funzione{color:var(--dec);background:var(--dec-bg);}
.zona--spazio .zona-funzione{color:var(--mu);background:var(--card);}

.zona-corpo{padding:var(--s5);}
.zona-corpo--stretto{padding:var(--s4);}
.zona-piede{padding:var(--s3) var(--s5);border-top:1px solid var(--ln);background:var(--card);
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}

/* scheda: elemento cliccabile con profondità */
.scheda{
  background:var(--cs);
  border:1px solid var(--ln);
  border-radius:var(--rs);
  box-shadow:var(--ombra-1);
  padding:var(--s4);
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
a.scheda,button.scheda{display:block;width:100%;text-align:left;text-decoration:none;}
a.scheda:hover,button.scheda:hover{box-shadow:var(--ombra-2);border-color:var(--ln-forte);transform:translateY(-1px);}
a.scheda:active,button.scheda:active{transform:translateY(0);box-shadow:var(--ombra-1);}

.filetto{height:1px;background:var(--ln);border:0;margin:var(--s7) 0;}

/* ============================================================
   Bottoni
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:42px;padding:0 var(--s4);
  border-radius:var(--rs);
  border:1px solid var(--ln-forte);
  background:var(--cs);
  font-size:var(--t-sm);font-weight:600;
  color:var(--tx);
  box-shadow:var(--ombra-1);
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform .1s ease;
  text-decoration:none;white-space:nowrap;cursor:pointer;
}
.btn:hover{box-shadow:var(--ombra-2);border-color:var(--mu);}
.btn:active{transform:translateY(1px);box-shadow:var(--ombra-1);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btn[aria-disabled="true"]{pointer-events:none;}
.btn svg{width:16px;height:16px;flex:none;}

.btn--primario{
  background:var(--dec-piano);
  border-color:transparent;
  color:#160f04;
  font-weight:700;
  box-shadow:0 1px 2px rgba(160,80,6,.25), 0 6px 18px rgba(224,120,18,.26);
}
.btn--primario:hover{background:#d47a0c;border-color:transparent;box-shadow:0 2px 4px rgba(160,80,6,.28), 0 10px 26px rgba(224,120,18,.34);}
html[data-theme="dark"] .btn--primario:hover{background:#ffa22e;}

.btn--quieto{border-color:transparent;background:transparent;box-shadow:none;color:var(--mu);}
.btn--quieto:hover{color:var(--tx);background:var(--card);box-shadow:none;border-color:transparent;}

.btn--distruttivo{border-color:var(--err);color:var(--err);background:transparent;box-shadow:none;}
.btn--distruttivo:hover{background:var(--err-bg);box-shadow:none;}

.btn--piccolo{min-height:36px;padding:0 var(--s3);font-size:var(--t-xs);border-radius:var(--rb);}
.btn--largo{width:100%;}

.btn[data-caricamento]::before{
  content:"";width:14px;height:14px;flex:none;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:var(--pill);
  animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg);}}

/* ============================================================
   Campi
   ============================================================ */
.campo{display:block;margin-bottom:var(--s4);}
.campo > span{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s2);}
.campo .aiuto{display:block;font-weight:400;color:var(--mu);font-size:var(--t-xs);margin-top:4px;}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;
  min-height:44px;
  padding:var(--s2) var(--s3);
  background:var(--cs);
  border:1px solid var(--ln-forte);
  border-radius:var(--rs);
  font-size:var(--t-body);
  box-shadow:inset 0 1px 2px rgba(15,22,32,.04);
  transition:border-color var(--ease),box-shadow var(--ease);
}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{box-shadow:none;}
textarea{min-height:112px;resize:vertical;line-height:1.6;}
input::placeholder,textarea::placeholder{color:var(--mu);opacity:.85;}
input:hover,select:hover,textarea:hover{border-color:var(--mu);}
input:focus,textarea:focus,select:focus{border-color:var(--dec-piano);}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);}
input[disabled],textarea[disabled],select[disabled]{opacity:.55;cursor:not-allowed;}

.errore-campo{
  display:flex;gap:var(--s2);align-items:flex-start;
  margin-top:var(--s2);font-size:var(--t-xs);color:var(--err);
}
.errore-campo::before{content:"!";font-family:var(--mono);font-weight:500;}

.consenso{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);color:var(--mu);}
.consenso input{width:20px;height:20px;min-height:0;flex:none;margin-top:3px;accent-color:var(--dec-piano);box-shadow:none;}
.consenso a{color:var(--tx);text-underline-offset:3px;}

/* ============================================================
   Impaginato — applicazione
   ============================================================ */
.app{min-height:100vh;display:flex;flex-direction:column;}

.topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);flex:none;
  display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);
  background:var(--nav);
  border-bottom:1px solid var(--ln);
  backdrop-filter:blur(16px) saturate(1.4);
}
.marchio{display:flex;align-items:center;gap:var(--s2);text-decoration:none;}
.marchio img{height:26px;width:auto;flex:none;}
.marchio .logo-scuro{display:none;}
html[data-theme="dark"] .marchio .logo-chiaro{display:none;}
html[data-theme="dark"] .marchio .logo-scuro{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marchio .logo-chiaro{display:none;}
  :root:not([data-theme="light"]) .marchio .logo-scuro{display:block;}
}
.marchio-nome{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
.marchio-payoff{
  font-size:var(--t-3xs);color:var(--mu);border-left:1px solid var(--ln-forte);
  padding-left:var(--s2);margin-left:var(--s1);
}
.topbar-azioni{margin-left:auto;display:flex;align-items:center;gap:var(--s2);}

.ib{
  width:38px;height:38px;border-radius:var(--rb);
  border:1px solid transparent;color:var(--mu);
  display:inline-flex;align-items:center;justify-content:center;
  transition:var(--ease);cursor:pointer;
}
.ib:hover{color:var(--tx);background:var(--card);border-color:var(--ln);}
.ib svg{width:18px;height:18px;}

.app-corpo{flex:1;display:flex;min-height:0;}

/* rail — richiudibile: lascia il centro alla conversazione */
.rail{
  width:var(--rail-w);flex:none;
  transition:width var(--ease-lento);
  border-right:1px solid var(--ln);
  background:var(--zona);
  padding:var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:2px;
  position:sticky;top:var(--topbar-h);align-self:flex-start;
  height:calc(100vh - var(--topbar-h));
}
.rail-gruppo{
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
  padding:var(--s4) var(--s3) var(--s2);
}
.rail-gruppo:first-child{padding-top:0;}
.rail a{
  display:flex;align-items:center;gap:var(--s3);
  min-height:42px;padding:0 var(--s3);
  border-radius:var(--rs);
  font-size:var(--t-sm);font-weight:600;color:var(--mu);
  text-decoration:none;transition:var(--ease);
}
.rail a:hover{color:var(--tx);background:var(--card);}
.rail a[aria-current="page"]{
  color:var(--tx);background:var(--cs);
  border:1px solid var(--ln);
  box-shadow:var(--ombra-1), inset 3px 0 0 var(--dec-piano);
}
.rail svg{width:17px;height:17px;flex:none;}
.rail .stato{margin-left:auto;}
.rail-fondo{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--ln);}

/* stato chiuso: solo icone, etichetta come suggerimento del browser */
html[data-rail="chiuso"] .rail{width:var(--rail-w-chiuso);padding-left:var(--s2);padding-right:var(--s2);}
html[data-rail="chiuso"] .rail a{justify-content:center;padding:0;}
html[data-rail="chiuso"] .rail a > span:not(.stato),
html[data-rail="chiuso"] .rail-gruppo{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-rail="chiuso"] .rail .stato{display:none;}
html[data-rail="chiuso"] .rail-gruppo{display:block;height:1px;padding:0;margin:var(--s3) 0;}
html[data-rail="chiuso"] .rail a[aria-current="page"]{box-shadow:var(--ombra-1), inset 0 0 0 1px var(--dec-piano);}

.rail-interruttore{
  display:flex;align-items:center;gap:var(--s2);
  min-height:38px;padding:0 var(--s3);margin-bottom:var(--s2);
  border-radius:var(--rs);color:var(--mu);
  font-size:var(--t-xs);font-weight:600;
  transition:var(--ease);width:100%;
}
.rail-interruttore:hover{color:var(--tx);background:var(--card);}
.rail-interruttore svg{width:17px;height:17px;flex:none;transition:transform var(--ease-lento);}
html[data-rail="chiuso"] .rail-interruttore{justify-content:center;padding:0;}
html[data-rail="chiuso"] .rail-interruttore span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
html[data-rail="chiuso"] .rail-interruttore svg{transform:rotate(180deg);}

/* colonna */
.colonna{flex:1;min-width:0;padding:var(--s6) var(--s6) var(--s9);}
.colonna-interna{max-width:var(--colonna);}
.colonna-larga .colonna-interna{max-width:1040px;}

.intestazione{margin-bottom:var(--s6);}
.intestazione h1{font-size:var(--t-h2);margin-bottom:var(--s2);}
.intestazione p{color:var(--mu);font-size:var(--t-sm);max-width:66ch;}

/* pannello laterale */
.pannello{
  width:var(--pannello-w);flex:none;
  border-left:1px solid var(--ln);
  background:var(--cs);
  display:flex;flex-direction:column;
  position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  box-shadow:var(--ombra-2);
}
.pannello-testa{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--ln);
  display:flex;gap:var(--s3);align-items:flex-start;background:var(--card);
}
.pannello-testa h2{font-size:var(--t-h3);}
.pannello-corpo{flex:1;overflow-y:auto;padding:var(--s5);}
.pannello-piede{padding:var(--s3) var(--s5);border-top:1px solid var(--ln);background:var(--card);display:flex;gap:var(--s2);flex-wrap:wrap;}
.pannello-chiudi{margin-left:auto;}

/* ============================================================
   Impaginato — sito pubblico
   ============================================================ */
.sito{max-width:1080px;margin:0 auto;padding:0 var(--s6);}
.sito--stretto{max-width:820px;}
.sezione{padding:var(--s9) 0;}
.sezione + .sezione{border-top:1px solid var(--ln);}
.sezione-testa{margin-bottom:var(--s7);max-width:70ch;}
.sezione-testa h2{font-size:var(--t-h2);margin-bottom:var(--s3);}
.griglia-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5);}
.griglia-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5);}

.salta{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cs);padding:var(--s3) var(--s4);border-radius:var(--rs);
  border:1px solid var(--ln-forte);box-shadow:var(--ombra-2);
}
.salta:focus{left:var(--s4);top:var(--s2);}

footer.piede{
  border-top:1px solid var(--ln);
  background:var(--zona);
  padding:var(--s7) 0;
  font-size:var(--t-sm);color:var(--mu);
}
footer.piede a{color:var(--mu);text-underline-offset:3px;}
footer.piede a:hover{color:var(--tx);}

/* ============================================================
   Responsive — 1440 / 1024 / 768 / 375
   ============================================================ */
@media (max-width:1200px){
  :root{--pannello-w:340px;--rail-w:200px;}
  .colonna{padding:var(--s5) var(--s5) var(--s9);}
}
@media (max-width:1024px){
  /* il pannello diventa un sovrapposto, non ruba più larghezza */
  .pannello{
    position:fixed;inset:var(--topbar-h) 0 0 auto;width:min(440px,100%);
    height:auto;z-index:50;box-shadow:var(--ombra-3);
  }
  .sito{padding:0 var(--s5);}
  .sezione{padding:var(--s8) 0;}
}
@media (max-width:768px){
  :root{--topbar-h:52px;--t-h2:20px;--t-h3:18px;--t-lead:15px;--t-body:14.5px;--t-sm:13.5px;--t-xs:12.5px;--t-3xs:11.5px;}
  /* da telefono ogni comando è grande almeno quanto un polpastrello */
  .btn--piccolo{min-height:44px;padding:0 var(--s4);}
  .btn{min-height:44px;}
  .ib{width:44px;height:44px;}
  .app-corpo{flex-direction:column;}

  /* rail → barra in basso, cinque voci al massimo */
  .rail{
    order:2;position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;
    width:100%;flex-direction:row;justify-content:space-around;gap:0;
    border-right:0;border-top:1px solid var(--ln);
    background:var(--nav);backdrop-filter:blur(16px) saturate(1.4);
    padding:var(--s1) var(--s2) max(var(--s1),env(safe-area-inset-bottom));
    z-index:45;box-shadow:0 -1px 0 var(--ln), 0 -8px 24px rgba(0,0,0,.06);
  }
  .rail-gruppo,.rail-interruttore{display:none;}
  .rail a{
    flex-direction:column;gap:2px;min-height:52px;min-width:52px;flex:1;
    font-size:var(--t-3xs);padding:var(--s1);text-align:center;justify-content:center;
    border-radius:var(--rb);
  }
  .rail a[aria-current="page"]{
    background:var(--dec-bg);border-color:transparent;box-shadow:none;color:var(--dec);
  }
  .rail a[aria-current="page"] svg{color:var(--dec);}
  .rail .stato{display:none;}
  .rail-fondo{margin:0;padding:0;border:0;display:contents;}

  .colonna{padding:var(--s5) var(--s4) 104px;}
  .colonna-interna,.colonna-larga .colonna-interna{max-width:100%;}
  .pannello{
    inset:auto 0 0 0;width:100%;max-height:88vh;
    border-left:0;border-top:1px solid var(--ln);
    border-radius:var(--r) var(--r) 0 0;
  }
  .pannello-corpo{padding:var(--s4);}

  .sito{padding:0 var(--s4);}
  .sezione{padding:var(--s7) 0;}
  .zona{margin-bottom:var(--s5);}
  .zona-corpo{padding:var(--s4);}
  .zona-testa{padding:var(--s3) var(--s4);}
  h1{font-size:30px;}
  .marchio-payoff{display:none;}
}
@media (max-width:420px){
  .rail a{font-size:10px;}
  .colonna{padding:var(--s4) var(--s3) 104px;}
  .sito{padding:0 var(--s3);}
}

/* l'etichetta di funzione dove la pagina non è fatta di zone */
.intestazione--spazio .zona-funzione{
  display:inline-block;margin-bottom:var(--s2);
  color:var(--mu);background:var(--card);
}