/*
 * pagina.css — scroll, strati del contenuto, caricamento (gli stili di ?edit stanno in css/editor.css, solo in locale).
 * Colori, caratteri e componenti vengono da Brand System (css/brand-system/tokens.css + bundle.css).
 * Layout: <html data-layout="desktop|telefono"> (js/contenuti.js: max-width 760px, schermo in verticale,
 * oppure anteprima telefono dell'editor). Le misure sono riferite a 1440 × 900 e 390 × 844 e scalano con
 * le unità del contenitore #sopra (cqw / cqh), così l'anteprima telefono dell'editor è fedele.
 */
:root {
  --margine: 48px;
  color-scheme: dark;
}
[data-layout="telefono"] { --margine: 16px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--vuoto); color: var(--osso); }
body { margin: 0; font: 400 15px/1.6 var(--font-testo); background: var(--vuoto); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* scena fissa sotto. Su iPhone l'altezza di un fixed con inset: 0 segue la barra di Safari mentre scorri:
   la tela WebGL si rifaceva (lampi, scena stirata) e #sopra ricalcolava tutte le cqh (contenuto che salta).
   Quindi scena e contenuto sono alti 100lvh (schermo con la barra nascosta) e non cambiano mai misura;
   --sotto = la fascia che la barra può coprire (0 sul desktop): gli strati finiscono sopra, i veli e i fogli
   ci arrivano sotto. Dove lvh non c'è vale il 100vh (stessa cosa sul desktop) */
:root { --sotto: 0px; }
@supports (height: 100lvh) { :root { --sotto: calc(100lvh - 100svh); } }
#scena { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: 0; }
#scena canvas { touch-action: pan-y; }

/* scroll: tappe con ancora + tratti di viaggio. Nessun contenuto, nessun evento */
main { position: relative; z-index: 1; pointer-events: none; }
.tappa { height: 100vh; height: 100svh; }   /* l'ancora la gestisce js/pagina.js */
.viaggio { height: 140vh; }
/* niente soste: le schede (libro) e i passi (sfera) non si scelgono con lo scroll, ma con frecce, clic e dito */

/* ------------------------------------------------------------------ contenuto sopra la scena */
#sopra {
  position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: 2; pointer-events: none;
  container-type: size; container-name: sopra; overflow: hidden;
}
#sopra a, #sopra button, #sopra input, #sopra .binario-vista, #sopra .tb-foglio.is-aperto { pointer-events: auto; }
[data-layout="desktop"] .solo-t, [data-layout="telefono"] .solo-d { display: none !important; }
.senza-transizioni, .senza-transizioni * { transition: none !important; }
.corpo { margin: 0; font: 400 15px/1.6 var(--font-testo); color: var(--polvere-200); text-wrap: pretty; }

/* barra: sopra gli strati, lascia passare il puntatore fuori dai controlli */
.barra { position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.barra nav { margin-left: auto; }
.foglio-aperto .barra { background: none; }

/* strati: uno per tappa, a tutto schermo. Visibile solo quello agganciato (e quello che sta uscendo) */
.strato { position: absolute; inset: 0 0 var(--sotto) 0; z-index: 1; visibility: hidden; isolation: isolate; }
/* i fogli coprono tutto, ma il contenuto resta sopra la barra di Safari (il bordo trasparente prende lo sfondo) */
#sopra > .tb-foglio { border-bottom: var(--sotto) solid transparent; }
.strato.is-attivo, .strato.in-uscita { visibility: visible; }
.strato :is(h1, h2, h3, p, ul, ol, dl) { margin: 0; }
.blocco { position: absolute; display: flex; flex-direction: column; }

/* velo: gradiente da trasparente a vuoto dietro il testo (mai blocchi pieni) */
.velo { position: absolute; z-index: -1; pointer-events: none; margin-bottom: calc(-1 * var(--sotto)); opacity: 0; transition: opacity var(--dur-sgretola) ease; }
.strato.is-attivo .velo { opacity: 1; transition: opacity var(--dur-componi) ease; }
.velo { left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.86) 55%, var(--vuoto)); }
[data-layout="telefono"] .strato .velo { left: 0; right: 0; bottom: 0; top: auto; width: auto; }

.tb-scintilla { z-index: 0; }

/* sezioni in basso al centro (7/11, scelta A "riga intera", progetto/brand/scelte/barra.md): sempre visibili, anche in
   viaggio (al posto della lettura "in viaggio"). Cinque colonne uguali, il filo va dal centro della prima al centro
   dell'ultima: le tacche cadono sotto i nomi. --k = p / 4 (js/contenuti.js → aggiorna). */
