/*
 * Studio Arfia — mazzo/siti-web.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo della pagina Siti web (inc/mazzo/siti-web.php): il sito di Villa Castelmora, dalla mappa al go-live.
 * Le primitive (vetro, titoletto, entrata dei vetri) stanno in mazzo.css. Tutto in em della scena (11-17px), così la
 * stessa composizione regge la scena alta 272px del telefono e quella grande del computer. La vita di ogni mockup parte
 * quando la sua carta arriva (.is-viva, mazzo.js); senza script tutto è acceso e fermo.
 */
@font-face { font-family: 'Cardo Castelmora'; src: url('../../fonts/casi/chat-cardo-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost Castelmora'; src: url('../../fonts/casi/chat-jost-variabile.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }

.as-mz-sw { --sw-vino: #6E1F2B; --sw-avorio: #F4EFE7; --sw-notte: #1F1D1B; --sw-cardo: 'Cardo Castelmora', Georgia, serif; --sw-jost: 'Jost Castelmora', 'Helvetica Neue', Arial, sans-serif; }
.as-mz-sw :is(b, small, em, i, u, s, mark) { font-style: normal; text-decoration: none; }
.as-mz-sw img { display: block; }
.as-mz-sw__lg { flex: none; display: block; width: 2.1em; height: 2.1em; overflow: hidden; border-radius: calc(.55em * var(--as-brm)); }
.as-mz-sw__lg .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-sw__check { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #34C759; box-shadow: 0 .3em .7em -.2em rgba(52, 199, 89, .6); }
.as-mz-sw__check svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@supports (corner-shape: squircle) { .as-mz-sw :is(.as-mz-sw__lg, .as-mz-sw__min, .as-mz-sw__foto, .as-mz-sw__colori i, .as-mz-sw__font p, .as-mz-sw__pagina) { corner-shape: squircle; } }

/* ══ 01 · LA MAPPA DEL SITO: la home, le quattro pagine, la titolare che approva ══ */
.as-mz-sw--mappa { max-width: 31em; margin-inline: auto; padding-bottom: 1.5em; }
.as-mz-sw__mappa { padding: 1em 1.2em 1.35em; }
.as-mz-sw__mappa-h { display: flex; align-items: center; gap: .7em; }
.as-mz-sw__mappa-h > span:last-child { display: grid; line-height: 1.25; }
.as-mz-sw__mappa-h b { font-size: 1em; font-weight: 600; letter-spacing: -.01em; }
.as-mz-sw__mappa-h small { font-size: .76em; color: rgba(28, 28, 30, .55); }
.as-mz-sw__albero { display: grid; justify-items: center; margin-top: 1em; }
.as-mz-sw__pag { position: relative; display: grid; justify-items: center; gap: .32em; }
.as-mz-sw__pag b { font-size: .8em; font-weight: 500; white-space: nowrap; }
.as-mz-sw__min { display: grid; gap: .22em; width: 5.3em; padding: .28em .28em .38em; border-radius: calc(.55em * var(--as-brm)); background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 30, .06), 0 .5em 1.1em -.5em rgba(40, 24, 60, .35); }
.as-mz-sw__min img { width: 100%; height: 2.5em; object-fit: cover; border-radius: .32em; }
.as-mz-sw__min i { display: block; height: .26em; border-radius: 1em; background: rgba(28, 28, 30, .13); }
.as-mz-sw__min i + i { width: 62%; }
.as-mz-sw__pag.is-home .as-mz-sw__min { width: 7.2em; }
.as-mz-sw__pag.is-home .as-mz-sw__min img { height: 3.3em; }
.as-mz-sw__pag.is-home b { font-weight: 600; }
.as-mz-sw__pag.is-home::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: .85em; margin-left: -.75px; background: rgba(28, 28, 30, .28); }
.as-mz-sw__rami { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55em; width: 100%; margin-top: 1.7em; }
.as-mz-sw__rami::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -.85em; height: 1.5px; background: rgba(28, 28, 30, .28); }
.as-mz-sw__rami .as-mz-sw__pag::before { content: ""; position: absolute; left: 50%; top: -.85em; width: 1.5px; height: .85em; margin-left: -.75px; background: rgba(28, 28, 30, .28); }
.as-mz-sw__ok { position: absolute; right: .4em; bottom: -.5em; display: flex; align-items: center; gap: .6em; padding: .4em .5em .4em .4em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 30, .05), 0 1em 2em -1em rgba(40, 24, 60, .45); }
.as-mz-sw__ok > span:nth-child(2) { display: grid; line-height: 1.2; }
.as-mz-sw__ok b { font-size: .86em; font-weight: 600; }
.as-mz-sw__ok small { font-size: .7em; color: rgba(28, 28, 30, .55); }
.as-mz-sw__volto { flex: none; width: 2.3em; height: 2.3em; overflow: hidden; border-radius: 50%; }
.as-mz-sw__volto img { width: 100%; height: 100%; object-fit: cover; }
/* la vita: la home, il filo, le pagine una per una, poi la firma */
.as-pp-mazzo--viva .as-mz-sw__pag { transition: opacity .5s ease, transform .65s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.55s + var(--k, 0) * .13s); }
.as-pp-mazzo--viva .as-mz-sw__pag.is-home { transition-delay: .25s; }
.as-pp-mazzo--viva .as-mz-sw__rami::before { transition: transform .6s cubic-bezier(.2, .8, .2, 1) .45s; }
.as-pp-mazzo--viva .as-mz-sw__ok { transition: opacity .3s ease 1.35s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.35s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__pag { opacity: 0; transform: translateY(.8em) scale(.94); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__rami::before { transform: scaleX(0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__ok { opacity: 0; transform: translateY(.6em) scale(.7); }

/* ══ 02 · LO STILE: la foto, i cinque colori, i due caratteri, il pulsante ══ */
.as-mz-sw--stile { display: grid; grid-template-columns: minmax(0, 8.6em) minmax(0, 1fr); gap: .9em; max-width: 33em; margin-inline: auto; }
.as-mz-sw__foto { position: relative; min-height: 15.5em; overflow: hidden; border-radius: calc(1.15em * var(--as-brm)); box-shadow: 0 1.4em 3em -1.6em rgba(40, 24, 60, .45); }
.as-mz-sw__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.as-mz-sw__tavola { display: grid; align-content: start; gap: .85em; padding: 1em 1.1em 1.1em; }
.as-mz-sw__tavola .as-pp-m__lista-h { margin-bottom: 0 !important; }
.as-mz-sw__colori { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; }
.as-mz-sw__colori span { display: grid; justify-items: center; gap: .3em; }
.as-mz-sw__colori i { display: block; width: 100%; aspect-ratio: 1; border-radius: calc(.7em * var(--as-brm)); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 .4em .8em -.4em rgba(40, 24, 60, .4); }
.as-mz-sw__colori small { font-size: .66em; color: rgba(28, 28, 30, .6); }
.as-mz-sw__font { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.as-mz-sw__font p { display: flex; align-items: center; gap: .55em; padding: .5em .65em; border-radius: calc(.8em * var(--as-brm)); background: rgba(255, 255, 255, .78); }
.as-mz-sw__font b { font-size: 2.1em; font-weight: 400; line-height: 1; color: var(--sw-notte); }
.as-mz-sw__font .is-cardo b { font-family: var(--sw-cardo); }
.as-mz-sw__font .is-jost b { font-family: var(--sw-jost); }
.as-mz-sw__font span { display: grid; font-size: .82em; font-weight: 600; line-height: 1.2; }
.as-mz-sw__font small { font-size: .84em; font-weight: 400; color: rgba(28, 28, 30, .55); }
.as-mz-sw__prova { display: flex; align-items: center; gap: 1em; }
.as-mz-sw__pulsante { padding: .95em 1.3em; border-radius: .2em; background: var(--sw-vino); color: var(--sw-avorio); font: 500 .68em/1 var(--sw-jost); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.as-mz-sw__link { padding-bottom: .25em; border-bottom: 1px solid currentColor; color: var(--sw-vino); font: 500 .68em/1 var(--sw-jost); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.as-pp-mazzo--viva .as-mz-sw__colori span { transition: opacity .4s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.4s + var(--k, 0) * .09s); }
.as-pp-mazzo--viva .as-mz-sw__font p, .as-pp-mazzo--viva .as-mz-sw__prova { transition: opacity .5s ease .9s, transform .6s cubic-bezier(.2, .8, .2, 1) .9s; }
.as-pp-mazzo--viva .as-mz-sw__prova { transition-delay: 1.1s; }
.as-pp-mazzo--viva .as-mz-sw__foto img { transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__colori span { opacity: 0; transform: translateY(.7em) scale(.8); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-sw__font p, .as-mz-sw__prova) { opacity: 0; transform: translateY(.6em); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__foto img { transform: scale(1.12); }

/* ══ 03 · I TESTI: come cercano gli sposi, e la pagina scritta con le loro parole ══ */
.as-mz-sw--testi { display: grid; max-width: 32em; margin-inline: auto; }
.as-mz-sw__cerche { position: relative; z-index: 1; width: 74%; padding: .9em 1em .6em; }
.as-mz-sw__q { display: flex; align-items: center; gap: .6em; padding: .5em 0; border-top: 1px solid rgba(28, 28, 30, .08); }
.as-mz-sw__q svg { flex: none; width: 1.75em; height: 1.75em; padding: .38em; border-radius: 50%; background: var(--m); fill: none; stroke: rgba(28, 28, 30, .75); stroke-width: 2.2; stroke-linecap: round; box-sizing: border-box; }
.as-mz-sw__q span { flex: 1; min-width: 0; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-mz-sw__q b { font-size: .88em; font-weight: 600; font-variant-numeric: tabular-nums; }
.as-mz-sw__cerche .as-pp-m__lista-h { display: flex; justify-content: space-between; gap: 1em; }
.as-mz-sw__cerche .as-pp-m__lista-h small { font-size: .9em; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.as-mz-sw .is-1 { --m: #FFCDB8; }
.as-mz-sw .is-2 { --m: #BDEBD5; }
.as-mz-sw__pagina { position: relative; z-index: 2; width: 84%; margin: -1.1em 0 0 16%; padding: 1em 1.3em 1.15em; border-radius: calc(1em * var(--as-brm)); background: #FFFDF9; box-shadow: 0 .1em .2em rgba(0, 0, 0, .05), 0 1.6em 3.4em -1.4em rgba(40, 24, 60, .45); }
.as-mz-sw__pag-h { display: flex; align-items: center; gap: .55em; color: var(--sw-vino); font: 500 .68em/1 var(--sw-jost); letter-spacing: .16em; text-transform: uppercase; }
.as-mz-sw__pag-h .as-mz-sw__lg { width: 2.2em; height: 2.2em; }
.as-mz-sw__tit { margin: .5em 0 .5em !important; font: 400 1.62em/1.16 var(--sw-cardo); color: var(--sw-notte); letter-spacing: -.005em; }
.as-mz-sw__tit mark { padding: 0 .05em; background: linear-gradient(transparent 56%, var(--m) 56%) no-repeat 0 0 / 100% 100%; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.as-mz-sw__par { font: 400 .82em/1.55 var(--sw-jost); color: rgba(31, 29, 27, .72); }
.as-pp-mazzo--viva .as-mz-sw__q { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-mz-sw__q.is-1 { transition-delay: .4s; }
.as-pp-mazzo--viva .as-mz-sw__q.is-2 { transition-delay: .55s; }
.as-pp-mazzo--viva .as-mz-sw__tit mark { transition: background-size .8s cubic-bezier(.65, 0, .35, 1); }
.as-pp-mazzo--viva .as-mz-sw__tit mark.is-1 { transition-delay: 1s; }
.as-pp-mazzo--viva .as-mz-sw__tit mark.is-2 { transition-delay: 1.45s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__q { opacity: 0; transform: translateX(-.8em); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__tit mark { background-size: 0% 100%; }
.as-pp-mazzo--viva .as-mz-sw__pagina { transition: opacity .6s ease .2s, transform .9s cubic-bezier(.2, .8, .2, 1) .2s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__pagina { opacity: 0; transform: translateY(1.6em); }

/* ══ 04 · IL CODICE: il foglio di stile della villa, e quanto è leggero ══ */
.as-mz-sw--codice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12.4em); gap: .9em; align-items: center; max-width: 34em; margin-inline: auto; }
.as-mz-sw__editor { min-width: 0; padding: .75em .9em 1em; border-radius: calc(1.15em * var(--as-brm)); background: radial-gradient(70% 60% at 10% 0%, rgba(255, 140, 180, .38), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(120, 170, 255, .45), transparent 70%), #15131B; color: #fff; box-shadow: 0 1.4em 3em -1.6em rgba(40, 24, 60, .55); }
.as-mz-sw__ed-h { display: flex; align-items: center; gap: .4em; margin-bottom: .7em !important; }
.as-mz-sw__ed-h i { width: .55em; height: .55em; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.as-mz-sw__ed-h span { margin-left: .6em; font-size: .72em; color: rgba(255, 255, 255, .62); }
.as-mz-sw__code { display: grid; overflow: hidden; font: 400 .7em/1.8 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #E8E6F0; }
.as-mz-sw__code span { white-space: pre; overflow: hidden; }
.as-mz-sw__code s { display: inline-block; width: 1.9em; color: rgba(255, 255, 255, .28); }
.as-mz-sw__code b { font-weight: 400; color: #FF9EC4; }
.as-mz-sw__code em { color: #8FC7FF; }
.as-mz-sw__code u { color: #B6F0C8; }
.as-mz-sw__velo { display: grid; gap: .65em; padding: 1em 1em 1.1em; }
.as-mz-sw__anello { position: relative; width: 4.6em; height: 4.6em; }
.as-mz-sw__anello svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3.4; }
.as-mz-sw__anello circle { stroke: rgba(52, 199, 89, .18); }
.as-mz-sw__anello circle.is-pieno { stroke: #34C759; stroke-linecap: round; stroke-dasharray: 98 100; }
.as-mz-sw__anello b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5em; font-weight: 600; color: #1A7F37; font-variant-numeric: tabular-nums; }
.as-mz-sw__velo-t { display: grid; line-height: 1.25; }
.as-mz-sw__velo-t b { font-size: .98em; font-weight: 600; }
.as-mz-sw__velo-t small { font-size: .72em; color: rgba(28, 28, 30, .55); }
.as-mz-sw__peso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .5em; align-items: center; font-size: .74em; }
.as-mz-sw__peso span { grid-column: 1 / -1; color: rgba(28, 28, 30, .62); }
.as-mz-sw__peso i { position: relative; display: block; height: .6em; overflow: hidden; border-radius: 1em; background: rgba(28, 28, 30, .08); }
.as-mz-sw__peso i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(var(--w), .6em); border-radius: inherit; background: linear-gradient(90deg, #F37022, #F79A63); transform-origin: 0 50%; }
.as-mz-sw__peso b { font-weight: 600; font-variant-numeric: tabular-nums; }
.as-mz-sw__peso.is-modello i::before { background: rgba(28, 28, 30, .3); }
.as-pp-mazzo--viva .as-mz-sw__code span { transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.35s + var(--k, 0) * .07s); }
.as-pp-mazzo--viva .as-mz-sw__anello circle.is-pieno { transition: stroke-dashoffset 1.3s cubic-bezier(.2, .8, .2, 1) .6s; }
.as-pp-mazzo--viva .as-mz-sw__peso i::before { transition: transform .9s cubic-bezier(.2, .8, .2, 1) 1s; }
.as-pp-mazzo--viva .as-mz-sw__peso.is-modello i::before { transition-delay: 1.2s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__code span { opacity: 0; transform: translateX(-.6em); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__anello circle.is-pieno { stroke-dashoffset: 98; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__peso i::before { transform: scaleX(0); }

/* ══ 05 · ONLINE: il sito nel MacBook e nell'iPhone del kit ══ */
.as-mz-sw--online { position: relative; width: 31em; max-width: 100%; height: 18.6em; margin-inline: auto; }
.as-mz-sw__mac { position: absolute; left: 0; top: .9em; font-size: .3788em; } /* 66em del kit = 25em della scena */
.as-mz-sw__tel { position: absolute; right: .6em; bottom: 0; font-size: .312em; }  /* 20,5em del kit = 6,4em della scena */
.as-mz-sw__live { position: absolute; z-index: 3; right: 0; top: 0; display: flex; align-items: center; gap: .5em; padding: .45em .8em .45em .65em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 30, .05), 0 1em 2em -1em rgba(40, 24, 60, .45); font-size: .86em; white-space: nowrap; }
.as-mz-sw__live i { width: .6em; height: .6em; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 .25em rgba(52, 199, 89, .2); }
.as-mz-sw__live b { font-weight: 600; }
.as-mz-sw__live span { color: rgba(28, 28, 30, .55); }
.as-mz-sw__prove { position: absolute; z-index: 3; left: 1.4em; bottom: .2em; display: flex; align-items: center; gap: .6em; padding: .5em .9em .5em .5em; border-radius: calc(1em * var(--as-brm)); background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 1em 2em -1em rgba(40, 24, 60, .45); }
.as-mz-sw__prove > span { display: grid; line-height: 1.2; }
.as-mz-sw__prove b { font-size: .84em; font-weight: 600; }
.as-mz-sw__prove small { font-size: .68em; color: rgba(28, 28, 30, .55); }
/* il sito dentro i dispositivi, in punti del kit (--u) */
.as-mz-sw__web { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sw-notte); }
.as-mz-sw__safari { flex: none; display: flex; align-items: center; justify-content: center; height: calc(52 * var(--u)); background: linear-gradient(180deg, #F8F8F9, #F0F0F2); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.as-mz-sw__url { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); width: calc(560 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(0, 0, 0, .055); font: 500 calc(13 * var(--u)) / 1 -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #1D1D1F; }
.as-mz-sw__url svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: #6E6E73; stroke-width: 2.2; }
.as-mz-sw__hero { position: relative; flex: 1; overflow: hidden; }
.as-mz-sw__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-mz-sw__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 14, .45) 0%, rgba(20, 16, 14, 0) 26%, rgba(20, 16, 14, 0) 45%, rgba(20, 16, 14, .72) 100%); }
.as-mz-sw__hero p { position: absolute; z-index: 2; margin: 0; color: #fff; }
.as-mz-sw__web .as-mz-sw__nav { display: flex; align-items: center; font-family: var(--sw-jost); }
.as-mz-sw__web .as-mz-sw__nav b { font: 400 1em/1 var(--sw-cardo); letter-spacing: .16em; text-transform: uppercase; }
.as-mz-sw__web .as-mz-sw__h1 { font-family: var(--sw-cardo); line-height: 1.08; }
.as-mz-sw__web .as-mz-sw__btn { background: var(--sw-avorio); color: var(--sw-vino); font-family: var(--sw-jost); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.as-mz-sw__web.is-mac .as-mz-sw__nav { top: calc(30 * var(--u)); left: calc(56 * var(--u)); right: calc(56 * var(--u)); gap: calc(36 * var(--u)); font-size: calc(15 * var(--u)); }
.as-mz-sw__web.is-mac .as-mz-sw__nav b { margin-right: auto; font-size: calc(24 * var(--u)); }
.as-mz-sw__web.is-mac .as-mz-sw__nav span { opacity: .88; }
.as-mz-sw__web.is-mac .as-mz-sw__h1 { left: calc(56 * var(--u)); bottom: calc(170 * var(--u)); font-size: calc(76 * var(--u)); white-space: nowrap; }
.as-mz-sw__web.is-mac .as-mz-sw__btn { left: calc(56 * var(--u)); bottom: calc(76 * var(--u)); padding: calc(20 * var(--u)) calc(34 * var(--u)); font-size: calc(14 * var(--u)); }
.as-mz-sw__web.is-tel .as-mz-sw__nav { top: calc(66 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); justify-content: space-between; }
.as-mz-sw__web.is-tel .as-mz-sw__nav b { font-size: calc(16 * var(--u)); }
.as-mz-sw__web.is-tel .as-mz-sw__nav i { width: calc(22 * var(--u)); height: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid #fff; border-bottom: calc(2 * var(--u)) solid #fff; }
.as-mz-sw__web.is-tel .as-mz-sw__h1 { left: calc(24 * var(--u)); right: calc(24 * var(--u)); bottom: calc(170 * var(--u)); font-size: calc(40 * var(--u)); }
.as-mz-sw__web.is-tel .as-mz-sw__btn { left: calc(24 * var(--u)); bottom: calc(92 * var(--u)); padding: calc(17 * var(--u)) calc(24 * var(--u)); font-size: calc(13 * var(--u)); }
.as-pp-mazzo--viva :is(.as-mz-sw__mac, .as-mz-sw__tel) { transition: opacity .6s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-mz-sw__tel { transition-delay: .35s; }
.as-pp-mazzo--viva :is(.as-mz-sw__live, .as-mz-sw__prove) { transition: opacity .3s ease 1.1s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.1s; }
.as-pp-mazzo--viva .as-mz-sw__prove { transition-delay: 1.35s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__mac { opacity: 0; transform: translateY(1.4em); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sw__tel { opacity: 0; transform: translateY(2.4em); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-sw__live, .as-mz-sw__prove) { opacity: 0; transform: scale(.7); }
.as-mz-sw__live i { animation: as-mz-sw-batte 2.2s ease-in-out infinite; }
@keyframes as-mz-sw-batte { 50% { box-shadow: 0 0 0 .45em rgba(52, 199, 89, 0); } }

/* ══ DA TELEFONO: la scena è larga circa 27em (11px) e alta 272px. Le composizioni si stringono senza perdere pezzi. ══ */
@container (max-width: 440px) {
	.as-mz-sw--stile { grid-template-columns: minmax(0, 6.4em) minmax(0, 1fr); gap: .6em; }
	.as-mz-sw__foto { min-height: 0; }
	.as-mz-sw__tavola { gap: .7em; padding: .85em .85em .9em; }
	.as-mz-sw__colori { gap: .35em; }
	.as-mz-sw__colori small { font-size: .6em; }
	.as-mz-sw__font { gap: .35em; }
	.as-mz-sw__font p { gap: .4em; padding: .45em .5em; }
	.as-mz-sw__font b { font-size: 1.8em; }
	.as-mz-sw__font small { display: none; }
	.as-mz-sw__prova { gap: .8em; }
	.as-mz-sw__pulsante { padding: .9em 1em; }
	.as-mz-sw__cerche { width: 84%; padding: .75em .85em .45em; }
	.as-mz-sw__q { padding: .4em 0; }
	.as-mz-sw__pagina { width: 90%; margin-left: 10%; margin-top: -.9em; padding: .85em 1em .95em; }
	.as-mz-sw__tit { font-size: 1.45em; margin: .4em 0 .35em !important; }
	.as-mz-sw__par { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .76em; }
	.as-mz-sw--codice { grid-template-columns: minmax(0, 1fr) minmax(0, 10.6em); gap: .6em; }
	.as-mz-sw__velo { padding: .85em .8em .9em; gap: .5em; }
	.as-mz-sw__anello { width: 3.8em; height: 3.8em; }
	.as-mz-sw__anello b { font-size: 1.25em; }
	.as-mz-sw--online { font-size: .86em; }
	.as-mz-sw__live span { display: none; }
}