/*
 * Studio Arfia — mazzo/problemi-risolti.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo di /soluzioni/ (inc/mazzo/problemi-risolti.php): la chiamata e le note, la proposta voce per voce, la prova
 * sul telefono della villa, il messaggio per un ritocco. Le primitive (vetro, titoletto, entrata dei vetri) stanno in mazzo.css.
 * Tutto in em della scena (da telefono la scena è alta 272px: i mockup ci stanno interi).
 */
.as-mz-ps :is(b, small, em, i, s) { font-style: normal; }
@media (min-width: 900px) { .as-mz-ps { font-size: 1.06em; } }
.as-mz-ps img { display: block; width: 100%; height: 100%; object-fit: cover; }
@supports (corner-shape: squircle) { .as-mz-ps :is(.as-mz-ps__call, .as-mz-ps__pronto, .as-mz-ps__notif, .as-mz-ps__notif-app, .as-mz-ps__link-img, .as-mz-ps__f-logo, .as-mz-ps__chat-av) { corner-shape: squircle; } }

/* ── 01 · la chiamata e le note di cosa succede oggi ── */
.as-mz-ps--chiamata { display: grid; gap: .9em; max-width: 28em; margin-inline: auto; }
.as-mz-ps__call { display: flex; align-items: center; gap: .75em; width: 88%; padding: .6em .65em .6em .6em; border-radius: calc(1.6em * var(--as-brm)); background: rgba(22, 20, 26, .9); color: #fff; box-shadow: 0 1.2em 2.6em -1.2em rgba(30, 18, 50, .6); }
.as-mz-ps__call-av { flex: none; width: 2.6em; height: 2.6em; overflow: hidden; border-radius: 50%; }
.as-mz-ps__call-chi { display: grid; min-width: 0; line-height: 1.25; }
.as-mz-ps__call-chi b { font-size: 1em; font-weight: 600; white-space: nowrap; }
.as-mz-ps__call-chi small { font-size: .78em; color: rgba(255, 255, 255, .6); }
.as-mz-ps__call-t { display: flex; align-items: center; gap: .5em; margin-left: auto !important; font-size: .92em; font-variant-numeric: tabular-nums; color: #7FE3A2; }
.as-mz-ps__onda { display: inline-flex; align-items: center; gap: .14em; height: 1.1em; }
.as-mz-ps__onda i { display: block; width: .16em; height: 40%; border-radius: 1em; background: currentColor; }
.as-mz-ps__onda i:nth-child(2) { height: 85%; }
.as-mz-ps__onda i:nth-child(3) { height: 60%; }
.as-mz-ps__onda i:nth-child(4) { height: 100%; }
.as-mz-ps__call-giu { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #FF453A; }
.as-mz-ps__call-giu svg { width: 1.3em; height: 1.3em; color: #fff; }
.as-mz-ps__note { width: 86%; margin-left: 14%; padding: 1em 1.15em .55em; }
.as-mz-ps__nota { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: .8em; padding: .6em 0; border-top: 1px solid rgba(28, 28, 30, .08); font-size: .92em; line-height: 1.4; }
.as-mz-ps__nota b { font-weight: 600; }
.as-mz-ps__nota span { color: rgba(28, 28, 30, .72); }

/* ── 02 · la proposta (v0.109.6, Rami: «falla squircle!!»): i pannelli delle carte approvate. Il vetro con le voci, il vetro scuro
   coi tempi, il vetro con le tre strade a confronto (la più semplice in verde) ── */
.as-mz-ps--proposta { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: .65em; align-items: start; max-width: 30em; margin-inline: auto; }
.as-mz-ps__prop { padding: .85em .95em .45em; }
.as-mz-ps__f-testa { display: flex; align-items: center; gap: .6em; padding-bottom: .7em; border-bottom: 1px solid rgba(28, 28, 30, .1); }
.as-mz-ps__f-logo { flex: none; width: 2em; height: 2em; overflow: hidden; border-radius: calc(.55em * var(--as-brm)); }
.as-mz-ps__f-testa > span:last-child { display: grid; min-width: 0; line-height: 1.22; }
.as-mz-ps__f-testa small { font-size: .7em; color: rgba(28, 28, 30, .55); }
.as-mz-ps__f-testa b { font-size: .95em; font-weight: 700; letter-spacing: -.01em; }
.as-mz-ps__voce { display: flex; align-items: center; gap: .55em; padding: .5em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .84em; }
.as-mz-ps__voce:last-child { border-bottom: 0; }
.as-mz-ps__voce i { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: #34C759; color: #fff; }
.as-mz-ps__voce i svg { width: .9em; height: .9em; }
.as-mz-ps__voce span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mz-ps__voce b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.as-mz-ps__voce.is-no { color: rgba(28, 28, 30, .42); }
.as-mz-ps__voce.is-no i { background: rgba(120, 120, 128, .2); color: rgba(28, 28, 30, .5); }
.as-mz-ps__voce.is-no s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.as-mz-ps__voce.is-no b { font-weight: 500; }
.as-mz-ps__colonna { display: grid; gap: .65em; }
.as-mz-ps__pronto { display: grid; padding: .85em 1em .8em; border-radius: calc(1.15em * var(--as-brm)); background: radial-gradient(80% 70% at 15% 10%, rgba(120, 230, 170, .5), transparent 70%), radial-gradient(70% 70% at 95% 95%, rgba(120, 170, 255, .55), transparent 70%), #121A1A; color: #fff; box-shadow: 0 1.4em 3em -1.6em rgba(20, 40, 40, .6); }
.as-mz-ps__cifra { font-size: 2.7em; font-weight: 200; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.as-mz-ps__cifra small { font-size: .34em; font-weight: 400; letter-spacing: 0; opacity: .8; }
.as-mz-ps__cifra-s { margin-top: .35em !important; font-size: .78em; opacity: .8; }
.as-mz-ps__strade { padding: .8em .9em .65em; }
.as-mz-ps__strade .as-pp-m__lista-h { margin-bottom: .35em !important; font-size: .64em; }
.as-mz-ps__strada { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .3em .5em; padding: .3em 0; font-size: .74em; color: rgba(28, 28, 30, .5); }
.as-mz-ps__strada span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mz-ps__strada b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-mz-ps__strada i { grid-column: 1 / -1; display: block; width: var(--l); height: .5em; border-radius: 1em; background: rgba(28, 28, 30, .14); transform-origin: 0 50%; }
.as-mz-ps__strada.is-questa { color: #1C1C1E; font-weight: 600; }
.as-mz-ps__strada.is-questa b { font-weight: 700; color: #1F9D55; }
.as-mz-ps__strada.is-questa i { background: linear-gradient(90deg, #34C759, #1F9D55); }

/* ── 03 · la prova (v0.109.6, Rami: «c'è una sorta di iPhone orribile»): l'iPhone del kit con la schermata di blocco di iOS ── */
.as-mz-ps--prova { display: grid; grid-template-columns: auto minmax(0, 14em); justify-content: center; align-items: center; gap: 1.3em; }
.as-mz-ps__iph { font-size: .47em; }
.as-mz-ps__iph .as-iphone { margin: 0; }
.as-mz-ps__blocco { position: absolute; inset: 0; overflow: hidden; color: #fff; font-family: -apple-system, 'SF Pro Display', system-ui, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.as-mz-ps__blocco p { margin: 0; }
.as-mz-ps__blocco :is(b, small, em, i) { font-style: normal; }
.as-mz-ps__blocco > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.as-mz-ps__blocco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .35)); }
.as-mz-ps__ora { position: absolute; z-index: 1; left: 0; right: 0; top: calc(92 * var(--u)); display: grid; justify-items: center; line-height: 1; text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .25); }
.as-mz-ps__ora small { font-size: calc(20 * var(--u)); font-weight: 600; }
.as-mz-ps__ora b { margin-top: calc(4 * var(--u)); font-size: calc(98 * var(--u)); font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.as-mz-ps__notif { position: absolute; z-index: 2; left: calc(10 * var(--u)); right: calc(10 * var(--u)); top: calc(520 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)); border-radius: calc(30 * var(--u)); background: rgba(246, 246, 248, .88); color: #1C1C1E; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .22); }
.as-mz-ps__notif-app { flex: none; width: calc(54 * var(--u)); height: calc(54 * var(--u)); overflow: hidden; border-radius: calc(13 * var(--u)); } /* un po' più grande del vero: nella carta l'iPhone è piccolo, la notifica deve leggersi */
.as-mz-ps__notif-app .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-ps__notif p { flex: 1; display: grid; min-width: 0; font-size: calc(21 * var(--u)); line-height: 1.25; }
.as-mz-ps__notif small { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); white-space: nowrap; font-size: calc(17 * var(--u)); color: rgba(28, 28, 30, .55); }
.as-mz-ps__notif small b { font-weight: 600; color: rgba(28, 28, 30, .75); }
.as-mz-ps__notif p > b { font-weight: 600; }
.as-mz-ps__tasti { position: absolute; z-index: 2; left: calc(46 * var(--u)); right: calc(46 * var(--u)); bottom: calc(52 * var(--u)); display: flex; justify-content: space-between; }
.as-mz-ps__tasti i { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: rgba(30, 30, 32, .42); }
.as-mz-ps__tasti svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #fff; }
.as-mz-ps__prova { padding: 1em 1.15em 1em; }
.as-mz-ps__giorno { display: flex; align-items: baseline; gap: .4em; }
.as-mz-ps__giorno b { font-size: 1.9em; font-weight: 300; letter-spacing: -.03em; }
.as-mz-ps__giorno span { font-size: .9em; color: rgba(28, 28, 30, .55); }
.as-mz-ps__barra { display: block; height: .42em; margin: .55em 0 .8em; overflow: hidden; border-radius: 1em; background: rgba(28, 28, 30, .1); }
.as-mz-ps__barra i { display: block; width: 36%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F37022, #F79A63); transform-origin: 0 50%; }
.as-mz-ps__dato { display: flex; align-items: baseline; gap: .55em; padding: .45em 0; border-top: 1px solid rgba(28, 28, 30, .08); font-size: .92em; }
.as-mz-ps__dato b { min-width: 1.4em; font-size: 1.45em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.as-mz-ps__dato span { color: rgba(28, 28, 30, .7); }

/* ── 04 · il messaggio per un ritocco e la risposta dello studio ── */
.as-mz-ps--chat { max-width: 26em; margin-inline: auto; }
.as-mz-ps__chat { display: grid; gap: .55em; padding: .9em 1em 1em; }
.as-mz-ps__chat-h { display: flex; align-items: center; gap: .65em; padding-bottom: .7em; margin-bottom: .2em !important; border-bottom: 1px solid rgba(28, 28, 30, .08); }
.as-mz-ps__chat-av { flex: none; width: 2.2em; height: 2.2em; overflow: hidden; border-radius: 50%; }
.as-mz-ps__chat-h > span:last-child { display: grid; line-height: 1.25; }
.as-mz-ps__chat-h b { font-weight: 600; }
.as-mz-ps__chat-h small { font-size: .78em; color: rgba(28, 28, 30, .55); }
.as-mz-ps__bolla { max-width: 82%; padding: .55em .8em .45em; border-radius: 1.15em; font-size: .92em; line-height: 1.38; }
.as-mz-ps__bolla small { display: block; margin-top: .2em; font-size: .78em; text-align: right; opacity: .55; }
.as-mz-ps__bolla.is-tua { justify-self: end; border-bottom-right-radius: .35em; background: #1C1C1E; color: #fff; }
.as-mz-ps__bolla.is-studio { justify-self: start; border-bottom-left-radius: .35em; background: #fff; box-shadow: 0 .15em .5em rgba(40, 24, 60, .08); }
.as-mz-ps__bolla.is-link { display: flex; align-items: center; gap: .65em; padding: .4em .8em .4em .4em; }
.as-mz-ps__link-img { flex: none; width: 3.2em; height: 3.2em; overflow: hidden; border-radius: calc(.75em * var(--as-brm)); }
.as-mz-ps__link-t { display: grid; line-height: 1.3; }
.as-mz-ps__link-t b { font-weight: 600; }
.as-mz-ps__link-t small { margin: 0; text-align: left; font-size: .8em; opacity: .6; }
.as-mz-ps__letto { justify-self: start; font-size: .72em; color: rgba(28, 28, 30, .45); }

/* ── da telefono: tutto dentro i 272px della scena ── */
@media (max-width: 899px) {
	.as-mz-ps__note { padding: .8em .95em .35em; }
	.as-mz-ps__nota { grid-template-columns: 7.4em minmax(0, 1fr); gap: .6em; padding: .48em 0; font-size: .88em; }
	.as-mz-ps__voce { padding: .45em 0; }
	.as-mz-ps--prova { gap: .8em; }
	.as-mz-ps__iph { font-size: .43em; }
	.as-mz-ps--proposta { gap: .5em; }
	.as-mz-ps__voce { font-size: .8em; }
	.as-mz-ps__giorno b { font-size: 1.6em; }
	.as-mz-ps__prova { padding: .85em .9em; }
	.as-mz-ps__chat { padding: .75em .85em .8em; gap: .45em; }
	.as-mz-ps__letto { display: none; }
}

/* ── la vita, quando la carta arriva (.is-viva, mazzo.js) ── */
.as-pp-mazzo--viva .as-mz-ps__strada i { transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(.6s + var(--k) * .2s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__strada i { transform: scaleX(0); }
.as-pp-mazzo--viva .as-mz-ps :is(.as-mz-ps__call, .as-mz-ps__iph, .as-mz-ps__notif, .as-mz-ps__nota, .as-mz-ps__voce, .as-mz-ps__bolla, .as-mz-ps__letto, .as-mz-ps__dato) { transition: opacity .55s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-mz-ps__barra i { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .6s; }
/* 01: la chiamata scende, le note si scrivono una dopo l'altra mentre parla */
.as-pp-mazzo--viva .as-mz-ps__nota:nth-of-type(2) { transition-delay: .55s; }
.as-pp-mazzo--viva .as-mz-ps__nota:nth-of-type(3) { transition-delay: .95s; }
.as-pp-mazzo--viva .as-mz-ps__nota:nth-of-type(4) { transition-delay: 1.35s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__call { opacity: 0; transform: translate3d(0, -1.2em, 0) scale(.94); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__nota { opacity: 0; transform: translate3d(-.8em, 0, 0); }
.as-pp-mazzo--viva .as-mz-ps__onda i { animation: as-mz-ps-onda 1.1s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.as-pp-mazzo--viva .as-mz-ps__onda i:nth-child(2) { animation-delay: -.3s; }
.as-pp-mazzo--viva .as-mz-ps__onda i:nth-child(3) { animation-delay: -.6s; }
.as-pp-mazzo--viva .as-mz-ps__onda i:nth-child(4) { animation-delay: -.15s; }
.as-pp-mazzo--viva .as-mz-ps__onda i:nth-child(5) { animation-delay: -.45s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__onda i { animation: none; }
@keyframes as-mz-ps-onda { to { transform: scaleY(.45); } }
/* 02: il foglio sale, le voci si spuntano, il bollino si timbra per ultimo */
.as-pp-mazzo--viva .as-mz-ps__voce:nth-of-type(2) { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-ps__voce:nth-of-type(3) { transition-delay: .5s; }
.as-pp-mazzo--viva .as-mz-ps__voce:nth-of-type(4) { transition-delay: .65s; }
.as-pp-mazzo--viva .as-mz-ps__voce:nth-of-type(5) { transition-delay: .85s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__voce { opacity: 0; }
/* 03: il telefono sale, la notifica scende, la barra della prova avanza */
.as-pp-mazzo--viva .as-mz-ps__notif { transition-delay: .7s; }
.as-pp-mazzo--viva .as-mz-ps__dato:nth-of-type(3) { transition-delay: .9s; }
.as-pp-mazzo--viva .as-mz-ps__dato:nth-of-type(4) { transition-delay: 1.05s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__iph { opacity: 0; transform: translate3d(0, 1.6em, 0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__notif { opacity: 0; transform: translate3d(0, -1.4em, 0) scale(.96); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__barra i { transform: scaleX(0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__dato { opacity: 0; }
/* 04: i messaggi arrivano uno alla volta */
.as-pp-mazzo--viva .as-mz-ps__bolla:nth-of-type(2) { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-ps__bolla:nth-of-type(3) { transition-delay: 1s; }
.as-pp-mazzo--viva .as-mz-ps__bolla:nth-of-type(4) { transition-delay: 1.7s; }
.as-pp-mazzo--viva .as-mz-ps__letto { transition-delay: 2.1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__bolla { opacity: 0; transform: translate3d(0, .9em, 0) scale(.96); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-ps__letto { opacity: 0; }