/**
 * Scene animate delle Funzionalità (2026-10-06, tavola docs/prototipi/funzionalita/).
 * Mini interfacce in HTML/CSS sul modello di automaticcss.com, non disegni a pennarello.
 * Il markup sta in scene/<nome>.php, il movimento in assets/js/scene.js: il JS sposta il
 * cursore e aggiunge alla scena le classi di stato is-<passo>, qui si decide cosa cambia.
 * Come hero-ponte.css, foglio a parte: e un pezzo chiuso, non una classe di Bricks.
 *
 * Misure in em, su un corpo di 13px (11,5px sotto i 400px di schermo): va bene per le card da
 * 340 a 440px che il template produce a ogni larghezza.
 * Dentro la scena sempre inchiostro su pastello (--color-on-fill), anche in tema scuro.
 */

.ar-scena {
  --scena-carta: #fffdf7;
  --scena-ink: var(--color-on-fill);
  --scena-tenue: #e3e6f5;
  --scena-fondo: var(--color-fill-sky);
  --scena-corpo: 1.3rem;
  width: 100%;
  color: var(--scena-ink);
  user-select: none;
}
.ar-scena__palco {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 4 / 3;
  padding: 6%;
  overflow: hidden;
  background: var(--scena-fondo);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-m);
}
.ar-scena--sky    { --scena-fondo: var(--color-fill-sky); }
.ar-scena--mint   { --scena-fondo: var(--color-fill-mint); }
.ar-scena--yellow { --scena-fondo: var(--color-fill-yellow); }
.ar-scena--peach  { --scena-fondo: var(--color-fill-peach); }
.ar-scena--lilac  { --scena-fondo: var(--color-fill-lilac); }

