/*
 * Studio Arfia — mazzo/seo-geo.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo della pagina SEO locale e GEO (inc/mazzo/seo-geo.php): La tua impresa, bagni a Firenze, gli stessi
 * concorrenti e la stessa ricerca del caso «Invisibile su Google». Stelle arancio (mai gialle), «Google» scritto in grigio,
 * niente loghi veri. Le primitive (vetro, titoletto, entrata di vetri e fogli) stanno in mazzo.css. Tutto in em della
 * scena: da telefono la scena è alta 272px, ogni mockup sta dentro ~27 × 20 em.
 * La vita (.is-viva): i punti della mappa si accendono uno alla volta, poi le ricerche e chi compare prima; la scheda si riempie e le spunte si
 * accendono; la risposta dell'AI arriva dopo la domanda e la fonte si appunta; i numeri del mese e le barre salgono.
 */
.as-mz-sg { --petrolio: #1E4D5C; --verde: #1F9D55; --stella: #F37022; --ai1: #7B61FF; --ai2: #3E8BFF; max-width: 27em; margin-inline: auto; color: #1C1C1E; }
@media (min-width: 900px) { .as-mz-sg { max-width: 29em; } }
.as-mz-sg :is(b, small, em, i, mark) { font-style: normal; }
.as-mz-sg .as-mz-sg__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-sg .as-mz-sg__ic.is-scintilla { fill: url(#as-mz-sg-grad) var(--ai1); stroke: none; color: var(--ai1); }
.as-mz-sg .as-mz-sg__check, .as-mz-sg .as-mz-sg__mosse { list-style: none; margin: 0; } /* due classi: ul[class] del tema (Errori 1.85) */
.as-mz-sg__stelle { display: inline-flex; gap: .06em; margin: 0 .3em 0 .25em; vertical-align: -.12em; }
.as-mz-sg__stelle svg { width: .95em; height: .95em; fill: #DADCE0; }
.as-mz-sg__stelle svg.is-piena { fill: var(--stella); }
.as-mz-sg__logo { flex: none; display: block; width: 2em; height: 2em; overflow: hidden; border-radius: calc(.5em * var(--as-brm)); }
.as-mz-sg__logo .as-lg { display: block; width: 100%; height: 100%; }
@supports (corner-shape: squircle) { .as-mz-sg :is(.as-mz-sg__logo, .as-mz-sg__foto, .as-mz-sg__kpi p) { corner-shape: squircle; } }

/* 01 · la fotografia di partenza (v0.108.9): il documento del primo giorno. A sinistra la mappa di Firenze con la posizione
   in 20 punti della città (verde 1-3, arancio 4-10, rosso oltre 10) e la sede; a destra cosa cercano e chi compare prima */
.as-mz-sg__mappa { position: relative; height: 10.6em; overflow: hidden; border-radius: calc(.8em * var(--as-brm)); box-shadow: inset 0 0 0 1px rgba(28, 28, 30, .08); }
@supports (corner-shape: squircle) { .as-mz-sg :is(.as-mz-sg__mappa, .as-mz-sg__rivali, .as-mz-sg__dove) { corner-shape: squircle; } }
.as-mz-sg__mappa svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.as-mz-sg__punto { position: absolute; z-index: 1; left: var(--x); top: var(--y); display: grid; place-items: center; width: 1.75em; height: 1.75em; margin: -.875em 0 0 -.875em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .14em #fff, 0 .2em .5em rgba(0, 0, 0, .22); color: #fff; font-size: .66em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.as-mz-sg__punto.is-su { --c: var(--verde); }
.as-mz-sg__punto.is-medio { --c: #E8641B; }
.as-mz-sg__punto.is-giu { --c: #D2453B; }
.as-mz-sg__sede { position: absolute; z-index: 2; left: 78.5%; top: 50%; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em; overflow: hidden; border-radius: .4em; box-shadow: 0 0 0 .14em #fff, 0 .3em .7em rgba(0, 0, 0, .3); }
.as-mz-sg__sede .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-sg__legenda { display: flex; align-items: center; gap: .9em; margin-top: .75em !important; font-size: .66em; color: rgba(28, 28, 30, .6); }
.as-mz-sg__legenda span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.as-mz-sg__legenda i { display: block; width: .8em; height: .8em; border-radius: 50%; }
.as-mz-sg__legenda .is-su { background: var(--verde); }
.as-mz-sg__legenda .is-medio { background: #E8641B; }
.as-mz-sg__legenda .is-giu { background: #D2453B; }
.as-mz-sg__legenda em { margin-left: auto; white-space: nowrap; }
@media (max-width: 699px) {
		.as-mz-sg__mappa { height: 10.4em; }
		.as-mz-sg__legenda em { display: none; }
}

/* 01 · dove sei oggi (v0.109.1, i pannelli della carta 2): il vetro con la mappa, il vetro scuro con la cifra, il vetro dei rivali */
.as-mz-sg--foto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .65em; align-items: start; max-width: 30em; }
.as-mz-sg__dove { padding: .55em .55em .6em; }
.as-mz-sg__dove-t { display: flex; align-items: center; gap: .55em; padding: .15em .2em .55em; }
.as-mz-sg__dove-t .as-mz-sg__logo { width: 1.75em; height: 1.75em; }
.as-mz-sg__dove-t > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.2; }
.as-mz-sg__dove-t b { font-size: .95em; font-weight: 700; letter-spacing: -.01em; }
.as-mz-sg__dove-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7em; color: rgba(28, 28, 30, .55); }
.as-mz-sg__dove .as-mz-sg__legenda { margin: .55em .2em 0 !important; }
.as-mz-sg__veloce.is-cercano { background: radial-gradient(80% 70% at 12% 8%, rgba(255, 140, 190, .5), transparent 70%), radial-gradient(70% 70% at 95% 95%, rgba(150, 120, 255, .55), transparent 70%), #17121F; }
.as-mz-sg__veloce.is-cercano .as-mz-sg__cifra-s { line-height: 1.3; }
.as-mz-sg .as-mz-sg__rivali { list-style: none; margin: 0; padding: .45em .75em; } /* due classi: ul[class] del tema (Errori 1.85) */
.as-mz-sg__rivali li { display: flex; align-items: center; gap: .5em; padding: .4em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .8em; line-height: 1.2; }
.as-mz-sg__rivali li:last-child { border-bottom: 0; }
.as-mz-sg__rivali li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mz-sg__rivali li b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-mz-sg__rivali .as-mz-sg__logo { width: 1.45em; height: 1.45em; border-radius: calc(.4em * var(--as-brm)); }
.as-mz-sg__rivali li.as-mz-sg__rivali-h { padding: .1em 0 .4em; font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(28, 28, 30, .5); }
.as-mz-sg__rivali li.is-tu b { padding: .1em .45em; border-radius: 1em; background: #FCE3DE; color: #B4332A; }

/* 02 · prima le basi: la scheda Google completa, la velocità, i titoli */
.as-mz-sg--basi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .65em; align-items: start; }
.as-mz-sg__scheda { overflow: hidden; padding: .45em .45em .75em; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.as-mz-sg__foto { height: 6.2em; overflow: hidden; border-radius: calc(.75em * var(--as-brm)); }
.as-mz-sg__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-mz-sg__nome { display: grid; gap: .15em; padding: .55em .45em 0; line-height: 1.3; }
.as-mz-sg__nome b { font-size: 1.05em; font-weight: 400; color: #202124; }
.as-mz-sg__nome small { font-size: .74em; color: #4D5156; }
.as-mz-sg__nome .is-aperto { color: #188038; font-weight: 600; }
.as-mz-sg__completa { display: grid; grid-template-columns: 1fr auto; gap: .3em .5em; margin: .6em .45em 0 !important; font-size: .76em; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: rgba(28, 28, 30, .65); }
.as-mz-sg__completa b { font-weight: 700; color: var(--verde); }
.as-mz-sg__barra { grid-column: 1 / -1; display: block; height: .5em; overflow: hidden; border-radius: 1em; background: rgba(120, 120, 128, .16); }
.as-mz-sg__barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34C759, var(--verde)); transform-origin: 0 50%; }
.as-mz-sg__colonna { display: grid; gap: .65em; }
.as-mz-sg__veloce { display: grid; padding: .9em 1em .85em; 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-sg__cifra { font-size: 3.1em; font-weight: 200; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.as-mz-sg__cifra small { font-size: .38em; font-weight: 400; letter-spacing: 0; opacity: .75; }
.as-mz-sg__cifra-s { margin-top: .35em !important; font-size: .8em; opacity: .8; }
.as-mz-sg .as-mz-sg__check { padding: .45em .8em; }
.as-mz-sg__check li { display: flex; align-items: center; gap: .5em; padding: .42em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .86em; }
.as-mz-sg__check li:last-child { border-bottom: 0; }
.as-mz-sg__check i { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--verde); color: #fff; }
.as-mz-sg__check i .as-mz-sg__ic { width: .85em; height: .85em; stroke-width: 2.8; }

/* 03 · poi i contenuti: l'AI che ti nomina e cita la tua pagina che risponde */
.as-mz-sg__ai { display: grid; gap: .6em; padding: .85em .95em .85em; background: rgba(255, 255, 255, .8); }
.as-mz-sg__ai-h { display: flex; align-items: center; gap: .45em; }
.as-mz-sg__ai-h b { font-size: .95em; font-weight: 650; }
.as-mz-sg__ai-h .as-mz-sg__ic { width: 1.35em; height: 1.35em; }
.as-mz-sg__domanda { justify-self: end; max-width: 86%; padding: .5em .8em; border-radius: 1.1em 1.1em .35em 1.1em; background: #EEF1F6; font-size: .88em; line-height: 1.35; }
.as-mz-sg__risposta { font-size: .9em; line-height: 1.45; }
.as-mz-sg__risposta mark { padding: 0 .2em; border-radius: .25em; background: #ECE6FF; color: #3B2D9A; font-weight: 700; }
.as-mz-sg__fonte { display: flex; align-items: center; gap: .65em; padding: .4em .7em .4em .4em; border-radius: calc(.8em * var(--as-brm)); background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 30, .09), 0 .6em 1.4em -1em rgba(30, 50, 70, .4); }
.as-mz-sg__fonte-foto { flex: none; width: 3.6em; height: 2.8em; overflow: hidden; border-radius: calc(.55em * var(--as-brm)); }
.as-mz-sg__fonte-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-mz-sg__fonte-t { display: grid; flex: 1; min-width: 0; gap: .15em; line-height: 1.25; }
.as-mz-sg__fonte-t small { display: flex; align-items: center; gap: .35em; font-size: .72em; color: rgba(28, 28, 30, .55); }
.as-mz-sg__fonte-t b { font-size: .86em; font-weight: 650; }
.as-mz-sg__fonte > .as-mz-sg__ic { width: 1.1em; height: 1.1em; color: rgba(28, 28, 30, .4); }
.as-mz-sg__fav { flex: none; width: 1.35em; height: 1.35em; overflow: hidden; border-radius: 50%; }
.as-mz-sg__fav .as-lg { display: block; width: 100%; height: 100%; }
@supports (corner-shape: squircle) { .as-mz-sg :is(.as-mz-sg__fonte, .as-mz-sg__fonte-foto) { corner-shape: squircle; } }

/* 04 · ogni mese, il punto: il resoconto di ottobre in una pagina (il foglio è lo stesso della carta 1) */
.as-mz-sg__foglio { position: relative; padding: 1.05em 1.15em 1em; border-radius: .5em; background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 1.6em 3.4em -1.4em rgba(30, 50, 70, .42); } /* dritto (Rami, 05/11: «le card 4 perché storte?»): prima rotate(1deg) */
.as-mz-sg__f-testa { display: flex; align-items: center; gap: .65em; padding-bottom: .7em; border-bottom: 1.5px solid #1C1C1E; }
.as-mz-sg__f-testa > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.2; } /* nth-child: nella carta 1 dopo il titolo c'è la pastiglia */
.as-mz-sg__f-testa b { font-size: 1.06em; font-weight: 700; letter-spacing: -.01em; }
.as-mz-sg__f-testa small { font-size: .76em; color: rgba(28, 28, 30, .55); }
.as-mz-sg__kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; margin-top: .7em; }
.as-mz-sg__kpi p { display: grid; align-content: start; gap: .1em; padding: .55em .6em .55em; border-radius: calc(.65em * var(--as-brm)); background: #F3F5F9; }
.as-mz-sg__kpi b { font-size: 1.75em; font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.as-mz-sg__kpi span { font-size: .72em; line-height: 1.25; color: rgba(28, 28, 30, .66); }
.as-mz-sg__kpi em { display: inline-flex; align-items: center; gap: .15em; margin-top: .2em; font-size: .74em; font-weight: 700; color: var(--verde); }
.as-mz-sg__kpi em .as-mz-sg__ic { width: 1em; height: 1em; stroke-width: 2.4; }
.as-mz-sg__sotto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .9em; align-items: end; margin-top: .8em; }
.as-mz-sg__mesi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3em; align-items: end; height: 6.2em; }
.as-mz-sg__mesi span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3em; height: 100%; }
.as-mz-sg__mesi i { width: 100%; height: calc(var(--h) - 1.3em); border-radius: .3em; background: linear-gradient(180deg, #F37022, #F79A63); opacity: .55; transform-origin: 50% 100%; }
.as-mz-sg__mesi span:last-child i { opacity: 1; }
.as-mz-sg__mesi small { font-size: .62em; color: rgba(28, 28, 30, .5); }
.as-mz-sg .as-mz-sg__mosse { padding: 0; }
.as-mz-sg__mosse li { display: flex; align-items: center; gap: .45em; padding: .35em 0; border-top: 1px solid rgba(28, 28, 30, .08); font-size: .8em; line-height: 1.25; }
.as-mz-sg__mosse li.as-mz-sg__mosse-h { padding-top: 0; border-top: 0; font-size: .68em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(28, 28, 30, .5); }
.as-mz-sg__mosse b { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #1C1C1E; color: #fff; font-size: .82em; }

/* ══ LA VITA, quando la carta arriva ══ */
/* :where e non :is (v0.108.9): con :is la regola pesava come «… li» e vinceva sui ritardi delle singole voci (arrivavano tutte insieme) */
/* v0.118 (06/11): le due righe qui sotto e quella della barra erano state fuse male il 05/11 (2bae2ad): le voci entravano senza transizione */
.as-pp-mazzo--viva :where(.as-mz-sg__check li, .as-mz-sg__domanda, .as-mz-sg__risposta, .as-mz-sg__fonte, .as-mz-sg__kpi p, .as-mz-sg__mosse li) { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.as-pp-mazzo--viva .as-mz-sg__punto { transition: opacity .3s ease calc(.35s + var(--k) * .06s), transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(.35s + var(--k) * .06s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sg__punto { opacity: 0; transform: scale(.3); }
.as-pp-mazzo--viva .as-mz-sg__barra i { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .6s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sg__barra i { transform: scaleX(.35); }
.as-pp-mazzo--viva .as-mz-sg__check li:nth-child(1) { transition-delay: .7s; }
.as-pp-mazzo--viva .as-mz-sg__check li:nth-child(2) { transition-delay: .9s; }
.as-pp-mazzo--viva .as-mz-sg__check li:nth-child(3) { transition-delay: 1.1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sg__check li { opacity: 0; transform: translate3d(-.6em, 0, 0); }
.as-pp-mazzo--viva .as-mz-sg__domanda { transition-delay: .4s; }
.as-pp-mazzo--viva .as-mz-sg__risposta { transition-delay: 1s; }
.as-pp-mazzo--viva .as-mz-sg__fonte { transition-delay: 1.55s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-sg__domanda, .as-mz-sg__risposta, .as-mz-sg__fonte) { opacity: 0; transform: translate3d(0, .7em, 0); }
.as-pp-mazzo--viva .as-mz-sg__kpi p:nth-child(1) { transition-delay: .45s; }
.as-pp-mazzo--viva .as-mz-sg__kpi p:nth-child(2) { transition-delay: .6s; }
.as-pp-mazzo--viva .as-mz-sg__kpi p:nth-child(3) { transition-delay: .75s; }
.as-pp-mazzo--viva .as-mz-sg__mesi i { transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(.9s + var(--k) * .1s); }
.as-pp-mazzo--viva .as-mz-sg__mosse li { transition-delay: 1.5s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-mz-sg__kpi p, .as-mz-sg__mosse li) { opacity: 0; transform: translate3d(0, .6em, 0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-sg__mesi i { transform: scaleY(0); }
@media (max-width: 899px) {
	.as-mz-sg__foto { height: 5.2em; }
	.as-mz-sg__cifra { font-size: 2.7em; }
}