/*
 * Studio Arfia · ecosistemi-settimana.css · v0.112 · 05/11/2026
 * LA TUA SETTIMANA (template-parts/site/settimana.php): «Cosa cambia per la tua azienda» su Ecosistemi. Rami ha scelto la
 * proposta 3 e chiesto un interno del Mac «migliorato tantissimo». L'app sta sopra la famiglia .as-pq di demo.css (la
 * ricetta del 02/11: canvas 864 × 561 in --p, luce colorata a 5 macchie sotto, vetri bianchi col filo chiaro, squircle,
 * un solo vetro scuro per la cifra grande): qui solo quello che è suo. La vita in motion.js, blocco «LA TUA SETTIMANA».
 * Stati che mette il JS: .is-viva (la sezione è viva), .is-scelta (un vantaggio è al centro), .is-on (il suo riquadro).
 * Ogni riquadro spento mostra il suo «prima»; acceso fa la cosa e arriva al «dopo», che è anche quello che si vede senza JS.
 */

/* ══ LA SEZIONE ══ */
.as-sett { overflow-x: clip; }
/* i reset col peso di una classe sola (:where): battono i fogli di base, e le regole delle parti scritte dopo (anche nelle
   media query, come il posto sotto le voci) vincono su di loro */
.as-sett :where(h2, h3, p, ol, li) { margin: 0; }
.as-sett :where(ol) { padding: 0; list-style: none; }
.as-sett__testa { margin-bottom: clamp(28px, 4vw, 56px); }
.as-sett__titolo { max-width: 12ch; text-wrap: balance; }
.as-sett__sotto { margin-top: 18px !important; max-width: 36ch; }
.as-sett__corpo { display: grid; gap: 28px; }
.as-sett__voce { padding: 22px 0; border-top: 1px solid rgba(28, 28, 30, .1); transition: color .4s ease; }
.as-sett__voce.is-cta { border-top: 0; }
.as-sett__n { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--as-arancio, #F37022); font-variant-numeric: tabular-nums; }
.as-sett__voce h3 { margin-top: 8px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; }
.as-sett__voce p { margin-top: 10px !important; max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--as-muted, #707070); transition: color .4s ease; }
.as-sett.is-scelta .as-sett__voce:not(.is-on):not(.is-cta) { color: rgba(28, 28, 30, .3); }
.as-sett.is-scelta .as-sett__voce:not(.is-on):not(.is-cta) p { color: rgba(28, 28, 30, .26); }
@media (min-width: 1000px) {
	.as-sett__corpo { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); column-gap: 56px; align-items: start; }
	/* senza ScrollSmoother (touch grandi) basta il sticky; con lo smoother il JS mette un pin al suo posto */
	.as-sett__vetrina { position: sticky; top: calc(50vh - 19vw); }
	.as-sett__voce { min-height: 46vh; display: grid; align-content: center; }
	.as-sett__voce.is-cta { min-height: 0; padding-top: 12px; }
	/* sotto il pulsante il posto per il campo largo: il Mac resta fermo finché il suo fondo tocca il fondo della colonna */
	.as-sett.is-viva .as-sett__voci { padding-bottom: 34vh; } /* solo col JS (il campo largo); più classi: il reset di base «ol[class]» pesa */
}
/* il Mac: grande quanto la sua colonna (66em = il portatile del kit) */
.as-sett__finestra { position: relative; container-type: inline-size; }
.as-sett__mac { font-size: calc(100cqw / 66); }
.as-sett__mac .as-macbook { margin: 0; }

/* Da telefono e tablet il Mac sta in alto, appiccicato sotto l'header, e le voci gli scorrono sotto. La finestra ha la
   misura del Mac intero; dentro, il Mac nasce grande quanto il primo piano più stretto (--z volte la finestra) e si
   rimpicciolisce per il campo largo: quando la telecamera si avvicina (2-2,5 volte, la regola della regia del 04/11) il
   testo resta nitido. Il JS scrive --cs, --cx, --cy; senza JS resta il campo largo. */
@media (max-width: 999px) {
	.as-sett__corpo { display: flex; flex-direction: column-reverse; gap: 8px; }
	.as-sett__vetrina { position: sticky; top: var(--as-header-h, 64px); z-index: 2; padding: 10px 0 18px; background: linear-gradient(180deg, var(--as-bg, #fff) 86%, rgba(255, 255, 255, 0)); }
	.as-sett__finestra { --z: 2.5; aspect-ratio: 66 / 42.5; overflow: hidden; border-radius: calc(14px * var(--as-brm, 1)); }
	.as-sett__mac { --cs: calc(1 / var(--z)); --cx: 0px; --cy: 0px; position: absolute; left: 0; top: 0; width: 66em; font-size: calc(var(--z) * 100cqw / 66); transform-origin: 0 0; transform: translate(var(--cx), var(--cy)) scale(var(--cs)); transition: transform 1.1s cubic-bezier(.65, 0, .3, 1); }
	.as-sett .as-sett__voci { padding-bottom: 24vh; }
	/* col JS, sopra il primo vantaggio il posto per il campo largo: il Mac intero si vede finché non è appiccicato in alto */
	.as-sett.is-viva .as-sett__voci { padding-top: 24vh; }
	.as-sett__voce { padding: 18px 0; }
	.as-sett__voce.is-cta { padding-bottom: 0; }
}

/* ══ L'APP: LA SETTIMANA DI LA TUA IMPRESA (sopra .as-pq di demo.css) ══ */
.as-pq--sett { grid-template-columns: calc(168 * var(--p)) minmax(0, 1fr) calc(244 * var(--p)); grid-template-rows: minmax(0, 1fr); }
.as-pq--sett > * { min-height: 0; }
@supports (corner-shape: squircle) {
	.as-pq--sett :is(.as-sett-ref, .as-sett-foto, .as-sett-scorta > i, .as-sett-pezzo i, .as-sett-file > i) { corner-shape: squircle; }
}
.as-pq--sett .as-pq__nav span { height: calc(27 * var(--p)); }
.as-pq--sett .as-pq__schede .as-ico { width: calc(11 * var(--p)); height: calc(11 * var(--p)); }
/* le testate dei riquadri: il titolo, e a destra la sua pastiglia */
.as-sett-h { display: flex; flex: none; align-items: center; gap: calc(8 * var(--p)); height: calc(24 * var(--p)); margin-bottom: calc(4 * var(--p)) !important; padding: 0 calc(2 * var(--p)); }
.as-sett-h b { font-family: var(--f-t); font-size: calc(14 * var(--p)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.as-sett-h em, .as-pq__voci-h em.as-sett-zero { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); height: calc(19 * var(--p)); margin-left: auto; padding: 0 calc(8 * var(--p)); border-radius: 999px; box-shadow: none; font-size: calc(9.5 * var(--p)); font-weight: 700; white-space: nowrap; }
.as-sett-h .as-ico, .as-pq__voci-h em.as-sett-zero .as-ico, .as-sett-tornano .as-ico { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 2.4; }
.as-pq__voci-h em.as-sett-zero { background: rgba(19, 148, 95, .13); color: #0F7F51; }
.as-sett-allarme { background: rgba(229, 72, 77, .12); color: #D2283A; }
.as-sett-quanti, .as-sett-tuoi { background: rgba(30, 77, 92, .1); color: #1E4D5C; }
/* «aggiornato adesso»: il puntino verde che respira */
.as-sett-live { display: inline-flex; align-items: center; gap: calc(5 * var(--p)); margin-left: auto; font-size: calc(10 * var(--p)); font-weight: 600; color: #178A57; white-space: nowrap; }
.as-sett-live.is-piccolo { margin-left: 0; font-size: calc(9.5 * var(--p)); }
.as-sett-live u { position: relative; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #2BC46E; }
.as-sett-live u::after { content: ''; position: absolute; inset: calc(-3 * var(--p)); border-radius: 50%; background: rgba(43, 196, 110, .35); opacity: 0; }
.as-sett.is-viva .as-sett-live u::after { animation: as-sett-respiro 2.2s ease-out infinite; }
@keyframes as-sett-respiro { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.as-sett.is-ferma .as-sett-live u::after { animation: none; }
/* il contatore che cambia: il «prima» e il «dopo» uno sopra l'altro */
.as-sett-n { display: inline-grid; font-variant-numeric: tabular-nums; }
.as-sett-n > span { grid-area: 1 / 1; transition: opacity .35s ease .55s, transform .5s cubic-bezier(.2, .8, .2, 1) .55s; }
.as-sett-n > .is-prima { opacity: 0; transform: translateY(-45%); }

/* ── 4 · Il referente, nella barra laterale ── */
.as-sett-ref { display: flex; flex: 1; flex-direction: column; gap: calc(7 * var(--p)); min-height: 0; padding: calc(10 * var(--p)); border-radius: calc(14 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .8); box-shadow: 0 calc(10 * var(--p)) calc(22 * var(--p)) calc(-14 * var(--p)) rgba(52, 36, 96, .45); }
.as-sett-ref__testa { display: flex; align-items: center; gap: calc(8 * var(--p)); padding-bottom: calc(7 * var(--p)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .07); }
.as-sett-ref__testa i { flex: none; width: calc(26 * var(--p)); height: calc(26 * var(--p)); overflow: hidden; border-radius: 50%; box-shadow: 0 calc(4 * var(--p)) calc(8 * var(--p)) calc(-4 * var(--p)) rgba(20, 20, 20, .6); }
.as-sett-ref__testa .as-lg { display: grid; width: 100%; height: 100%; }
.as-sett-ref__testa span { display: grid; min-width: 0; line-height: 1.2; }
.as-sett-ref__testa b { font-size: calc(11.5 * var(--p)); font-weight: 600; white-space: nowrap; }
.as-sett-ref__testa small { font-size: calc(9.5 * var(--p)); color: var(--muted); white-space: nowrap; }
.as-sett-msg { display: flex; align-items: flex-end; gap: calc(6 * var(--p)); }
.as-sett-msg > i { flex: none; width: calc(20 * var(--p)); height: calc(20 * var(--p)); overflow: hidden; border-radius: 50%; }
.as-sett-msg > span { display: grid; gap: calc(3 * var(--p)); padding: calc(7 * var(--p)) calc(9 * var(--p)); border-radius: calc(12 * var(--p)) calc(12 * var(--p)) calc(12 * var(--p)) calc(4 * var(--p)); background: #EFEBF5; font-size: calc(10.5 * var(--p)); line-height: 1.3; }
.as-sett-msg small { font-size: calc(8.5 * var(--p)); color: var(--muted); }
.as-sett-msg.is-noi { justify-content: flex-end; }
.as-sett-msg.is-noi > span { margin-left: calc(14 * var(--p)); border-radius: calc(12 * var(--p)) calc(12 * var(--p)) calc(4 * var(--p)) calc(12 * var(--p)); background: linear-gradient(135deg, #FF8A4A 0%, #F36A24 60%, #E8551A 100%); color: #fff; box-shadow: 0 calc(8 * var(--p)) calc(16 * var(--p)) calc(-10 * var(--p)) rgba(232, 85, 26, .75); transition: opacity .45s ease .6s, transform .6s cubic-bezier(.34, 1.4, .64, 1) .6s; transform-origin: 100% 100%; }
.as-sett-msg.is-noi small { color: rgba(255, 255, 255, .8); }
.as-sett-ref__piede { display: flex; align-items: center; gap: calc(5 * var(--p)); margin-top: auto !important; font-size: calc(9.5 * var(--p)); font-weight: 600; color: #0F7F51; transition: opacity .4s ease 1.15s; }
.as-sett-ref__piede .as-ico { width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 2.4; }

/* ── 0 · Gli ordini della settimana ── */
.as-sett-ord { flex: 1.28; }
.as-sett-ord .as-pq__voci-h .as-sett-n { font-size: calc(11 * var(--p)); font-weight: 600; color: var(--muted); }
.as-pq__ord.as-sett-riga { grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) calc(26 * var(--p)) auto calc(66 * var(--p)); }
.as-sett-riga .as-pq__voce b { font-size: calc(11.5 * var(--p)); }
.as-sett-foto { width: calc(26 * var(--p)); height: calc(26 * var(--p)); overflow: hidden; border-radius: calc(7 * var(--p) * var(--sq)); box-shadow: 0 0 0 calc(1.5 * var(--p)) #fff, 0 calc(3 * var(--p)) calc(6 * var(--p)) calc(-3 * var(--p)) rgba(20, 32, 43, .5); }
.as-sett-fonte { display: inline-flex; align-items: center; justify-self: start; gap: calc(4 * var(--p)); height: calc(19 * var(--p)); padding: 0 calc(7 * var(--p)) 0 calc(6 * var(--p)); border-radius: 999px; background: rgba(20, 32, 43, .06); color: #4E5463; font-size: calc(9 * var(--p)); font-weight: 600; white-space: nowrap; }
.as-sett-fonte .as-ico { width: calc(11 * var(--p)); height: calc(11 * var(--p)); }
.as-sett-euro { display: grid; justify-items: end; gap: calc(1 * var(--p)); line-height: 1.2; }
.as-sett-euro b { font-size: calc(11.5 * var(--p)); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-sett-euro small { font-size: calc(9 * var(--p)); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-sett-euro small.is-ora { font-weight: 600; color: #E2611B; }
/* l'ordine nuovo arriva da solo: la sua riga si apre in cima e spinge giù le altre, poi compare (bianco); la pastiglia
   «0 ricopiati» arriva dopo */
.as-sett-riga.is-nuova { transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1) .3s, opacity .45s ease .75s, transform .6s cubic-bezier(.2, .8, .2, 1) .75s; }
.as-pq__voci-h em.as-sett-zero { transition: opacity .4s ease 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1s; }

/* ── 1 · Il magazzino adesso ── */
.as-sett-mag { flex: 1; gap: 0; padding: calc(10 * var(--p)) calc(12 * var(--p)) calc(6 * var(--p)); }
.as-sett-scorta { display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) auto auto; column-gap: calc(8 * var(--p)); row-gap: calc(5 * var(--p)); align-content: center; flex: 1; min-height: 0; padding: 0 calc(2 * var(--p)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .06); }
.as-sett-scorta:last-child { box-shadow: none; }
.as-sett-scorta > i { grid-row: 1 / span 2; width: calc(28 * var(--p)); height: calc(28 * var(--p)); overflow: hidden; border-radius: calc(8 * var(--p) * var(--sq)); }
.as-sett-scorta__nome { display: flex; align-items: baseline; gap: calc(7 * var(--p)); min-width: 0; }
.as-sett-scorta__nome b { font-size: calc(11 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sett-scorta__nome small { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); font-size: calc(9 * var(--p)); color: var(--muted); white-space: nowrap; }
.as-sett-scorta__nome u { width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: var(--c); }
.as-sett-scorta__n { grid-column: 4; grid-row: 1; display: flex; align-items: baseline; gap: calc(4 * var(--p)); }
.as-sett-scorta__n .as-sett-n { font-family: var(--f-t); font-size: calc(14 * var(--p)); font-weight: 600; letter-spacing: -.02em; }
.as-sett-scorta__n small { font-size: calc(9 * var(--p)); color: var(--muted); white-space: nowrap; }
.as-sett-scorta.is-basso .as-sett-scorta__n .as-sett-n { color: #D2283A; }
.as-sett-scorta__barra { grid-column: 2 / -1; grid-row: 2; display: block; height: calc(5 * var(--p)); overflow: hidden; border-radius: 999px; background: rgba(20, 32, 43, .08); }
.as-sett-scorta__barra s { display: block; width: var(--a); height: 100%; border-radius: inherit; background: var(--c); transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .35s; }
.as-sett-riordina { grid-column: 3; grid-row: 1; align-self: center; padding: calc(1.5 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: rgba(229, 72, 77, .12); color: #D2283A; font-size: calc(8.5 * var(--p)); font-weight: 700; white-space: nowrap; transition: opacity .4s ease 1.3s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s; }

/* ── 2 · I conti: il vetro scuro ── */
.as-sett-conti { padding-bottom: calc(13 * var(--p)); }
.as-sett-conti .as-pq__tot-h em { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); transition: opacity .4s ease 1s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1s; }
.as-sett-conti .as-pq__tot-n { font-size: calc(38 * var(--p)); }
.as-sett-conti .as-pq__tot-sub b.is-zero { color: #7CF2B2; }
.as-sett-conti .as-pq__barra { margin-top: calc(12 * var(--p)) !important; }
.as-sett-conti .as-pq__barra i { transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--k) * .12s), opacity .3s ease calc(.3s + var(--k) * .12s); }
.as-sett-conti .as-pq__leg { gap: calc(4 * var(--p)); margin-top: calc(10 * var(--p)) !important; }
.as-sett-conti .as-pq__leg span { grid-template-columns: calc(8 * var(--p)) minmax(0, 1fr) auto calc(26 * var(--p)); font-size: calc(10 * var(--p)); }

/* ── 3 · I pezzi collegati: uno sotto l'altro, col filo; l'ultimo arriva ── */
.as-sett-pezzi { flex: 1.15; gap: 0; padding: calc(10 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p)); }
.as-sett-catena { display: grid; flex: 1; grid-template-rows: repeat(5, minmax(0, 1fr)); min-height: 0; }
.as-sett-pezzo { position: relative; display: grid; grid-template-columns: calc(18 * var(--p)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(8 * var(--p)); }
.as-sett-pezzo i { position: relative; z-index: 1; display: grid; place-items: center; width: calc(18 * var(--p)); height: calc(18 * var(--p)); border-radius: calc(6 * var(--p) * var(--sq)); background: #1E4D5C; color: #fff; box-shadow: 0 calc(4 * var(--p)) calc(8 * var(--p)) calc(-4 * var(--p)) rgba(30, 77, 92, .6); transition: opacity .35s ease calc(.2s + var(--k) * .16s), transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(.2s + var(--k) * .16s); }
.as-sett-pezzo .as-ico { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 2; }
.as-sett-pezzo b { font-size: calc(10.5 * var(--p)); font-weight: 600; white-space: nowrap; }
.as-sett-pezzo small { font-size: calc(9 * var(--p)); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-sett-pezzo + .as-sett-pezzo::before { content: ''; position: absolute; left: calc(8.25 * var(--p)); bottom: calc(50% + 9 * var(--p)); width: calc(1.5 * var(--p)); height: calc(100% - 18 * var(--p)); background: rgba(30, 77, 92, .45); transform-origin: 50% 0; transition: transform .3s ease calc(.12s + var(--k) * .16s); }
.as-sett-pezzo.is-poi i { background: rgba(255, 255, 255, .6); color: #8A8F9C; box-shadow: inset 0 0 0 calc(1.2 * var(--p)) rgba(20, 32, 43, .28); }
.as-sett-pezzo.is-poi::before { background: none; width: 0; border-left: calc(1.5 * var(--p)) dashed rgba(20, 32, 43, .3); }
.as-sett-pezzo.is-poi b { font-weight: 500; color: #4E5463; }
.as-sett-pezzo.is-poi small { font-weight: 600; color: #E2611B; }

/* ── 5 · I tuoi dati ── */
.as-sett-dati { flex: .85; gap: 0; padding: calc(10 * var(--p)) calc(12 * var(--p)) calc(6 * var(--p)); }
.as-sett-file { position: relative; display: grid; grid-template-columns: calc(22 * var(--p)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(8 * var(--p)); flex: 1; min-height: 0; padding: 0 calc(2 * var(--p)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .06); }
.as-sett-file:last-child { box-shadow: none; }
.as-sett-file > i { --fc: #13945F; position: relative; display: grid; place-items: center; width: calc(22 * var(--p)); height: calc(22 * var(--p)); border-radius: calc(7 * var(--p) * var(--sq)); background: color-mix(in srgb, var(--fc) 13%, #fff); color: var(--fc); }
.as-sett-file.is-csv > i { --fc: #5B6170; }
.as-sett-file.is-backup > i { --fc: #1E4D5C; }
.as-sett-file > i .as-ico { width: calc(14 * var(--p)); height: calc(14 * var(--p)); }
/* una riga sola per file: il nome a sinistra, quanto pesa a destra */
.as-sett-file > span { display: flex; align-items: baseline; justify-content: space-between; gap: calc(6 * var(--p)); min-width: 0; line-height: 1.2; }
.as-sett-file b { font-size: calc(10.5 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sett-file small { font-size: calc(9 * var(--p)); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-sett-file > em { display: grid; place-items: center; width: calc(20 * var(--p)); height: calc(20 * var(--p)); border-radius: 50%; background: rgba(20, 32, 43, .06); color: #4E5463; }
.as-sett-file > em .as-ico { grid-area: 1 / 1; width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 2.2; }
.as-sett-file.is-backup > em, .as-sett-file > em.is-scaricato { background: #2BC46E; color: #fff; }
/* lo scaricamento del file Excel: la freccia scende e lascia la spunta verde */
.as-sett-file > em.is-scaricato { transition: background-color .35s ease 1s, color .35s ease 1s; }
.as-sett-file > em.is-scaricato .as-ico { transition: opacity .3s ease .95s, transform .55s cubic-bezier(.5, 0, .2, 1) .45s; }
.as-sett-file > em.is-scaricato .as-ico:first-child { opacity: 0; transform: translateY(70%); }

/* ══ LA VITA (motion.js) ══
   Il riquadro del vantaggio al centro si solleva e prende il filo arancio; gli altri, e la cornice dell'app, si spengono
   un poco. Ogni riquadro spento torna al suo «prima» (subito, senza ritardi), acceso rifà la cosa coi ritardi qui sopra. */
.as-sett [data-sett-w] { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.as-sett :is(.as-pq__nav, .as-pq__me, .as-pq__ws, .as-pq__top) { transition: opacity .5s ease; }
.as-sett.is-scelta :is(.as-pq__nav, .as-pq__me, .as-pq__ws, .as-pq__top) { opacity: .55; }
.as-sett.is-scelta [data-sett-w]:not(.is-on) { opacity: .32; }
.as-sett.is-scelta [data-sett-w].is-on { transform: translateY(calc(-3 * var(--p))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 calc(1.6 * var(--p)) #F37022, 0 calc(18 * var(--p)) calc(34 * var(--p)) calc(-16 * var(--p)) rgba(243, 112, 34, .55); }
/* i «prima» */
.as-sett.is-scelta [data-sett-w]:not(.is-on) .as-sett-n > .is-prima { opacity: 1; transform: none; transition-delay: 0s; }
.as-sett.is-scelta [data-sett-w]:not(.is-on) .as-sett-n > .is-dopo { opacity: 0; transform: translateY(45%); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-ord:not(.is-on) .as-sett-riga.is-nuova { flex-grow: 0; overflow: hidden; opacity: 0; transform: translateX(calc(-16 * var(--p))); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-ord:not(.is-on) .as-sett-zero { opacity: 0; transform: scale(.7); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-mag:not(.is-on) .as-sett-scorta__barra s { width: var(--da); transition-delay: 0s; transition-duration: .3s; }
.as-sett.is-scelta .as-sett-mag:not(.is-on) .as-sett-riordina { opacity: 0; transform: scale(.7); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-conti:not(.is-on) .as-pq__barra i { opacity: 0; transform: scaleX(0); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-conti:not(.is-on) .as-pq__tot-h em { opacity: 0; transform: scale(.7); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-pezzi:not(.is-on) .as-sett-pezzo i { opacity: .25; transform: scale(.6); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-pezzi:not(.is-on) .as-sett-pezzo::before { transform: scaleY(0); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-ref:not(.is-on) .as-sett-msg.is-noi > span { opacity: 0; transform: translateY(calc(6 * var(--p))) scale(.92); transition-delay: 0s; }
.as-sett.is-scelta .as-sett-ref:not(.is-on) .as-sett-ref__piede { opacity: 0; transition-delay: 0s; }
.as-sett.is-scelta .as-sett-dati:not(.is-on) .as-sett-file > em.is-scaricato { background: rgba(20, 32, 43, .06); color: #4E5463; transition-delay: 0s; }
.as-sett.is-scelta .as-sett-dati:not(.is-on) .as-sett-file > em.is-scaricato .as-ico:first-child { opacity: 1; transform: none; transition-delay: 0s; }
.as-sett.is-scelta .as-sett-dati:not(.is-on) .as-sett-file > em.is-scaricato .as-ico:last-child { opacity: 0; transition-delay: 0s; }

/* ══ DA TELEFONO, A TOCCO (v0.116, Rami 05/11: «da mobile fai in modo che le animazioni cambino pigiando sugli step sul
   Mac! quindi niente scroll... e il testo sotto cambia di conseguenza») ══
   Col JS e sotto i 1000px la sezione prende .is-tocco: il Mac non è più appiccicato, sotto ha gli step (01-06) da
   toccare, come un controllo segmentato attaccato alla sua base, e sotto gli step il testo dello step scelto (le voci
   restano tutte nel markup, una sopra l'altra: si vede quella accesa). Il bottone acceso ha la barretta arancio che si
   riempie finché gli step vanno da soli (.is-auto); al primo tocco si fermano. Senza JS, o da computer: come prima. */
.as-sett__passi { display: none; }
@media (max-width: 999px) {
	.as-sett.is-tocco .as-sett__vetrina { position: relative; top: auto; z-index: auto; padding: 0; background: none; }
	.as-sett.is-tocco .as-sett__passi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: min(100%, 420px); margin: 14px auto 0; padding: 4px; border-radius: calc(16px * var(--as-brm, 1)); background: rgba(28, 28, 30, .06); box-shadow: inset 0 0 0 1px rgba(28, 28, 30, .05); }
	.as-sett__passo { position: relative; display: grid; place-items: center; min-width: 0; min-height: 46px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: calc(12px * var(--as-brm, 1)); background: transparent; color: rgba(28, 28, 30, .48); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .2s ease; }
	.as-sett__passo:active { transform: scale(.94); }
	.as-sett__passo:focus-visible { outline: 2px solid var(--as-arancio, #F37022); outline-offset: 2px; }
	.as-sett__passo[aria-pressed="true"] { background: #fff; color: var(--as-arancio, #F37022); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 14px -8px rgba(28, 28, 30, .45), 0 0 0 1px rgba(28, 28, 30, .04); }
	/* la barretta del tempo: c'è solo nello step acceso e solo finché gli step vanno da soli */
	.as-sett__passo i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(243, 112, 34, .16); opacity: 0; transition: opacity .3s ease; }
	.as-sett__passo i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--as-arancio, #F37022); transform: scaleX(0); transform-origin: 0 50%; }
	.as-sett.is-auto .as-sett__passo[aria-pressed="true"] i { opacity: 1; }
	.as-sett.is-auto .as-sett__passo[aria-pressed="true"] i::after { animation: as-sett-passo var(--sett-passo, 5.6s) linear forwards; }
	/* il testo: le voci una sopra l'altra nella stessa cella (l'altezza è quella della più lunga: niente salti), si vede
	   quella dello step acceso; il pulsante resta sotto */
	.as-sett.is-tocco .as-sett__voci { display: grid; padding: 0; margin-top: 4px; }
	.as-sett.is-tocco .as-sett__voce:not(.is-cta) { grid-area: 1 / 1; padding: 20px 0 4px; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
	.as-sett.is-tocco .as-sett__voce.is-on:not(.is-cta) { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .12s, transform .6s cubic-bezier(.2, .8, .2, 1) .12s, visibility 0s; }
	.as-sett.is-tocco .as-sett__voce.is-on p { color: var(--as-muted, #707070); }
	.as-sett.is-tocco .as-sett__voce.is-cta { grid-area: 2 / 1; padding: 18px 0 0; }
}
@supports (corner-shape: squircle) {
	.as-sett__passi, .as-sett__passo { corner-shape: squircle; }
}
@keyframes as-sett-passo { to { transform: scaleX(1); } }