.ar-scena__finestra {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: var(--scena-corpo);
  line-height: 1.3;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 0.6em;
  box-shadow: 0.25em 0.25em 0 var(--scena-ink);
}
.ar-scena__barra {
  flex: none;
  display: flex;
  gap: 0.35em;
  align-items: center;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--scena-ink);
}
.ar-scena__barra i {
  width: 0.5em;
  height: 0.5em;
  border: 1px solid var(--scena-ink);
  border-radius: 50%;
}
.ar-scena__barra span {
  margin-left: 0.4em;
  font-size: 0.85em;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
}
.ar-scena__corpo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  min-height: 0;
  padding: 0.8em;
}
.ar-scena__chip {
  padding: 0.2em 0.75em;
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 99em;
  transition: background 0.25s;
}
.ar-scena__pulsante {
  align-self: flex-start;
  padding: 0.4em 0.9em;
  font-weight: 700;
  font-size: 0.92em;
  white-space: nowrap;
  background: var(--color-fill-mint);
  border: 1px solid var(--scena-ink);
  border-radius: 0.4em;
  box-shadow: 0.17em 0.17em 0 var(--scena-ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ar-scena .is-premuto {
  transform: translate(0.15em, 0.15em);
  box-shadow: 0 0 0 var(--scena-ink);
}

/* avviso finale, comune a piu scene */
.ar-scena__avviso {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 4;
  padding: 0.5em 0.9em;
  width: max-content;
  max-width: 92%;
  font-size: var(--scena-corpo);
  font-weight: 700;
  text-align: center;
  background: var(--color-fill-mint);
  border: 1px solid var(--scena-ink);
  border-radius: 0.5em;
  box-shadow: 0.17em 0.17em 0 var(--scena-ink);
  opacity: 0;
  transform: translate(-50%, 1.2em);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.ar-scena.is-fatto .ar-scena__avviso {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* cursore: lo muove scene.js con --cx e --cy */
.ar-scena__cursore {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 2.2rem;
  aspect-ratio: 1;
  pointer-events: none;
  color: var(--scena-ink);
  transform: translate(var(--cx, 999px), var(--cy, 0));
  transition: transform 0.7s cubic-bezier(.5, 0, .2, 1);
}
.ar-scena__cursore svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 18% 14%;
  transition: transform 0.12s;
}
.ar-scena__cursore.is-clic svg { transform: scale(0.8); }
.ar-scena__cursore::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -36%;
  width: 110%;
  aspect-ratio: 1;
  border: 2px solid var(--scena-ink);
  border-radius: 50%;
  opacity: 0;
}
.ar-scena__cursore.is-clic::after { animation: ar-scena-onda 0.45s ease-out; }
@keyframes ar-scena-onda {
  from { opacity: 0.8; transform: scale(0.3); }
  to   { opacity: 0; transform: scale(1.3); }
}

/* ---------- prenotazione ---------- */
.ar-scena-pren__mese { display: flex; justify-content: space-between; font-weight: 700; }
.ar-scena-pren__giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25em; }
.ar-scena-pren__giorni b { font-size: 0.75em; font-weight: 600; text-align: center; opacity: 0.55; }
.ar-scena-pren__giorni span {
  display: grid;
  place-items: center;
  aspect-ratio: 1.35;
  font-size: 0.8em;
  border: 1px solid transparent;
  border-radius: 0.35em;
  transition: background 0.25s, color 0.25s;
}
.ar-scena-pren__giorni .no { opacity: 0.3; text-decoration: line-through; }
.ar-scena-pren__giorni .si { border-color: var(--scena-tenue); }
.is-giorno .ar-scena-pren__giorni [data-t="giorno"] { color: var(--scena-carta); background: var(--scena-ink); }
.ar-scena-pren__ore { display: flex; gap: 0.4em; opacity: 0; transform: translateY(0.5em); transition: opacity 0.3s, transform 0.3s; }
.is-giorno .ar-scena-pren__ore { opacity: 1; transform: none; }
.is-ora .ar-scena-pren__ore [data-t="ora"] { background: var(--color-fill-yellow); }
.ar-scena-pren__piede { display: flex; gap: 0.5em; align-items: center; justify-content: space-between; margin-top: auto; }
.ar-scena-pren__piede small { font-size: 0.82em; opacity: 0; transition: opacity 0.3s; }
.is-ora .ar-scena-pren__piede small { opacity: 0.75; }

/* ---------- mappa con filtri ---------- */
.ar-scena-mappa .ar-scena__corpo { gap: 0; padding: 0; }
.ar-scena-mappa__filtri { position: relative; z-index: 2; display: flex; gap: 0.4em; padding: 0.55em 0.7em; border-bottom: 1px solid var(--scena-ink); }
.ar-scena-mappa__filtri [data-t="tutti"] { background: var(--color-fill-yellow); }
.is-affitto .ar-scena-mappa__filtri [data-t="tutti"] { background: var(--scena-carta); }
.is-affitto .ar-scena-mappa__filtri [data-t="affitto"] { background: var(--color-fill-peach); }
.ar-scena-mappa__terra {
  position: relative;
  flex: 1;
  background:
    linear-gradient(90deg, transparent 31%, var(--scena-tenue) 31% 34%, transparent 34% 68%, var(--scena-tenue) 68% 70%, transparent 70%),
    linear-gradient(0deg, transparent 38%, var(--scena-tenue) 38% 42%, transparent 42% 76%, var(--scena-tenue) 76% 79%, transparent 79%),
    linear-gradient(135deg, transparent 47%, var(--scena-tenue) 47% 49.5%, transparent 49.5%),
    #f4f6fc;
}
.ar-scena-mappa__verde { position: absolute; top: 6%; left: 72%; width: 22%; height: 28%; background: var(--color-fill-mint); border: 1px dashed var(--scena-tenue); border-radius: 40% 55% 45% 50%; }
.ar-scena-mappa__pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 1.3em;
  height: 1.3em;
  margin: -1.3em 0 0 -0.65em;
  transform-origin: 50% 100%;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.ar-scena-mappa__pin::before { content: ""; position: absolute; inset: 0; background: var(--c); border: 0.12em solid var(--scena-ink); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ar-scena-mappa__pin--vendita { --c: var(--color-fill-lilac); }
.ar-scena-mappa__pin--affitto { --c: var(--color-fill-peach); }
.is-affitto .ar-scena-mappa__pin--vendita { opacity: 0; transform: scale(0.2); }
.is-affitto .ar-scena-mappa__pin--affitto { transform: scale(1.25); }
.ar-scena-mappa__scheda {
  position: absolute;
  top: calc(var(--y) - 3.9em);
  left: calc(var(--x) + 0.8em);
  z-index: 3;
  padding: 0.5em 0.75em;
  font-size: 0.88em;
  white-space: nowrap;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 0.5em;
  box-shadow: 0.17em 0.17em 0 var(--scena-ink);
  opacity: 0;
  transform: translateY(0.5em) scale(0.9);
  transform-origin: 0 100%;
  transition: opacity 0.3s, transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.ar-scena-mappa__scheda strong { display: block; }
.is-pin .ar-scena-mappa__scheda { opacity: 1; transform: none; }

/* ---------- preventivatore ---------- */
@property --ar-scena-tot { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --ar-scena-mq { syntax: "<integer>"; inherits: true; initial-value: 40; }
.ar-scena-prev__scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.ar-scena-prev__scelta { padding: 0.55em; font-weight: 600; font-size: 0.9em; border: 1px solid var(--scena-ink); border-radius: 0.5em; transition: background 0.25s; }
.ar-scena-prev__scelta small { display: block; font-size: 0.9em; font-weight: 400; opacity: 0.65; }
.is-tipo .ar-scena-prev__scelta[data-t="tipo"] { background: var(--color-fill-lilac); }
.ar-scena-prev__riga { display: flex; justify-content: space-between; font-size: 0.9em; font-weight: 600; }
.ar-scena-prev__binario { position: relative; height: 0.4em; margin: 0.35em 0 0.15em; background: var(--scena-tenue); border-radius: 0.2em; }
.ar-scena-prev__pieno { position: absolute; inset: 0 auto 0 0; width: var(--v, 20%); background: var(--scena-ink); border-radius: 0.2em; transition: width 0.7s cubic-bezier(.5, 0, .2, 1); }
.ar-scena-prev__manopola { position: absolute; top: 50%; left: var(--v, 20%); width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em; background: var(--scena-carta); border: 0.12em solid var(--scena-ink); border-radius: 50%; transition: left 0.7s cubic-bezier(.5, 0, .2, 1); }
.is-mq .ar-scena__corpo { --v: 72%; }
.ar-scena-prev__mq { --ar-scena-mq: 40; counter-reset: mq var(--ar-scena-mq); transition: --ar-scena-mq 0.7s; }
.ar-scena-prev__mq::after { content: counter(mq) " m²"; }
.is-mq .ar-scena-prev__mq { --ar-scena-mq: 110; }
.ar-scena-prev__totale {
  --ar-scena-tot: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding: 0.55em 0.75em;
  background: var(--color-fill-yellow);
  border: 1px solid var(--scena-ink);
  border-radius: 0.5em;
  counter-reset: tot var(--ar-scena-tot);
  transition: --ar-scena-tot 1.1s cubic-bezier(.2, .7, .2, 1);
}
.ar-scena-prev__totale span { font-size: 0.9em; font-weight: 600; }
.ar-scena-prev__totale strong { font-size: 1.4em; font-stretch: 85%; }
.ar-scena-prev__totale strong::before { content: counter(tot) " €"; }
.is-tipo .ar-scena-prev__totale { --ar-scena-tot: 620; }
.is-mq .ar-scena-prev__totale { --ar-scena-tot: 1480; }

/* ---------- catalogo ---------- */
.ar-scena-cat__filtri { display: flex; gap: 0.4em; }
.ar-scena-cat__filtri [data-t="tutti"] { background: var(--color-fill-yellow); }
.is-filtro .ar-scena-cat__filtri [data-t="tutti"] { background: var(--scena-carta); }
.is-filtro .ar-scena-cat__filtri [data-t="filtro"] { background: var(--color-fill-yellow); }
.ar-scena-cat__griglia { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; min-height: 0; }
.ar-scena-cat__voce { display: flex; flex-direction: column; gap: 0.25em; min-height: 0; transition: opacity 0.35s, transform 0.35s; }
.ar-scena-cat__foto { flex: 1; min-height: 0; background: var(--c); border: 1px solid var(--scena-ink); border-radius: 0.4em; }
.ar-scena-cat__voce i { height: 0.4em; width: 70%; background: var(--scena-tenue); border-radius: 0.2em; }
.is-filtro .ar-scena-cat__voce--no { opacity: 0.15; transform: scale(0.92); }
.is-voce .ar-scena-cat__voce[data-t="voce"] .ar-scena-cat__foto { box-shadow: 0.17em 0.17em 0 var(--scena-ink); }
.ar-scena-cat__scheda {
  position: absolute;
  inset: auto 0.8em 0.8em;
  z-index: 3;
  display: flex;
  gap: 0.7em;
  align-items: center;
  padding: 0.6em;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 0.5em;
  box-shadow: 0.17em 0.17em 0 var(--scena-ink);
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(.3, 1.3, .5, 1);
}
.ar-scena-cat__scheda .ar-scena-cat__foto { flex: none; width: 3.4em; height: 2.6em; }
.ar-scena-cat__scheda div { flex: 1; font-size: 0.9em; }
.ar-scena-cat__scheda strong { display: block; }
.is-voce .ar-scena-cat__scheda { opacity: 1; transform: none; }

/* ---------- videocorsi ---------- */
.ar-scena-corso .ar-scena__corpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.7em; }
.ar-scena-corso__video { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; }
.ar-scena-corso__schermo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--color-fill-lilac); border: 1px solid var(--scena-ink); border-radius: 0.45em; overflow: hidden; }
.ar-scena-corso__play { display: grid; place-items: center; width: 2.4em; height: 2.4em; background: var(--scena-carta); border: 1px solid var(--scena-ink); border-radius: 50%; box-shadow: 0.17em 0.17em 0 var(--scena-ink); transition: opacity 0.3s, transform 0.3s; }
.ar-scena-corso__play::before { content: ""; margin-left: 0.2em; border-left: 0.75em solid var(--scena-ink); border-block: 0.45em solid transparent; }
.is-play .ar-scena-corso__play { opacity: 0; transform: scale(0.6); }
.ar-scena-corso__onde { position: absolute; inset: auto 0 18% 0; display: flex; gap: 0.25em; justify-content: center; align-items: flex-end; height: 30%; opacity: 0; transition: opacity 0.3s; }
.ar-scena-corso__onde i { width: 0.3em; height: 30%; background: var(--scena-ink); border-radius: 0.15em; }
.is-play .ar-scena-corso__onde { opacity: 1; }
.is-play .ar-scena-corso__onde i { animation: ar-scena-onde 0.6s ease-in-out infinite alternate; }
.ar-scena-corso__onde i:nth-child(2) { animation-delay: -0.2s; }
.ar-scena-corso__onde i:nth-child(3) { animation-delay: -0.4s; }
.ar-scena-corso__onde i:nth-child(4) { animation-delay: -0.1s; }
.ar-scena-corso__onde i:nth-child(5) { animation-delay: -0.3s; }
@keyframes ar-scena-onde { to { height: 100%; } }
.ar-scena-corso__barra { height: 0.35em; background: var(--scena-tenue); border-radius: 0.2em; overflow: hidden; }
.ar-scena-corso__barra::before { content: ""; display: block; width: 8%; height: 100%; background: var(--scena-ink); transition: width 2.2s linear; }
.is-play .ar-scena-corso__barra::before { width: 100%; }
.ar-scena-corso__titolo { font-size: 0.9em; font-weight: 700; }
.ar-scena-corso__lezioni { display: flex; flex-direction: column; gap: 0.4em; margin: 0; padding: 0; list-style: none; font-size: 0.85em; }
.ar-scena-corso__lezioni li { display: flex; gap: 0.45em; align-items: center; padding: 0.35em 0.45em; border: 1px solid var(--scena-tenue); border-radius: 0.4em; transition: background 0.3s, border-color 0.3s; }
.ar-scena-corso__lezioni li::before { content: ""; flex: none; width: 0.9em; height: 0.9em; border: 1px solid var(--scena-ink); border-radius: 50%; background: var(--scena-carta); }
.ar-scena-corso__lezioni .fatta::before,
.is-fatto .ar-scena-corso__lezioni .ora::before { background: var(--scena-ink); box-shadow: inset 0 0 0 0.15em var(--scena-carta); }
.ar-scena-corso__lezioni .ora { border-color: var(--scena-ink); }
.is-fatto .ar-scena-corso__lezioni .ora { background: var(--color-fill-mint); }

/* ---------- pagamenti ---------- */
.ar-scena-paga__riga { display: flex; justify-content: space-between; padding-bottom: 0.5em; font-weight: 600; border-bottom: 1px dashed var(--scena-tenue); }
.ar-scena-paga__metodi { display: flex; gap: 0.4em; }
.is-metodo .ar-scena-paga__metodi [data-t="metodo"] { background: var(--color-fill-lilac); }
.ar-scena-paga__carta { display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0.65em; font-size: 0.92em; letter-spacing: 0.08em; border: 1px solid var(--scena-ink); border-radius: 0.4em; opacity: 0.35; transition: opacity 0.3s; }
.ar-scena-paga__carta span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width 0.9s steps(19, end); }
.is-metodo .ar-scena-paga__carta { opacity: 1; }
.is-metodo .ar-scena-paga__carta span { max-width: 12em; }
.ar-scena-paga__carta small { font-size: 0.8em; letter-spacing: 0; opacity: 0.6; }
.ar-scena-paga .ar-scena__pulsante { position: relative; align-self: stretch; margin-top: auto; text-align: center; }
.ar-scena-paga__attesa { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em; border: 0.15em solid var(--scena-ink); border-right-color: transparent; border-radius: 50%; opacity: 0; }
.is-paga .ar-scena-paga__attesa { opacity: 1; animation: ar-scena-gira 0.7s linear infinite; }
.is-paga .ar-scena-paga__testo { opacity: 0; }
.is-fatto .ar-scena-paga__attesa { opacity: 0; }
.is-fatto .ar-scena-paga__testo { opacity: 1; }
@keyframes ar-scena-gira { to { transform: rotate(1turn); } }

