/* Caratteri ospitati dal sito (nessuna richiesta a Google): BDO Grotesk di Lokal Container e Xanh Mono, entrambi SIL OFL 1.1
   (licenze in caratteri/). Xanh Mono sta al posto di PP Lettra Mono, a pagamento: scelta dei soci, 31/10. */
@font-face { font-family: "BDO Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("caratteri/BDOGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "BDO Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("caratteri/BDOGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "BDO Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("caratteri/BDOGrotesk-Bold.woff2") format("woff2"); }
@font-face { font-family: "Xanh Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("caratteri/XanhMono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Xanh Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("caratteri/XanhMono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Xaxa, il sito in bianco e nero (direttive del team brand, 26/10/2026).
   Due colori soli: ogni sezione è .nero o .bianco e tutto il resto (testo, fili, bottoni, selezione, focus)
   deriva da --fondo e --inchiostro. Niente animazioni: solo il cambio di colore al passaggio del mouse. */

:root {
  /* Colori: due soli, dal PDF del team brand. Testi secondari e fili sono mescole di questi due (vedi .nero e .bianco) */
  --n: #050302; /* Nero Abisso */
  --b: #ffffff; /* Bianco Puro */
  /* la luce dei segni, con i meccanismi di gionatannese.com: bagliore sotto il mouse, anello della lente, vetro liquido con cui
     i segni si formano e si sciolgono. Il blu del riferimento, voluto di nuovo dall'utente (29/10), su tutti i segni */
  --luce: #1621ff;        /* bagliore e filo di luce */
  --luce-anello: #252ba7; /* l'onda della lente al tocco: il blu del riferimento (l'utente l'ha voluta di nuovo così, 29/10) */
  --luce-vetro: #8fa0ff;  /* tinta del vetro liquido */
  /* il fondo della pagina: bianco, e nel metodo sfuma da una fase all'altra (scena.js lo cambia mentre si scorre) */
  --pagina: var(--b);
  --globo: clamp(220px, 26vw, 380px); /* il riquadro del globo d'apertura: il disegno ne occupa il 69% */

  /* Caratteri: BDO Grotesk per i testi, Xanh Mono per i titoli (al posto di PP Lettra Mono) */
  --font-testo: "BDO Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-titoli: "PP Lettra Mono", "Xanh Mono", "Courier New", monospace;

  /* Scala tipografica: sei gradini, nessun altro valore nel resto del file */
  /* un filo più piccola dal 30/10, su richiesta dell'utente (circa -8%) */
  --t-xs: .75rem;                          /* etichette, note, menu */
  --t-s: .9375rem;                         /* testo */
  --t-m: 1.0625rem;                        /* introduzioni, nomi */
  --t-l: clamp(1.55rem, 2.7vw, 2.25rem);   /* titoli di blocco e di riga */
  --t-xl: clamp(2.25rem, 4.5vw, 4rem);     /* titoli di sezione */
  --t-titolo: clamp(2.75rem, 8.6vw, 8.25rem); /* solo il titolo d'apertura */

  /* Spazi e griglia: 12 colonne, un margine e uno spazio tra colonne per tutto il sito */
  --spazio: clamp(1.25rem, 4vw, 3.5rem);
  --gap: 1.5rem;
  --colonna: minmax(0, 1fr);
}

.nero   { --fondo: var(--n); --inchiostro: var(--b); }
.bianco { --fondo: var(--b); --inchiostro: var(--n); }
/* Su misura sta dove il fondo scende verso il nero: quando è scuro anche il suo testo diventa chiaro */
html[data-scuro] #piani.bianco { --fondo: var(--n); --inchiostro: var(--b); }
#piani { transition: color .4s; }
.nero, .bianco, .inverti:is(:hover, :focus-visible) {
  background: var(--fondo); color: var(--inchiostro);
  --filo: color-mix(in srgb, var(--inchiostro) 22%, var(--fondo));
  --tenue: color-mix(in srgb, var(--inchiostro) 64%, var(--fondo)); /* resta sopra 4.5:1 su entrambi i fondi */
}
.nero ::selection, .bianco ::selection { background: var(--inchiostro); color: var(--fondo); }

/* La firma: l'inversione. Sotto il mouse una riga passa da bianco su nero a nero su bianco, di colpo, senza transizioni.
   Il riempimento sborda di 1rem a destra e a sinistra con due ombre piene, così il testo non tocca il bordo. */
@media (hover: hover) {
  .nero .inverti:hover { --fondo: var(--b); --inchiostro: var(--n); }
  .bianco .inverti:hover { --fondo: var(--n); --inchiostro: var(--b); }
}
.nero .inverti:focus-visible { --fondo: var(--b); --inchiostro: var(--n); }
.bianco .inverti:focus-visible { --fondo: var(--n); --inchiostro: var(--b); }
.inverti:is(:hover, :focus-visible) { box-shadow: -1rem 0 0 var(--fondo), 1rem 0 0 var(--fondo); outline: none; }
/* nelle tabelle Safari non disegna le ombre delle celle: due strisce laterali al loro posto */
tr.inverti:is(:hover, :focus-visible) { box-shadow: none; }
tr.inverti > :is(:first-child, :last-child) { position: relative; }
tr.inverti:is(:hover, :focus-visible) > :first-child::before,
tr.inverti:is(:hover, :focus-visible) > :last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1rem; background: var(--fondo); }
tr.inverti:is(:hover, :focus-visible) > :first-child::before { right: 100%; }
tr.inverti:is(:hover, :focus-visible) > :last-child::after { left: 100%; }
.inverti:hover a, .inverti:hover .file-attesa { color: inherit; }

*, *::before, *::after { box-sizing: border-box; }
/* i testi del sito non si selezionano e non si copiano (richiesta dei soci); si scrive e si copia solo nei campi del modulo.
   Sul telefono niente menu «Copia» tenendo premuto */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
html { scroll-padding-top: 5.5rem; scrollbar-color: var(--n) var(--b); overflow-x: clip; overscroll-behavior-y: none; } /* le parole spinte dal globo oltre il bordo non allargano la pagina; in fondo niente rimbalzo: su iPhone faceva scivolare la pagina sotto le tele fisse */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis { scroll-behavior: auto; } /* con lo scorrimento morbido di Lenis quello del browser va spento, sennò si sommano */
html.in-caricamento { overflow: hidden; }
/* apertura: prima il globo da solo sul fondo scuro, poi il fondo schiarisce e la pagina compare (avvio.js) */
html.svela body { background: var(--n) !important; } /* vince sul colore scritto da scena.js */
html.svela :is(.testata, main, .piede) { opacity: 0; }
html.svelando body { transition: background-color 1.1s ease; }
html.svelando :is(.testata, main, .piede) { transition: opacity .9s ease .15s; }
body { margin: 0; background: var(--pagina); font: 400 var(--t-s)/1.55 var(--font-testo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* le sezioni non hanno un fondo loro: si vede quello della pagina, che sfuma senza stacchi (il fondo pagina nero resta pieno) */
.retino { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* sotto i testi, sopra il fondo (sito.js) */
.retino.retino-fermo { position: absolute; inset: auto 0 auto 0; width: 100%; } /* sul telefono: attaccato alla pagina, top e altezza da sito.js */
main { position: relative; z-index: 1; }
.apertura.bianco, .sezione.bianco, .sezione.nero { background: none; } /* il fondo lo dà la pagina, che sfuma (scena.js) */
/* Su richiesta dell'utente (26/10) il testo non si seleziona e non si copia; i campi del modulo sì, altrimenti non si compila.
   È un deterrente: il testo resta nel codice della pagina, che serve a Google e ai lettori di schermo */
a, button, label, summary { -webkit-tap-highlight-color: transparent; } /* niente lampo grigio al tocco su iPhone */
img, canvas { -webkit-user-drag: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--inchiostro, var(--b)); outline-offset: 3px; }
[hidden] { display: none !important; } /* le righe a griglia altrimenti scavalcano hidden */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--b); color: var(--n); padding: .6rem 1rem; }
.salta:focus { top: 1rem; }
.salta:focus-visible { outline-color: var(--n); } /* bianco su bianco non si vedeva */

/* Titoli in Lettra Mono, come da indicazioni del team brand, in grassetto.
   shortcut: Xanh Mono non ha il grassetto, lo fa un contorno del colore del testo; con PP Lettra Mono Medium si toglie */
h1, h2, h3, h4 { font-family: var(--font-titoli); font-weight: 400; letter-spacing: -.03em; -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; text-wrap: balance; }

/* Griglia: 12 colonne, un margine solo per tutto il sito */
.testata, .apertura, .sezione, .piede { padding-inline: var(--spazio); }
.sezione, .apertura { display: grid; grid-template-columns: repeat(12, var(--colonna)); column-gap: var(--gap); }

/* Testata */
.testata { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 2rem; padding-block: 1rem; border-bottom: 1px solid var(--filo); }
/* la barra prende il fondo della pagina; quando il fondo si scurisce (nel metodo) il testo diventa bianco */
.testata.bianco { background: var(--pagina); }
html[data-scuro] .testata.bianco { --fondo: var(--pagina); --inchiostro: var(--b); }
.testata-logo { color: inherit; }
.testata-segno { display: block; height: 50px; width: auto; aspect-ratio: 767 / 421; } /* il teschio con la scritta XAXA Studio */
/* passando col mouse sul logo la fiamma della candela guizza */
.testata-segno .fiamma { transform-box: fill-box; transform-origin: 50% 100%; }
/* il logo di Lele in positivo sui fondi chiari e in negativo sui fondi scuri (barra .nero o fondo della pagina scuro) */
.testata-segno.negativo { display: none; }
:is(html[data-scuro] .testata, .testata.nero) .testata-segno.positivo { display: none; }
:is(html[data-scuro] .testata, .testata.nero) .testata-segno.negativo { display: block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .testata-logo:is(:hover, :focus-visible) .fiamma { animation: guizzo .9s ease-in-out infinite; }
}
@keyframes guizzo {
  0%, 100% { transform: skewX(0) scaleY(1); }
  20% { transform: skewX(-8deg) scaleY(1.1); }
  45% { transform: skewX(6deg) scaleY(.92); }
  70% { transform: skewX(-4deg) scaleY(1.06); }
}
.menu { display: flex; gap: 2rem; margin-left: auto; font-size: var(--t-xs); letter-spacing: .02em; }
.menu a { text-decoration: none; padding-block: .3rem; border-bottom: 1px solid transparent; }
@media (hover: hover) { .menu a:hover { border-bottom-color: currentColor; } }
.menu a[aria-current] { border-bottom-color: currentColor; }
.menu-apri { display: none; }
/* l'avviso dei suoni (suoni.js): fatto come una notifica di sistema, non come il sito: carattere del sistema, lastra scura
   sfocata, in alto a destra; entra da destra ed esce sfumando */
.avviso-suono { position: fixed; top: 1rem; right: 1rem; z-index: 300; width: min(23rem, calc(100vw - 2rem)); display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; padding: .8rem .85rem .85rem;
  font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #fff; letter-spacing: 0;
  background: rgb(38 38 40 / .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: .5px solid rgb(255 255 255 / .16); border-radius: 14px; box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .35);
  animation: avviso-entra .45s cubic-bezier(.2, .9, .3, 1); }
.avviso-suono.via { opacity: 0; transform: translateX(1rem); transition: opacity .35s, transform .35s; }
.avviso-icona { width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: #050302; grid-row: span 2; display: grid; place-items: center; }
.avviso-icona::after { content: ""; width: 1.55rem; aspect-ratio: 1; background: #fff; -webkit-mask: url("loghi/mono/globo-compatto-bianco.svg") center / contain no-repeat; mask: url("loghi/mono/globo-compatto-bianco.svg") center / contain no-repeat; } /* il globo di Lele */
.avviso-suono b { font-weight: 600; } .avviso-suono p { margin: .1rem 0 0; color: rgb(255 255 255 / .85); }
.avviso-tasti { grid-column: 2; display: flex; gap: .5rem; margin-top: .55rem; }
.avviso-tasti button { font: inherit; font-weight: 500; color: #fff; background: rgb(255 255 255 / .14); border: 0; border-radius: 7px; padding: .38rem .9rem; cursor: pointer; }
.avviso-tasti button[data-si] { background: #1621ff; }
.avviso-tasti button:hover { filter: brightness(1.15); } .avviso-tasti button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes avviso-entra { from { opacity: 0; transform: translateX(1.5rem); } }
@media (prefers-reduced-motion: reduce) { .avviso-suono { animation: none; } }
/* il bottone del suono (suoni.js): tre barrette che restano basse da spente e ondeggiano da accese */
.suono { display: inline-flex; align-items: center; gap: .45rem; margin-left: 2rem; padding: .3rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--t-xs); letter-spacing: .02em; cursor: pointer; }
.suono-onde { display: inline-flex; align-items: flex-end; gap: 2px; height: .8em; }
.suono-onde i { width: 2px; height: 25%; background: currentColor; transition: height .3s; }
.suono[aria-pressed="true"] .suono-onde i { animation: onda .9s ease-in-out infinite alternate; }
.suono[aria-pressed="true"] .suono-onde i:nth-child(2) { animation-delay: -.3s; }
.suono[aria-pressed="true"] .suono-onde i:nth-child(3) { animation-delay: -.6s; }
@keyframes onda { from { height: 25%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .suono[aria-pressed="true"] .suono-onde i { animation: none; height: 70%; } }
.apertura-posto { display: none; }

/* Apertura: il titolo, una frase, l'indice della pagina */
.apertura { min-height: calc(100svh - 4.6rem); grid-template-rows: 1fr auto auto; row-gap: 3rem; padding-block: 2rem var(--spazio); }
.apertura h1 { grid-column: 1 / -1; align-self: center; text-align: center; font-size: var(--t-titolo); line-height: .88; letter-spacing: -.04em; padding-block: clamp(2rem, 9vh, 6.5rem) clamp(1.5rem, 6vh, 4.5rem); }
.riga-titolo { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* il punto finale del titolo: all'apertura è una x che gira velocissima, rallenta, si ferma e si chiude in un punto (sito.js) */
.punto { position: relative; display: inline-block; transition: color .25s, -webkit-text-stroke-color .25s; }
@media (max-width: 720px) { .apertura h1 { font-size: 15vw; } } /* sul telefono un po' più grande (richiesta di Lele, 06/11): circa il 45% in più, senza riempire tutta la larghezza */
.apertura h1 .punto { margin-right: -.46em; } /* il punto sporge fuori dalla riga: "by design" resta centrato sotto "Distinct" */
.punto:is(.attesa, .gira) { color: transparent; -webkit-text-stroke-color: transparent; }
/* la X è quella del logo «Xaxa Studio», piccola, proprio dove poi sta il punto */
.punto.gira::after { content: ""; position: absolute; left: 50%; top: .63em; width: .3em; height: .28em; margin-left: -.15em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22445%20632%20113%20107%22%3E%3Cpath%20fill%3D%22%23050302%22%20d%3D%22M484.37%2C683.3l-33.18-49.48h32.75l18.01%2C30.06%2C17.72-30.06h32.04l-32.75%2C48.91%2C37.15%2C54.44h-32.89l-21.83-34.59-21.83%2C34.59h-32.47l37.29-53.88Z%22/%3E%3C/svg%3E") center / contain no-repeat; animation: x-gira 2.5s cubic-bezier(.06, .8, .18, 1) forwards, x-scala 3s forwards; }
/* come uno shuriken: parte velocissima (un filo mossa), rallenta piano piano fino a fermarsi dritta, poi si chiude nel punto */
@keyframes x-gira { from { rotate: 0deg; filter: blur(1.2px); } 55% { filter: blur(0); } to { rotate: 3600deg; filter: blur(0); } }
@keyframes x-scala {
  0% { scale: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1.2); }
  8%, 84% { scale: 1; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  100% { scale: .45; }
}
.rassicura { margin-top: -.5rem; font-size: var(--t-xs); color: var(--tenue); }
.apertura-testo p { text-wrap: pretty; }
.apertura-testo { max-width: none; } /* una riga per frase: le righe vanno a capo dove finisce il pensiero */
@media (max-width: 720px) { .a-capo { display: none; } }
@media (min-width: 721px) { .apertura-testo p { white-space: nowrap; } } /* sul computer ogni frase sta intera sulla sua riga */ /* sul telefono le righe sono corte: torna a capo da solo */
.apertura-testo { grid-column: 1 / span 6; display: grid; justify-items: start; gap: 1.4rem; font-size: var(--t-m); max-width: 46ch; }
.indice { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--gap); } /* tre o quattro caselle, secondo le sezioni visibili */
.indice a { position: relative; display: grid; justify-items: start; gap: .3rem; padding: 1rem 0 .9rem; text-decoration: none; overflow: hidden; }
.indice-n { font: 400 var(--t-xs)/1 var(--font-titoli); font-variant-numeric: tabular-nums; }
.indice-nome { display: block; overflow: hidden; height: 1.3em; line-height: 1.3; font-size: var(--t-m); }
.indice-scorre { display: block; position: relative; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.indice-scorre::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; }
.indice-nota { font-size: var(--t-xs); color: var(--tenue); transition: color .4s; }
.indice-freccia { position: absolute; right: 0; top: .9rem; font: 400 var(--t-m)/1 var(--font-titoli); opacity: 0; transform: translate(-.4rem, -.6rem); transition: opacity .4s, transform .6s cubic-bezier(.7, 0, .2, 1); }
/* Le quattro caselle: la riga sopra si disegna da sinistra quando la pagina compare, una dopo l'altra; poi una scia di luce blu
   la percorre di casella in casella, ogni pochi secondi. Al passaggio del mouse la riga si accende di blu, il nome scorre in su
   e torna dal basso, arriva una freccia che indica dove si va. */
.indice a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--inchiostro); transform-origin: left; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1) var(--ritardo, 0s), background-color .4s, box-shadow .4s; }
.indice a::after { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 2px; border-radius: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--luce-vetro) 40%, var(--luce) 70%, transparent); box-shadow: 0 0 14px 2px rgb(22 33 255 / .45); }
/* --ritardo e --scia li scrive sito.js secondo l'ordine delle caselle visibili: la luce passa da una all'altra senza spezzarsi */
html:is(.in-caricamento, .svela) .indice a::before { transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  .indice a::after { animation: scia 6.6s linear calc(2.5s + var(--scia, 0s)) infinite; }
  .indice a:active { transform: scale(.98); transition: transform .15s; }
}
@keyframes scia {
  0% { transform: translateX(-100%); opacity: 0; }
  2% { opacity: 1; }
  15% { opacity: 1; }
  16.6%, 100% { transform: translateX(270%); opacity: 0; }
}
@media (hover: hover) {
  .indice a:is(:hover, :focus-visible)::before { background: var(--luce); box-shadow: 0 0 12px rgb(22 33 255 / .6); transform: scaleY(2); }
  .indice a:is(:hover, :focus-visible) .indice-scorre { transform: translateY(-100%); }
  .indice a:is(:hover, :focus-visible) .indice-freccia { opacity: 1; transform: none; animation: freccia 1.2s ease-in-out .6s infinite; }
  .indice a:is(:hover, :focus-visible) .indice-nota { color: var(--inchiostro); }
}
@keyframes freccia { 50% { transform: translateY(.3rem); } }
.indice a:focus-visible { outline: none; }

/* Sezioni: titolo a sinistra (colonne 1-4), contenuto a destra (5-12) */
.sezione { padding-block: calc(var(--spazio) * 2); row-gap: 0; border-top: 1px solid var(--inchiostro); }
.sezione-testa { display: contents; }
.sezione-testa h2 { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; position: sticky; top: 6rem; font-size: var(--t-xl); line-height: .95; }
.sezione-n { display: block; margin-bottom: .9rem; font-size: var(--t-xs); letter-spacing: 0; -webkit-text-stroke: 0; font-variant-numeric: tabular-nums; }
.sezione-intro { grid-column: 5 / -1; font-size: var(--t-m); max-width: 56ch; padding-bottom: calc(var(--spazio) * 1.2); }
.sezione > :not(.sezione-testa) { grid-column: 5 / -1; }
#servizi .sezione-intro { justify-self: end; } /* l'introduzione di Cosa realizziamo sta tutta a destra */

/* Il segno 3D: una tela fissa grande come lo schermo, davanti ai testi come la figura di gionatannese.com (scena.js lo muove) */
.globo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.globo-tocco { position: fixed; left: 0; top: 0; width: 100px; height: 100px; transform-origin: 0 0; border-radius: 50%; background: transparent; border: 0; cursor: pointer; z-index: 4; }
.globo-tocco:focus-visible { outline: 2px solid var(--n); outline-offset: 6px; }
/* nell'apertura ogni parola è un pezzo che si scosta dal globo (scena.js): gli spostamenti valgono solo sugli inline-block */
.parola { display: inline-block; text-decoration: inherit; text-underline-offset: inherit; text-decoration-thickness: inherit; } /* la sottolineatura dei link segue le parole */
/* il titolo all'arrivo: per un attimo codice, poi lettere (scena.js) */

/* Metodo. Ogni fase è alta più di uno schermo: in una metà c'è il segno (lo disegna la tela fissa, qui c'è solo il suo posto),
   nell'altra la casella di vetro. Fasi dispari: segno a sinistra; pari: a destra */
.metodo { color: var(--n); }
.fase { min-height: 115svh; display: grid; grid-template-columns: repeat(12, var(--colonna)); column-gap: var(--gap); align-items: center; padding-inline: var(--spazio); }
.fase.scura { color: var(--b); }
.fase-posto, .fase-testo { grid-row: 1; }
.fase-testo { position: relative; z-index: 5; } /* sopra la tela del segno: il testo non viene mai coperto */
.fase-posto { height: min(56svh, 40vw); display: grid; place-items: center; }
.fase:nth-child(odd) .fase-posto { grid-column: 1 / span 6; }
.fase:nth-child(odd) .fase-testo { grid-column: 7 / span 5; }
.fase:nth-child(even) .fase-posto { grid-column: 7 / span 6; }
.fase:nth-child(even) .fase-testo { grid-column: 2 / span 5; }
/* l'introduzione del metodo, a parte: il titolo al centro, i due paragrafi uno per lato e vicini; quando passa il globo si aprono e lo lasciano passare (scena.js) */
.metodo-testa { display: grid; grid-template-columns: repeat(12, var(--colonna)); column-gap: var(--gap); row-gap: 1.2rem; align-content: center; min-height: 80svh; padding: calc(var(--spazio) * 2) var(--spazio); border-top: 1px solid var(--n); }
.metodo-testa { justify-items: center; text-align: center; }
.metodo-testa h2 { grid-column: 1 / -1; font-size: var(--t-xl); line-height: .95; margin-bottom: 1.4rem; }
.metodo-intro { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr 3rem 1fr; font-size: var(--t-m); }
.metodo-intro p { grid-row: 1; max-width: 34ch; }
.metodo-intro p:first-child { grid-column: 3; justify-self: start; text-align: left; }
.metodo-intro p:last-child { grid-column: 1; justify-self: end; text-align: left; } /* a bandiera, da sinistra, come tutto il sito */
@media (max-width: 720px) { .metodo-intro { grid-template-columns: 1fr; row-gap: 1rem; } .metodo-intro p { grid-row: auto; grid-column: 1 !important; justify-self: start !important; } }
@media (max-width: 980px) { .metodo-testa :is(h2, .metodo-intro) { grid-column: 1 / -1; } }
/* Le fasi senza riquadri (scelta dell'utente, 29/10): solo testo, sopra la tela del segno, così il segno gli passa dietro */
.casella { position: relative; z-index: 5; display: grid; gap: 1rem; max-width: 32rem; }
.casella h3 { font-size: var(--t-xl); line-height: .95; }
.casella p { font-size: var(--t-m); max-width: 38ch; }
/* in fondo ai Servizi: il posto dove il teschio si ferma, poi la pagina continua senza segno */
.sezione > .chiusura-posto { grid-column: 1 / -1; justify-self: center; height: min(42svh, 72vw); aspect-ratio: 88 / 167; display: grid; place-items: center; margin-top: calc(var(--spazio) * 2); }
/* i disegni piatti al posto del segno 3D: si vedono solo senza WebGL (scena.js aggiunge .senza-3d) */
.segno-piatto { height: 78%; width: auto; max-width: 100%; object-fit: contain; visibility: hidden; }
.senza-3d .segno-piatto { visibility: visible; }
.senza-3d .fase.scura .segno-piatto { filter: invert(1); }

/* Servizi: cinque aree in righe, il nome a sinistra e il contenuto a destra */
.aree { border-top: 1px solid var(--inchiostro); }
.area { display: grid; grid-template-columns: repeat(8, var(--colonna)); column-gap: var(--gap); padding-block: 1.6rem 2rem; border-bottom: 1px solid var(--filo); }
.area h3 { grid-column: 1 / span 3; font-size: var(--t-l); line-height: 1; }
.area-corpo { grid-column: 4 / -1; display: grid; gap: 1rem; align-content: start; }
.area-chiedi { justify-self: start; margin-top: .4rem; font-size: var(--t-s); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.area-chiedi span { display: inline-block; transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.area-chiedi:hover span { transform: translateX(.3rem); }
@media (hover: hover) { .area-chiedi { transition: color .3s; } .area-chiedi:hover { color: #1621ff; animation: bt-guasto .32s steps(1); } }
/* domande frequenti: si aprono al tocco */
.domande { border-top: 1px solid var(--inchiostro); max-width: 52rem; }
.domanda { border-bottom: 1px solid var(--filo); }
.domanda summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; font-size: var(--t-m); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: "+"; font: 400 var(--t-l)/1 var(--font-titoli); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda p { max-width: 60ch; padding-bottom: 1.3rem; color: var(--tenue); }
.area-frase { font-size: var(--t-m); max-width: 40ch; }

.voci { display: grid; gap: .35rem; font-size: var(--t-s); color: var(--tenue); }
.voci li { padding-left: 1.2rem; position: relative; }
.voci li::before { content: ""; position: absolute; left: 0; top: .78em; width: .55rem; height: 1px; background: currentColor; }

/* Tariffe: le due modalità affiancate, come due colonne di un contratto */
/* le due colonne allineate riga per riga: titolo, frase, ogni riga delle condizioni, bottone. Se una riga va a capo da una
   parte, si allarga anche quella accanto: le linee restano dritte da una colonna all'altra */
.modalita { display: grid; grid-template-columns: repeat(2, var(--colonna)); grid-template-rows: auto auto repeat(4, auto) auto; column-gap: calc(var(--gap) * 2); margin-bottom: calc(var(--spazio) * 1.2); }
.modo { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 1.4rem; border-top: 1px solid var(--inchiostro); padding-top: 1.4rem; }
.modo h3 { font-size: var(--t-xl); line-height: .95; }
.modo-cosa { max-width: 40ch; font-size: var(--t-m); }
.termini { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.termini div { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; gap: 1rem; padding-block: .7rem; border-top: 1px solid var(--filo); }
.termini div:last-child { border-bottom: 1px solid var(--filo); }
.termini dt { font-size: var(--t-xs); color: var(--tenue); padding-top: .15rem; }
.modo .bottone { justify-self: start; align-self: end; margin-top: .4rem; }

/* Listino (05/11, notte): righe come i Servizi, solo tipografia e fili. Ogni riga è un'area (Marchio, Web, Etichette,
   Editoria, Insieme) e mostra le sue voci della Bibbia dalla più economica alla più cara: cambiano da sole ogni 10 secondi,
   come un errore digitale che si ricompone (sito.js), o con la freccetta. Nome in Lettra, cosa comprende in piccolo, prezzo
   in Lettra con «da» in corsivo. «Insieme» è la riga già invertita, col valore dei pezzi presi da soli barrato da una riga
   arancio che si disegna (come «banali» nella rottura). Tutta la riga porta al modulo e si inverte sotto il mouse */
.listino { margin-bottom: calc(var(--spazio) * 1.4); }
.listino-prezzi { list-style: none; padding: 0; margin: 0 0 2.4rem; border-top: 1px solid var(--inchiostro); }
.lp-riga { position: relative; display: grid; grid-template-columns: repeat(8, var(--colonna)); column-gap: var(--gap); row-gap: .25rem; align-items: baseline; padding-block: 1rem 1.3rem; border-bottom: 1px solid var(--filo); }
.lp-area { grid-column: 1 / span 3; grid-row: 1; font: italic 400 var(--t-xs)/1.2 var(--font-titoli); color: var(--tenue); }
.lp-nome { grid-column: 1 / span 3; grid-row: 2; font: 400 var(--t-l)/1.05 var(--font-titoli); color: inherit; text-decoration: none; outline: none; }
.lp-nome::after { content: ""; position: absolute; inset: 0; } /* tutta la riga porta al modulo */
.lp-cosa { grid-column: 4 / span 3; grid-row: 2; font-size: var(--t-xs); line-height: 1.5; color: var(--tenue); max-width: 34ch; min-height: 3em; }
.lp-prezzo { grid-column: 7 / -1; grid-row: 2; justify-self: end; white-space: nowrap; font: 400 var(--t-l)/1 var(--font-titoli); letter-spacing: -.01em; }
.lp-prezzo i { font-size: var(--t-s); color: var(--tenue); margin-right: .2em; }
.lp-insieme .lp-cosa { grid-column: 4 / span 2; } /* nell'offerta il prezzo ha una colonna in più: ci sta il barrato accanto */
.lp-insieme .lp-prezzo { grid-column: 6 / -1; }
.lp-prezzo s { position: relative; margin-right: .6rem; font: 400 var(--t-s)/1 var(--font-titoli); text-decoration: none; color: var(--tenue); }
.lp-prezzo s::after { content: ""; position: absolute; left: -.1em; right: -.1em; top: 52%; height: 2px; background: #ff5a1f; transform-origin: left; transition: transform .7s cubic-bezier(.7, 0, .2, 1) .2s; }
.lp-avanti { grid-column: 7 / -1; grid-row: 1; justify-self: end; position: relative; z-index: 1; display: inline-flex; gap: .45rem; align-items: baseline; padding: .35rem 0 .35rem .6rem; margin: -.35rem 0;
  font: 400 var(--t-xs)/1 var(--font-titoli); color: var(--tenue); background: none; border: 0; cursor: pointer; }
.lp-avanti span[aria-hidden] { font-size: var(--t-s); color: var(--inchiostro); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.lp-avanti:hover span[aria-hidden] { transform: translateX(.25rem); }
.lp-avanti:focus-visible { outline: 2px solid var(--luce); outline-offset: 2px; }
/* sotto il mouse o con la tastiera sul nome la riga si inverte (il nome è il collegamento, la riga intera è cliccabile) */
.bianco .lp-riga.inverti:has(.lp-nome:focus-visible) { --fondo: var(--n); --inchiostro: var(--b); background: var(--fondo); color: var(--inchiostro); box-shadow: -1rem 0 0 var(--fondo), 1rem 0 0 var(--fondo); --tenue: color-mix(in srgb, var(--b) 64%, var(--n)); }
#piani .lp-insieme { --fondo: var(--n); --inchiostro: var(--b); --tenue: color-mix(in srgb, var(--b) 68%, var(--n)); --filo: var(--n);
  background: var(--fondo); color: var(--inchiostro); box-shadow: -1rem 0 0 var(--fondo), 1rem 0 0 var(--fondo); }
html[data-scuro] #piani .lp-insieme { --fondo: var(--b); --inchiostro: var(--n); --tenue: color-mix(in srgb, var(--n) 68%, var(--b)); }
.lp-insieme:has(.lp-nome:focus-visible) { outline: 2px solid var(--luce); outline-offset: 4px; }
.lp-insieme.da-animare:not(.vista) .lp-prezzo s::after, .lp-insieme.ridisegna .lp-prezzo s::after { transform: scaleX(0); transition: none; }
/* l'errore digitale quando una riga cambia voce (sito.js): le copie a fasce stanno sopra, la riga vera sotto resta nascosta */
.in-glitch > :not(.lp-fantasma) { visibility: hidden; }
#piani .lp-fantasma { position: absolute; inset: 0; margin: 0; pointer-events: none; background: none; box-shadow: none; border-color: transparent; }
.lp-fantasma.blu, .lp-fantasma.blu * { color: var(--luce) !important; }
@media (hover: hover) { html[data-scuro] #piani .inverti:hover { --fondo: var(--b); --inchiostro: var(--n); } }
html[data-scuro] #piani .inverti:focus-visible { --fondo: var(--b); --inchiostro: var(--n); }
/* le garanzie: quattro voci in fila sotto un filo */
.regole { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem var(--gap); font-size: var(--t-xs); color: var(--tenue); }
.regole b { display: block; margin-bottom: .3rem; font: italic 400 var(--t-s)/1.2 var(--font-titoli); color: var(--inchiostro); }
.listino-nota { max-width: 60ch; color: var(--tenue); font-size: var(--t-xs); }
@media (max-width: 900px) {
  .regole { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lp-riga { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .lp-area { grid-column: 1; }
  .lp-avanti { grid-column: 2; }
  .lp-nome { grid-column: 1; grid-row: 2; }
  .lp-prezzo { grid-column: 2; grid-row: 2; }
  .lp-cosa { grid-column: 1 / -1; grid-row: 3; max-width: none; min-height: 0; }
  .lp-insieme .lp-cosa { grid-column: 1 / -1; }
  .lp-insieme .lp-prezzo { grid-column: 2; }
  .lp-prezzo s { display: table; margin: 0 0 .3rem auto; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tariffe e risorse: blocchi in sequenza */
.modalita + .blocco, .blocco + .blocco { margin-top: calc(var(--spazio) * 1.2); padding-top: calc(var(--spazio) * 1.2); border-top: 1px solid var(--filo); }
.blocco[hidden] + .blocco { margin-top: 0; padding-top: 0; border-top: 0; } /* se i documenti sono nascosti, i dati fiscali aprono la sezione */
.blocco h3 { font-size: var(--t-l); line-height: 1; margin-bottom: 1rem; }
.blocco-intro { max-width: 56ch; margin-bottom: 1.8rem; }

.tabella-scorre { margin-inline: -1rem; padding-inline: 1rem; } /* spazio per le strisce dell'inversione; niente taglio ai bordi: il testo si scosta attorno al globo */
.pacchetti { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.pacchetti th, .pacchetti td { text-align: left; vertical-align: top; padding: .9rem 1.2rem .9rem 0; border-bottom: 1px solid var(--filo); }
.pacchetti thead th { font-weight: 400; font-size: var(--t-xs); color: var(--tenue); border-bottom-color: var(--inchiostro); }
.pacchetti tbody th[scope="row"] { font-weight: 400; font-family: var(--font-titoli); font-size: var(--t-m); white-space: nowrap; -webkit-text-stroke: .02em currentColor; }
.pacchetti .linea th { padding-top: 1.8rem; font: 400 var(--t-xs)/1 var(--font-testo); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--inchiostro); }
.pacchetti td:nth-child(2) { max-width: 46ch; }
.pacchetti td:nth-child(3), .pacchetti td:nth-child(4) { white-space: nowrap; }
.pacchetti td:last-child { padding-right: 0; text-align: right; }

.condizioni { display: grid; grid-template-columns: repeat(2, var(--colonna)); gap: 1.6rem var(--gap); margin-top: 2.4rem; }
.condizioni dt, .dati dt { font-size: var(--t-xs); color: var(--tenue); margin-bottom: .3rem; }

.canoni { display: grid; grid-template-columns: repeat(2, var(--colonna)); column-gap: var(--gap); }
.canone { border-top: 1px solid var(--inchiostro); padding-top: 1rem; }
.canone h4 { font-size: var(--t-m); margin-bottom: .9rem; }

/* Risorse */
.file { border-top: 1px solid var(--inchiostro); }
.file-riga { display: grid; grid-template-columns: 3fr 4fr 1fr 2fr; column-gap: var(--gap); align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--filo); }
.file-nota, .file-tipo { color: var(--tenue); font-size: var(--t-xs); }
.file-azione { justify-self: end; font-size: var(--t-xs); }
.file-attesa { color: var(--tenue); }
.dati { display: grid; grid-template-columns: repeat(3, var(--colonna)); gap: 1.4rem var(--gap); }
.dati div { border-top: 1px solid var(--filo); padding-top: .8rem; }
.da-definire { color: var(--tenue); }

/* Contatti */
.contatti { display: grid; grid-template-columns: repeat(8, var(--colonna)); column-gap: var(--gap); }
.diretti { grid-column: 1 / span 3; grid-template-columns: 1fr; align-content: start; }
.modulo { grid-column: 1 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem var(--gap); }
.campo { display: grid; gap: .5rem; min-width: 0; font-size: var(--t-s); color: color-mix(in srgb, var(--inchiostro) 82%, transparent); } /* etichette leggibili: misura del testo, quasi piene */
.campo small { color: var(--tenue); }
.campo-largo { grid-column: 1 / -1; }
.campo small { margin-left: .4rem; }
.campo input, .campo select, .campo textarea {
  font: 400 var(--t-m)/1.4 var(--font-testo); color: var(--inchiostro); background: transparent;
  border: 0; border-bottom: 1px solid var(--filo); border-radius: 0; padding: .5rem 0 .65rem; width: 100%;
}
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 1.6rem;
  background: linear-gradient(45deg, transparent 50%, currentColor 50%) right .55rem center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) right .2rem center / 6px 6px no-repeat; }
.campo select option { background: var(--fondo); color: var(--inchiostro); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--inchiostro); }
.campo [aria-invalid="true"] { border-bottom: 2px solid var(--inchiostro); }
.campo-errore { flex-basis: 100%; font-size: var(--t-xs); color: var(--inchiostro); }
.privacy { flex-wrap: wrap; }
.privacy { display: flex; align-items: center; gap: .8rem; font-size: var(--t-xs); color: var(--tenue); }
.privacy input { width: 1.1rem; height: 1.1rem; accent-color: var(--inchiostro); flex: none; }
.privacy a { color: var(--inchiostro); }
.invio { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.esito { font-size: var(--t-s); max-width: 52ch; }


/* Bottoni XAXA: un blocco netto, nero, la scritta nel carattere dei titoli e a destra la x della scritta xaxa del footer
   (--x-xaxa). Al passaggio del mouse la x si apre e riempie il bottone di blu, come nelle schermate del finale; la scritta ha
   un colpo di guasto arancio e blu ed esce verso l'alto mentre la stessa rientra da sotto (sito.js aggiunge la x) */
.bottone {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .9rem; padding: 1.05rem 1.45rem;
  cursor: pointer; text-decoration: none; font: 400 var(--t-m)/1 var(--font-titoli); letter-spacing: -.01em;
  color: var(--b); background: rgb(5 3 2 / .86); border: 0; border-radius: .55rem;
  transform: translateZ(0); /* Safari: senza un livello proprio non ritaglia agli angoli tondi la x che si apre */
  /* vetro scuro: lascia intravedere sfocato il fondo, un filo di luce sul bordo alto, un'ombra neutra sotto */
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .07), 0 .7rem 1.4rem -.7rem rgb(0 0 0 / .45);
  transition: color .3s, background-color .2s .38s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.bottone::after { /* l'ologramma: righe sottilissime e, al passaggio, un riflesso iridescente che attraversa il bottone una volta */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 35%, rgb(0 165 224 / .35) 45%, rgb(255 255 255 / .45) 50%, rgb(255 90 31 / .3) 55%, transparent 65%) -150% 0 / 250% 100% no-repeat,
    repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen; transition: background-position 0s;
}
.bottone::before { /* la x che si apre: nasce sopra l'icona e cresce fino a coprire tutto */
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(100% - 1.2rem - .5em); top: 50%;
  width: 70em; aspect-ratio: 1.241; background: #1621ff;
  -webkit-mask: var(--x-xaxa) center / contain no-repeat; mask: var(--x-xaxa) center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.013); opacity: 0; transition: transform .6s cubic-bezier(.7, 0, .2, 1), opacity .12s;
}
.bt-x { display: none; flex: none; width: 1em; aspect-ratio: 1.241; background: currentColor; -webkit-mask: var(--x-xaxa) center / contain no-repeat; mask: var(--x-xaxa) center / contain no-repeat; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.bt-finestra { display: block; overflow: hidden; height: 1.2em; line-height: 1.2; }
.bt { display: block; position: relative; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.bt::after { content: attr(data-t); position: absolute; left: 0; top: calc(100% + .45em); } /* la copia sta un po' più sotto: le lettere alte (i, l) non sporgono nella finestra */
.nero .bottone, .bottone.chiaro, .manifesto-riga .bottone { color: var(--n); background: rgb(255 255 255 / .9); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / .3), 0 .7rem 1.6rem -.7rem rgb(0 0 0 / .8); transition: color .2s .22s, background-color .2s .38s, transform .45s cubic-bezier(.2, .8, .2, 1); } /* sul bianco la scritta schiarisce quando il blu è arrivato */
@media (hover: hover) {
  .bottone:hover { color: var(--b); background-color: #1621ff; box-shadow: 0 .7rem 1.4rem -.7rem rgb(0 0 0 / .45) !important; } /* tutto blu: niente fili chiari negli angoli */ /* il filo di luce diventa blu chiaro: niente pezzi bianchi negli angoli */
  .bottone:hover::before { transform: translate(-50%, -50%) scale(3); opacity: 1; } /* grande abbastanza da coprire tutto il bottone, angoli compresi */
  .bottone:hover .bt { transform: translateY(calc(-100% - .45em)); }
  .bottone:hover .bt-x { transform: rotate(90deg); }
  .bottone:hover .bt-finestra { animation: bt-guasto .32s steps(1); }
  .bottone:hover::after { background-position: 250% 0, 0 0; transition: background-position .9s cubic-bezier(.4, 0, .2, 1) .1s; }
}
@keyframes bt-guasto { /* un colpo di guasto: i colori si separano e la scritta scatta di lato, poi torna pulita */
  0% { text-shadow: -.12em 0 #ff5a1f, .12em 0 #00a5e0; transform: translateX(.08em); }
  30% { text-shadow: .1em 0 #ff5a1f, -.1em 0 #00a5e0; transform: translateX(-.06em) skewX(-8deg); }
  60% { text-shadow: -.05em 0 #ff5a1f, .05em 0 #00a5e0; transform: none; }
  100% { text-shadow: none; transform: none; }
}
.bottone:focus-visible { outline: 2px solid #1621ff; outline-offset: 3px; }
.bottone:active { transform: translateZ(0) scale(.97); }
.bottone[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .bottone, .bottone::before, .bottone::after, .bt, .bt-x { transition: none !important; } .bottone:hover .bt-finestra { animation: none; } }

/* Pagine di testo (privacy): articoli numerati, la numerazione è una sequenza vera */
.avviso { padding: .9rem 1rem; margin-bottom: 2rem; border: 1px solid var(--inchiostro); font-size: var(--t-xs); max-width: 56ch; }
.articoli { counter-reset: articolo; border-top: 1px solid var(--inchiostro); }
.articoli > li { counter-increment: articolo; display: grid; grid-template-columns: repeat(8, var(--colonna)); column-gap: var(--gap); row-gap: .8rem; padding-block: 1.6rem 1.9rem; border-bottom: 1px solid var(--filo); }
.articoli h3 { grid-column: 1 / span 3; font-size: var(--t-m); line-height: 1.2; }
.articoli h3::before { content: counter(articolo, decimal-leading-zero); display: block; margin-bottom: .4rem; font-size: var(--t-xs); -webkit-text-stroke: 0; }
.articoli > li > :not(h3) { grid-column: 4 / span 5; max-width: 60ch; }
.articoli .dati { grid-template-columns: 1fr; gap: 1rem; }

/* La x della scritta xaxa del footer (la metà sinistra della prima x, specchiata): fa da maschera nei passaggi del finale
   (sito.js), nell'apertura del caricamento e nella 404 */
:root { --x-xaxa: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27123 817 147.70 119%27%3E%3Cdefs%3E%3CclipPath id=%27m%27%3E%3Crect x=%27122%27 y=%27810%27 width=%2775.6%27 height=%27130%27/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path=%27url(%23m)%27%3E%3Cpath d=%27M487.61 847.94C472.03 871.21 446.54 872.22 430.22 891.26C429.07 892.61 427.02 892.7 425.74 891.47L411.53 877.93C410.24 876.71 410.24 874.67 411.53 873.44L437.93 848.28C439.8 846.5 442.94 847.64 443.16 850.2C444.41 865.07 465.45 868.73 473.72 855.39C474.8 853.66 473.91 851.44 471.97 850.8C463.02 847.81 465.61 835.69 474.39 831.22C474.49 831.17 474.6 831.11 474.72 831.07C488.75 825.45 495.12 836.36 487.61 847.94M479.87 876.9C477.41 882.41 474.56 888.2 471.49 893.58C446.88 935.94 441.03 894.83 466.44 880.12C466.57 880.04 466.69 879.97 466.79 879.88C467.6 879.23 471.29 876.27 475.09 873.22C477.62 871.18 481.19 873.93 479.87 876.9M357.6 877.93L329.97 904.28C326.82 907.61 313.39 916.81 314.5 906.96C314.51 906.81 314.54 906.67 314.57 906.53C317.99 892.91 327 869.25 328.86 852.89C329.15 850.35 332.24 849.26 334.09 851.02L357.6 873.44C358.88 874.67 358.88 876.71 357.6 877.93M301.42 847.94C285.74 871.52 259.42 872.26 243.43 892.05C242.3 893.46 240.2 893.59 238.89 892.34L223.78 877.93C222.49 876.71 222.49 874.67 223.78 873.44L251.61 846.9C253.57 845.05 256.81 846.39 256.85 849.08C257.09 864.18 278.67 869.59 287.49 855.41C288.57 853.67 287.72 851.44 285.78 850.8C276.83 847.81 279.42 835.69 288.19 831.22C288.3 831.17 288.41 831.11 288.53 831.07C302.56 825.45 308.93 836.36 301.42 847.94M293.68 876.9C291.22 882.41 288.37 888.2 285.3 893.58C260.69 935.94 254.84 894.83 280.25 880.12C280.38 880.04 280.49 879.97 280.6 879.88C281.41 879.23 285.1 876.27 288.9 873.22C291.43 871.18 295 873.93 293.68 876.9M517 894.37L516.4 895.53C513.57 900.52 509.95 907.7 505.11 910.24C502.82 911.43 500.14 909.35 500.7 906.83C500.7 906.8 500.71 906.76 500.72 906.73C506.61 878.6 537.84 823.19 486.08 819.63C486.05 819.63 486.02 819.63 485.99 819.63C476.71 819.56 468.1 821.39 461.16 824.87C460.72 825.09 460.25 825.2 459.77 825.2L414.25 825.2C413.41 825.2 412.6 825.54 412.02 826.15L386.84 852.33C385.62 853.59 383.59 853.59 382.37 852.33L357.2 826.16C356.61 825.55 355.8 825.2 354.96 825.2L320.15 825.2C319.49 825.2 318.86 824.98 318.31 824.59C307.58 817.06 286.25 818.95 274.99 824.84C274.54 825.07 274.05 825.2 273.54 825.2L226.5 825.2C225.66 825.2 224.84 825.55 224.26 826.16L199.09 852.33C197.87 853.59 195.83 853.59 194.62 852.33L169.44 826.16C168.86 825.55 168.05 825.2 167.2 825.2L127 825.2C124.2 825.2 122.83 828.62 124.85 830.56L169.85 873.44C171.13 874.67 171.13 876.71 169.85 877.93L124.85 920.82C122.83 922.76 124.19 926.17 127 926.17L167.2 926.17C168.05 926.17 168.86 925.83 169.45 925.21L194.61 898.98C195.83 897.71 197.87 897.71 199.09 898.98L224.26 925.21C224.84 925.83 225.65 926.17 226.49 926.17L243.32 926.17C244.06 926.17 244.77 926.41 245.34 926.88C253.67 933.89 265.99 932.91 274.29 926.17L274.38 926.17L274.34 926.13C277.13 924.39 280.6 919.34 284.02 913.56C285.64 910.85 289.86 911.97 289.8 915.13C289.77 916.83 289.95 918.44 290.42 919.9C290.44 919.97 290.46 920.05 290.48 920.12C292.9 933.07 309.53 933.98 318.29 926.83C318.82 926.39 319.5 926.17 320.19 926.17L354.96 926.17C355.81 926.17 356.62 925.83 357.2 925.21L382.36 898.98C383.59 897.71 385.62 897.71 386.84 898.98L412.01 925.21C412.6 925.83 413.41 926.17 414.25 926.17L429.52 926.17C430.25 926.17 430.96 926.41 431.53 926.88C439.58 933.65 451.37 932.97 459.63 926.83L461.38 925.45C463.73 923.84 466.96 919.06 470.22 913.54C471.82 910.83 476.05 911.97 475.99 915.12C475.96 916.83 476.14 918.45 476.61 919.93C476.63 920 476.65 920.07 476.67 920.14C478.52 930.33 489.92 933.36 498.67 930.11C498.77 930.07 498.87 930.02 498.97 929.98C510.23 924.82 520.62 901.14 522.54 896.58C522.87 895.78 522.85 894.85 522.38 894.12C521.21 892.29 518.2 892.08 517 894.37Z%27/%3E%3C/g%3E%3Cg transform=%27matrix(-1 0 0 1 393.70 0)%27%3E%3Cg clip-path=%27url(%23m)%27%3E%3Cpath d=%27M487.61 847.94C472.03 871.21 446.54 872.22 430.22 891.26C429.07 892.61 427.02 892.7 425.74 891.47L411.53 877.93C410.24 876.71 410.24 874.67 411.53 873.44L437.93 848.28C439.8 846.5 442.94 847.64 443.16 850.2C444.41 865.07 465.45 868.73 473.72 855.39C474.8 853.66 473.91 851.44 471.97 850.8C463.02 847.81 465.61 835.69 474.39 831.22C474.49 831.17 474.6 831.11 474.72 831.07C488.75 825.45 495.12 836.36 487.61 847.94M479.87 876.9C477.41 882.41 474.56 888.2 471.49 893.58C446.88 935.94 441.03 894.83 466.44 880.12C466.57 880.04 466.69 879.97 466.79 879.88C467.6 879.23 471.29 876.27 475.09 873.22C477.62 871.18 481.19 873.93 479.87 876.9M357.6 877.93L329.97 904.28C326.82 907.61 313.39 916.81 314.5 906.96C314.51 906.81 314.54 906.67 314.57 906.53C317.99 892.91 327 869.25 328.86 852.89C329.15 850.35 332.24 849.26 334.09 851.02L357.6 873.44C358.88 874.67 358.88 876.71 357.6 877.93M301.42 847.94C285.74 871.52 259.42 872.26 243.43 892.05C242.3 893.46 240.2 893.59 238.89 892.34L223.78 877.93C222.49 876.71 222.49 874.67 223.78 873.44L251.61 846.9C253.57 845.05 256.81 846.39 256.85 849.08C257.09 864.18 278.67 869.59 287.49 855.41C288.57 853.67 287.72 851.44 285.78 850.8C276.83 847.81 279.42 835.69 288.19 831.22C288.3 831.17 288.41 831.11 288.53 831.07C302.56 825.45 308.93 836.36 301.42 847.94M293.68 876.9C291.22 882.41 288.37 888.2 285.3 893.58C260.69 935.94 254.84 894.83 280.25 880.12C280.38 880.04 280.49 879.97 280.6 879.88C281.41 879.23 285.1 876.27 288.9 873.22C291.43 871.18 295 873.93 293.68 876.9M517 894.37L516.4 895.53C513.57 900.52 509.95 907.7 505.11 910.24C502.82 911.43 500.14 909.35 500.7 906.83C500.7 906.8 500.71 906.76 500.72 906.73C506.61 878.6 537.84 823.19 486.08 819.63C486.05 819.63 486.02 819.63 485.99 819.63C476.71 819.56 468.1 821.39 461.16 824.87C460.72 825.09 460.25 825.2 459.77 825.2L414.25 825.2C413.41 825.2 412.6 825.54 412.02 826.15L386.84 852.33C385.62 853.59 383.59 853.59 382.37 852.33L357.2 826.16C356.61 825.55 355.8 825.2 354.96 825.2L320.15 825.2C319.49 825.2 318.86 824.98 318.31 824.59C307.58 817.06 286.25 818.95 274.99 824.84C274.54 825.07 274.05 825.2 273.54 825.2L226.5 825.2C225.66 825.2 224.84 825.55 224.26 826.16L199.09 852.33C197.87 853.59 195.83 853.59 194.62 852.33L169.44 826.16C168.86 825.55 168.05 825.2 167.2 825.2L127 825.2C124.2 825.2 122.83 828.62 124.85 830.56L169.85 873.44C171.13 874.67 171.13 876.71 169.85 877.93L124.85 920.82C122.83 922.76 124.19 926.17 127 926.17L167.2 926.17C168.05 926.17 168.86 925.83 169.45 925.21L194.61 898.98C195.83 897.71 197.87 897.71 199.09 898.98L224.26 925.21C224.84 925.83 225.65 926.17 226.49 926.17L243.32 926.17C244.06 926.17 244.77 926.41 245.34 926.88C253.67 933.89 265.99 932.91 274.29 926.17L274.38 926.17L274.34 926.13C277.13 924.39 280.6 919.34 284.02 913.56C285.64 910.85 289.86 911.97 289.8 915.13C289.77 916.83 289.95 918.44 290.42 919.9C290.44 919.97 290.46 920.05 290.48 920.12C292.9 933.07 309.53 933.98 318.29 926.83C318.82 926.39 319.5 926.17 320.19 926.17L354.96 926.17C355.81 926.17 356.62 925.83 357.2 925.21L382.36 898.98C383.59 897.71 385.62 897.71 386.84 898.98L412.01 925.21C412.6 925.83 413.41 926.17 414.25 926.17L429.52 926.17C430.25 926.17 430.96 926.41 431.53 926.88C439.58 933.65 451.37 932.97 459.63 926.83L461.38 925.45C463.73 923.84 466.96 919.06 470.22 913.54C471.82 910.83 476.05 911.97 475.99 915.12C475.96 916.83 476.14 918.45 476.61 919.93C476.63 920 476.65 920.07 476.67 920.14C478.52 930.33 489.92 933.36 498.67 930.11C498.77 930.07 498.87 930.02 498.97 929.98C510.23 924.82 520.62 901.14 522.54 896.58C522.87 895.78 522.85 894.85 522.38 894.12C521.21 892.29 518.2 892.08 517 894.37Z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* Schermata di caricamento (avvio.js): migliaia di piccole X di Lele volano a comporre la grande x del footer mentre il sito
   carica (tela .carica-tela); in basso il nome, il contatore grande e la linea. A fine caricamento un colpo di guasto, il fondo
   diventa blu e la x si apre come una porta sul sito, partendo dalla misura della x appena formata */
.caricamento { display: none; }
.js .caricamento { position: fixed; inset: 0; z-index: 200; display: block; overflow: hidden; background: var(--n); color: var(--b); transition: background-color .22s; }
.carica-tela { position: absolute; inset: 0; width: 100%; height: 100%; animation: guasto-colpo 2.7s steps(1) infinite; }
.carica-nome { position: absolute; left: var(--spazio); top: 1.6rem; font: 700 var(--t-s)/1 var(--font-testo); letter-spacing: -.01em; }
.carica-n { position: absolute; left: var(--spazio); bottom: calc(var(--spazio) + 1.2rem); font: 400 var(--t-titolo)/.8 var(--font-titoli); letter-spacing: -.02em; -webkit-text-stroke: .02em currentColor; }
.carica-linea { position: absolute; left: var(--spazio); right: var(--spazio); bottom: var(--spazio); height: 1px; background: rgb(255 255 255 / .2); }
.carica-pieno { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--b); }
.carica-lato { position: absolute; background: var(--b); opacity: 0; transition: opacity .35s; /* il teschio di Lele, bianco */
  -webkit-mask: url("loghi/teschio-34-negativo.svg") center / contain no-repeat; mask: url("loghi/teschio-34-negativo.svg") center / contain no-repeat; } /* il teschio di Lele a 3/4, versione per fondo scuro (senza contorno) */
.carica-lato.vivo { opacity: 1; animation: guasto-colpo 2.7s steps(1) infinite; }
/* alla fine i quattro teschi si chiudono glitchati: scatti, colori separati, fasce tagliate, poi spariscono (uno dopo l'altro) */
.caricamento.accende .carica-lato { opacity: 1; animation: teschio-chiude .5s steps(1) calc(var(--i, 0) * .06s) forwards; }
@keyframes teschio-chiude {
  0% { filter: drop-shadow(-6px 0 0 #ff0000) drop-shadow(6px 0 0 #00ffff); transform: translateX(-6px) skewX(-8deg); clip-path: inset(0 0 40% 0); }
  15% { filter: drop-shadow(8px 0 0 #ff0000) drop-shadow(-8px 0 0 #00ffff); transform: translateX(8px); clip-path: inset(30% 0 0 0); }
  30% { filter: drop-shadow(-4px 0 0 #ff0000) drop-shadow(4px 0 0 #00ffff); transform: translateX(-3px) skewX(10deg); clip-path: inset(10% 0 45% 0); }
  45% { filter: none; transform: scaleY(.35); clip-path: inset(45% 0 45% 0); }
  60% { transform: translateX(10px) scaleY(.12); clip-path: inset(48% 0 48% 0); }
  75%, 100% { opacity: 0; transform: scaleY(0); }
}
.caricamento.accende { background: #1621ff; }
.caricamento.accende .carica-tela { animation: guasto-colpo .45s steps(1) infinite; }
.caricamento.accende :is(.carica-nome, .carica-n, .carica-linea) { opacity: 0; transition: opacity .2s; }
/* l'apertura: il blu ha un buco a forma di x che parte grande come la x formata e cresce oltre lo schermo */
.caricamento.apre {
  -webkit-mask: linear-gradient(#000, #000), var(--x-xaxa) center / var(--x-w, 0) var(--x-h, 0) no-repeat; -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000), var(--x-xaxa) center / var(--x-w, 0) var(--x-h, 0) no-repeat; mask-composite: exclude;
  animation: carica-x 1.15s forwards;
}
.caricamento.apre .carica-tela { visibility: hidden; }
@keyframes carica-x { /* prima la x si vede crescere (fino a 4 volte), poi esce dallo schermo */
  0% { -webkit-mask-size: 100% 100%, var(--x-w) var(--x-h); mask-size: 100% 100%, var(--x-w) var(--x-h); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  65% { -webkit-mask-size: 100% 100%, calc(var(--x-w) * 4) calc(var(--x-h) * 4); mask-size: 100% 100%, calc(var(--x-w) * 4) calc(var(--x-h) * 4); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { -webkit-mask-size: 100% 100%, 1000vmax 806vmax; mask-size: 100% 100%, 1000vmax 806vmax; }
}
/* il colpo di guasto: per pochi istanti ogni giro colori separati (rosso a sinistra, azzurro a destra) e uno scatto di lato */
@keyframes guasto-colpo {
  0%, 84%, 100% { filter: none; transform: none; }
  86% { filter: drop-shadow(-5px 0 0 rgb(255 0 0 / .85)) drop-shadow(5px 0 0 rgb(0 255 255 / .85)); transform: translateX(-4px) skewX(-6deg); }
  89% { filter: drop-shadow(7px 0 0 rgb(255 0 0 / .85)) drop-shadow(-7px 0 0 rgb(0 255 255 / .85)); transform: translateX(6px); }
  92% { filter: drop-shadow(-3px 0 0 rgb(255 0 0 / .8)) drop-shadow(3px 0 0 rgb(0 255 255 / .8)); transform: translateX(-2px) skewX(4deg); }
  95% { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .carica-tela { animation: none; } .caricamento.apre { animation: none; opacity: 0; transition: opacity .3s; } }

/* la pagina 404 è tutta nera (il fondo della pagina e la sezione) */
body.pagina-errore { --pagina: var(--n); background: var(--n); color: var(--b); }
.pagina-errore .errore { background: var(--n); }
/* La 404: nero, un 404 enorme, fermo */
.errore { min-height: calc(100svh - 5.2rem); display: grid; align-content: center; gap: 1.6rem; padding-block: var(--spazio); }
.errore > * { grid-column: 1 / -1 !important; }
.errore-codice { margin: 0; font: 700 min(46vw, 46svh)/.8 var(--font-testo); letter-spacing: -.06em; }
.errore h1 { margin: 0; font: 400 var(--t-xl)/1 var(--font-titoli); max-width: 18ch; }
.errore-testo { margin: 0; max-width: 46ch; font-size: var(--t-m); color: var(--tenue); }
.errore-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: .6rem 0 0; }
.errore-azioni a:not(.bottone) { color: inherit; font-size: var(--t-s); }

/* Fondo pagina: nero pieno, la scritta XAXA retinata fatta di particelle (sito.js): vicino al cursore si sparpagliano come
   polvere e si accendono di blu, poi tornano piano al loro posto */
.piede { padding-block: calc(var(--spazio) * 2) var(--spazio); display: grid; gap: calc(var(--spazio) * 1.5); }
.piede-segno { position: relative; width: 100%; aspect-ratio: 452 / 223; touch-action: pan-y; }
.piede-segno canvas { position: absolute; inset: -6% -3%; width: 106%; height: 112%; }
.piede-righe { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 1rem; border-top: 1px solid var(--inchiostro); font-size: var(--t-xs); }
.piede-righe span:last-child { margin-left: auto; }

/* Tablet e telefono: una colonna. shortcut: passaggio sul telefono da rifinire, come concordato */
@media (max-width: 980px) {
  /* il menu copre lo schermo con il colore della pagina: voci grandi, facili da toccare */
  .menu { display: none; position: fixed; inset: 5.2rem 0 0 0; flex-direction: column; gap: 0; padding: 1rem var(--spazio) 2rem; background: var(--pagina); color: inherit; font: 400 var(--t-l)/1.1 var(--font-titoli); overflow-y: auto; }
  .menu.aperto { display: flex; }
  .menu a { padding-block: 1.1rem; border-bottom: 1px solid currentColor; }
  .suono { margin-left: auto; }
  .menu-apri { display: inline-flex; margin-left: 1.2rem; font: 500 var(--t-xs)/1 var(--font-testo); color: inherit; background: transparent; border: 1px solid currentColor; padding: .7rem 1rem; cursor: pointer; }
  .sezione-testa h2, .sezione-intro, .sezione > :not(.sezione-testa), .apertura-testo { grid-column: 1 / -1; }
  .sezione-testa h2 { grid-row: auto; position: static; margin-bottom: 1.2rem; }
  .indice { grid-auto-flow: row; grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
  .articoli h3, .articoli > li > :not(h3) { grid-column: 1 / -1; grid-row: auto; }
  :root { --globo: 180px; }
  .area { grid-template-columns: 1fr; row-gap: .9rem; }
  .area h3, .area-corpo { grid-column: 1; }
  .contatti, .canoni, .condizioni, .modalita { grid-template-columns: 1fr; row-gap: 2rem; }
  .modalita { grid-template-rows: none; }
  .modo, .termini { grid-row: auto; grid-template-rows: none; }
  .diretti, .modulo { grid-column: 1 / -1; }
  .dati { grid-template-columns: 1fr 1fr; }
  .file-riga { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .tabella-scorre { overflow-x: auto; } /* sui piccoli la tabella scorre di lato */
  .file-nota { grid-column: 1 / -1; grid-row: 2; }
}
/* Metodo sul telefono: una colonna, il posto del segno sopra ogni casella; il segno scorre con la pagina e passa
   da un posto al successivo quando cambia fase (scena.js) */
@media (max-width: 720px) {
  .fase { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: start; padding-block: 2svh 12svh; }
  .fase:nth-child(n) :is(.fase-posto, .fase-testo) { grid-column: 1; } /* vince sulle regole dei lati qui sopra */
  .fase-posto { grid-row: 1; height: 38svh; margin-block: 2.2rem 1.6rem; } /* le icone respirano: aria sopra e sotto */
  .fase-testo { grid-row: 2; }
  .casella { max-width: none; }
  .indice { grid-template-columns: 1fr; row-gap: .4rem; } /* una casella sotto l'altra: tre o quattro, sempre in fila */
  /* caratteri un po' più grandi e grigi più scuri: sul telefono si legge da lontano e spesso all'aperto */
  :root { --t-xs: .78rem; --t-s: .9375rem; --t-m: 1rem; }
  .sezione, .apertura, .metodo, .piede { --tenue: color-mix(in srgb, var(--inchiostro) 74%, var(--fondo)); }
  p, li, dd { line-height: 1.6; }
  /* apertura: titolo, poi il globo nel suo posto, poi il testo; nessuna parola si sposta */
  .apertura { grid-template-rows: auto; row-gap: 2rem; min-height: 0; padding-block: 3rem var(--spazio); }
  .apertura-posto { display: block; grid-column: 1 / -1; justify-self: center; width: min(64vw, 260px); aspect-ratio: 1; }
  /* tipi di progetto: una scheda sotto l'altra invece della tabella */
  .tabella-scorre { overflow: visible; }
  .pacchetti thead { display: none; }
  .pacchetti tr { display: grid; gap: .5rem; padding-block: 1.2rem; border-bottom: 1px solid var(--filo); }
  .pacchetti th, .pacchetti td, .pacchetti td:last-child { display: block; padding: 0; border: 0; text-align: left; white-space: normal; max-width: none; }
  /* cose da toccare più grandi */
  .piede-righe { align-items: center; }
  .piede-righe a { padding-block: .7rem; }
  .privacy { padding-block: .4rem; font-size: var(--t-s); }
  .privacy input { width: 1.5rem; height: 1.5rem; }
  .campo small { font-size: inherit; }
}
@media (max-width: 640px) {
  .modulo, .dati { grid-template-columns: 1fr; }
  .piede-righe span:last-child { margin-left: 0; }
}



/* Il manifesto: una frase per schermata, in BDO Grotesk grassetto maiuscolo, che entra parola per parola (sito.js) */
.manifesto-riga { position: relative; min-height: 100svh; display: grid; align-content: center; gap: 2.4rem; padding: 12svh var(--spazio); background: var(--fondo-m); color: var(--testo-m); }
.manifesto-riga p { margin: 0; font: 700 clamp(2.8rem, 9vw, 11.5rem)/.9 var(--font-testo); letter-spacing: -.05em; text-transform: uppercase; }
.manifesto-riga .poi { display: block; margin-top: .3em; color: #ff5a1f; }
/* il bottone finale: lo stesso bottone XAXA, chiaro sul nero e un po' più grande */
.manifesto-riga .bottone { justify-self: start; font-size: 1.35rem; padding: 1.25rem 1.4rem 1.25rem 1.7rem; }
@media (hover: hover) { .manifesto-riga .bottone:hover { color: var(--b); background-color: #1621ff; } }
.mp { display: inline-block; opacity: 0; transform: translateY(.5em); transition: transform .8s cubic-bezier(.16, .9, .2, 1), opacity .4s; transition-delay: calc(var(--i) * 60ms); }
.manifesto-riga.vista .mp { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mp { opacity: 1; transform: none; } }

/* Il footer finto: la scritta XAXA corsiva della privacy, fatta di vetro, con una luce blu dietro che segue il cursore (sito.js) */
.piede-finto .vetro { position: relative; width: 100%; aspect-ratio: 415 / 119; --lx: 30%; --ly: 50%; }
.vetro-luce { position: absolute; inset: -30% -10%; background: radial-gradient(circle at var(--lx) var(--ly), #1621ff 0, rgb(22 33 255 / .5) 12%, rgb(22 33 255 / 0) 30%); filter: blur(34px); opacity: .7; transition: background-position .3s; }
/* vetro scuro: un filo di luce bianca sul bordo alto, dentro la luce blu che si rifrange e un riflesso che attraversa */
.vetro-riflesso { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; translate: 0 -.9%; }
.vetro-logo {
  position: absolute; inset: 0;
  -webkit-mask: url("loghi/mono/xaxa-corsivo-bianco.svg") center / 100% 100% no-repeat; mask: url("loghi/mono/xaxa-corsivo-bianco.svg") center / 100% 100% no-repeat;
  background:
    linear-gradient(165deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .12)),
    radial-gradient(circle at var(--lx) var(--ly), rgb(110 130 255 / .95), rgb(22 33 255 / .55) 16%, rgb(22 33 255 / .08) 40%),
    rgb(12 12 20 / .92);
}
@media (prefers-reduced-motion: no-preference) { .piede-finto .vetro:not(.segue) .vetro-luce { animation: luce-vaga 9s ease-in-out infinite alternate; } }
@keyframes luce-vaga { from { --lx: 15%; --ly: 30%; } to { --lx: 85%; --ly: 70%; } }
@property --lx { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --ly { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* L'ultima schermata: la candela del teschio XAXA si accende di arancione sul blu e la luce, allargandosi, scopre il teschio */
@property --r { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.manifesto-riga.ultima { grid-template-columns: 1fr auto; column-gap: var(--spazio); overflow-x: clip; } /* l'alone del teschio sporgeva a destra: la pagina si spostava di lato */
.manifesto-riga.ultima > :not(.luce-teschio) { grid-column: 1; }
.luce-teschio { grid-column: 2; grid-row: 1 / span 2; position: relative; height: min(68svh, 600px); aspect-ratio: 244.8 / 424.4; --r: 0%; --fx: 50%; --fy: 25%; color: #fff; }
.luce-teschio > div { position: absolute; inset: 0; will-change: mask, background; }
.tl-svg { width: 100%; height: 100%; display: block; }
.tl-alone { display: none; } /* niente più luce blu dietro il teschio */
/* come il globo: dove passa il cursore (o il dito) il teschio si accende di blu. Una luce morbida che segue il punto e, in
   moltiplica, colora solo il bianco del disegno: il nero resta nero, niente alone. sito.js scrive --mx/--my e .blu */
.luce-teschio { cursor: pointer; -webkit-tap-highlight-color: transparent; --mx: 50%; --my: 60%; }
.luce-teschio::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity .45s;
  background: radial-gradient(circle 7.5rem at var(--mx) var(--my), #1621ff 0, #5b6bff 35%, #fff 75%); }
.luce-teschio.blu::after { opacity: 1; }
.tl-corpo { /* il teschio si forma dal basso verso l'alto, come il globo all'apertura: la parte formata è nitida, il bordo che sale sfuma */
  -webkit-mask: linear-gradient(to top, #000 calc(var(--r) - 22%), transparent var(--r)); mask: linear-gradient(to top, #000 calc(var(--r) - 22%), transparent var(--r)); color: #fff; }
.tl-corpo .fiamma { opacity: 0; }
.tl-fiamma .tl-svg > :not(.fiamma) { display: none; }
.tl-fiamma .fiamma { transform-box: fill-box; transform-origin: 50% 100%; scale: 0; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px #1621ff) drop-shadow(0 0 34px #1621ff); } /* la fiamma con la luce blu */
.manifesto-riga.vista .luce-teschio { animation: luce-cresce 2.8s cubic-bezier(.3, 0, .2, 1) 1.1s forwards; }
.manifesto-riga.vista .tl-corpo { animation: teschio-forma 2.8s cubic-bezier(.3, 0, .2, 1) 1.1s both; } /* mentre si forma è sfocato e luminoso, poi nitido */
@keyframes teschio-forma { from { filter: blur(9px) brightness(2.4); transform: scale(1.05); } 70% { filter: blur(1px) brightness(1.3); } to { filter: none; transform: none; } }
.manifesto-riga.vista .tl-fiamma .fiamma { animation: accendi .6s cubic-bezier(.2, 1.6, .4, 1) 3.5s forwards, guizzo 1.1s ease-in-out 4.1s infinite; } /* la candela si accende a teschio formato */
@keyframes luce-cresce { to { --r: 125%; } }
@keyframes accendi { to { scale: 1; } }
@media (max-width: 720px) {
  .manifesto-riga.ultima { grid-template-columns: 1fr; }
  .luce-teschio { grid-column: 1; grid-row: auto; height: 42svh; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .luce-teschio { --r: 135%; } .tl-fiamma .fiamma { scale: 1; } }
/* l'ultima schermata: una parola per riga, come una scala che scende */
.manifesto-riga.ultima p { font-size: clamp(2.4rem, 7.2vw, 8.5rem); line-height: .92; }
.manifesto-riga.ultima .mp { display: block; }
.manifesto-riga.ultima p br { display: none; }
.manifesto-riga.ultima .poi { margin-top: .25em; }

/* La rottura (sito.js imposta l'altezza e accende i frammenti; rottura3d.js disegna il vetro e lo rompe) */
.rottura { position: relative; height: 1200svh; }
.rottura-palco { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; } /* alto come lo schermo senza la barra di Safari: niente strisce in fondo quando la barra si ritira */
.frammenti { position: absolute; inset: 0; z-index: 3; } /* sopra il vetro: la prima schermata compare dentro la sua x */
/* Le schermate giganti (sito.js imposta --e, quanto è entrata, e --u, quanto è uscita): entrano da una X che si apre dal
   centro (clip-path scritto da sito.js); le lettere salgono una a una con un filo di rotazione, quelle della schermata
   prima escono verso l'alto. Le "riga" scorrono in orizzontale: una frase sola, enorme */
.scena { position: absolute; inset: 0; display: grid; place-items: center; padding: 6svh 1.5vw 0; background: var(--f); color: var(--t); visibility: hidden; overflow: hidden; --e: 1; --u: 0; }
.scena p { margin: 0; text-align: center; font: 700 min(calc(97vw / (var(--n) * .6)), 46svh)/.84 var(--font-testo); letter-spacing: -.055em; text-transform: uppercase; }
.scena .fw { display: inline-block; white-space: nowrap; }
.scena .ch {
  display: inline-block; will-change: transform;
  --dentro: clamp(0, calc(var(--e) * 1.7 - var(--i) / var(--quante) * .7), 1);
  --fuori: clamp(0, calc(var(--u) * 1.7 - var(--i) / var(--quante) * .7), 1);
  --via: calc(1 - var(--dentro)); /* quanto manca all'arrivo */
  transform: translateY(calc(var(--via) * 95% - var(--fuori) * 95%)) rotate(calc(var(--via) * 9deg));
  opacity: calc(var(--dentro) - var(--fuori));
  /* mentre arriva, ogni lettera lascia una scia arancio e blu (lo stesso guasto del footer di vetro), che si spegne all'arrivo */
  text-shadow: calc(var(--via) * -.09em) 0 rgb(255 90 31 / calc(var(--via) * 3)), calc(var(--via) * .09em) 0 rgb(22 33 255 / calc(var(--via) * 3));
}
/* ogni parola entra a modo suo, legato a quello che dice */
.scena[data-moto="cade"] .ch { transform: translateY(calc(var(--via) * -130% - var(--fuori) * 95%)) rotate(calc(var(--via) * var(--r1) * -14deg)); }
.scena[data-moto="schianto"] .ch { --dentro: clamp(0, calc(var(--e) * 2.4 - var(--i) / var(--quante) * 1.4), 1); transform: translateY(calc(var(--fuori) * -95%)) scale(calc(1 + var(--via) * var(--via) * 4)); }
.scena[data-moto="guasto"] .ch { transform: translate(calc(var(--via) * var(--r1) * 40%), calc(var(--fuori) * -95%)) skewX(calc(var(--via) * var(--r2) * 40deg)) scaleY(calc(1 - var(--via) * .5 * (1 + var(--r3))));
  text-shadow: calc(var(--via) * -.22em) 0 rgb(255 90 31 / calc(var(--via) * 4)), calc(var(--via) * .22em) 0 rgb(22 33 255 / calc(var(--via) * 4)); }
.scena[data-moto="forma"] .ch { --dentro: clamp(0, calc(var(--e) * 1.35 - var(--i) / var(--quante) * .35), 1);
  transform: translate(calc(var(--via) * var(--r1) * 260%), calc(var(--via) * var(--r2) * 180% - var(--fuori) * 95%)) rotate(calc(var(--via) * var(--r3) * 160deg)) scale(calc(1 - var(--via) * .4)); }
.scena[data-moto="lati"] .ch { transform: translate(calc(var(--via) * var(--lato) * 110vw), calc(var(--fuori) * -95%)) skewX(calc(var(--via) * var(--lato) * -18deg)); }
.scena[data-moto="cresce"] .ch { transform-origin: 50% 85%; transform: translateY(calc(var(--fuori) * -95%)) scaleY(calc(var(--dentro) * var(--dentro))); opacity: calc(min(1, var(--dentro) * 4) - var(--fuori)); }
/* profondità: la schermata che arriva si assesta da un po' più grande, quella che va via arretra e si scurisce (la prima no:
   entra dalla x del vetro e deve restarci allineata) */
.scena { transform: scale(calc(1 + (1 - var(--e)) * .22)); box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / calc(var(--u) * .5)); } /* un velo, non un filtro: costa meno sul telefono */
.scena:first-child { transform: none; }
.scena-riga { place-items: center start; padding-inline: 0; }
.scena-riga p { white-space: nowrap; text-align: left; font-size: min(22svh, 19vw); will-change: transform; word-spacing: .22em; } /* più aria tra le parole */ /* più piccole: si legge mezza frase alla volta e le copie incollate entrano nello schermo */
/* sul telefono (sito.js mette .a-capo): la frase va a capo tra le parole, centrata, ferma; sito.js sceglie la misura */
.scena-riga.a-capo { place-items: center; padding-inline: 4vw; }
.scena-riga.a-capo { grid-template-columns: minmax(0, 1fr); }
.a-capo .cp-copia { display: none; } /* sul telefono le copie sono le righe dello sfondo (.cp-sfondo) */
.cp-sfondo { display: none; }
.a-capo .cp-sfondo { display: flex; flex-direction: column; justify-content: space-between; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  font: 700 9.2vw/.84 var(--font-testo); letter-spacing: -.05em; text-transform: uppercase; color: #8c8c8c; padding-block: 1vh; }
.a-capo .cp-sfondo span { white-space: nowrap; transform: translateX(var(--x)); opacity: clamp(0, calc((var(--incolla, 0) - var(--k)) * 30), 1); }
.a-capo .cp-sfondo .scelta { color: #fff; background: linear-gradient(#1621ff, #1621ff) no-repeat 0 55% / 100% 80%; width: max-content; }
.a-capo p { position: relative; z-index: 1; }
.scena-riga.a-capo p { white-space: normal; text-align: center; width: 100%; min-width: 0; will-change: auto; line-height: .9; }
.cp { position: relative; --sel: 0; --incolla: 0;
  /* la selezione: il blu del sito che si allarga da sinistra, con il testo che diventa bianco */
  background: linear-gradient(#1621ff, #1621ff) no-repeat 0 52% / calc(var(--sel) * 100%) 82%;
  color: color-mix(in srgb, #ffffff calc(var(--sel) * 100%), var(--t)); }
.cp-copia { position: absolute; left: calc(var(--n) * .35em); top: calc(var(--n) * 102%); white-space: nowrap; color: var(--t); pointer-events: none;
  opacity: clamp(0, calc((var(--incolla) - var(--k)) * 60), 1); }
.scena s { position: relative; text-decoration: none; }
.scena s::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 40%; height: .1em; background: #ff5a1f; transform: scaleX(var(--barra, 0)); transform-origin: left; }
/* il footer finto: sopra le parole; quando il vetro 3D c'è, il nero lo dà il 3D e qui restano solo le righe */
.piede-finto { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; padding-block: 5.2rem var(--spazio); }
.piede-finto .vetro { align-self: center; }
.rottura-palco.con-3d .piede-finto { background: none; }
.rottura-palco.con-3d .piede-finto .vetro { visibility: hidden; }
/* lastra intera: le schegge sono già tagliate e tra l'una e l'altra c'è un filo d'aria; sotto ci va il nero, non le parole colorate */
.rottura-palco.con-3d { background: #050302; }
.rottura-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.rottura-foto { position: absolute; z-index: 1; pointer-events: none; display: block; } /* la scritta resa in Blender, sopra il 3D (rottura3d.js) */
/* attorno al vetro c'è il fondo a x: il nero della foto si fonde con il fondo (lighten: resta solo la luce del vetro) e i
   bordi del riquadro sfumano, così la scritta sta dentro lo sfondo e non su una striscia */
.rottura-foto { mix-blend-mode: lighten;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-composite: intersect; }
/* il footer vero: blu, con la XAXA corsiva */
.piede-logo { display: block; width: 100%; height: auto; }

/* Il riepilogo: le frasi della sequenza tutte insieme, ferme; ogni frase si accende quando arriva (sito.js) */
.riepilogo { min-height: 100svh; display: grid; align-content: center; padding: 14svh var(--spazio); background: #fff; color: var(--n); }
.riepilogo p { margin: 0; max-width: 22ch; font: 700 clamp(2.2rem, 5.4vw, 6.4rem)/.98 var(--font-testo); letter-spacing: -.045em; text-transform: uppercase; }
.riepilogo .rr { opacity: .14; transition: opacity .9s ease; }
.riepilogo .rr.vista { opacity: 1; }
.riepilogo s { position: relative; text-decoration: none; }
.riepilogo s::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 38%; height: .09em; background: #ff5a1f; }
.riepilogo em { font-style: normal; color: #ff5a1f; }
.riepilogo b { font-weight: 700; color: #1621ff; }
@media (prefers-reduced-motion: reduce) { .riepilogo .rr { opacity: 1; } }
.luce-teschio { margin-top: clamp(2.5rem, 9svh, 7rem); } /* la fiamma non tocca la barra in alto */
.luce-teschio .tl-svg { overflow: visible; } /* la fiamma che guizza e il suo bagliore non si tagliano sul bordo del disegno */