.sezioni {
  --col: 118px;
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom) + var(--sotto)); transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 400 11px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400);
  transition: opacity var(--dur-ui) ease, visibility 0s;
}
.sezioni__dove { display: none; margin: 0; color: var(--osso); white-space: nowrap; }
.sezioni__riga { position: relative; padding-bottom: 8px; }
.sezioni__voci { display: grid; grid-template-columns: repeat(5, var(--col)); margin: 0; padding: 0; list-style: none; }
.sezioni__voce { display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; color: inherit; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-ui) ease; -webkit-tap-highlight-color: transparent; }
.sezioni__punto { width: 5px; height: 5px; flex: none; border-radius: var(--raggio-punto); box-shadow: inset 0 0 0 1px currentColor; transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }
.sezioni__voce[aria-current="step"] { color: var(--osso); }
.sezioni__voce[aria-current="step"] .sezioni__punto { background: var(--scintilla); box-shadow: var(--bagliore); }
.sezioni__voce:focus-visible { outline: 2px solid var(--malva); outline-offset: -2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .sezioni__voce:hover { color: var(--osso); } }
.sezioni__filo { position: absolute; left: calc(var(--col) / 2); right: calc(var(--col) / 2); bottom: 0; height: 1px;
  background-image: radial-gradient(circle, var(--polvere-700) 0.6px, transparent 1px); background-size: 4px 1px; pointer-events: none; }
.sezioni__scia { position: absolute; inset: 0; background: var(--polvere-200); transform-origin: left; transform: scaleX(var(--k, 0)); }
.sezioni__tacca { position: absolute; top: -2px; width: 1px; height: 5px; margin-left: -0.5px; background: var(--polvere-600); }
.sezioni__cursore { position: absolute; top: -2px; left: calc(var(--k, 0) * 100%); width: 5px; height: 5px; margin-left: -2.5px; border-radius: var(--raggio-punto); background: var(--scintilla); box-shadow: var(--bagliore); }
.foglio-aperto .sezioni { opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) ease, visibility 0s var(--dur-ui); }

/* telefono: i nomi non ci stanno. Sopra il nome della sezione (in viaggio "da → a"), sotto il filo con le tacche; ogni
   tacca è un bersaglio da 36 × 44 px. Gli strati finiscono sopra le sezioni (--sezioni-h), i veli scendono fin sotto.
   Nel piede (Contatti) le sezioni si nascondono, anche sul desktop: il piede occupa il fondo e ha "Torna all'inizio". */
[data-layout="telefono"] { --sezioni-h: 64px; }
[data-layout="telefono"] .sezioni { --col: 36px; bottom: calc(6px + env(safe-area-inset-bottom) + var(--sotto)); gap: 0; }
[data-layout="telefono"] .sezioni__dove { display: block; }
[data-layout="telefono"] .sezioni__riga { padding-bottom: 0; }
[data-layout="telefono"] .sezioni__voce { height: 44px; }
[data-layout="telefono"] .sezioni__punto, [data-layout="telefono"] .sezioni__nome { display: none; }
[data-layout="telefono"] .sezioni__filo { bottom: 22px; }
[data-layout="telefono"] .strato:not([data-per="scabiose"]) { bottom: calc(var(--sotto) + var(--sezioni-h)); }
[data-layout="telefono"] .strato:not([data-per="scabiose"]) .velo { bottom: calc(-1 * var(--sezioni-h)); }
[data-tappa-agganciata="scabiose"] .sezioni { opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) ease, visibility 0s var(--dur-ui); }

/* ------------------------------------------------------------------ 01 hero (principale) */
[data-layout="desktop"] .strato[data-per="principale"] .velo { left: 0; right: 0; bottom: 0; height: 46.7cqh; background: linear-gradient(rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.86) 55%, var(--vuoto)); }
.hero { left: var(--margine); bottom: max(40px, 8cqh); width: min(640px, 100cqw - 2 * var(--margine) - 120px); gap: 20px; }
.hero__titolo { font-size: clamp(44px, 5cqw, 72px); text-wrap: balance; }
.hero__testo { max-width: 46ch; }
.hero__azioni { display: flex; align-items: center; gap: var(--passo-6); margin-top: var(--passo-2); }
.invito { position: absolute; right: var(--margine); bottom: max(40px, 8cqh); display: flex; flex-direction: column; align-items: center; gap: var(--passo-3); }
.invito__testo { writing-mode: vertical-rl; }
.invito__filo { position: relative; width: 1px; height: 72px; background-image: radial-gradient(circle, var(--polvere-600) 0.8px, transparent 1.2px); background-size: 3px 5px; }
.invito__filo i { position: absolute; left: -1.5px; top: 0; width: 4px; height: 4px; border-radius: var(--raggio-punto); background: var(--scintilla); box-shadow: var(--bagliore-forte); animation: invito 2.4s linear infinite; }
@keyframes invito { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(68px); opacity: 0; } }
/* pulsante qualità (scelta A, progetto/brand/scelte/qualita.md): riga di lettura nell'angolo, solo col mouse e con la scena;
   l'invito sale di 32 px per lasciargli l'angolo */
.qualita { position: absolute; right: var(--margine); bottom: max(20px, 4cqh); display: flex; align-items: center; gap: 14px;
  font: 400 11px/1.45 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); font-variant-numeric: tabular-nums; }