/* ---------- multilingua ---------- */
.ar-scena-lingua__testa { display: flex; justify-content: space-between; align-items: center; }
.ar-scena-lingua__marchio { width: 4.5em; height: 0.8em; background: var(--scena-ink); border-radius: 0.2em; opacity: 0.85; }
.ar-scena-lingua__scelta { position: relative; }
.ar-scena-lingua__scelta [data-t="lingua"] b + b,
.is-en .ar-scena-lingua__scelta [data-t="lingua"] b:first-child { display: none; }
.is-en .ar-scena-lingua__scelta [data-t="lingua"] b + b { display: inline; }
.ar-scena-lingua__menu { position: absolute; top: calc(100% + 0.3em); right: 0; z-index: 3; display: flex; flex-direction: column; min-width: 6.5em; padding: 0.25em; font-size: 0.88em; background: var(--scena-carta); border: 1px solid var(--scena-ink); border-radius: 0.45em; box-shadow: 0.17em 0.17em 0 var(--scena-ink); opacity: 0; transform: translateY(-0.4em); transition: opacity 0.2s, transform 0.2s; }
.ar-scena-lingua__menu span { padding: 0.25em 0.5em; border-radius: 0.3em; }
.is-menu .ar-scena-lingua__menu { opacity: 1; transform: none; }
.is-en .ar-scena-lingua__menu { opacity: 0; transform: translateY(-0.4em); }
.ar-scena-lingua__menu [data-t="en"] { background: var(--scena-tenue); }
.ar-scena-lingua__pagina { position: relative; flex: 1; }
.ar-scena-lingua__versione { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.5em; transition: opacity 0.4s, transform 0.4s; }
.ar-scena-lingua__versione strong { font-size: 1.45em; line-height: 1.1; font-stretch: 85%; }
.ar-scena-lingua__versione p { margin: 0; font-size: 0.9em; opacity: 0.75; }
.ar-scena-lingua__versione .ar-scena__pulsante { margin-top: auto; }
.ar-scena-lingua__versione--en { opacity: 0; transform: translateY(0.6em); }
.is-en .ar-scena-lingua__versione--it { opacity: 0; transform: translateY(-0.6em); }
.is-en .ar-scena-lingua__versione--en { opacity: 1; transform: none; }

