/*
 * Studio Arfia — mazzo/design-restyling.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo della pagina Restyling (inc/mazzo/design-restyling.php): La tua impresa, bagni e ristrutturazioni a
 * Firenze (il blu petrolio del marchio, Paolo, le foto dei bagni). Le primitive (vetro, titoletto, entrata di vetri, fogli e
 * vetri scuri) stanno in mazzo.css; qui il foglio e il vetro scuro hanno il loro aspetto. Tutto in em della scena: da telefono
 * la scena è alta 272px, ogni mockup sta dentro ~27 × 20 em.
 * La vita (.is-viva): i segni sul sito del 2009 si accendono uno alla volta con la loro riga, i commenti si appuntano e arriva «Approvata», gli indirizzi
 * si spuntano uno dopo l'altro, i numeri di dopo salgono accanto a quelli di prima.
 */
.as-mz-rs { --petrolio: #1E4D5C; --verde: #1F9D55; --arancio: #E8641B; max-width: 27em; margin-inline: auto; color: #1C1C1E; }
@media (min-width: 900px) { .as-mz-rs { max-width: 29em; } }
.as-mz-rs :is(b, small, em, i) { font-style: normal; }
.as-mz-rs .as-mz-rs__ic { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.as-mz-rs .as-mz-rs__vie, .as-mz-rs .as-mz-rs__col { list-style: none; margin: 0; padding: 0; } /* due classi: ul[class] del tema (Errori 1.85) */
.as-mz-rs__volto { flex: none; display: block; width: 2.3em; height: 2.3em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .12em #fff; }
.as-mz-rs__volto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@supports (corner-shape: squircle) { .as-mz-rs :is(.as-mz-rs__vecchio-foto, .as-mz-rs__home, .as-mz-rs__commento, .as-mz-rs__scuro, .as-mz-rs__cta) { corner-shape: squircle; } }

/* 01 · la diagnosi (v0.108.2, Rami: «la card 01 è brutta; al posto delle foto la grafica del sito»): il foglio dritto, la testata
   con l'esito, a sinistra il sito del 2009 com'è in una finestrina coi pezzi segnati, a destra l'elenco coi numeri degli stessi colori */
.as-mz-rs--diagnosi { max-width: 30.5em; }
.as-mz-rs__foglio { position: relative; padding: 1em 1.1em 1.1em; border-radius: calc(.9em * var(--as-brm)); background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 1.6em 3.4em -1.4em rgba(30, 50, 70, .42); }
@supports (corner-shape: squircle) { .as-mz-rs__foglio { corner-shape: squircle; } }
.as-mz-rs__f-testa { display: flex; align-items: center; gap: .65em; padding-bottom: .8em; border-bottom: 1px solid rgba(28, 28, 30, .12); }
.as-mz-rs__f-testa > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.as-mz-rs__f-testa b { font-size: 1.02em; font-weight: 700; letter-spacing: -.01em; }
.as-mz-rs__f-testa small { font-size: .74em; color: rgba(28, 28, 30, .55); }
.as-mz-rs__logo { flex: none; width: 2em; height: 2em; overflow: hidden; border-radius: .45em; }
.as-mz-rs__logo .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-rs__esito { flex: none; padding: .32em .7em; border-radius: 1em; background: #E3EDF0; color: var(--petrolio); font-size: .72em; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.as-mz-rs__dia { display: grid; grid-template-columns: 14.6em minmax(0, 1fr); gap: 1.05em; align-items: start; margin-top: .9em; }
/* la finestrina: tre puntini, l'indirizzo, e sotto il sito del 2009 (demo.css, disegnato in cqw: si adatta alla larghezza) */
.as-mz-rs__sito { position: relative; height: 14em; overflow: hidden; border-radius: calc(.55em * var(--as-brm)); background: #C9D3DD; box-shadow: 0 0 0 1px rgba(28, 28, 30, .14), 0 .5em 1.2em -.6em rgba(30, 50, 70, .35); }
.as-mz-rs__sito-barra { display: flex; align-items: center; gap: .22em; height: 1.35em; margin: 0 !important; padding: 0 .5em; background: #ECECEE; border-bottom: 1px solid rgba(28, 28, 30, .1); }
.as-mz-rs__sito-barra i { display: block; width: .38em; height: .38em; border-radius: 50%; background: rgba(28, 28, 30, .22); }
.as-mz-rs__sito-barra span { flex: 1; margin-right: .9em; text-align: center; font-size: .56em; color: rgba(28, 28, 30, .55); }
.as-mz-rs__sito .as-vecchio { top: 1.35em; }
/* i segni: un riquadro col filo del suo colore e un velo leggero, il numero nell'angolo */
.as-mz-rs__segno { position: absolute; z-index: 2; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); border-radius: .22em; box-shadow: inset 0 0 0 .12em var(--c), 0 0 0 .1em rgba(255, 255, 255, .85); background: color-mix(in srgb, var(--c) 12%, transparent); }
.as-mz-rs__segno.is-tiene { --c: var(--verde); }
.as-mz-rs__segno.is-rifa { --c: var(--arancio); }
.as-mz-rs__segno b { position: absolute; left: .25em; top: .25em; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .12em #fff, 0 .15em .4em rgba(0, 0, 0, .25); color: #fff; font-size: .62em; font-weight: 700; line-height: 1; }
/* l'elenco: due gruppi, il numero nel tondo del colore del gruppo */
.as-mz-rs__elenco { display: grid; gap: .85em; padding-top: .1em; }
.as-mz-rs__col li { display: flex; align-items: center; gap: .5em; padding: .36em 0; border-top: 1px solid rgba(28, 28, 30, .08); font-size: .84em; line-height: 1.25; }
.as-mz-rs__col li.as-mz-rs__col-h { gap: .35em; padding: 0 0 .35em; border-top: 0; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.as-mz-rs__col.is-tiene { --c: var(--verde); }
.as-mz-rs__col.is-rifa { --c: var(--arancio); }
.as-mz-rs__col .as-mz-rs__col-h { color: var(--c); }
.as-mz-rs__col-h .as-mz-rs__ic { width: 1.35em; height: 1.35em; stroke-width: 2.4; }
.as-mz-rs__n { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--c); color: #fff; font-size: .74em; font-weight: 700; line-height: 1; }
@media (max-width: 699px) {
	.as-mz-rs__dia { grid-template-columns: 12.4em minmax(0, 1fr); gap: .8em; }
	.as-mz-rs__sito { height: 12.3em; }
	.as-mz-rs__col li { font-size: .8em; }
}

/* 02 · l'anteprima: la home nuova nel browser, i commenti, l'approvazione */
.as-mz-rs--anteprima { position: relative; padding-bottom: 2.6em; }
.as-mz-rs__browser { overflow: hidden; padding: .45em; }
.as-mz-rs__barra { display: flex; align-items: center; gap: .5em; padding: .1em .15em .45em; }
.as-mz-rs__url { display: inline-flex; align-items: center; gap: .4em; flex: 1; min-width: 0; height: 1.9em; padding: 0 .7em; border-radius: 1em; background: rgba(120, 120, 128, .12); font-size: .78em; color: rgba(28, 28, 30, .72); white-space: nowrap; overflow: hidden; }
.as-mz-rs__url .as-mz-rs__ic { width: 1.05em; height: 1.05em; }
.as-mz-rs__bozza { flex: none; padding: .25em .6em; border-radius: 1em; background: #E3EDF0; color: var(--petrolio); font-size: .72em; font-weight: 700; letter-spacing: .03em; }
.as-mz-rs__home { position: relative; height: 12.5em; overflow: hidden; border-radius: calc(.8em * var(--as-brm)); background: #20262B; color: #fff; }
.as-mz-rs__home > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.as-mz-rs__home::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 20, 24, .6) 0%, rgba(12, 20, 24, 0) 26%), linear-gradient(90deg, rgba(12, 20, 24, .72) 0%, rgba(12, 20, 24, .25) 62%, rgba(12, 20, 24, 0) 100%); } /* v0.108.6: la fascia del menu più scura, il menu si legge anche sulla pianta */
.as-mz-rs__home > p, .as-mz-rs__home > i { position: relative; z-index: 2; }
.as-mz-rs__nav { display: flex; align-items: center; gap: 1em; padding: .8em 1em 0; font-size: .7em; color: rgba(255, 255, 255, .82); }
.as-mz-rs__marchio { display: inline-flex; align-items: center; gap: .4em; margin-right: auto; font-size: 1.15em; font-weight: 700; color: #fff; }
.as-mz-rs__marchio .as-lg { width: 1.5em; height: 1.5em; }
.as-mz-rs__titolo { margin: 1.25em 1.1em 0 !important; font-size: 1.55em; font-weight: 700; line-height: 1.05; letter-spacing: -.025em; }
.as-mz-rs__cta { display: inline-block; margin: .8em 0 0 1.7em !important; padding: .55em .95em; border-radius: calc(.6em * var(--as-brm)); background: #fff; color: var(--petrolio); font-size: .74em; font-weight: 700; }
/* la pagina chiesta da Paolo: la voce «Preventivi» nel menu, nel verde della porta del logo (senza JS si vede già aggiunta) */
.as-mz-rs__nuova { position: relative; padding: .22em .55em; margin: -.22em -.2em; border-radius: 1em; background: #A6DB8E; color: #12262D; font-weight: 700; }
.as-mz-rs__pin { position: absolute !important; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50% 50% 50% .2em; background: var(--arancio); box-shadow: 0 0 0 .14em #fff, 0 .3em .8em rgba(0, 0, 0, .35); color: #fff; font-size: .78em; font-weight: 700; }
.as-mz-rs__pin.is-1 { left: 50%; top: 1.7em; margin-left: -.85em; border-radius: .2em 50% 50% 50%; font-size: 1.12em; background: var(--verde); } /* sotto la voce nuova del menu; verde quando la pagina c'è */
.as-mz-rs__commento { position: absolute; right: -.4em; bottom: 0; z-index: 3; display: flex; align-items: flex-start; gap: .55em; width: 15.5em; padding: .6em .75em; border-radius: calc(.9em * var(--as-brm)); background: #fff; box-shadow: 0 1em 2.2em -1em rgba(20, 30, 40, .45), 0 0 0 1px rgba(28, 28, 30, .06); font-size: .82em; line-height: 1.32; }
.as-mz-rs__commento > span:last-child { display: grid; gap: .1em; color: rgba(28, 28, 30, .78); }
.as-mz-rs__commento b { font-weight: 700; color: #1C1C1E; }
.as-mz-rs__commento .as-mz-rs__volto { width: 2em; height: 2em; }
.as-mz-rs__approva { position: absolute; left: .4em; bottom: .55em; z-index: 3; display: inline-flex; align-items: center; gap: .4em; padding: .45em .85em .45em .6em; border-radius: 1.2em; background: var(--verde); color: #fff; font-size: .82em; font-weight: 700; box-shadow: 0 .6em 1.4em -.6em rgba(31, 157, 85, .7); }
.as-mz-rs__approva .as-mz-rs__ic { width: 1.15em; height: 1.15em; stroke-width: 2.6; }

/* 03 · il cambio: martedì sera, gli indirizzi che tornano al loro posto */
.as-mz-rs__cambio { padding: .95em 1.05em .85em; }
.as-mz-rs__sera { display: flex; align-items: center; gap: .65em; padding-bottom: .7em; border-bottom: 1px solid rgba(28, 28, 30, .08); }
.as-mz-rs__sera > .as-mz-rs__ic { width: 2.1em; height: 2.1em; padding: .42em; border-radius: 50%; background: #23324A; color: #CFE0FF; box-sizing: border-box; }
.as-mz-rs__sera > span { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.as-mz-rs__sera b { font-size: 1.04em; font-weight: 700; }
.as-mz-rs__sera small { font-size: .76em; color: rgba(28, 28, 30, .58); }
.as-mz-rs__online { flex: none; display: inline-flex; align-items: center; gap: .4em; padding: .3em .65em; border-radius: 1em; background: #DDF4E6; color: #146C3B; font-size: .76em; font-weight: 700; }
.as-mz-rs__online i { width: .55em; height: .55em; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 .2em rgba(31, 157, 85, .2); }
.as-mz-rs__vie li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr) auto; align-items: center; gap: .5em; padding: .5em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .84em; }
.as-mz-rs__vie span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mz-rs__vie .is-vecchio { color: rgba(28, 28, 30, .45); }
.as-mz-rs__vie .is-nuovo { font-weight: 600; color: var(--petrolio); }
.as-mz-rs__vie li > .as-mz-rs__ic { width: 1em; height: 1em; color: rgba(28, 28, 30, .35); }
.as-mz-rs__ok { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--verde); color: #fff; }
.as-mz-rs__ok .as-mz-rs__ic { width: .9em; height: .9em; stroke-width: 2.8; }
.as-mz-rs__tutto { margin-top: .65em !important; font-size: .82em; color: rgba(28, 28, 30, .65); text-align: center; }
.as-mz-rs__tutto b { color: #1C1C1E; }

/* 04 · prima e dopo: il vetro scuro con le luci, tre numeri */
.as-mz-rs__scuro { padding: 1.05em 1.15em .9em; border-radius: calc(1.15em * var(--as-brm)); background: radial-gradient(80% 70% at 10% 0%, rgba(110, 170, 255, .5), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(255, 140, 170, .45), transparent 70%), #141A22; color: #fff; box-shadow: 0 1.4em 3em -1.6em rgba(20, 30, 50, .6); }
.as-mz-rs__numeri-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .6em; font-size: 1.05em; font-weight: 650; }
.as-mz-rs__numeri-h small { font-size: .74em; font-weight: 500; color: rgba(255, 255, 255, .6); }
.as-mz-rs__colh, .as-mz-rs__riga { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr); gap: .6em; align-items: center; }
.as-mz-rs__colh { padding-bottom: .3em; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.as-mz-rs__riga { padding: .62em 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.as-mz-rs__cosa { display: flex; align-items: center; gap: .5em; font-size: .86em; line-height: 1.25; color: rgba(255, 255, 255, .85); }
.as-mz-rs__cosa .as-mz-rs__ic { color: rgba(255, 255, 255, .6); }
.as-mz-rs__prima { font-size: .98em; color: rgba(255, 255, 255, .45); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums; }
.as-mz-rs__dopo { display: grid; line-height: 1.15; }
.as-mz-rs__dopo b { font-size: 1.35em; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.as-mz-rs__dopo small { font-size: .7em; font-weight: 600; color: #8EF0B4; }

/* ══ LA VITA, quando la carta arriva ══ */
/* :where e non :is (v0.108.5): con :is la regola pesava come «.as-mz-rs__col li» e vinceva sui ritardi delle singole carte (il commento e
   «Approvata» della carta 02 arrivavano insieme) */
.as-pp-mazzo--viva :where(.as-mz-rs__col li, .as-mz-rs__segno, .as-mz-rs__commento, .as-mz-rs__approva, .as-mz-rs__vie li, .as-mz-rs__tutto, .as-mz-rs__dopo) { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva :is(.as-mz-rs__col li[style], .as-mz-rs__segno) { transition-delay: calc(.45s + var(--k, 0) * .28s); } /* il segno e la sua riga insieme, uno alla volta */
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__col li { opacity: 0; transform: translate3d(0, .5em, 0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__segno { opacity: 0; transform: scale(1.08); }
.as-pp-mazzo--viva .as-mz-rs__pin { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; }
.as-pp-mazzo--viva .as-mz-rs__pin.is-1 { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .6s, opacity .25s ease .6s, background-color .45s ease 2.3s; }
.as-pp-mazzo--viva .as-mz-rs__nuova { transition: background-color .5s ease 2.3s, color .5s ease 2.3s; }
.as-pp-mazzo--viva .as-mz-rs__commento { transition-delay: 1.05s; }
.as-pp-mazzo--viva .as-mz-rs__approva { transition: opacity .3s ease 3.1s, transform .55s cubic-bezier(.34, 1.56, .64, 1) 3.1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__pin { opacity: 0; transform: scale(.2) translateY(-1em); background: var(--arancio); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__nuova { background: transparent; color: transparent; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__commento { opacity: 0; transform: translate3d(.8em, .6em, 0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__approva { opacity: 0; transform: scale(.6); }
.as-pp-mazzo--viva .as-mz-rs__vie li { transition-delay: calc(.4s + var(--k) * .28s); }
.as-pp-mazzo--viva .as-mz-rs__ok { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(.75s + var(--k) * .28s), opacity .25s ease calc(.75s + var(--k) * .28s); }
.as-pp-mazzo--viva .as-mz-rs__tutto { transition-delay: 1.9s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-rs__vie li, .as-mz-rs__tutto) { opacity: 0; transform: translate3d(-.6em, 0, 0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__ok { opacity: 0; transform: scale(.2); }
.as-pp-mazzo--viva .as-mz-rs__riga .as-mz-rs__dopo { transition-delay: calc(.6s + var(--k) * .3s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-rs__dopo { opacity: 0; transform: translate3d(1em, 0, 0); }
@media (max-width: 899px) {
	.as-mz-rs__commento { right: 0; width: 17em; }
	.as-mz-rs__home { height: 11em; }
}