.qualita__voci { display: flex; gap: 12px; }
.qualita__v { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--polvere-600); transition: color var(--dur-ui) ease, transform var(--dur-premi) ease-out; }
.qualita__v::before { content: ""; width: 4px; height: 4px; border-radius: var(--raggio-punto); box-shadow: inset 0 0 0 1px currentColor; }
.qualita__v[aria-pressed="true"] { color: var(--osso); }
.qualita__v[aria-pressed="true"]::before { background: var(--scintilla); box-shadow: var(--bagliore-forte); }
.qualita__v:active { transform: scale(0.97); }
.qualita__v:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; border-radius: 2px; }
.qualita__pc { color: var(--polvere-400); }
@media (hover: hover) and (pointer: fine) { .qualita__v:hover { color: var(--polvere-200); } .qualita__v[aria-pressed="true"]:hover { color: var(--osso); } }
@media not ((hover: hover) and (pointer: fine)) { .qualita { display: none; } }
.senza-scena .qualita { display: none; }
@media (hover: hover) and (pointer: fine) { html:not(.senza-scena) .invito { bottom: calc(max(40px, 8cqh) + 32px); } }

[data-layout="telefono"] .strato[data-per="principale"] .velo { height: 45cqh; }
[data-layout="telefono"] .hero { left: 16px; right: 16px; width: auto; bottom: calc(28px + env(safe-area-inset-bottom)); gap: 14px; }
[data-layout="telefono"] .hero__titolo { font-size: 44px; }
[data-layout="telefono"] .hero__azioni { margin-top: 6px; }
[data-layout="telefono"] .hero__azioni .tb-bottone--primario { flex: 1; }
.hero__invito-t { justify-content: center; }

/* ------------------------------------------------------------------ 02 giardino (fiori) */
/* porta ai due progetti grandi (Erbario, Giardino v2). Desktop: a destra, senza velo; telefono: dal basso */
[data-layout="desktop"] .strato[data-per="fiori"] .velo { top: 0; bottom: 0; left: auto; right: 0; width: 46cqw; background: linear-gradient(90deg, rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.72) 45%); }
.giardino { right: var(--margine); top: max(110px, 20cqh); width: min(460px, 100cqw - 2 * var(--margine) - 120px); gap: 18px; }
.giardino__titolo { text-wrap: balance; }
.giardino__testo { max-width: 44ch; }
.giardino__voci { display: flex; flex-direction: column; gap: 12px; margin-top: var(--passo-2); padding: 0; list-style: none; }
.giardino__voce { position: relative; padding-right: 56px; }
.giardino__voce .tb-scheda__corpo { min-width: 0; }
.giardino__freccia { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

[data-layout="telefono"] .strato[data-per="fiori"] .velo { height: 64cqh; }
[data-layout="telefono"] .giardino { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); gap: 12px; }
[data-layout="telefono"] .giardino__titolo { font-size: 28px; }
[data-layout="telefono"] .giardino__voci { margin-top: 4px; gap: 10px; }
/* telefono: schede basse (immagine 64 px, niente testo) perché il giglio resti libero sopra */
[data-layout="telefono"] .giardino__voce { padding: 10px 56px 10px 10px; min-height: 84px; }
[data-layout="telefono"] .giardino__voce .tb-scheda__img { width: 64px; height: 64px; flex: none; }
[data-layout="telefono"] .giardino__voce .tb-scheda__testo { display: none; }

/* ------------------------------------------------------------------ 03 archivio (libro) */
[data-layout="desktop"] .strato[data-per="libro"] .velo { height: 50cqh; }   /* basso: il libro (a destra) resta chiaro sopra le schede */
.archivio__testa {
  position: absolute; left: var(--margine); right: var(--margine); top: calc(var(--top-binario, 440px) - 72px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--passo-4);
}
.archivio__conta { display: flex; align-items: flex-end; gap: var(--passo-4); }
.archivio__num { font: 800 64px/0.95 var(--font-punto); color: var(--osso); font-variant-numeric: tabular-nums; }
.archivio__lett { flex-direction: column; gap: 0; padding-bottom: 6px; }
.archivio__comandi { display: flex; align-items: center; gap: var(--passo-3); }
.archivio__comandi .tb-bottone--testo { margin-right: var(--passo-3); }
.binario-vista { position: absolute; left: 0; right: 0; top: var(--top-binario, 440px); }
.binario { display: flex; gap: 16px; align-items: flex-start; padding-left: var(--margine); transition: transform 700ms var(--ease-sposta); will-change: transform; }
.binario__posto { flex: none; display: flex; }
.binario .tb-scheda { width: var(--w-scheda, 300px); flex: none; transition: transform var(--dur-premi) ease-out, background-color var(--dur-ui) ease, opacity var(--dur-ui) ease; }
.binario .tb-scheda:not(.is-attiva) { opacity: 0.62; }
.tb-scheda__img img:not([src]), .tb-scheda__img:empty { background: var(--vuoto-velo); }
@media (hover: hover) and (pointer: fine) { .binario .tb-scheda:hover { opacity: 1; } }