/* ---------- area riservata ---------- */
.ar-scena-area .ar-scena__corpo { overflow: hidden; }
.ar-scena-area__accesso,
.ar-scena-area__dentro { position: absolute; inset: 0.8em; display: flex; flex-direction: column; gap: 0.5em; transition: opacity 0.4s, transform 0.45s cubic-bezier(.5, 0, .2, 1); }
.ar-scena-area__accesso strong,
.ar-scena-area__dentro strong { font-size: 1.1em; }
.ar-scena-area__campo { padding: 0.45em 0.65em; font-size: 0.9em; border: 1px solid var(--scena-ink); border-radius: 0.4em; }
.ar-scena-area__campo small { display: block; font-size: 0.8em; opacity: 0.6; }
.ar-scena-area__accesso .ar-scena__pulsante { margin-top: auto; }
.is-entra .ar-scena-area__accesso { opacity: 0; transform: translateX(-30%); }
.ar-scena-area__dentro { opacity: 0; transform: translateX(30%); }
.is-entra .ar-scena-area__dentro { opacity: 1; transform: none; }
.ar-scena-area__file { display: flex; justify-content: space-between; align-items: center; padding: 0.45em 0.6em; font-size: 0.9em; border: 1px solid var(--scena-tenue); border-radius: 0.4em; transition: background 0.25s, border-color 0.25s; }
.ar-scena-area__file b { display: grid; place-items: center; width: 1.5em; height: 1.5em; font-size: 0.9em; border: 1px solid var(--scena-ink); border-radius: 0.3em; }
.is-doc .ar-scena-area__file[data-t="doc"] { background: var(--color-fill-yellow); border-color: var(--scena-ink); }

