/*
 * Studio Arfia — mazzo/integrazioni-ai.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo della pagina Intelligenza artificiale (inc/mazzo/integrazioni-ai.php). Le primitive (vetro, titoletto,
 * entrata dei vetri) stanno in mazzo.css. Tutto in em della scena.
 */
/* 01 · l'agenda: l'invito della mezza giornata e, sotto, cosa si ripete */
.as-pp-m--agenda { display: grid; gap: .9em; max-width: 30em; margin-inline: auto; }
.as-pp-m__evento { width: 86%; padding: 1.1em 1.2em 1em; }
.as-pp-m__ev-t { display: flex; align-items: center; gap: .6em; font-size: 1.12em; }
.as-pp-m__ev-t i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--as-arancio); } /* un puntino: la barretta a sinistra del titolo è «molto AI» (Rami, 27/10) */
.as-pp-m__ev-t b { font-weight: 600; letter-spacing: -.01em; }
.as-pp-m__ev-q { margin-top: .45em !important; padding-left: .95em; font-size: .92em; line-height: 1.45; color: rgba(28, 28, 30, .66); }
.as-pp-m__volti { display: flex; align-items: center; margin-top: .9em !important; padding-left: .95em; }
.as-pp-m__volti > span { width: 2.1em; height: 2.1em; margin-right: -.45em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .14em #fff; background: #ddd; }
.as-pp-m__volti > span img, .as-pp-m__volti > span svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-pp-m__volti > span.is-studio { display: grid; place-items: center; background: var(--as-carbone); }
.as-pp-m__volti > span.is-studio .as-lg { width: 62%; height: auto; }
.as-pp-m__volti > span.is-studio img { width: 100%; height: auto; }
.as-pp-m__volti small { margin-left: 1em; font-size: .82em; color: rgba(28, 28, 30, .6); }
.as-pp-m__lista { width: 84%; margin-left: 16%; padding: .95em 1.1em .7em; }
.as-pp-m__voce { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; border-top: 1px solid rgba(28, 28, 30, .08); font-size: .95em; }
.as-pp-m__voce span { display: flex; align-items: center; gap: .55em; }
.as-pp-m__voce span::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--as-arancio); }
.as-pp-m__voce b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 02 · la misura: la cifra grande nel vetro scuro, le quattro settimane */
.as-pp-m--misura { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: .9em; max-width: 34em; margin-inline: auto; }
.as-pp-m__scuro { display: grid; align-content: end; padding: 1.2em; border-radius: calc(1.15em * var(--as-brm)); background: radial-gradient(80% 70% at 15% 10%, rgba(255, 140, 180, .55), transparent 70%), radial-gradient(70% 70% at 95% 95%, rgba(120, 170, 255, .6), transparent 70%), #17131D; color: #fff; box-shadow: 0 1.4em 3em -1.6em rgba(40, 24, 60, .55); }
.as-pp-m__cifra { font-size: 4.2em; font-weight: 200; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.as-pp-m__cifra small { font-size: .32em; font-weight: 400; letter-spacing: 0; opacity: .75; }
.as-pp-m__cifra-s { margin-top: .5em !important; font-size: .9em; line-height: 1.3; opacity: .8; }
.as-pp-m__grafico { padding: 1em 1.1em .9em; }
.as-pp-m__barre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; align-items: end; height: 10.5em; }
.as-pp-m__barre span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .45em; height: 100%; }
.as-pp-m__barre i { width: 100%; height: calc(var(--h) - 1.6em); border-radius: .5em; background: linear-gradient(180deg, #F37022, #F79A63); transform-origin: 50% 100%; }
.as-pp-m__barre span:nth-child(1) i { opacity: .45; }
.as-pp-m__barre span:nth-child(2) i { opacity: .65; }
.as-pp-m__barre span:nth-child(3) i { opacity: .82; }
.as-pp-m__barre small { font-size: .74em; color: rgba(28, 28, 30, .6); white-space: nowrap; }
/* 03 · si allarga: le automazioni, una accesa, due che si accendono, una dopo */
.as-pp-m--auto { max-width: 27em; margin-inline: auto; }
.as-pp-m__autos { padding: 1em 1.15em .5em; }
.as-pp-m__auto { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .7em 0; border-top: 1px solid rgba(28, 28, 30, .08); }
.as-pp-m__auto > span { display: grid; gap: .15em; }
.as-pp-m__auto b { font-size: 1em; font-weight: 600; }
.as-pp-m__auto small { font-size: .8em; color: rgba(28, 28, 30, .55); }
.as-pp-m__auto.is-nuova small { color: var(--as-arancio-attivo); font-weight: 600; }
.as-pp-m__auto.is-dopo { opacity: .5; }
.as-pp-m__switch { flex: none; position: relative; width: 2.9em; height: 1.75em; border-radius: 1em; background: rgba(120, 120, 128, .2); transition: background-color .35s ease; }
.as-pp-m__switch::after { content: ""; position: absolute; left: .14em; top: .14em; width: 1.47em; height: 1.47em; border-radius: 50%; background: #fff; box-shadow: 0 .15em .4em rgba(0, 0, 0, .18); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.as-pp-m__auto:is(.is-on, .is-nuova) .as-pp-m__switch { background: #34C759; }
.as-pp-m__auto:is(.is-on, .is-nuova) .as-pp-m__switch::after { transform: translateX(1.15em); }
/* 04 · resta tua: la guida di una pagina, col timbro */
.as-pp-m--guida { max-width: 25em; margin-inline: auto; }
.as-pp-m__foglio { position: relative; padding: 1.5em 1.5em 1.3em; border-radius: .45em; background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 1.6em 3.4em -1.4em rgba(40, 24, 60, .4); } /* dritto (Rami, 05/11: «le card 4 perché storte?»): prima rotate(-1.2deg) */
.as-pp-m__f-testa { display: flex; align-items: center; gap: .7em; padding-bottom: .9em; margin-bottom: .3em !important; border-bottom: 1.5px solid #1C1C1E; }
.as-pp-m__f-logo { flex: none; width: 1.9em; height: 1.9em; overflow: hidden; border-radius: .4em; }
.as-pp-m__f-logo svg { display: block; width: 100%; height: 100%; }
.as-pp-m__f-testa b { font-size: 1.12em; font-weight: 700; letter-spacing: -.01em; }
.as-pp-m__f-voce { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: .8em; padding: .6em 0; border-bottom: 1px solid rgba(28, 28, 30, .08); font-size: .9em; line-height: 1.4; }
.as-pp-m__f-voce:last-of-type { border-bottom: 0; }
.as-pp-m__f-voce b { font-weight: 600; }
.as-pp-m__f-voce span { color: rgba(28, 28, 30, .72); }
.as-pp-m__timbro { position: absolute; right: 1em; bottom: -.9em; padding: .25em .7em .3em; border: .14em solid var(--as-arancio); border-radius: .4em; background: rgba(255, 255, 255, .9); color: var(--as-arancio); font-size: 1.5em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* dritto anche il timbro (05/11): prima rotate(-10deg); entra ancora girato e si posa dritto */
@media (max-width: 899px) {
	.as-pp-m--misura { grid-template-columns: minmax(0, 9em) minmax(0, 1fr); }
	.as-pp-m__barre { height: 9em; }
	.as-pp-m__f-voce { grid-template-columns: 6.4em minmax(0, 1fr); }
}
/* con lo script: il mockup si accende quando la sua carta arriva (.is-viva) */
.as-pp-mazzo--viva .as-pp-m__lista, .as-pp-mazzo--viva .as-pp-m__grafico { transition-delay: .15s; }
.as-pp-mazzo--viva .as-pp-m__voce { transition: opacity .45s ease, transform .6s var(--as-ease-out); }
.as-pp-mazzo--viva .as-pp-m__voce:nth-of-type(2) { transition-delay: .45s; }
.as-pp-mazzo--viva .as-pp-m__voce:nth-of-type(3) { transition-delay: .6s; }
.as-pp-mazzo--viva .as-pp-m__voce:nth-of-type(4) { transition-delay: .75s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__voce { opacity: 0; transform: translate3d(-1em, 0, 0); }
.as-pp-mazzo--viva .as-pp-m__barre i { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-pp-m__barre span:nth-child(1) i { transition-delay: .35s; }
.as-pp-mazzo--viva .as-pp-m__barre span:nth-child(2) i { transition-delay: .48s; }
.as-pp-mazzo--viva .as-pp-m__barre span:nth-child(3) i { transition-delay: .61s; }
.as-pp-mazzo--viva .as-pp-m__barre span:nth-child(4) i { transition-delay: .74s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__barre i { transform: scaleY(0); }
.as-pp-mazzo--viva .as-pp-m__auto.is-nuova .as-pp-m__switch, .as-pp-mazzo--viva .as-pp-m__auto.is-nuova .as-pp-m__switch::after { transition-delay: .7s; }
.as-pp-mazzo--viva .as-pp-m__auto.is-nuova + .is-nuova .as-pp-m__switch, .as-pp-mazzo--viva .as-pp-m__auto.is-nuova + .is-nuova .as-pp-m__switch::after { transition-delay: 1.05s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__auto.is-nuova .as-pp-m__switch { background: rgba(120, 120, 128, .2); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__auto.is-nuova .as-pp-m__switch::after { transform: none; }
.as-pp-mazzo--viva .as-pp-m__f-voce { transition: opacity .5s ease; }
.as-pp-mazzo--viva .as-pp-m__f-voce:nth-of-type(2) { transition-delay: .35s; }
.as-pp-mazzo--viva .as-pp-m__f-voce:nth-of-type(3) { transition-delay: .5s; }
.as-pp-mazzo--viva .as-pp-m__f-voce:nth-of-type(4) { transition-delay: .65s; }
.as-pp-mazzo--viva .as-pp-m__f-voce:nth-of-type(5) { transition-delay: .8s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__f-voce { opacity: 0; }
.as-pp-mazzo--viva .as-pp-m__timbro { transition: opacity .2s ease 1.15s, transform .5s cubic-bezier(.5, 0, .3, 1.4) 1.15s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__timbro { opacity: 0; transform: rotate(-24deg) scale(2); }