[data-layout="telefono"] .strato[data-per="libro"] .velo { height: 58cqh; }   /* comincia dove finisce il libro */
[data-layout="telefono"] .archivio__testa { left: 16px; right: 16px; top: calc(var(--top-binario, 336px) - 54px); }
[data-layout="telefono"] .archivio__conta { flex: 1; flex-direction: row-reverse; justify-content: space-between; }
[data-layout="telefono"] .archivio__num { font: 700 36px/1 var(--font-punto); }
[data-layout="telefono"] .archivio__lett { padding-bottom: 0; }
/* telefono: binario nativo con lo snap; il gesto verticale resta alla pagina (pan-x pan-y: il browser sceglie la direzione) */
[data-layout="telefono"] .binario-vista {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x pan-y;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
[data-layout="telefono"] .binario-vista::-webkit-scrollbar { display: none; }
[data-layout="telefono"] .binario { gap: 12px; padding-inline: calc((100cqw - var(--w-scheda, 320px)) / 2); padding-block: 4px; width: max-content; transform: none !important; transition: none; }
[data-layout="telefono"] .binario__posto { scroll-snap-align: center; }
/* telefono: punti dei progetti sotto il binario (stessi delle Esplorazioni); delle schede vicine si vede uno spiraglio di ~32 px */
.punti-avanzamento.punti-schede { position: absolute; left: 0; right: 0; bottom: 6px; justify-content: center; padding: 0; margin: 0; }
.punti-avanzamento.punti-schede button { width: 28px; }
[data-layout="telefono"] .binario .tb-scheda:not(.is-attiva) { opacity: 0.78; }

/* indice dei progetti (desktop): foglio con le schede in variante riga */
.foglio-progetti { justify-content: flex-start; gap: var(--passo-6); padding: calc(88px + env(safe-area-inset-top)) var(--margine) var(--passo-8); z-index: 7; }
.foglio-progetti__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--passo-4); }
.foglio-progetti__testa .tb-lettura { flex: 1; }
.foglio-progetti__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--passo-4); overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.foglio-progetti .tb-scheda--riga { opacity: 0; transform: translateY(-10px); filter: blur(5px); transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; }
.foglio-progetti.is-aperto .tb-scheda--riga { opacity: 1; transform: none; filter: none; transition: opacity 500ms ease, transform 700ms var(--ease-componi), filter 700ms var(--ease-componi), background-color var(--dur-ui) ease; transition-delay: 140ms; }
.foglio-progetti .tb-scheda--riga .tb-lettura { margin-bottom: var(--passo-1); }

