/*
 * Studio Arfia — mazzo/gestionali.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo di /servizi/gestionale-su-misura/ (inc/mazzo/gestionali.php): il mondo del gestionale approvato il
 * 02/11 (La tua azienda, noleggio arredi per eventi; il verde bosco del marchio, Instrument Sans per il testo e Bricolage
 * Grotesque per titoli e cifre, @font-face in servizi.css; un colore per stato: arancio, viola, blu, verde, mai gialli).
 * Vetri chiari sulla luce della carta, squircle. Tutto in em della scena (11 px da telefono, ~16 da computer): ogni mockup
 * sta in 28 × 20 em, così entra anche nella scena alta 272 px. La vita: quando la carta arriva (.is-viva, mazzo.js) i pezzi
 * entrano in fila; senza script tutto è già fermo e acceso.
 */
.as-mz-ge {
	--ge-ink: #17241C;
	--ge-muted: #66706A;
	--ge-bosco: #2F4A3A;
	--ge-ok: #13945F;
	--ge-f-t: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	color: var(--ge-ink);
	font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}
.as-mz-ge :is(b, small, em, i, u) { font-style: normal; text-decoration: none; }
.as-mz-ge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-mz-ge ol, .as-mz-ge ul { margin: 0; padding: 0; list-style: none; }
.as-mz-ge .as-ico { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.as-mz-ge__tile { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; padding: .35em; border-radius: calc(.7em * var(--as-brm)); background: var(--ge-bosco); box-shadow: 0 .4em .8em -.3em rgba(47, 74, 58, .5); box-sizing: border-box; }
.as-mz-ge__tile .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-ge__ok { flex: none; display: block; width: 1.35em; height: 1.35em; padding: .24em; border-radius: 50%; background: var(--ge-ok); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.as-mz-ge__volti { flex: none; display: flex; }
.as-mz-ge__volti i { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-left: -.45em; overflow: hidden; border-radius: 50%; background: #1A1A1A; box-shadow: 0 0 0 .13em #fff; }
.as-mz-ge__volti i:first-child { margin-left: 0; }
.as-mz-ge__volti i.is-studio .as-lg, .as-mz-ge__msg i.is-studio .as-lg { width: 60%; height: auto; }
.as-mz-ge__volti i.is-studio img, .as-mz-ge__msg i.is-studio img { width: 100%; height: auto; object-fit: contain; }
.as-mz-ge__mi { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; padding: .45em; border-radius: calc(.65em * var(--as-brm)); background: var(--c); color: #fff; box-shadow: 0 .45em .9em -.45em var(--c); box-sizing: border-box; }
@supports (corner-shape: squircle) {
	.as-mz-ge :is(.as-mz-ge__tile, .as-mz-ge__mi, .as-mz-ge__mod, .as-mz-ge__sat, .as-mz-ge__oa > i, .as-mz-ge__cal, .as-mz-ge__foglio) { corner-shape: squircle; }
}

/* ── 01 · come lavorate oggi: la giornata di un ordine ── */
.as-mz-ge--giornata { max-width: 27em; margin-inline: auto; }
.as-mz-ge__lavagna { display: grid; gap: 1.05em; padding: 1.05em 1.1em 1.15em; }
.as-mz-ge__lh { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.as-mz-ge__lh > span:first-child { display: grid; gap: .12em; line-height: 1.2; }
.as-mz-ge__lh b { font-family: var(--ge-f-t); font-size: 1.18em; font-weight: 600; letter-spacing: -.02em; }
.as-mz-ge__lh small { font-size: .8em; color: var(--ge-muted); }
.as-mz-ge__tappe { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
.as-mz-ge__tappe::before { content: ""; position: absolute; z-index: 0; left: 12.5%; right: 12.5%; top: 1.95em; border-top: .14em dashed rgba(23, 36, 28, .3); transform-origin: 0 50%; }
.as-mz-ge__tappa { position: relative; z-index: 1; display: grid; justify-items: center; gap: .15em; text-align: center; line-height: 1.2; }
.as-mz-ge__nodo { display: grid; place-items: center; width: 3.9em; height: 3.9em; margin-bottom: .45em; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .2em #fff, 0 .7em 1.4em -.6em rgba(23, 36, 28, .45); }
.as-mz-ge__nodo.is-ico { padding: .95em; background: var(--ge-bosco); color: #fff; box-sizing: border-box; }
.as-mz-ge__tappa.is-lenta .as-mz-ge__nodo { box-shadow: 0 0 0 .2em #fff, 0 0 0 .38em var(--as-arancio), 0 .7em 1.4em -.6em rgba(243, 112, 34, .6); }
.as-mz-ge__tappa b { font-size: .9em; font-weight: 600; }
.as-mz-ge__tappa small { font-size: .74em; color: var(--ge-muted); }
.as-mz-ge__lento { position: relative; justify-self: start; display: grid; gap: .1em; margin-left: 13% !important; padding: .55em .9em; border-radius: calc(.75em * var(--as-brm)); background: #FFE7DA; color: #8A3A0C; font-size: .82em; line-height: 1.25; }
.as-mz-ge__lento::before { content: ""; position: absolute; left: 2.4em; top: -.45em; width: .9em; height: .9em; background: #FFE7DA; transform: rotate(45deg); border-radius: .15em; }
.as-mz-ge__lento span { font-weight: 700; color: #C24E10; }

/* ── 02 · i moduli: solo le parti che servono ── */
.as-mz-ge--moduli { max-width: 27em; margin-inline: auto; }
.as-mz-ge__scelta { display: grid; gap: .95em; padding: 1.05em 1.05em 1.1em; }
.as-mz-ge__sh { display: flex; align-items: center; gap: .7em; }
.as-mz-ge__sh > span { display: grid; gap: .1em; line-height: 1.2; }
.as-mz-ge__sh b { font-family: var(--ge-f-t); font-size: 1.15em; font-weight: 600; letter-spacing: -.02em; }
.as-mz-ge__sh small { font-size: .78em; color: var(--ge-muted); }
.as-mz-ge__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em; }
.as-mz-ge__mod { display: flex; align-items: center; gap: .6em; min-width: 0; padding: .55em .6em; border-radius: calc(.8em * var(--as-brm)); background: rgba(255, 255, 255, .85); box-shadow: 0 .5em 1em -.7em rgba(23, 36, 28, .35); }
.as-mz-ge__mod > span { display: grid; gap: .05em; min-width: 0; line-height: 1.2; }
.as-mz-ge__mod b { font-size: .9em; font-weight: 600; white-space: nowrap; }
.as-mz-ge__mod small { font-size: .7em; color: var(--ge-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-mz-ge__mod.is-scelto small { color: var(--c); font-weight: 600; }
.as-mz-ge__mod .as-mz-ge__ok { margin-left: auto; width: 1.25em; height: 1.25em; background: var(--c); }
.as-mz-ge__mod.is-no { background: transparent; box-shadow: inset 0 0 0 .1em rgba(23, 36, 28, .18); }
.as-mz-ge__mod.is-no .as-mz-ge__mi { background: rgba(23, 36, 28, .08); color: rgba(23, 36, 28, .45); box-shadow: none; }
.as-mz-ge__mod.is-no b { color: rgba(23, 36, 28, .55); }

/* ── 03 · i dati di prima: il foglio dei clienti e i dati portati dentro ── */
.as-mz-ge--import { position: relative; max-width: 28em; min-height: 15.6em; margin-inline: auto; }
.as-mz-ge__foglio { position: absolute; left: 0; top: .2em; width: 20.2em; overflow: hidden; border-radius: calc(.6em * var(--as-brm)); background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 1.4em 3em -1.4em rgba(40, 24, 60, .4); transform: rotate(-2.5deg); font-size: .72em; }
.as-mz-ge__fr { display: grid; grid-template-columns: 1.7em minmax(0, 1.6fr) minmax(0, 1.05fr) 3.4em; height: 1.85em; border-bottom: 1px solid #E3E6E8; color: #2B2F33; }
.as-mz-ge__fr > * { display: flex; align-items: center; min-width: 0; padding: 0 .5em; overflow: hidden; white-space: nowrap; border-right: 1px solid #E3E6E8; }
.as-mz-ge__fr > *:last-child { justify-content: flex-end; border-right: 0; font-variant-numeric: tabular-nums; }
.as-mz-ge__fr i { justify-content: center; padding: 0; background: #F4F6F7; color: #80868B; font-size: .9em; }
.as-mz-ge__fr.is-testa { height: 1.55em; background: #F4F6F7; color: #80868B; }
.as-mz-ge__fr.is-testa span { justify-content: center; font-size: .9em; }
.as-mz-ge__fr.is-col span { font-weight: 700; }
.as-mz-ge__fschede { display: flex; gap: .2em; padding: .35em .5em .45em; background: #F4F6F7; color: #5F6368; }
.as-mz-ge__fschede span { padding: .3em .7em; border-radius: .3em; white-space: nowrap; }
.as-mz-ge__fschede .is-on { background: #fff; color: var(--ge-ok); font-weight: 700; box-shadow: inset 0 -.15em 0 var(--ge-ok); }
.as-mz-ge__imp { position: absolute; z-index: 2; right: 0; top: 3.2em; display: grid; gap: .55em; width: 14.4em; padding: 1em 1em 1.05em; }
.as-mz-ge__ih { display: flex; align-items: center; gap: .6em; margin-bottom: .1em !important; }
.as-mz-ge__ih .as-mz-ge__tile { width: 2em; height: 2em; }
.as-mz-ge__ih > span { display: grid; gap: .05em; line-height: 1.15; }
.as-mz-ge__ih b { font-family: var(--ge-f-t); font-size: 1em; font-weight: 600; letter-spacing: -.01em; }
.as-mz-ge__ih small { font-size: .72em; color: var(--ge-muted); }
.as-mz-ge__iv { display: flex; align-items: center; gap: .55em; padding-top: .5em; border-top: 1px solid rgba(23, 36, 28, .08); font-size: .9em; }
.as-mz-ge__iv b { margin-left: auto; font-family: var(--ge-f-t); font-size: 1.15em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.as-mz-ge__iv .as-mz-ge__ok { width: 1.2em; height: 1.2em; }
.as-mz-ge__ibarra { display: grid; gap: .4em; margin-top: .15em !important; }
.as-mz-ge__ibarra i { display: block; height: .5em; border-radius: 999px; background: rgba(23, 36, 28, .1); overflow: hidden; }
.as-mz-ge__ibarra u { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #13945F, #3CC489); transform-origin: 0 50%; }
.as-mz-ge__ibarra span { font-size: .74em; font-weight: 600; color: var(--ge-ok); }

/* ── 04 · collegato al resto: l'ordine al centro, i passaggi intorno ── */
.as-mz-ge--giro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15em .7em; max-width: 27em; margin-inline: auto; }
.as-mz-ge__sat { position: relative; display: flex; align-items: center; gap: .55em; min-width: 0; padding: .55em .6em; border-radius: calc(.85em * var(--as-brm)); background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 .8em 1.6em -1em rgba(40, 24, 60, .4); }
.as-mz-ge__sat .as-mz-ge__mi { width: 1.9em; height: 1.9em; padding: .42em; }
.as-mz-ge__sat > span { display: grid; gap: .05em; min-width: 0; line-height: 1.2; }
.as-mz-ge__sat b { font-size: .84em; font-weight: 600; white-space: nowrap; }
.as-mz-ge__sat small { font-size: .7em; color: var(--ge-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-mz-ge__sat .as-mz-ge__ok { margin-left: auto; width: 1.2em; height: 1.2em; }
.as-mz-ge__sat::after { content: ""; position: absolute; left: 50%; height: 1.15em; border-left: .13em dashed rgba(23, 36, 28, .28); }
.as-mz-ge__sat:nth-child(-n + 2)::after { top: 100%; }
.as-mz-ge__sat:nth-child(n + 4)::after { bottom: 100%; }
.as-mz-ge__ord { grid-column: 1 / -1; display: grid; gap: .7em; padding: .95em 1em; }
.as-mz-ge__oh { display: flex; align-items: center; gap: .65em; }
.as-mz-ge__chi { flex: none; width: 2.3em; height: 2.3em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .12em #fff; }
.as-mz-ge__chi .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-ge__oh > span { display: grid; gap: .08em; min-width: 0; line-height: 1.2; }
.as-mz-ge__oh b { font-family: var(--ge-f-t); font-size: 1.08em; font-weight: 600; letter-spacing: -.015em; }
.as-mz-ge__oh small { font-size: .76em; color: var(--ge-muted); }
.as-mz-ge__oh em { margin-left: auto; display: flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: 999px; background: #FFE7DA; color: #C24E10; font-size: .74em; font-weight: 700; }
.as-mz-ge__oh em::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #F06418; }
.as-mz-ge__oa { display: flex; align-items: center; gap: .7em; padding: .5em; border-radius: calc(.8em * var(--as-brm)); background: rgba(255, 255, 255, .75); }
.as-mz-ge__oa > i { flex: none; width: 2.6em; height: 2.6em; overflow: hidden; border-radius: calc(.55em * var(--as-brm)); }
.as-mz-ge__oa > span { display: grid; gap: .05em; font-size: .92em; font-weight: 600; line-height: 1.2; }
.as-mz-ge__oa small { font-size: .82em; font-weight: 500; color: var(--ge-muted); }
.as-mz-ge__oa b { margin-left: auto; font-family: var(--ge-f-t); font-size: 1.2em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── 05 · il team, affiancato ── */
.as-mz-ge--team { display: grid; max-width: 26.5em; margin-inline: auto; }
.as-mz-ge__corso { display: grid; gap: .8em; width: 88%; padding: .95em 1em 1em; }
.as-mz-ge__ct { display: flex; align-items: center; gap: .8em; }
.as-mz-ge__ct > span:last-child { display: grid; gap: .1em; line-height: 1.2; }
.as-mz-ge__ct b { font-family: var(--ge-f-t); font-size: 1.12em; font-weight: 600; letter-spacing: -.02em; }
.as-mz-ge__ct small { font-size: .78em; color: var(--ge-muted); }
.as-mz-ge__cal { flex: none; display: grid; justify-items: center; align-content: center; width: 2.9em; height: 2.9em; border-radius: calc(.75em * var(--as-brm)); background: #fff; box-shadow: 0 .45em .9em -.5em rgba(23, 36, 28, .4); line-height: 1; }
.as-mz-ge__cal small { font-size: .62em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--as-arancio); }
.as-mz-ge__cal b { margin-top: .08em; font-family: var(--ge-f-t); font-size: 1.35em; font-weight: 600; color: var(--ge-ink); }
.as-mz-ge__cp { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.as-mz-ge__guida { display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em .35em .5em; border-radius: 999px; background: rgba(47, 74, 58, .1); color: var(--ge-bosco); font-size: .78em; font-weight: 600; white-space: nowrap; }
.as-mz-ge__guida .as-ico { width: 1.25em; height: 1.25em; }
.as-mz-ge__chat { position: relative; z-index: 2; display: grid; gap: .55em; width: 90%; margin: -.6em 0 0 auto; padding: .8em .9em .95em; }
.as-mz-ge__quando { justify-self: center; font-size: .7em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ge-muted); }
.as-mz-ge__msg { display: flex; align-items: flex-end; gap: .45em; font-size: .88em; line-height: 1.32; }
.as-mz-ge__msg i { flex: none; display: grid; place-items: center; width: 1.8em; height: 1.8em; overflow: hidden; border-radius: 50%; background: #1A1A1A; }
.as-mz-ge__msg > span { max-width: 15em; padding: .5em .8em; border-radius: 1.15em; }
.as-mz-ge__msg.is-lei > span { border-bottom-left-radius: .35em; background: #E9E9EB; color: #1C1C1E; }
.as-mz-ge__msg.is-noi { justify-content: flex-end; }
.as-mz-ge__msg.is-noi > span { border-bottom-right-radius: .35em; background: #1C1C1E; color: #fff; }

/* ── la vita, quando la carta arriva ── */
.as-pp-mazzo--viva .as-mz-ge :is(.as-mz-ge__tappa, .as-mz-ge__lento, .as-mz-ge__mod, .as-mz-ge__iv, .as-mz-ge__sat, .as-mz-ge__msg, .as-mz-ge__quando) { transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
/* 01: il filo si disegna e le tappe si accendono una dopo l'altra, poi l'avviso arancio */
.as-pp-mazzo--viva .as-mz-ge__tappe::before { transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .3s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__tappe::before { transform: scaleX(0); }
.as-pp-mazzo--viva .as-mz-ge__tappa { transition-delay: calc(var(--k) * .28s + .3s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__tappa { opacity: 0; transform: translate3d(0, .8em, 0) scale(.9); }
.as-pp-mazzo--viva .as-mz-ge__lento { transition: opacity .4s ease 1.5s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.5s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__lento { opacity: 0; transform: translate3d(0, -.5em, 0) scale(.85); }
/* 02: i moduli si posano in fila, quelli scelti si spuntano */
.as-pp-mazzo--viva .as-mz-ge__mod { transition-delay: calc(var(--k) * .12s + .3s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__mod { opacity: 0; transform: translate3d(0, .7em, 0); }
.as-pp-mazzo--viva .as-mz-ge__mod .as-mz-ge__ok { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--k) * .12s + 1s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__mod .as-mz-ge__ok { transform: scale(0); }
/* 03: il foglio entra, i dati passano uno per uno, la barra arriva in fondo */
.as-pp-mazzo--viva .as-mz-ge__foglio { transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__foglio { opacity: 0; transform: translate3d(-1.5em, .5em, 0) rotate(-6deg); }
.as-pp-mazzo--viva .as-mz-ge__imp { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-ge__iv { transition-delay: calc(var(--k) * .3s + .75s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__iv { opacity: 0; transform: translate3d(-.6em, 0, 0); }
.as-pp-mazzo--viva .as-mz-ge__ibarra u { transition: transform 1.5s cubic-bezier(.45, .05, .2, 1) .6s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__ibarra u { transform: scaleX(0); }
.as-pp-mazzo--viva .as-mz-ge__ibarra span { transition: opacity .4s ease 2.05s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__ibarra span { opacity: 0; }
/* 04: prima l'ordine, poi i passaggi intorno, ognuno con la sua spunta */
.as-pp-mazzo--viva .as-mz-ge__sat { transition-delay: calc(var(--k) * .22s + .55s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__sat { opacity: 0; transform: scale(.88); }
.as-pp-mazzo--viva .as-mz-ge__sat .as-mz-ge__ok { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--k) * .22s + 1.05s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ge__sat .as-mz-ge__ok { transform: scale(0); }
/* 05: la formazione, poi «tre mesi dopo» la domanda e la risposta */
.as-pp-mazzo--viva .as-mz-ge__chat { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-ge__quando { transition-delay: .75s; }
.as-pp-mazzo--viva .as-mz-ge__msg.is-lei { transition-delay: 1s; }
.as-pp-mazzo--viva .as-mz-ge__msg.is-noi { transition-delay: 1.65s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-ge__quando, .as-mz-ge__msg) { opacity: 0; transform: translate3d(0, .7em, 0); }
/* da computer la scena è larga: i mockup un po' più grandi, così la riempiono */
@container (min-width: 560px) { .as-mz-ge { font-size: 1.12em; } }