/* ---------- ticket ---------- */
.ar-scena-ticket__testa { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.ar-scena-ticket__testa .ar-scena__pulsante { align-self: center; }
.ar-scena-ticket__elenco { display: flex; flex-direction: column; gap: 0.4em; margin: 0; padding: 0; list-style: none; }
.ar-scena-ticket__elenco li { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; padding: 0.45em 0.6em; font-size: 0.9em; border: 1px solid var(--scena-tenue); border-radius: 0.4em; }
.ar-scena-ticket__elenco li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-scena-ticket__stato { flex: none; padding: 0.1em 0.6em; font-size: 0.85em; font-weight: 600; border: 1px solid var(--scena-ink); border-radius: 99em; background: var(--color-fill-mint); }
.ar-scena-ticket__nuova { max-height: 0; margin-bottom: -0.4em; opacity: 0; overflow: hidden; transform: translateY(-0.5em); transition: max-height 0.4s, margin 0.4s, opacity 0.35s, transform 0.35s, background 0.3s; }
.ar-scena-ticket__elenco .ar-scena-ticket__nuova { border-color: var(--scena-ink); }
.is-nuova .ar-scena-ticket__nuova { max-height: 3em; margin-bottom: 0; opacity: 1; transform: none; }
.ar-scena-ticket__nuova .ar-scena-ticket__stato { background: var(--color-fill-peach); }
.ar-scena-ticket__nuova .ar-scena-ticket__stato i { display: none; font-style: normal; }
.ar-scena-ticket__nuova .ar-scena-ticket__stato i:first-child { display: inline; }
.is-lavoro .ar-scena-ticket__nuova .ar-scena-ticket__stato { background: var(--color-fill-yellow); }
.is-lavoro .ar-scena-ticket__nuova .ar-scena-ticket__stato i:first-child { display: none; }
.is-lavoro .ar-scena-ticket__nuova .ar-scena-ticket__stato i:nth-child(2) { display: inline; }
.is-fatto .ar-scena-ticket__nuova .ar-scena-ticket__stato { background: var(--color-fill-mint); }
.is-fatto .ar-scena-ticket__nuova .ar-scena-ticket__stato i:nth-child(2) { display: none; }
.is-fatto .ar-scena-ticket__nuova .ar-scena-ticket__stato i:nth-child(3) { display: inline; }

/* ---------- su misura (integrazioni) ---------- */
.ar-scena-misura .ar-scena__corpo { padding: 0; }
.ar-scena-misura__fili { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-scena-misura__fili path { fill: none; stroke: var(--scena-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; opacity: 0.35; transition: opacity 0.3s; }
.is-collega .ar-scena-misura__fili path { opacity: 1; }
.ar-scena-misura__nodo { position: absolute; top: var(--y); left: var(--x); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.5em 0.7em; font-size: 0.88em; font-weight: 700; white-space: nowrap; background: var(--scena-carta); border: 1px solid var(--scena-ink); border-radius: 0.5em; box-shadow: 0.17em 0.17em 0 var(--scena-ink); transform: translate(-50%, -50%); transition: background 0.3s; }
.ar-scena-misura__nodo small { font-size: 0.85em; font-weight: 400; opacity: 0.6; }
.is-fatto .ar-scena-misura__nodo { background: var(--color-fill-mint); }
.ar-scena-misura__dato { position: absolute; top: var(--y0); left: var(--x0); z-index: 3; width: 0.8em; height: 0.8em; margin: -0.4em; background: var(--color-fill-yellow); border: 1px solid var(--scena-ink); border-radius: 50%; opacity: 0; }
.is-collega .ar-scena-misura__dato { opacity: 1; top: var(--y1); left: var(--x1); transition: top 1.2s cubic-bezier(.5, 0, .3, 1) var(--ritardo, 0s), left 1.2s cubic-bezier(.5, 0, .3, 1) var(--ritardo, 0s), opacity 0.2s var(--ritardo, 0s); }
.is-fatto .ar-scena-misura__dato { opacity: 0; transition: opacity 0.2s; top: var(--y1); left: var(--x1); }
.ar-scena-misura .ar-scena__pulsante { position: absolute; top: 0.8em; left: 0.8em; z-index: 2; }

/* ---------- analisi del sito (testata della landing) ---------- */
.ar-scena-analisi__indirizzo { display: flex; gap: 0.5em; align-items: center; }
.ar-scena-analisi__indirizzo > span:first-child { flex: 1; min-width: 0; padding: 0.4em 0.65em; font-size: 0.92em; white-space: nowrap; overflow: hidden; border: 1px solid var(--scena-ink); border-radius: 0.4em; }
.ar-scena-analisi .ar-scena-analisi__indirizzo .ar-scena__pulsante { align-self: center; }
.ar-scena-analisi__voci { display: flex; flex-direction: column; gap: 0.55em; margin: 0; padding: 0; list-style: none; }
.ar-scena-analisi__voci li { display: grid; grid-template-columns: 6.2em 1fr 1.8em; gap: 0.6em; align-items: center; font-size: 0.9em; }
.ar-scena-analisi__voci i { height: 0.7em; overflow: hidden; background: var(--scena-tenue); border: 1px solid var(--scena-ink); border-radius: 0.35em; }
.ar-scena-analisi__voci i::before { content: ""; display: block; width: 0; height: 100%; background: var(--c); border-right: 1px solid var(--scena-ink); transition: width 0.9s cubic-bezier(.3, .7, .2, 1) var(--d); }
.ar-scena-analisi__voci b { text-align: right; opacity: 0; transition: opacity 0.3s calc(var(--d) + 0.6s); }
.is-analizza .ar-scena-analisi__voci i::before { width: var(--v); }
.is-analizza .ar-scena-analisi__voci b { opacity: 1; }

/* ====== Area clienti (2026-10-07): scene della pagina Assistenza, copiano l'area vera ====== */

/* ---------- area: stato del sito ---------- */
@property --ar-scena-agg { syntax: "<integer>"; inherits: true; initial-value: 0; }
.ar-scena-stato__testa { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.ar-scena-stato__punto { display: flex; gap: 0.4em; align-items: center; font-size: 0.85em; font-weight: 600; }
.ar-scena-stato__punto::before { content: ""; width: 0.6em; height: 0.6em; background: var(--color-fill-mint); border: 1px solid var(--scena-ink); border-radius: 50%; animation: ar-scena-battito 1.4s ease-in-out infinite; }
@keyframes ar-scena-battito { 50% { transform: scale(1.35); } }
.ar-scena-stato__numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45em; }
.ar-scena-stato__numero { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; padding: 0.5em 0.55em; border: 1px solid var(--scena-ink); border-radius: 0.45em; }
.ar-scena-stato__numero small { font-size: 0.75em; line-height: 1.15; opacity: 0.65; }
.ar-scena-stato__numero strong { font-size: 1.4em; line-height: 1; font-stretch: 85%; }
.ar-scena-stato__agg { --ar-scena-agg: 0; counter-reset: agg var(--ar-scena-agg); transition: --ar-scena-agg 1.2s cubic-bezier(.2, .7, .2, 1); }
.ar-scena-stato__agg::before { content: counter(agg); }
.is-conta .ar-scena-stato__agg { --ar-scena-agg: 12; }
.ar-scena-stato__backup { opacity: 0; transform: scale(0.4); transition: opacity 0.3s 0.5s, transform 0.4s cubic-bezier(.3, 1.6, .5, 1) 0.5s; }
.is-conta .ar-scena-stato__backup { opacity: 1; transform: none; }
.ar-scena-stato .ar-scena__pulsante { margin-top: auto; }
.ar-scena-stato__registro {
  position: absolute;
  inset: auto 0.8em 0.8em;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin: 0;
  padding: 0.6em 0.7em;
  list-style: none;
  font-size: 0.88em;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 0.5em;
  box-shadow: 0.17em 0.17em 0 var(--scena-ink);
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(.3, 1.3, .5, 1);
}
.ar-scena-stato__registro li { display: flex; gap: 0.5em; align-items: center; }
.ar-scena-stato__registro b { display: grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; font-size: 0.85em; background: var(--color-fill-mint); border: 1px solid var(--scena-ink); border-radius: 50%; }
.is-registro .ar-scena-stato__registro { opacity: 1; transform: none; }

/* ---------- area: nuova richiesta ---------- */
.ar-scena-rich__tipi,
.ar-scena-rich__allegati { display: flex; gap: 0.4em; align-items: center; min-width: 0; }
.is-tipo .ar-scena-rich__tipi [data-t="tipo"] { background: var(--color-fill-yellow); }
.ar-scena-rich__campo { padding: 0.45em 0.65em; font-size: 0.9em; border: 1px solid var(--scena-ink); border-radius: 0.4em; }
.ar-scena-rich__campo small { display: block; font-size: 0.8em; opacity: 0.6; }
.ar-scena-rich__campo span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width 0.8s steps(27, end); }
.is-tipo .ar-scena-rich__campo span { max-width: 16em; }
.ar-scena-rich__file { overflow: hidden; padding: 0.2em 0.6em; font-size: 0.85em; text-overflow: ellipsis; white-space: nowrap; background: var(--color-fill-sky); border: 1px solid var(--scena-ink); border-radius: 0.35em; opacity: 0; transform: translateX(-0.6em); transition: opacity 0.3s, transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
.is-allega .ar-scena-rich__file { opacity: 1; transform: none; }
.ar-scena-rich__titolo { font-weight: 700; }
.ar-scena-rich .ar-scena__pulsante { margin-top: auto; }

/* ---------- area: ticket del mese ---------- */
.ar-scena-buoni__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; font-weight: 700; }
.ar-scena-buoni__resto { font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.ar-scena-buoni__resto b + b,
.is-usa .ar-scena-buoni__resto b:first-child { display: none; }
.is-usa .ar-scena-buoni__resto b + b { display: inline; }
.ar-scena-buoni__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.ar-scena-buoni__ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.6em 0.7em 0.6em 1.1em;
  font-weight: 700;
  background: var(--color-fill-yellow);
  border: 1px solid var(--scena-ink);
  border-radius: 0.45em;
  transition: background 0.3s;
}
.ar-scena-buoni__ticket::before { content: ""; position: absolute; top: 0.35em; bottom: 0.35em; left: 0.5em; border-left: 1px dashed var(--scena-ink); }
.ar-scena-buoni__ticket small { font-size: 0.75em; font-weight: 400; opacity: 0.65; }
.ar-scena-buoni__ticket em {
  position: absolute;
  top: 50%;
  right: 0.4em;
  padding: 0.05em 0.4em;
  font-size: 0.8em;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--scena-ink);
  border-radius: 0.3em;
  opacity: 0;
  transform: translateY(-50%) rotate(-12deg) scale(1.8);
  transition: opacity 0.15s 0.25s, transform 0.3s cubic-bezier(.3, 1.4, .5, 1) 0.25s;
}
.is-usa .ar-scena-buoni__ticket--usa { background: var(--scena-carta); }
.is-usa .ar-scena-buoni__ticket--usa em { opacity: 1; transform: translateY(-50%) rotate(-12deg); }
.ar-scena-buoni__nota { font-size: 0.8em; opacity: 0.7; }
.ar-scena-buoni .ar-scena__pulsante { margin-top: auto; }

/* ---------- area: documenti ---------- */
.ar-scena-doc__schede { display: flex; gap: 0.35em; }
.ar-scena-doc__fatture { background: var(--color-fill-yellow); }
.is-consegne .ar-scena-doc__fatture { background: var(--scena-carta); }
.is-consegne .ar-scena-doc__schede [data-t="consegne"] { background: var(--color-fill-yellow); }
.ar-scena-doc__liste { position: relative; flex: 1; min-height: 0; }
.ar-scena-doc__lista { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.35em; margin: 0; padding: 0; list-style: none; transition: opacity 0.35s, transform 0.35s; }
.ar-scena-doc__lista li { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; padding: 0.35em 0.55em; font-size: 0.88em; border: 1px solid var(--scena-tenue); border-radius: 0.4em; }
.ar-scena-doc__lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-scena-doc__lista b { display: grid; place-items: center; flex: none; width: 1.4em; height: 1.4em; font-size: 0.9em; border: 1px solid var(--scena-ink); border-radius: 0.3em; }
.ar-scena-doc__lista--consegne { opacity: 0; transform: translateX(1.5em); }
.is-consegne .ar-scena-doc__lista--fatture { opacity: 0; transform: translateX(-1.5em); }
.is-consegne .ar-scena-doc__lista--consegne { opacity: 1; transform: none; }

/* ---------- area: statistiche (fogli a quadretti, come nell'area) ---------- */
.ar-scena-stat .ar-scena__corpo {
  background:
    linear-gradient(var(--scena-tenue) 1px, transparent 1px) 0 0 / 1.2em 1.2em,
    linear-gradient(90deg, var(--scena-tenue) 1px, transparent 1px) 0 0 / 1.2em 1.2em;
}
.ar-scena-stat__testa { display: flex; justify-content: space-between; align-items: flex-start; }
.ar-scena-stat__totale small { display: block; font-size: 0.8em; opacity: 0.65; }
.ar-scena-stat__totale strong { display: grid; font-size: 1.6em; line-height: 1; font-stretch: 85%; }
.ar-scena-stat__totale strong span { grid-area: 1 / 1; transition: opacity 0.35s, transform 0.35s; }
.ar-scena-stat__totale strong span + span,
.is-anno .ar-scena-stat__totale strong span:first-child { opacity: 0; transform: translateY(0.4em); }
.is-anno .ar-scena-stat__totale strong span + span { opacity: 1; transform: none; }
.ar-scena-stat__scelta { position: relative; }
.ar-scena-stat__scelta [data-t="periodo"] b + b,
.is-anno .ar-scena-stat__scelta [data-t="periodo"] b:first-child { display: none; }
.is-anno .ar-scena-stat__scelta [data-t="periodo"] b + b { display: inline; }
.ar-scena-stat__menu { position: absolute; top: calc(100% + 0.3em); right: 0; z-index: 3; display: flex; flex-direction: column; min-width: 6.5em; padding: 0.25em; font-size: 0.88em; background: var(--scena-carta); border: 1px solid var(--scena-ink); border-radius: 0.45em; box-shadow: 0.17em 0.17em 0 var(--scena-ink); opacity: 0; transform: translateY(-0.4em); transition: opacity 0.2s, transform 0.2s; }
.ar-scena-stat__menu span { padding: 0.25em 0.5em; border-radius: 0.3em; }
.ar-scena-stat__menu [data-t="mesi"] { background: var(--scena-tenue); }
.is-menu .ar-scena-stat__menu { opacity: 1; transform: none; }
.is-anno .ar-scena-stat__menu { opacity: 0; transform: translateY(-0.4em); }
.ar-scena-stat__grafico { flex: 1; min-height: 0; }
.ar-scena-stat__grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ar-scena-stat__linea { fill: none; stroke: var(--scena-ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity 0.4s; }
.ar-scena-stat__linea--anno { opacity: 0; }
.is-anno .ar-scena-stat__linea--mese { opacity: 0; }
.is-anno .ar-scena-stat__linea--anno { opacity: 1; }
.ar-scena-stat__piede { display: flex; gap: 0.35em; }
.ar-scena-stat__piede span { padding: 0.15em 0.55em; font-size: 0.78em; white-space: nowrap; background: var(--scena-carta); border: 1px solid var(--scena-ink); border-radius: 99em; }

/* ---------- area: da telefono ---------- */
.ar-scena-tel {
  justify-self: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: 10 / 17;
  overflow: hidden;
  font-size: calc(var(--scena-corpo) * 0.88);
  line-height: 1.25;
  background: var(--scena-carta);
  border: 1px solid var(--scena-ink);
  border-radius: 1.3em;
  box-shadow: 0.25em 0.25em 0 var(--scena-ink);
}
.ar-scena-tel__testa { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 0.8em 0.5em; font-weight: 700; }
.ar-scena-tel__esci { padding: 0.05em 0.5em; font-size: 0.8em; font-weight: 600; border: 1px solid var(--scena-ink); border-radius: 99em; }
.ar-scena-tel__schermi { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ar-scena-tel__schermo { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.4em; padding: 0.2em 0.8em; transition: opacity 0.35s, transform 0.4s cubic-bezier(.5, 0, .2, 1); }
.ar-scena-tel__riga { display: flex; gap: 0.45em; align-items: center; padding: 0.35em 0.5em; font-size: 0.9em; border: 1px solid var(--scena-tenue); border-radius: 0.4em; }
.ar-scena-tel__riga i { flex: none; width: 0.55em; height: 0.55em; background: var(--color-fill-mint); border: 1px solid var(--scena-ink); border-radius: 50%; }
.ar-scena-tel__voce { display: flex; flex-direction: column; padding: 0.35em 0.5em; font-size: 0.9em; font-weight: 600; border: 1px solid var(--scena-tenue); border-radius: 0.4em; }
.ar-scena-tel__voce small { font-size: 0.85em; font-weight: 400; opacity: 0.7; }
.ar-scena-tel__voce--nuova { background: var(--color-fill-peach); border-color: var(--scena-ink); }
.ar-scena-tel__schermo--richieste { opacity: 0; transform: translateX(40%); }
.is-richieste .ar-scena-tel__schermo--casa { opacity: 0; transform: translateX(-40%); }
.is-richieste .ar-scena-tel__schermo--richieste { opacity: 1; transform: none; }
.ar-scena-tel__menu { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.3em 0.2em 0.5em; border-top: 1px solid var(--scena-ink); }
.ar-scena-tel__tasto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1em; padding: 0.3em 0; font-size: 0.8em; font-weight: 600; border-radius: 0.5em; transition: background 0.25s; }
.ar-scena-tel__tasto svg { width: 1.7em; height: 1.7em; fill: none; stroke: var(--scena-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-scena-tel__tasto em { position: absolute; top: 0; right: 12%; display: grid; place-items: center; min-width: 1.3em; height: 1.3em; font-size: 0.75em; font-style: normal; background: var(--color-fill-peach); border: 1px solid var(--scena-ink); border-radius: 99em; transition: opacity 0.3s; }
.ar-scena-tel__tasto--casa { background: var(--color-fill-mint); }
.is-richieste .ar-scena-tel__tasto--casa { background: transparent; }
.is-richieste .ar-scena-tel__tasto--richieste { background: var(--color-fill-mint); }
.is-richieste .ar-scena-tel__tasto--richieste em { opacity: 0; }

@media (max-width: 400px) {
  .ar-scena { --scena-corpo: 1.15rem; }
}

/* ---------- meno movimento: stato finale fermo, niente cursore ---------- */
@media (prefers-reduced-motion: reduce) {
  .ar-scena *,
  .ar-scena *::before,
  .ar-scena *::after { transition: none !important; animation: none !important; }
  .ar-scena__cursore { display: none; }
}