/* ------------------------------------------------------------------ 04 esplorazioni (sfera) */
[data-layout="desktop"] .strato[data-per="sfera"] .velo { top: 0; bottom: 0; left: 0; width: 43cqw; background: linear-gradient(270deg, rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.78) 45%); }
.esplora { left: var(--margine); top: max(96px, 16.7cqh); width: min(440px, 100cqw - 2 * var(--margine) - 300px); gap: 16px; }
.passi { display: flex; flex-direction: column; padding: 0; list-style: none; }
.passo { display: grid; grid-template-columns: 56px 1fr; gap: 0 var(--passo-4); padding: var(--passo-4) 0; border-bottom: 1px solid var(--polvere-900); }
.passo b { font: 700 36px/1 var(--font-punto); color: var(--polvere-700); transition: color var(--dur-ui) ease; }
.passo h3 { margin: 2px 0 4px; font: 500 21px/1.2 var(--font-testo); letter-spacing: -0.012em; color: var(--polvere-400); transition: color var(--dur-ui) ease; }
.passo p { font: 400 14px/1.55 var(--font-testo); color: var(--polvere-200); display: none; }
.passo.is-attivo b, .passo.is-attivo h3 { color: var(--osso); }
.passo.is-attivo p { display: block; }
.passo p.apri { animation: apri var(--dur-componi) var(--ease-componi) both; }
/* i passi si aprono con un clic (tutta la riga), il bottone nel titolo serve alla tastiera */
#sopra .passi .passo { pointer-events: auto; cursor: pointer; }
.passo.is-attivo { cursor: default; }
.passo__apri { all: unset; cursor: inherit; }
.passo__apri:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
.passo:not(.is-attivo):hover b, .passo:not(.is-attivo):hover h3 { color: var(--polvere-200); }
/* tipo della voce (idea, appunto, progetto) sopra il titolo, link "Leggi" dentro il testo aperto */
.passo__tipo { display: block; margin-top: 2px; font: 400 11px/1.6 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-700); transition: color var(--dur-ui) ease; }
.passo.is-attivo .passo__tipo { color: var(--polvere-400); }
.passo h3 + p, .passo__tipo + h3 { margin-top: 0; }
.passo__leggi { margin-left: 6px; color: var(--osso); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--polvere-700); pointer-events: auto; }
.passo__leggi:hover { text-decoration-color: var(--osso); }
.passo__leggi:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
.esplora__tutte { align-self: flex-start; pointer-events: auto; }
@keyframes apri { from { opacity: 0; transform: translateY(-10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

[data-layout="telefono"] .strato[data-per="sfera"] .velo { height: 50cqh; }
[data-layout="telefono"] .esplora-t { left: 16px; right: 16px; bottom: calc(32px + env(safe-area-inset-bottom)); gap: 16px; }
.esplora-t .passo { border-bottom: 0; padding: 0; }
.esplora-t .passo p { display: block; }
.punti-avanzamento { display: flex; gap: 0; padding-left: calc(72px - 18.5px); margin-block: -18.5px; }
/* ogni punto è un bottone da 44 x 44 px, il punto resta di 7 */
.punti-avanzamento button { all: unset; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.punti-avanzamento button:focus-visible { outline: 2px solid var(--malva); outline-offset: -6px; }
/* col dito, un gesto orizzontale sul passo porta al successivo (lo scroll verticale resta alla pagina) */
#sopra .esplora-t__passo { pointer-events: auto; touch-action: pan-y; }
.punti-avanzamento i { width: 7px; height: 7px; border-radius: var(--raggio-punto); box-shadow: inset 0 0 0 1px var(--polvere-400); transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }
.punti-avanzamento i.on { background: var(--scintilla); box-shadow: var(--bagliore); }

/* ------------------------------------------------------------------ 05 contatti e piede (scabiose) */
/* 7/11, scelta F "registro" (progetto/brand/scelte/piede.md): tutto in una schermata del telefono, anche 375 × 667.
   Desktop: chiusura (lettura, titolo, iscrizione) a sinistra, registro di tre righe a destra, appoggiati sulla stessa linea.
   Il velo è in px perché il piede è in px: copre il piede e sfuma ~130-200 px sopra, a ogni altezza dello schermo */
.strato[data-per="scabiose"] .velo { height: 470px; background: linear-gradient(rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.9) 130px, var(--vuoto) 190px); }
.piede { left: var(--margine); right: var(--margine); bottom: 0; }
.piede__corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: end; }
.piede__chiusura { display: flex; flex-direction: column; min-width: 0; }
.piede__chiusura > .tb-lettura { justify-content: flex-start; margin-bottom: 14px; }
.piede .contatti__titolo { margin-bottom: 20px; max-width: 16ch; color: var(--osso); font: 400 34px/1.08 var(--font-testo); letter-spacing: -0.025em; text-wrap: balance; }
.piede__isc { display: flex; flex-direction: column; gap: var(--passo-2); }
.piede__registro { min-width: 0; }
.piede__riga { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; min-height: 52px; border-top: 1px solid var(--polvere-900); }
.piede .piede__tit { margin: 0; font: 400 11px/1.45 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); }
.piede__lista { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; margin: 0; padding: 0; list-style: none; }
.piede__lista .tb-bottone--testo { min-height: 40px; background-position: 0 calc(50% + 10px); white-space: nowrap; }
.piede__stato { margin-left: 4px; font: 400 10px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); }
/* indirizzo da copiare: due etichette sovrapposte, cambio con sfocatura incrociata (si vede una cosa sola che cambia) */
.piede-copia { appearance: none; display: inline-grid; min-height: 36px; align-items: center; padding: 0; border: 0; background: none; color: var(--osso); font: 400 15px/1.4 var(--font-testo); text-align: left; cursor: copy; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-premi) ease-out; }
.piede-copia:active { transform: scale(0.985); }
.piede-copia:focus-visible { outline: 2px solid var(--malva); outline-offset: 4px; }
.piede-copia > span { grid-area: 1 / 1; transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--ease-componi); }
.piede-copia__si { opacity: 0; filter: blur(4px); transform: translateY(4px); }
.piede-copia.is-copiato .piede-copia__ind { opacity: 0; filter: blur(4px); transform: translateY(-4px); }
.piede-copia.is-copiato .piede-copia__si { opacity: 1; filter: blur(0); transform: none; }
/* iscrizione compatta: campo a riga + primario (come i campi del brief, css/pagine.css → .pg-campo) */
.iscrizione { display: flex; align-items: flex-end; gap: var(--passo-3); }
.iscrizione input { flex: 1; min-width: 0; min-height: 40px; padding: var(--passo-2) 0; background: transparent; color: var(--osso); border: 0; border-bottom: 1px solid var(--polvere-600); border-radius: 0; font: 400 15px/1.4 var(--font-testo); }
.iscrizione input::placeholder { color: var(--polvere-400); }
.iscrizione input:focus-visible { outline: 0; border-bottom-color: var(--malva); box-shadow: 0 1px 0 var(--malva); }
.iscrizione input:user-invalid { border-bottom-color: var(--malva); }
.iscrizione__nota { margin: 0; max-width: 46ch; font: 400 13px/1.5 var(--font-testo); color: var(--polvere-400); text-wrap: pretty; }
.iscrizione__esito { display: block; margin-top: var(--passo-1); color: var(--osso); }
.iscrizione__esito:empty { display: none; }
/* ultima riga: tutta è il bersaglio per tornare all'inizio */
.piede__torna { display: flex; justify-content: space-between; align-items: center; gap: var(--passo-4); margin-top: 20px; padding: 14px 0 calc(var(--passo-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--polvere-900); color: var(--polvere-400); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.piede__torna:focus-visible { outline: 2px solid var(--malva); outline-offset: -2px; }
.piede__firma { display: inline-flex; align-items: center; gap: var(--passo-6); }
.piede__su { display: inline-flex; align-items: center; gap: var(--passo-3); color: var(--osso); font: 500 14px/1 var(--font-testo); transition: transform var(--dur-premi) ease-out; }
.piede__su svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur-ui) var(--ease-componi); }
.piede__torna:active .piede__su { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .piede__torna:hover .piede__su svg { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .piede-copia > span { transform: none !important; filter: none !important; } }
/* glifo delle letture (6/11, al posto di "STZ.01"): un punto acceso come la stazione attiva. Provvisorio, bozze da fare */
.lettura__glifo { display: inline-block; width: 5px; height: 5px; margin: 0 10px 1px 0; vertical-align: middle; border-radius: var(--raggio-punto); background: var(--scintilla); box-shadow: var(--bagliore); }
.manca { opacity: 0.45; text-decoration: line-through dotted var(--polvere-400); }

/* telefono: una colonna; le righe del registro senza nome (resta per chi legge con la voce), © e P. IVA in una riga minuta */
[data-layout="telefono"] .strato[data-per="scabiose"] .velo { height: 560px; background: linear-gradient(rgba(6, 5, 6, 0), rgba(6, 5, 6, 0.92) 90px, var(--vuoto) 130px); }
[data-layout="telefono"] .piede__corpo { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
[data-layout="telefono"] .piede .contatti__titolo { margin-bottom: 16px; font-size: 26px; }
[data-layout="telefono"] .piede__registro { border-bottom: 1px solid var(--polvere-900); }
[data-layout="telefono"] .piede__riga { grid-template-columns: minmax(0, 1fr); min-height: 44px; }
[data-layout="telefono"] .piede .piede__tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-layout="telefono"] .piede__lista { column-gap: 16px; }
[data-layout="telefono"] .piede__lista .tb-bottone--testo, [data-layout="telefono"] .piede-copia { font-size: 14.5px; }
[data-layout="telefono"] .iscrizione input { min-height: 44px; }
[data-layout="telefono"] .iscrizione .tb-bottone { min-height: 44px; }
[data-layout="telefono"] .piede__torna { margin-top: 0; padding: 4px 0; border-top: 0; min-height: 48px; }
.piede__legale { padding-bottom: calc(12px + env(safe-area-inset-bottom)); font: 400 10.5px/1.4 var(--font-dato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--polvere-600); }

/* ------------------------------------------------------------------ foglio Indice (telefono) */
#indice { padding-top: calc(88px + env(safe-area-inset-top)); padding-bottom: calc(var(--passo-6) + env(safe-area-inset-bottom)); }
.foglio__piede { display: flex; flex-direction: column; gap: var(--passo-4); }

/* le regole "telefono" di Brand System valgono anche per un tablet in verticale e per l'anteprima dell'editor */
[data-layout="telefono"] .tb-barra { padding: 0 var(--passo-4); }
[data-layout="telefono"] .tb-stazioni { display: none; }
[data-layout="telefono"] .tb-indice-apri { display: inline-flex; margin-left: auto; }
/* Menu anche su desktop (6/11); dal 7/11 in alto c'è solo lui (le sezioni sono in basso, .sezioni) */
[data-layout="desktop"] .tb-indice-apri { display: inline-flex; margin-left: auto; }

/* ------------------------------------------------------------------ caricamento */
/* ingresso (js/ingresso.js): barra di grani (canvas a tutto schermo), percentuale in basso a destra */
#carica { position: fixed; inset: 0; z-index: 4; pointer-events: none; transition: opacity .9s ease .3s; }
.carica__pixel { position: absolute; inset: 0; width: 100%; height: 100%; }
.carica__cento { position: absolute; margin: 0; right: var(--margine); bottom: max(18px, calc(10px + env(safe-area-inset-bottom))); color: var(--osso); min-width: 5ch; justify-content: flex-end; }
#carica.finito { opacity: 0; }
/* la percentuale compare solo se il caricamento è lungo (ingresso.js mette .acceso dopo SOGLIA) */
#carica:not(.acceso) .carica__cento { opacity: 0; }
.carica__cento { transition: opacity .3s ease; }

/* ------------------------------------------------------------------ senza WebGL: fotogrammi fissi */
.senza-scena #scena { display: none; }
.senza-scena .strato::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--vuoto) var(--foto) center / cover no-repeat;
}
.senza-scena .strato[data-per="principale"] { --foto: url(../img/fotogrammi/principale-desktop.jpg); }
.senza-scena .strato[data-per="fiori"] { --foto: url(../img/fotogrammi/fiori-desktop.jpg); }
.senza-scena .strato[data-per="libro"] { --foto: url(../img/fotogrammi/libro-desktop.jpg); }
.senza-scena .strato[data-per="sfera"] { --foto: url(../img/fotogrammi/sfera-desktop.jpg); }
.senza-scena .strato[data-per="scabiose"] { --foto: url(../img/fotogrammi/scabiose-desktop.jpg); }
[data-layout="telefono"].senza-scena .strato[data-per="principale"] { --foto: url(../img/fotogrammi/principale-telefono.jpg); }
[data-layout="telefono"].senza-scena .strato[data-per="fiori"] { --foto: url(../img/fotogrammi/fiori-telefono.jpg); }
[data-layout="telefono"].senza-scena .strato[data-per="libro"] { --foto: url(../img/fotogrammi/libro-telefono.jpg); }
[data-layout="telefono"].senza-scena .strato[data-per="sfera"] { --foto: url(../img/fotogrammi/sfera-telefono.jpg); }
[data-layout="telefono"].senza-scena .strato[data-per="scabiose"] { --foto: url(../img/fotogrammi/scabiose-telefono.jpg); }
[data-layout="telefono"].senza-scena .strato:not([data-per="scabiose"])::before { bottom: calc(-1 * var(--sezioni-h)); }

/* ------------------------------------------------------------------ meno movimento */
@media (prefers-reduced-motion: reduce) {
  .invito__filo i { animation: none; top: 34px; }
  .binario { transition: none; }
  .passo p.apri { animation: none; }
  .velo, .strato.is-attivo .velo { transition-duration: 200ms; }
}

/* schede del binario: stessa altezza (la più alta), piede in fondo; la misura va a capo intera */
.binario { align-items: stretch; }
.binario .tb-scheda__piede { margin-top: auto; }

/* scheda larga del binario (6/11): più bassa e più larga della 4:5, il numero sta accanto al titolo
   come nelle voci delle Esplorazioni, il piede è una riga intera da 52 px (bersaglio comodo col pollice) */
.tb-scheda--larga { gap: var(--passo-3); padding: var(--passo-3) var(--passo-3) 0; }
.tb-scheda--larga .tb-scheda__testa { padding: var(--passo-1) var(--passo-1) var(--passo-2); }
.tb-scheda--larga .tb-scheda__img { aspect-ratio: 3 / 2; }
.tb-scheda--larga .tb-scheda__corpo {
  display: grid; grid-template-columns: 40px 1fr; column-gap: var(--passo-3); align-items: start;
  padding: var(--passo-1) var(--passo-1) var(--passo-3);
}
.tb-scheda--larga .tb-scheda__num { font-size: 28px; grid-row: span 2; padding-top: 1px; }
.tb-scheda--larga .tb-scheda__titolo { margin: 0; font-size: 20px; text-wrap: balance; }
.tb-scheda__meta {
  grid-column: 2; margin: var(--passo-1) 0 0; font: 400 13px/1.5 var(--font-testo); color: var(--polvere-400);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-scheda--larga .tb-scheda__piede {
  margin: auto calc(-1 * var(--passo-3)) 0; padding: 0 var(--passo-3) 0 var(--passo-4); min-height: 52px;
  border-top: 1px solid var(--polvere-900); transition: border-color var(--dur-ui) ease;
}
.tb-scheda--larga .tb-scheda__freccia { width: 36px; height: 36px; }
.tb-scheda--larga.is-attiva .tb-scheda__piede { border-top-color: var(--polvere-700); }
.tb-scheda--larga.is-attiva .tb-scheda__piede .tb-lettura { color: var(--osso); }
.tb-scheda--larga.is-attiva .tb-scheda__freccia { box-shadow: inset 0 0 0 1px var(--polvere-400); }
[data-layout="telefono"] .tb-scheda--larga .tb-scheda__titolo { font-size: 19px; }
.tb-scheda__testa { flex-wrap: wrap; row-gap: 0; }
.tb-scheda__testa > span { white-space: nowrap; }

/* ------------------------------------------------------------------ bottone Menu (telefono) e voci del menu
   Cornice (6/11 sera): border vero di 1px, che il browser aggancia ai pixel dello schermo (col clip-path di prima,
   a zoom di Windows 125-150%, ogni lato aveva uno spessore diverso). Il taglio resta clip-path; `::before`
   ridisegna 1px di filo lungo la diagonale. Stesse regole in css/pagina.css e css/pagine.css. */
.tb-indice-apri.tb-bottone--secondario {
  --bordo: var(--polvere-400); --fondo: var(--vuoto-alto);
  isolation: isolate; background: var(--fondo); box-shadow: none;
  border: 1px solid var(--bordo);   /* bordo vero: il browser lo aggancia ai pixel dello schermo anche al 125-150% */
  width: 68px; padding: 0;          /* larghezza intera e uguale per Menu e Chiudi */
  transition: transform var(--dur-premi) ease-out, background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
/* il filo della diagonale: il taglio di clip-path toglie l'angolo, qui si ridisegna 1px lungo il taglio */
.tb-indice-apri.tb-bottone--secondario::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: var(--taglio-b); height: var(--taglio-b); pointer-events: none;
  background: linear-gradient(to bottom left, var(--bordo) calc(50% + 1.3px), transparent calc(50% + 1.3px));
}
.tb-indice-apri.tb-angoli::after { content: none; }   /* niente segni d'angolo nel Menu (6/11, Andrea): sembravano una croce */
.tb-indice-apri.tb-bottone--secondario[aria-expanded="true"] { --bordo: var(--osso); --fondo: var(--vuoto-velo); }
@media (hover: hover) and (pointer: fine) {
  .tb-indice-apri.tb-bottone--secondario:hover { --bordo: var(--osso); --fondo: var(--vuoto-velo); box-shadow: none; }
}
.menu__gruppo { display: flex; justify-content: space-between; margin: var(--passo-8) 0 var(--passo-3); color: var(--polvere-400); opacity: 0; transition: opacity 160ms ease; }
.tb-foglio.is-aperto .menu__gruppo { opacity: 1; transition: opacity 500ms ease calc(140ms + var(--i, 0) * 55ms); }
#indice { overflow-y: auto; overscroll-behavior: contain; }

/* progetti propri come schede (6/11 sera, scelta A: progetto/brand/scelte/menu.md). Stesso blocco in css/pagine.css.
   Immagine a retino (sempre retino, mai pixel): rada a riposo, si compone dopo la cascata delle voci, nitida al passaggio */
.menu-schede { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--passo-3); }
.menu-sch { display: grid; gap: 10px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(-10px); filter: blur(5px); transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; }
.tb-foglio.is-aperto .menu-sch { opacity: 1; transform: none; filter: blur(0);
  transition: opacity 500ms ease calc(140ms + var(--i, 0) * 55ms), transform 700ms var(--ease-componi) calc(140ms + var(--i, 0) * 55ms), filter 700ms var(--ease-componi) calc(140ms + var(--i, 0) * 55ms); }
.menu-sch > * { transition: transform var(--dur-premi, 160ms) ease-out; }
.menu-sch:active > * { transform: scale(0.98); }   /* sui figli: il genitore ha la transizione d'ingresso, col ritardo */
.menu-sch:focus-visible { outline: 2px solid var(--malva); outline-offset: 4px; }
.menu-sch__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--vuoto); }
.menu-sch__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; --grano: 0.4px;
  -webkit-mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
          mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
  transition: --grano 200ms ease-out; }
.tb-foglio.is-aperto .menu-sch__img img { --grano: 2.2px; animation: menu-componi 900ms var(--ease-componi) calc(400ms + var(--i, 0) * 55ms) backwards; }
@keyframes menu-componi { from { --grano: 0.4px; } to { --grano: 2.2px; } }
.tb-foglio.is-aperto .menu-sch:active .menu-sch__img img, .tb-foglio.is-aperto .menu-sch:focus-visible .menu-sch__img img { --grano: 4.4px; transition: --grano 260ms var(--ease-componi); }
@media (hover: hover) and (pointer: fine) {
  .tb-foglio.is-aperto .menu-sch:hover .menu-sch__img img { --grano: 4.4px; transition: --grano 260ms var(--ease-componi); }
  .menu-sch:hover .menu-sch__vai svg { transform: translateX(3px); }
}
.menu-sch__testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.menu-sch__l { display: flex; justify-content: space-between; gap: 10px; }
.menu-sch__stato { color: var(--malva); }
.menu-sch__t { color: var(--osso); font: 400 18px/1.1 var(--font-testo); letter-spacing: -0.02em; }
.menu-sch__d { color: var(--polvere-200); font: 400 13px/1.45 var(--font-testo); text-wrap: pretty; }
.menu-sch__vai { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--osso); font: 500 13px/1 var(--font-testo); }
.menu-sch__vai svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur-ui, 200ms) var(--ease-componi); }
@media (prefers-reduced-motion: reduce) {
  .menu-sch, .tb-foglio.is-aperto .menu-sch { transform: none !important; filter: none !important; transition: opacity 200ms ease; }
  .menu-sch__img img, .tb-foglio.is-aperto .menu-sch__img img { animation: none; transition-duration: 0ms; }
}

/* desktop: pagine a sinistra, grandi; a destra le schede dei progetti propri, orizzontali (immagine 16:10 + testo) */
[data-layout="desktop"] #indice { padding-left: var(--margine); padding-right: var(--margine); }
[data-layout="desktop"] .menu { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--passo-16, 64px); align-items: start; }
[data-layout="desktop"] .menu > .tb-foglio__voci:first-child .tb-foglio__voce { font-size: 48px; }
[data-layout="desktop"] .menu__gruppo { margin: var(--passo-3) 0 var(--passo-3); }
[data-layout="desktop"] .menu-schede { grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-layout="desktop"] .menu-sch { grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--polvere-900); }
[data-layout="desktop"] .menu-schede li:first-child .menu-sch { border-top: 1px solid var(--polvere-900); }
[data-layout="desktop"] .menu-sch__img { aspect-ratio: 16 / 10; }
[data-layout="desktop"] .menu-sch__t { font-size: 28px; }
[data-layout="desktop"] .menu-sch__d { font-size: 14px; line-height: 1.5; max-width: 36ch; }
.iscrizione__legale a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }