/*
 * Studio Arfia · demo.css · v0.34.0 · 27/09/2026
 * Le SCHERMATE DIMOSTRATIVE (inc/demo.php): carte, telefoni, pagine di Google,
 * la posta smistata dall'AI, la chat, il prima e dopo. Servono ai casi di
 * Problemi & Soluzioni, alle pagine delle soluzioni e a quelle dei servizi.
 * Le animazioni partono solo sotto .as-demo-vivo (un caso aperto, la sezione
 * «Guarda come funziona» in vista); senza, ogni schermata è ferma e intera.
 */

/* Le schermate di esempio: carte bianche sulla superficie grigia. */
.as-demo {
	width: 100%;
	max-width: 440px;
	display: grid;
	gap: 12px;
	padding: 22px;
	border-radius: 18px;
	background: var(--as-bianco);
	color: var(--as-carbone);
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .35);
}
.as-demo p { margin: 0; }
/* 4 · SEO: la pagina dei risultati di Google com'è (v0.33.3, Rami). Arial e i colori
   della pagina vera (link #1A0DAB, testo #4D5156, url #202124). Niente logo a colori. */
.as-demo.as-serp { max-width: 540px; grid-template-columns: minmax(0, 1fr); /* la colonna non si allarga sulle schede */ gap: 0; padding: 18px 22px 22px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #202124; }
.as-serp__testa { display: flex; align-items: center; gap: 14px; }
.as-serp__logo { flex: 0 0 auto; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: #5F6368; }
.as-serp__barra { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 18px; border-radius: 24px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.as-serp__query { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #202124; }
.as-serp__icone { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.as-serp__icone svg, .as-serp__icone i { flex: 0 0 auto; }
.as-serp__icone svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-serp__x { stroke: #70757A; }
.as-serp__sep { width: 1px; height: 20px; background: #DADCE0; }
.as-serp__mic { stroke: #4285F4; }
.as-serp__lente { stroke: #4285F4; }
.as-serp__schede { list-style: none; display: flex; gap: 16px; overflow: hidden; white-space: nowrap; /* da telefono le schede si tagliano, come su Google */ margin: 10px 0 0; padding: 0 0 0 4px; border-bottom: 1px solid #EBEBEB; font-size: 12.5px; color: #5F6368; }
.as-serp__schede li { padding: 8px 2px 9px; }
.as-serp__schede li.is-on { color: #202124; box-shadow: inset 0 -3px 0 #202124; }
.as-serp__conta { margin: 10px 0 12px !important; font-size: 12px; color: #70757A; }
.as-serp__risultato { position: relative; display: grid; gap: 4px; padding: 0 0 16px; }
.as-serp__sito { display: flex; align-items: center; gap: 10px; }
.as-serp__sito > span:last-child { display: grid; gap: 1px; min-width: 0; }
.as-serp__sito b { font-weight: 400; font-size: 13.5px; color: #202124; }
.as-serp__url { font-size: 11.5px; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-serp__favicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #F1F3F4; box-shadow: inset 0 0 0 1px #DADCE0; font-size: 10px; font-weight: 700; color: var(--as-arancio); }
.as-serp__titolo { margin-top: 4px !important; font-size: 18px; line-height: 1.3; color: #1A0DAB; }
.as-serp__desc { font-size: 13px; line-height: 1.55; color: #4D5156; }
.as-serp__link { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 2px !important; font-size: 13px; color: #1A0DAB; }
.as-serp__tu { position: absolute; top: -2px; right: 0; padding: 4px 10px; border-radius: 999px; background: var(--as-arancio); color: var(--as-carbone); font-family: var(--as-font); font-size: 11.5px; font-weight: 600; }
.as-serp__risultato.is-altro { opacity: .5; }
.as-serp__risultato.is-altro .as-serp__sito i, .as-serp__risultato.is-altro > i { display: block; height: 7px; border-radius: 999px; background: #E8EAED; }
.as-serp__risultato.is-altro .as-serp__sito i { width: 120px; }
.as-serp__risultato.is-altro .as-serp__sito i.is-corta { width: 180px; height: 5px; }
.as-serp__risultato.is-altro > i { width: 92%; margin-top: 3px; }
.as-serp__risultato.is-altro > i.as-serp__t { width: 78%; height: 10px; margin-top: 8px; background: #C6CBF1; }
.as-serp__risultato.is-altro > i.is-corta { width: 60%; }
/* ── I TELEFONI (v0.39, 29/09): l'iPhone del kit (inc/dispositivi.php, dispositivi.css) ──
   Rami, 29/09: «ricontrolla che tutti i mockup non abbiano l'interno sminchiato». La vecchia
   cornice disegnata qui (.as-tel2__schermo, la barra di stato, i tasti) non c'è più: ogni
   telefono è arfia_iphone(), aperto e chiuso da arfia_demo_tel_apri() / _chiudi(). La figure
   .as-tel2 resta il contenitore: dà la taglia (font-size, 19em = la larghezza dello schermo)
   e porta la didascalia. Il kit conta i suoi 402 punti (barra di stato, isola, barra di
   chiusura, zone sicure --sa-su 62 · --sa-giu 34 · --sa-lato 16); le app di queste schermate
   sono scritte in punti di un iPhone largo 393 e restano nel loro mondo: dentro l'app --u vale
   19em / 393, come lo zoom dello schermo di iOS (2% più grande, stesse posizioni di prima). */
@property --u { syntax: '<length>'; inherits: true; initial-value: 1px; } /* la stessa di dispositivi.css */
.as-tel2 { position: relative; margin: 0; display: grid; justify-items: center; gap: 12px; font-size: 10px; }
.as-tel2 .as-disp__app { --u: calc(1em * 19 / 393); line-height: 1.35; } /* l'interlinea che le app ereditavano da .as-demo (il kit la rimette a normal) */
.as-tel2__eti { font-size: 12px; letter-spacing: .06em; color: var(--as-muted); }

/* 8 · restyling: prima e dopo */
.as-demo.as-demo--restyling { max-width: none; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 22px; padding: 0; background: transparent; box-shadow: none; }
.as-demo__freccia { display: inline-flex; color: var(--as-muted); }
.as-demo__freccia svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ── [mockup-browser] IL SITO DEL 2009 · v0.38 · 29/09/2026 ──────────────────
   Credibile, non una caricatura: una pagina larga 900px in mezzo al fondo a quadretti.
   Tutta in em (1em = 11px virtuali, Verdana): il CONTENITORE decide la scala. Nel
   telefono (.as-vecchio, container) lo schermo mostra 980px virtuali, come un telefono
   che apre un sito da computer: la pagina si vede intera e minuscola (è l'argomento).
   Nel confronto da computer lo schermo è largo 1280px virtuali: la pagina resta stretta
   in mezzo ai fianchi vuoti, com'è davvero un sito del 2009 su un monitor di oggi. */
.as-vecchio { position: absolute; top: 3.5em; left: 0; right: 0; bottom: 0; overflow: hidden; background: #C9D3DD; container-type: inline-size; }
.as-vecchio__sito { min-height: 100%; padding-bottom: 2.5em; background: #C9D3DD repeating-conic-gradient(#C9D3DD 0 25%, #BDC8D4 0 50%) 0 0 / .72em .72em; color: #000; font: 400 calc(100cqw * 11 / 980) / 1.35 Verdana, Geneva, sans-serif; letter-spacing: 0; text-align: left; }
.as-vecchio__sito p { margin: 0; }
.as-vecchio__pagina { width: 81.8em; margin: 0 auto; background: #fff; box-shadow: 0 0 0 1px #7F8C99; }
.as-vecchio__testata { position: relative; height: 10em; padding: 2.1em 1.8em 0; overflow: hidden; background: linear-gradient(#6F91B4, #2E4A6B); color: #fff; }
.as-vecchio__logo { font: bold 2.9em/1 'Times New Roman', Times, serif; letter-spacing: .03em; text-shadow: .05em .05em 0 #0F2138; }
.as-vecchio__logo small { font-size: .5em; letter-spacing: 0; }
.as-vecchio__sito .as-vecchio__motto { margin-top: .55em; font: italic 1.25em/1.2 Georgia, 'Times New Roman', serif; color: #DCE6F0; }
.as-vecchio__testata-foto { position: absolute; right: 1.8em; top: 1.2em; width: 11em; height: 7.6em; object-fit: cover; border: .25em solid #fff; box-shadow: .2em .2em .4em rgba(0, 0, 0, .45); transform: rotate(2deg); }
.as-vecchio__menu { display: flex; border-top: 1px solid #9FB3C8; border-bottom: 1px solid #1F3350; background: linear-gradient(#F7F7F7, #CDCDCD); }
.as-vecchio__menu span { padding: .5em 1.25em; border-right: 1px solid #A5A5A5; font-weight: bold; color: #1F3C5B; }
.as-vecchio__menu span.is-on { background: linear-gradient(#46698F, #2E4A6B); color: #fff; }
.as-vecchio__scorre { overflow: hidden; padding: .3em 0; border-bottom: 1px solid #E8B7B7; background: #FFECEC; color: #B00000; font-weight: bold; white-space: nowrap; }
.as-vecchio__scorre span { display: inline-block; padding-left: 1em; }
.as-vecchio__corpo { display: flex; align-items: stretch; }
.as-vecchio__lato { flex: 0 0 15.5em; padding-bottom: 1.5em; border-right: 1px solid #C5CFDA; background: #EEF2F6; }
.as-vecchio__lato-h { padding: .25em .8em; background: #2E4A6B; color: #fff; font-weight: bold; }
.as-vecchio__sito .as-vecchio__lato ul { margin: .8em 0 0; padding: 0 0 0 2.2em; list-style: square; color: #0000EE; }
.as-vecchio__lato li { margin-bottom: .5em; text-decoration: underline; }
.as-vecchio__sito .as-vecchio__visite { margin-top: 1.4em; font-size: .9em; text-align: center; }
.as-vecchio__visite span { display: inline-block; margin-top: .3em; padding: .15em .45em; background: #000; color: #4F4; font: bold 1.3em/1.1 'Courier New', Courier, monospace; letter-spacing: .25em; }
.as-vecchio__sito .as-vecchio__agg { margin-top: 1.2em; font-size: .82em; color: #555; text-align: center; }
.as-vecchio__main { flex: 1; min-width: 0; padding: 1.2em 1.7em 1em; }
.as-vecchio__sito .as-vecchio__main p { margin-bottom: .85em; }
.as-vecchio__sito .as-vecchio__h { margin-bottom: .6em; color: #B00000; font: bold 2.1em/1.1 'Times New Roman', Times, serif; }
.as-vecchio__foto { float: right; width: 17em; height: 12.75em; margin: 0 0 .8em 1.4em; object-fit: cover; border: .3em outset #C8C8C8; }
.as-vecchio__sito .as-vecchio__h2 { clear: both; margin: 1em 0 .5em; padding-bottom: .15em; border-bottom: 1px dotted #2E4A6B; color: #2E4A6B; font: bold 1.45em/1.2 'Times New Roman', Times, serif; }
.as-vecchio__sito .as-vecchio__tabella { width: 100%; margin: 0 0 .4em; border-collapse: collapse; font-size: 1em; }
.as-vecchio__tabella th, .as-vecchio__tabella td { padding: .3em .55em; border: 1px solid #8A9BB0; text-align: left; }
.as-vecchio__tabella th { background: #2E4A6B; color: #fff; }
.as-vecchio__tabella tr:nth-child(odd) td { background: #EEF2F7; }
.as-vecchio__sito .as-vecchio__piccolo { font-size: .85em; color: #666; }
.as-vecchio__galleria, .as-vecchio__form, .as-vecchio__dove { margin: 0 1.7em 1.2em; }
.as-vecchio__sito .as-vecchio__galleria p, .as-vecchio__sito .as-vecchio__dove p { margin-bottom: .5em; }
.as-vecchio__miniature { display: flex; gap: .9em; }
.as-vecchio__miniature span { width: 10.5em; height: 7.8em; border: .25em outset #C8C8C8; background-color: #CCC; background-position: 30% 40%; background-size: 190%; background-repeat: no-repeat; }
.as-vecchio__miniature span:nth-child(2) { background-position: 90% 20%; }
.as-vecchio__miniature span:nth-child(3) { background-position: 20% 95%; background-size: 240%; }
.as-vecchio__miniature span:nth-child(4) { background-position: 70% 70%; background-size: 160%; }
.as-vecchio__form { padding: .9em 1.1em; border: 1px dashed #999; }
.as-vecchio__sito .as-vecchio__form .as-vecchio__h2 { margin-top: 0; }
.as-vecchio__sito .as-vecchio__form p { display: flex; align-items: flex-start; margin-bottom: .55em; }
.as-vecchio__etichetta { flex: 0 0 7em; }
.as-vecchio__campo { display: inline-block; width: 22em; height: 1.6em; border: .15em inset #DDD; background: #fff; }
.as-vecchio__campo.is-alto { height: 4.5em; }
.as-vecchio__invia { display: inline-block; margin-right: .4em; padding: .15em .9em; border: .15em outset #DDD; background: #E5E5E5; }
.as-vecchio__dove u { color: #0000EE; }
/* v0.39: notizie, libro degli ospiti, i pulsanti in fondo: la pagina lunga come allora. */
.as-vecchio__sito .as-vecchio__notizie p { margin-bottom: .7em; }
.as-vecchio__sito .as-vecchio__perche { margin: 0 0 .8em; padding-left: 2.2em; list-style: square; }
.as-vecchio__perche li { margin-bottom: .35em; }
.as-vecchio__notizie b { color: #B00000; }
.as-vecchio__sito .as-vecchio__libro p { display: block; margin-bottom: .8em; }
.as-vecchio__libro i { color: #2E4A6B; }
.as-vecchio__libro u { color: #0000EE; }
.as-vecchio__sito .as-vecchio__bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin: 0 1.7em 1.2em; }
.as-vecchio__bottoni span { padding: .2em .7em; border: .15em outset #DDD; background: #E5E5E5; font-size: .9em; }
.as-vecchio__sito .as-vecchio__piede { clear: both; padding: .8em; border-top: 1px solid #CCC; background: #F4F4F4; font-size: .85em; color: #666; text-align: center; }
.as-demo-vivo .as-vecchio__scorre span { animation: as-vecchio-scorre 16s linear infinite; }
@keyframes as-vecchio-scorre { from { transform: translateX(0); } to { transform: translateX(-60%); } }
/* ── [mockup-browser] fine del sito del 2009 ── */
/* v0.38 (cornice): l'indicatore home è ora ::after dello schermo, centrato, su TUTTI i
   telefoni. Lo span .as-tel2__barra-x resta solo nel «prima» del restyling, dove fa la
   barra di scorrimento orizzontale del sito vecchio più largo dello schermo. */
.as-tel2__barra-x { display: none; }
.as-tel2.is-prima .as-tel2__barra-x { display: block; position: absolute; left: 1.8em; bottom: .9em; width: 8em; height: .35em; border-radius: 999px; background: rgba(0, 0, 0, .32); }
/* ── [mockup-browser] IL SITO NUOVO DAL TELEFONO · v0.38 ─────────────────────
   Lo stesso sito di «La tua impresa» del computer (arfia_demo_sitonuovo): monogramma su
   blu petrolio, titolo in un serif di sistema, stelle scure, «Chiama» col numero.
   Mai Archivo né l'arancio di Studio Arfia: è il sito del cliente. In em del telefono. */
.as-nuovo { position: absolute; top: 3.5em; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; color: #13303A; }
.as-nuovo p { margin: 0; }
.as-nuovo__scorre { display: grid; gap: .8em; padding: .5em 1.2em 1.6em; }
.as-nuovo__testa { display: flex; align-items: center; justify-content: space-between; }
.as-nuovo__logo { display: inline-flex; align-items: center; gap: .45em; }
.as-nuovo__logo i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .5em; background: #1E4D5C; color: #fff; font: 600 .7em/1 Georgia, 'Times New Roman', serif; font-style: normal; }
.as-nuovo__logo b { font: 600 .95em/1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.as-nuovo__burger { display: grid; gap: .3em; }
.as-nuovo__burger i { display: block; width: 1.4em; height: .14em; border-radius: 999px; background: #13303A; }
.as-nuovo__foto { display: block; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: .9em; }
.as-nuovo__titolo { font: 400 1.6em/1.05 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: -.01em; }
.as-nuovo__testo { font-size: .78em; line-height: 1.45; color: #4A5F66; }
.as-nuovo__fiducia { display: flex; align-items: center; gap: .45em; font-size: .7em; color: #4A5F66; }
.as-nuovo__fiducia b { color: #13303A; }
.as-nuovo__fiducia .as-sitonuovo__stelle { width: 5.6em; height: 1em; }
.as-nuovo__btn { padding: .95em; border-radius: .5em; background: #1E4D5C; color: #fff; font-size: .8em; font-weight: 600; text-align: center; }
.as-nuovo__btn.is-sec { display: flex; align-items: center; justify-content: center; gap: .5em; background: transparent; color: #1E4D5C; box-shadow: inset 0 0 0 1.5px #1E4D5C; }
.as-nuovo__cornetta { flex: 0 0 auto; width: 1.15em; height: 1.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h2.8l1.5 4.2-2 1.4a11.5 11.5 0 0 0 5.6 5.6l1.4-2 4.2 1.5V17a2.2 2.2 0 0 1-2.4 2.2A15.8 15.8 0 0 1 4.8 5.9 2.2 2.2 0 0 1 7 3.5Z' fill='none' stroke='%231E4D5C' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.as-nuovo .as-nuovo__punti { list-style: none; display: grid; gap: .5em; margin: .2em 0 0; padding: 0; font-size: .74em; color: #2B4650; }
.as-nuovo__punti li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231E4D5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ── [mockup-browser] fine del sito nuovo dal telefono ── */
@keyframes as-nuovo-scorre { 0%, 18% { transform: none; } 50%, 68% { transform: translateY(-11em); } 100% { transform: none; } }

/* 9 · il negozio · v0.38 · 29/09/2026 [mockup-servizi]: la scheda prodotto di Bottega Terra
   in Safari, in punti veri del telefono (--u). I colori sono della bottega (verde scuro
   #2F3B33), le stelle scure, mai l'arancio dello studio. Accanto (sotto, da telefono) il
   telefono bloccato della titolare, dove arriva l'ordine. */
.as-demo.as-demo--negozio { align-items: flex-end; gap: 26px; }
.as-bt { position: absolute; inset: 0; overflow: hidden; background: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; font-size: calc(16 * var(--u)); line-height: 1.3; letter-spacing: -.01em; color: #1D1D1F; }
.as-bt p { margin: 0; }
.as-bt .as-ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 1.6; }
.as-bt__avviso { margin-top: calc(58 * var(--u)) !important; padding: calc(7 * var(--u)) 0; background: #2F3B33; font-size: calc(14 * var(--u)); text-align: center; letter-spacing: .01em; color: #fff; }
.as-bt__testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); box-shadow: inset 0 -.5px 0 #D8D8DC; }
.as-bt__logo { font: 400 calc(22 * var(--u))/1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .01em; }
.as-bt__logo .as-lg { display: inline-block; width: 1.12em; height: 1.12em; margin-right: .22em; vertical-align: -.2em; }
.as-bt__icone { justify-self: end; display: flex; align-items: center; gap: calc(16 * var(--u)); }
.as-bt__borsa { position: relative; }
.as-bt__borsa > i { position: absolute; top: calc(-6 * var(--u)); right: calc(-8 * var(--u)); min-width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 999px; background: #2F3B33; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; font: 600 calc(13 * var(--u))/calc(19 * var(--u)) -apple-system, system-ui, Arial, sans-serif; font-style: normal; text-align: center; color: #fff; }
.as-bt__galleria { position: relative; aspect-ratio: 4 / 3.3; background: #E9E7E3; }
.as-bt__galleria img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-bt__punti { position: absolute; left: 0; right: 0; bottom: calc(10 * var(--u)); display: flex; justify-content: center; gap: calc(6 * var(--u)); }
.as-bt__punti i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .55); }
.as-bt__punti i.is-on { background: #fff; }
.as-bt__info { display: grid; gap: calc(9 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.as-bt__nome { font: 400 calc(23 * var(--u))/1.12 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.as-bt__voto { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(-3 * var(--u)) !important; font-size: calc(14 * var(--u)); color: #6E6E73; }
.as-bt__stelle { font-size: calc(14 * var(--u)); letter-spacing: .06em; color: #1D1D1F; }
.as-bt__prezzo { display: grid; font-size: calc(20 * var(--u)); font-weight: 600; }
.as-bt__prezzo small { font-size: calc(14 * var(--u)); font-weight: 400; color: #6E6E73; }
.as-bt__eti { font-size: calc(15 * var(--u)); color: #6E6E73; }
.as-bt__eti b { font-weight: 500; color: #1D1D1F; }
.as-bt__varianti { display: flex; gap: calc(12 * var(--u)); margin-top: calc(-2 * var(--u)) !important; }
.as-bt__varianti span { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, var(--v) 55%, var(--v2) 55%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.as-bt__varianti span.is-on { box-shadow: 0 0 0 calc(2.5 * var(--u)) #fff, 0 0 0 calc(4 * var(--u)) #1D1D1F; }
.as-bt__compra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)) !important; }
.as-bt__qta { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 0 1px #C7C7CC; font-size: calc(17 * var(--u)); }
.as-bt__qta b { font-size: calc(20 * var(--u)); font-weight: 300; color: #6E6E73; }
.as-bt__btn { position: relative; display: grid; place-items: center; height: calc(50 * var(--u)); border-radius: calc(4 * var(--u)); background: #2F3B33; font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: .01em; text-align: center; color: #fff; white-space: nowrap; }
.as-bt__btn.is-sec { background: #fff; box-shadow: inset 0 0 0 1.5px #1D1D1F; color: #1D1D1F; }
.as-bt__nota { font-size: calc(14 * var(--u)); color: #6E6E73; }
/* Dopo il tocco: la pagina si vela e sale il foglio (sotto la barra di Safari, come nei temi veri) */
.as-bt__velo { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .32); }
.as-bt__foglio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(104 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; color: #1D1D1F; }
.as-bt__foglio p { margin: 0; }
.as-bt__foglio .as-bt__foglio-h { display: grid; font-size: calc(18 * var(--u)); font-weight: 600; }
.as-bt__foglio-h > span { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.as-bt__foglio-h .as-ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: calc(4 * var(--u)); border-radius: 50%; background: #2F3B33; color: #fff; stroke-width: 2.6; }
.as-bt__riga { display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); }
.as-bt__riga img { display: block; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: cover; }
.as-bt__riga span { display: grid; font-size: calc(14.5 * var(--u)); color: #6E6E73; }
.as-bt__riga b { font-size: calc(16.5 * var(--u)); font-weight: 500; color: #1D1D1F; }
.as-bt__riga strong { font-size: calc(16 * var(--u)); font-weight: 600; }
.as-bt__foglio .as-bt__piede { display: grid; }
.as-bt__piede > .is-prima { display: grid; gap: calc(10 * var(--u)); }
.as-bt__continua { font-size: calc(15 * var(--u)); text-align: center; text-decoration: underline; text-underline-offset: .2em; }
.as-bt__piede > .is-dopo { align-self: start; font-size: calc(15 * var(--u)); line-height: 1.4; color: #6E6E73; }
.as-bt-tel .as-safari { z-index: 3; }
/* L'ordine arriva sul telefono della titolare (arfia_demo_notifica con 'blocco') */
.as-demo--negozio .as-bt__ordine { flex: 0 0 262px; --nt-dur: 12s; --nt-rit: 1.2s; }
/* il giro (12 s): «Aggiungi al carrello», il foglio, «Vai alla cassa», l'ordine confermato e arrivato */
.as-demo-vivo .as-demo--negozio .as-ps-tocco.is-uno { animation: as-bt-tocco1 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-ps-tocco.is-due { animation: as-bt-tocco2 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__aggiungi { animation: as-bt-premi 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__borsa .is-prima { animation: as-bt-prima 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__borsa .is-dopo { animation: as-bt-dopo 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__borsa > i { animation: as-bt-badge 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__velo { animation: as-bt-velo 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__foglio { animation: as-bt-foglio 12s infinite cubic-bezier(.3, .7, .2, 1); }
.as-demo-vivo .as-demo--negozio .as-bt__foglio .is-prima { animation: as-bt-f-prima 12s infinite; }
.as-demo-vivo .as-demo--negozio .as-bt__foglio .is-dopo { animation: as-bt-f-dopo 12s infinite; }
@keyframes as-bt-tocco1 { 0%, 17% { opacity: 0; transform: scale(.4); } 18.5% { opacity: 1; transform: scale(.8); } 23%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes as-bt-tocco2 { 0%, 41% { opacity: 0; transform: scale(.4); } 42.5% { opacity: 1; transform: scale(.8); } 47%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes as-bt-premi { 0%, 18% { transform: none; filter: none; } 19.5% { transform: scale(.97); filter: brightness(1.35); } 22%, 100% { transform: none; filter: none; } }
@keyframes as-bt-prima { 0%, 20% { opacity: 1; } 21%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes as-bt-dopo { 0%, 20% { opacity: 0; } 21%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes as-bt-badge { 0%, 20% { transform: none; } 22% { transform: scale(1.35); } 25%, 100% { transform: none; } }
@keyframes as-bt-velo { 0%, 22% { opacity: 0; } 26%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes as-bt-foglio { 0%, 22% { transform: translateY(105%); } 27%, 92% { transform: none; } 97%, 100% { transform: translateY(105%); } }
@keyframes as-bt-f-prima { 0%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes as-bt-f-dopo { 0%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
@media (min-width: 700px) {
	.as-prova__demo .as-demo--app.as-demo--negozio { --tel-w: 282px; }
}
/* Da telefono: il telefono grande, e l'ordine scende sopra la sua parte bassa (niente spazio vuoto) */
@media (max-width: 699px) {
	.as-prova__demo .as-demo--app.as-demo--negozio { --tel-w: min(340px, calc(100vw - 58px)); }
	.as-demo.as-demo--negozio { position: relative; flex-direction: column; align-items: center; padding-bottom: 34px; }
	.as-demo--negozio .as-bt__ordine { position: absolute; left: 50%; bottom: 0; z-index: 7; width: min(330px, calc(100vw - 44px)); margin-left: calc(min(330px, calc(100vw - 44px)) / -2); }
	.as-demo--negozio .as-bt__ordine .as-notifica__eti { justify-self: center; padding: 4px 11px; border-radius: 999px; background: rgba(28, 28, 30, .86); color: #fff; }
	.as-demo--negozio .as-bt__ordine .as-blocco { position: static; margin: 0; padding: 0; border-radius: 0; background: none !important; box-shadow: none; -webkit-mask-image: none; mask-image: none; animation: none !important; filter: none; }
	/* v0.39: da telefono qui resta solo il banner: il telefono del kit intorno si scioglie. */
	.as-demo--negozio .as-bt__ordine .as-blocco-tel { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
	.as-demo--negozio .as-bt__ordine :is(.as-disp, .as-disp__schermo, .as-disp__app) { position: static; width: auto; height: auto; overflow: visible; background: none; border-radius: 0; isolation: auto; animation: none !important; filter: none; }
	.as-demo--negozio .as-bt__ordine :is(.as-iphone__tasto, .as-iphone__telaio, .as-disp__stato, .as-iphone__isola, .as-iphone__home, .as-disp__riflesso, .as-disp__spento, .as-disp__ombra) { display: none; }
	.as-demo--negozio .as-bt__ordine .as-blocco::before, .as-demo--negozio .as-bt__ordine .as-blocco::after, .as-demo--negozio .as-bt__ordine .as-blocco__data, .as-demo--negozio .as-bt__ordine .as-blocco__ora, .as-demo--negozio .as-bt__ordine .as-notifica.is-prima { display: none; }
	.as-demo--negozio .as-bt__ordine .as-blocco__pila { margin: 0; padding: 0; }
	.as-demo-vivo .as-demo--negozio .as-bt__ordine .as-notifica__eti { animation: as-ps-eti var(--nt-dur) var(--nt-rit) infinite both; }
	.as-demo--negozio .as-bt__ordine .as-blocco__pila > .as-notifica { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); }
}

@media (max-width: 700px) {
.as-tel2 { font-size: 7.6px; }
}
@media (max-width: 440px) {
.as-demo--restyling .as-tel2 { font-size: 6.4px; }
.as-demo.as-demo--restyling { gap: 12px; }
}

/* ══ LE SCHERMATE GRANDI (v0.34, «Guarda come funziona») ══════════════════ */

/* ── [mockup-browser] LA CORNICE DEL BROWSER · v0.38 · 29/09/2026 ─────────────
   Rami, 28/09: «rendili il più possibile reali, ora sono molto AI slop». Al posto dei tre
   pallini e della pillola beige: Chrome su Windows, quello delle PMI, rifatto con le sue
   misure (schede alte 34px col piedino curvo, barra da 44, indirizzo a pillola col
   lucchetto, riduci-ingrandisci-chiudi senza colori). Si stampa con arfia_demo_browser() (inc/demo.php).
   Le schermate che hanno ancora la vecchia barra (.as-posta__barra, .as-confronto__barra)
   la vedono come la barra degli strumenti di Chrome: frecce, ricarica, indirizzo, profilo. */
.as-uic { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; background-position: center; background-size: contain; background-repeat: no-repeat; font-style: normal; }
.as-uic.is-indietro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-avanti { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23BDC1C6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-ricarica { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-lucchetto { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='10.5' width='12' height='9.5' rx='2' fill='none' stroke='%23444746' stroke-width='1.8'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-avviso { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5 20.5 19.5h-17L12 4.5ZM12 10v4.2M12 16.9v.2' fill='none' stroke='%235F6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-stella { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l2.4 5 5.4.6-4 3.7 1.1 5.3L12 16l-4.9 2.6 1.1-5.3-4-3.7 5.4-.6L12 4Z' fill='none' stroke='%23444746' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-kebab { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='1.7' fill='%23444746'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23444746'/%3E%3Ccircle cx='12' cy='18.5' r='1.7' fill='%23444746'/%3E%3C/svg%3E"); }
.as-uic.is-x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%235F6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-piu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-min { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%23202124' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-max { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='1' fill='none' stroke='%23202124' stroke-width='1.1'/%3E%3C/svg%3E"); }
.as-uic.is-chiudi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23202124' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-lente { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 15l5 5' fill='none' stroke='%23444746' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23444746' stroke-width='2'/%3E%3C/svg%3E"); }
.as-uic.is-regola { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='7' r='2.2' fill='none' stroke='%23444746' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='17' r='2.2' fill='none' stroke='%23444746' stroke-width='1.8'/%3E%3C/svg%3E"); }
.as-uic.is-aiuto { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23444746' stroke-width='1.8'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .8-1 1.5v.3M12 16.7v.2' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-matita { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 19.5h3.8L19 8.8 15.2 5 4.5 15.7v3.8Z' fill='none' stroke='%231F1F1F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-inbox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4M4 13l2-8h12l2 8v6H4v-6Z' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-orologio { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23444746' stroke-width='1.7'/%3E%3Cpath d='M12 7.5V12l3 2' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-inviata { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l16-7-5 15-3-6-8-2Z' fill='none' stroke='%23444746' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-bozze { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h8.5l4 4v13h-12.5v-17Zm8.5 0v4h4' fill='none' stroke='%23444746' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-cestino { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-archivia { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='4' rx='1' fill='none' stroke='%23444746' stroke-width='1.7'/%3E%3Cpath d='M5.5 9v10h13V9M10 13h4' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-nonletta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2' fill='none' stroke='%23444746' stroke-width='1.7'/%3E%3Cpath d='M4 7.5l8 6 8-6' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-cartella { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 7.5A1.5 1.5 0 0 1 5 6h4l2 2h8a1.5 1.5 0 0 1 1.5 1.5V17a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 17V7.5Z' fill='none' stroke='%23444746' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-graffetta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 7.5 9.3 14.7a1.9 1.9 0 0 0 2.7 2.7l7.5-7.5a3.8 3.8 0 0 0-5.4-5.4L6.4 12.2a5.7 5.7 0 0 0 8.1 8.1l5.5-5.5' fill='none' stroke='%235F6368' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-rispondi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7 5 12l5 5M5 12h9a5 5 0 0 1 5 5v1' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-inoltra { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l5 5-5 5M19 12h-9a5 5 0 0 0-5 5v1' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-chev-s { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-chev-d { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-chev-g { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-assistente { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.5h14A1.5 1.5 0 0 1 20.5 6v9a1.5 1.5 0 0 1-1.5 1.5h-7L7.5 20v-3.5H5A1.5 1.5 0 0 1 3.5 15V6A1.5 1.5 0 0 1 5 4.5ZM8 9h8M8 12h5' fill='none' stroke='%230B57D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-busta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5' fill='%230B57D0'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-spunta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-copia { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2' fill='none' stroke='%235F6368' stroke-width='1.7'/%3E%3Cpath d='M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5' fill='none' stroke='%235F6368' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-indietro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4.5 7.5 12 15 19.5' fill='none' stroke='%23007AFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-lente { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 15.5 20 20' fill='none' stroke='%238E8E93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%238E8E93' stroke-width='2.2'/%3E%3C/svg%3E"); }
.as-uic.is-i-mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3' fill='%238E8E93'/%3E%3Cpath d='M6 11.5a6 6 0 0 0 12 0M12 17.5v3' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-cestino { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13' fill='none' stroke='%23007AFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-cartella { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 7.5A1.5 1.5 0 0 1 5 6h4l2 2h8a1.5 1.5 0 0 1 1.5 1.5V17a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 17V7.5Z' fill='none' stroke='%23007AFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-rispondi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6.5 4.5 12l5.5 5.5M4.5 12H14a5.5 5.5 0 0 1 5.5 5.5v1' fill='none' stroke='%23007AFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-scrivi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 4.5H6.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-6M18.8 3.7l1.5 1.5-8.3 8.3-2.4.9.9-2.4 8.3-8.3Z' fill='none' stroke='%23007AFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-i-bandiera { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 20.5V4.5M6 5h11l-2.5 4 2.5 4H6' fill='none' stroke='%23007AFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-uic.is-globo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%235F6368' stroke-width='1.6'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.6 2.6 3.6 5.5 3.6 8.5s-1 5.9-3.6 8.5c-2.6-2.6-3.6-5.5-3.6-8.5s1-5.9 3.6-8.5Z' fill='none' stroke='%235F6368' stroke-width='1.6'/%3E%3C/svg%3E"); }
.as-uic.is-i-chev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%23C7C7CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.as-br { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.2; color: #1F1F1F; background: #fff; user-select: none; -webkit-user-select: none; }
.as-br__schede { display: flex; align-items: flex-end; height: 40px; padding-left: 10px; background: #DFE3E8; }
.as-br__scheda { position: relative; flex: 0 1 236px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; font-size: 12px; color: #3C4043; }
.as-br__scheda.is-on { z-index: 1; background: #fff; border-radius: 9px 9px 0 0; color: #1F1F1F; }
.as-br__scheda.is-on::before, .as-br__scheda.is-on::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.as-br__scheda.is-on::before { left: -9px; background: radial-gradient(circle at 0 0, transparent 8.5px, #fff 9px); }
.as-br__scheda.is-on::after { right: -9px; background: radial-gradient(circle at 100% 0, transparent 8.5px, #fff 9px); }
.as-br__scheda:not(.is-on)::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 1px; background: #A9AEB4; }
.as-br__fav { flex: 0 0 16px; height: 16px; border-radius: 4px; background-color: var(--c, #5F6368); color: #fff; font: 700 9px/16px 'Segoe UI', Arial, sans-serif; text-align: center; letter-spacing: -.02em; }
.as-br__fav.as-uic { width: 16px; background-color: transparent; border-radius: 0; }
.as-br__tit { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } /* Chrome sfuma il titolo, non mette i puntini */
.as-br__scheda .as-uic.is-x { width: 16px; height: 16px; }
.as-br__nuova { align-self: center; width: 28px; height: 28px; margin: 5px 0 0 6px; background-size: 18px; }
.as-br__win { display: flex; align-self: stretch; margin-left: auto; }
.as-br__win .as-uic { width: 46px; height: 100%; background-size: 16px; }
.as-br__barra { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 6px; background: #fff; border-bottom: 1px solid #E1E3E6; }
.as-br__tasto { width: 32px; height: 32px; background-size: 18px; }
.as-br__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; margin: 0 6px; padding: 0 12px 0 5px; border-radius: 17px; background: #EDF0F3; font-size: 14px; color: #5F6368; white-space: nowrap; }
.as-br__info { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px; font-size: 13px; color: #5F6368; }
.as-br__url.is-nonsicuro .as-br__info::after { content: ""; width: 1px; height: 16px; margin-left: 4px; background: #C4C7C5; }
.as-br__indirizzo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-br__indirizzo b { font-weight: 400; color: #1F1F1F; }
.as-br__profilo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 4px; border-radius: 50%; background: var(--c, #7B3F61); color: #fff; font: 600 12px/1 'Segoe UI', system-ui, Arial, sans-serif; }
/* Il puntatore del mouse, freccia di Windows col bordo bianco: ogni schermata lo muove. */
.as-br-puntatore { position: absolute; z-index: 5; width: 17px; height: 23px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 23'%3E%3Cpath d='M1.5 1.5v16.2l4.1-3.9 2.7 6.2 2.9-1.3-2.7-6.1h5.6L1.5 1.5Z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); pointer-events: none; }
/* La vecchia barra (tre <i> e uno <span> con l'indirizzo): la barra degli strumenti di Chrome. */
.as-demo__barra, .as-posta__barra, .as-confronto__barra { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 6px; background: #fff; border-bottom: 1px solid #E1E3E6; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; }
.as-posta__barra i, .as-confronto__barra i { flex: 0 0 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.as-posta__barra i:nth-child(2), .as-confronto__barra i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23BDC1C6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-posta__barra i:nth-child(3), .as-confronto__barra i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-posta__barra span, .as-confronto__barra span { flex: 1; min-width: 0; height: 34px; margin: 0 8px 0 6px; padding: 0 14px 0 38px; border-radius: 17px; background: #EDF0F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='10.5' width='12' height='9.5' rx='2' fill='none' stroke='%23444746' stroke-width='1.8'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23444746' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12px center / 18px no-repeat; font-size: 14px; line-height: 34px; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-posta__barra::after, .as-confronto__barra::after { content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%; background: #7B3F61 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='3.6' fill='%23fff'/%3E%3Cpath d='M5.2 19.5c1.4-3.3 3.9-4.8 6.8-4.8s5.4 1.5 6.8 4.8' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* ── [mockup-browser] fine della cornice del browser ── */

/* ── [mockup-browser] LA POSTA SMISTATA DALL'AI · v0.38 · 29/09/2026 ─────────────
   La webmail di un ufficio ordini in una finestra di Chrome, in px veri: cartelle, elenco
   dal più recente (le non lette in grassetto su bianco, le lette su azzurro chiaro), la
   mail di Villa Castelmora aperta, il pannello dell'assistente con l'ordine in tabella. Font di
   sistema e colori della posta, mai Archivo né l'arancio del sito. Ciclo di 12s su una
   schermata SEMPRE piena, che parte dal 10% (ritardo negativo): la mail di Arno Eventi
   è già arrivata, quindi accendersi non svuota niente. Senza JS e fuori vista: ferma e
   intera. Sotto gli 820px al posto della finestra c'è l'app di posta del telefono (.as-mp). */
.as-demo.as-demo--posta { display: block; max-width: 1180px; padding: 0; background: transparent; box-shadow: none; font-size: 13px; }
.as-posta__pc { container: as-posta / inline-size; position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 30px 60px -30px rgba(0, 0, 0, .5); }
.as-posta__tel { display: none; }
.as-wm { position: relative; background: #F6F8FC; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; line-height: 1.35; color: #1F1F1F; }
.as-wm p { margin: 0; }
.as-wm__testa { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 14px 0 20px; }
.as-wm__marchio { flex: 0 0 176px; display: flex; align-items: center; gap: 10px; font-size: 20px; color: #444746; }
.as-wm__marchio .as-uic { width: 30px; height: 30px; }
.as-wm__cerca { flex: 0 1 620px; min-width: 0; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-radius: 23px; background: #E9EEF6; font-size: 15px; color: #444746; white-space: nowrap; }
.as-wm__cerca .as-uic { width: 20px; height: 20px; }
.as-wm__cerca .is-regola { margin-left: auto; }
.as-wm__attrezzi { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.as-wm__attrezzi .as-uic { width: 22px; height: 22px; }
.as-wm__attrezzi .as-br__profilo { width: 32px; height: 32px; font-size: 14px; }
.as-wm__corpo { display: grid; grid-template-columns: 204px 306px minmax(0, 1fr) 288px; height: 520px; padding: 0 12px 14px 0; }
.as-wm__lato { display: flex; flex-direction: column; font-size: 14px; }
.as-wm__lato p { display: flex; align-items: center; gap: 14px; flex: 0 0 32px; padding: 0 14px 0 20px; border-radius: 0 16px 16px 0; white-space: nowrap; }
.as-wm__lato p > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-wm__lato p b { display: inline-grid; font-size: 12px; font-weight: 600; }
.as-wm__lato p b > span { grid-area: 1 / 1; }
.as-wm__lato b .is-prima { opacity: 0; }
.as-wm__lato p.is-on { background: #D3E3FD; font-weight: 600; color: #001D35; }
.as-wm__lato .as-uic { width: 20px; height: 20px; }
.as-wm__lato .as-wm__scrivi { align-self: flex-start; flex: 0 0 56px; gap: 12px; margin: 4px 0 12px 8px; padding: 0 24px 0 18px; border-radius: 16px; background: #C2E7FF; font-weight: 500; }
.as-wm__lato .as-wm__lato-h { flex-basis: 40px; padding-top: 8px; font-weight: 500; }
.as-wm__quad { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; margin: 0 4px; border-radius: 3px; background: var(--e); }
.as-wm__quad.is-ordine, .as-wm__eti.is-ordine { --e: #137333; --f: #E6F4EA; }
.as-wm__quad.is-reclamo, .as-wm__eti.is-reclamo { --e: #C5221F; --f: #FCE8E6; }
.as-wm__quad.is-info, .as-wm__eti.is-info { --e: #1967D2; --f: #E8F0FE; }
.as-wm__quad.is-fattura, .as-wm__eti.is-fattura { --e: #8430CE; --f: #F3E8FD; }
.as-wm__eti { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--f); color: var(--e); font-size: 11px; font-style: normal; font-weight: 600; line-height: 17px; vertical-align: 1px; }
.as-wm__lista { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px 0 0 16px; background: #fff; }
.as-wm__strumenti { display: flex; align-items: center; gap: 16px; flex: 0 0 44px; padding: 0 12px 0 18px; border-bottom: 1px solid #EDEDED; font-size: 12px; color: #444746; }
.as-wm__strumenti > span { margin-left: auto; white-space: nowrap; }
.as-wm__strumenti .is-chev-g { width: 14px; margin-left: -14px; }
.as-wm__casella { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.8px #444746; }
.as-demo .as-wm__mail-lista { margin: 0; }
.as-wm__mail { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av da ora" "av ogg ogg" "av ante ante"; column-gap: 12px; padding: 10px 14px; border-bottom: 1px solid #EEF0F2; background: #F2F6FC; color: #444746; }
.as-wm__mail.is-nonletta { background: #fff; }
.as-wm__mail.is-aperta { background: #D3E3FD; }
.as-wm__arrivo { max-height: 90px; overflow: hidden; }
.as-wm__av { grid-area: av; align-self: start; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2px; border-radius: 50%; background: var(--c, #5F6368); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.as-wm__av.is-grande { width: 40px; height: 40px; margin: 0; font-size: 14px; }
.as-wm__da { grid-area: da; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #1F1F1F; }
.as-wm__ora { grid-area: ora; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.as-wm__ora .as-uic { width: 15px; height: 15px; }
.as-wm__ogg, .as-wm__ante { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-wm__ogg { grid-area: ogg; color: #1F1F1F; }
.as-wm__ante { grid-area: ante; color: #5F6368; }
.as-wm__mail.is-nonletta .as-wm__da, .as-wm__mail.is-nonletta .as-wm__ogg, .as-wm__mail.is-nonletta .as-wm__ora { font-weight: 700; color: #1F1F1F; }
.as-wm__mail.is-aperta .as-wm__da { font-weight: 600; }
.as-wm__lettura { min-width: 0; overflow: hidden; padding: 0 26px 16px 22px; border-left: 1px solid #EDEDED; border-radius: 0 16px 16px 0; background: #fff; }
.as-wm__azioni { display: flex; align-items: center; gap: 20px; height: 44px; }
.as-wm__azioni .is-kebab { margin-left: auto; }
.as-wm .as-wm__oggetto { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px 52px; font-size: 21px; line-height: 1.25; }
.as-wm__oggetto .as-wm__eti { font-size: 12px; }
.as-wm__mittente { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.as-wm__mittente .as-wm__av { grid-area: auto; }
.as-wm__mittente b { display: block; font-size: 14px; font-weight: 600; }
.as-wm__mittente p { min-width: 0; }
.as-wm__mittente p span, .as-wm__mittente small, .as-wm__quando { font-size: 12px; color: #5F6368; }
.as-wm__mittente p span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-wm__mittente small { display: block; margin-top: 2px; }
.as-wm__quando { white-space: nowrap; }
.as-wm__testo { margin: 16px 0 0 52px; font-size: 14px; line-height: 1.6; }
.as-wm .as-wm__testo p { margin: 0 0 12px; }
.as-wm__firma { font-size: 13px; color: #5F6368; }
.as-wm__ev { margin: 0 -2px; padding: 1px 2px; border-radius: 3px; background: transparent; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.as-wm .as-wm__rispondi { display: flex; gap: 10px; margin: 6px 0 0 52px; }
.as-wm__rispondi span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px 0 14px; border-radius: 18px; box-shadow: inset 0 0 0 1px #747775; font-size: 14px; font-weight: 500; color: #444746; }
.as-wm__ai { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-left: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; }
.as-wm__ai-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.as-wm__ai-h b { font-weight: 600; }
.as-wm__ai-h .as-uic { width: 20px; height: 20px; }
.as-wm__ai-h .is-x { margin-left: auto; }
.as-wm__ai-sunto { font-size: 13px; color: #444746; }
.as-wm .as-wm__ai-conti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.as-wm__ai-conti span { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px 3px 5px; border-radius: 999px; background: #F1F3F4; font-size: 12px; }
.as-wm__ai-conti .as-wm__quad { width: 8px; height: 8px; border-radius: 2px; }
.as-wm__ordine { display: grid; gap: 10px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px #DADCE0; }
.as-wm__ordine-h b { display: block; font-size: 14px; font-weight: 600; }
.as-wm__ordine-h span { font-size: 12px; color: #5F6368; }
.as-demo .as-wm__tab { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.as-wm__tab th { padding: 0 6px 5px; border-bottom: 1px solid #E3E3E3; font-size: 11.5px; font-weight: 500; text-align: left; color: #5F6368; }
.as-wm__tab td { padding: 6px; border-bottom: 1px solid #F1F3F4; vertical-align: top; }
.as-wm__tab th:last-child, .as-wm__tab td:last-child { text-align: right; }
.as-wm__tab td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.as-wm__tab small { display: block; font-size: 11px; color: #5F6368; }
.as-wm__consegna { padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.as-wm__consegna span { display: block; font-size: 11.5px; color: #5F6368; }
.as-wm__crea { position: relative; display: flex; gap: 8px; }
.as-wm__btn { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 18px; background: #0B57D0; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.as-wm__btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.as-wm__btn .is-dopo { opacity: 0; }
.as-wm__btn .as-uic { width: 16px; height: 16px; }
.as-wm__mod { flex: 0 0 36px; display: grid; place-items: center; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px #747775; }
.as-wm__mod .as-uic { width: 17px; height: 17px; }
.as-wm__puntatore { left: 40%; top: 45%; transform: translate(-200px, 150px); }
.as-wm__bozza { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #F6F8FC; font-size: 13px; line-height: 1.45; }
.as-wm__bozza-h { font-size: 12px; font-weight: 600; color: #444746; }
.as-wm__bozza-azioni { display: flex; align-items: center; justify-content: space-between; font-weight: 500; color: #0B57D0; }
.as-wm__toast { position: absolute; left: 20px; bottom: 22px; z-index: 4; display: flex; align-items: center; gap: 22px; height: 48px; padding: 0 10px 0 20px; border-radius: 6px; background: #1F1F1F; color: #F2F2F2; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(14px); }
.as-wm__toast u { text-decoration: none; font-weight: 600; color: #A8C7FA; }
.as-wm__toast .as-uic { filter: invert(1); }
/* Finestre più strette: le cartelle diventano la colonna delle icone, poi la finestra si
   rimpicciolisce intera (zoom), come uno schermo più piccolo. */
@container as-posta (max-width: 1119px) {
	.as-wm__corpo { grid-template-columns: 72px 316px minmax(0, 1fr) 284px; }
	.as-wm__marchio { flex-basis: auto; }
	.as-wm__lato p { justify-content: center; margin: 0 10px; padding: 0; border-radius: 16px; }
	.as-wm__lato p > span, .as-wm__lato p b, .as-wm__lato .as-wm__lato-h { display: none; }
	.as-wm__lato .as-wm__scrivi { align-self: center; width: 56px; margin: 4px 0 12px; padding: 0; }
}
@container as-posta (max-width: 939px) { .as-wm { zoom: .84; } }
@container as-posta (max-width: 789px) { .as-wm { zoom: .7; } }
/* il ciclo: 12s, parte dal 10% */
.as-demo-vivo .as-wm__arrivo { animation: as-wm-arrivo 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__lato b .is-prima { animation: as-wm-conto-a 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__lato b .is-dopo { animation: as-wm-conto-b 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__lettura .as-wm__ev.is-1 { animation: as-wm-ev1 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__lettura .as-wm__ev.is-2 { animation: as-wm-ev2 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__lettura .as-wm__ev.is-3 { animation: as-wm-ev3 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__riga.is-1 { animation: as-wm-r1 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__riga.is-2 { animation: as-wm-r2 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__riga.is-3 { animation: as-wm-r3 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__puntatore { animation: as-wm-punta 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__btn { animation: as-wm-btn 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__btn .is-prima { animation: as-wm-via 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__btn .is-dopo { animation: as-wm-vieni 12s -1.2s infinite both; }
.as-demo-vivo .as-wm__toast { animation: as-wm-toast 12s -1.2s infinite both; }
@keyframes as-wm-arrivo { 0%, 3% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; background: #fff; } 8% { max-height: 90px; padding-block: 10px; border-bottom-width: 1px; opacity: 1; background: #E8F0FE; } 20%, 94% { max-height: 90px; padding-block: 10px; border-bottom-width: 1px; opacity: 1; background: #fff; } 99%, 100% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; background: #fff; } }
@keyframes as-wm-conto-a { 0%, 5% { opacity: 1; } 7%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes as-wm-conto-b { 0%, 5% { opacity: 0; } 7%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-wm-ev1 { 0%, 16% { background: transparent; box-shadow: none; } 19%, 90% { background: #D3E3FD; box-shadow: inset 0 -2px 0 #0B57D0; } 95%, 100% { background: transparent; box-shadow: none; } }
@keyframes as-wm-ev2 { 0%, 24% { background: transparent; box-shadow: none; } 27%, 90% { background: #D3E3FD; box-shadow: inset 0 -2px 0 #0B57D0; } 95%, 100% { background: transparent; box-shadow: none; } }
@keyframes as-wm-ev3 { 0%, 32% { background: transparent; box-shadow: none; } 35%, 90% { background: #D3E3FD; box-shadow: inset 0 -2px 0 #0B57D0; } 95%, 100% { background: transparent; box-shadow: none; } }
@keyframes as-wm-r1 { 0%, 17% { background: transparent; } 20% { background: #D3E3FD; } 30%, 100% { background: transparent; } }
@keyframes as-wm-r2 { 0%, 25% { background: transparent; } 28% { background: #D3E3FD; } 38%, 100% { background: transparent; } }
@keyframes as-wm-r3 { 0%, 33% { background: transparent; } 36% { background: #D3E3FD; } 46%, 100% { background: transparent; } }
@keyframes as-wm-punta { 0%, 38% { transform: translate(-200px, 150px); } 47% { transform: translate(0, 0); } 49% { transform: translate(0, 0) scale(.86); } 51%, 84% { transform: translate(0, 0); } 94%, 100% { transform: translate(-200px, 150px); } }
@keyframes as-wm-btn { 0%, 48% { transform: none; background: #0B57D0; } 50% { transform: scale(.96); background: #0B57D0; } 52%, 86% { transform: none; background: #146C2E; } 91%, 100% { transform: none; background: #0B57D0; } }
@keyframes as-wm-via { 0%, 50% { opacity: 1; } 52%, 88% { opacity: 0; } 91%, 100% { opacity: 1; } }
@keyframes as-wm-vieni { 0%, 50% { opacity: 0; } 52%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes as-wm-toast { 0%, 52% { opacity: 0; transform: translateY(14px); } 55%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(14px); } }

/* L'app di posta sul telefono (sotto gli 820px): «In arrivo» col titolo grande, le linguette
   dell'assistente (Ordini, Reclami, Fatture…), le righe su tre livelli col pallino blu delle
   non lette. Si tocca Villa Castelmora, la mail si apre da destra, le frasi si evidenziano, dal
   basso sale il foglio «Ordine riconosciuto», si tocca «Crea ordine». Testo mai sotto gli 11px
   reali. Fermo: la casella. */
@media (max-width: 819px) {
	.as-posta__pc { display: none; }
	.as-demo--posta .as-posta__tel { display: grid; font-size: 15.8px; } /* 19em = 300px di schermo */
}
.as-mp { position: absolute; inset: 0; overflow: hidden; background: #fff; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.3; letter-spacing: -.01em; color: #000; }
.as-mp p { margin: 0; }
.as-mp__casella, .as-mp__lettura { position: absolute; inset: 0; padding: calc(62 * var(--u)) 16px 0; background: #fff; }
.as-mp__lettura { transform: translateX(100%); box-shadow: -12px 0 24px -14px rgba(0, 0, 0, .3); }
.as-mp__nav { display: flex; align-items: center; justify-content: space-between; height: 34px; font-size: 16px; color: #007AFF; }
.as-mp__link { display: inline-flex; align-items: center; gap: 1px; }
.as-mp__link:first-child { margin-left: -7px; }
.as-mp__link .as-uic { width: 22px; height: 22px; }
.as-mp .as-mp__titolo { margin: 2px 0 8px; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.as-mp__cerca { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; border-radius: 10px; background: #EEEEF0; font-size: 16px; color: #8E8E93; }
.as-mp__cerca .as-uic { width: 18px; height: 18px; }
.as-mp__cerca .is-i-mic { margin-left: auto; }
.as-mp .as-mp__schede { display: flex; gap: 6px; margin: 12px -16px 0 0; overflow: hidden; }
.as-mp__schede span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: #EEEEF0; font-size: 14px; font-weight: 500; }
.as-mp__schede span.is-on { background: #007AFF; color: #fff; }
.as-mp__schede b { font-weight: 600; opacity: .65; }
.as-mp .as-mp__nota { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 12px; color: #6C6C70; }
.as-mp__nota .as-uic { width: 15px; height: 15px; }
.as-demo .as-mp__lista { margin: 0 -16px; }
.as-mp__mail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "da ora" "ogg ogg" "ante ante"; column-gap: 8px; padding: 10px 16px 10px 28px; overflow: hidden; background: #fff; }
.as-mp__mail::after { content: ""; position: absolute; left: 28px; right: 0; bottom: 0; height: 1px; background: #E3E3E8; }
.as-mp__mail.is-nonletta::before { content: ""; position: absolute; left: 10px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: #007AFF; }
.as-mp__da { grid-area: da; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; }
.as-mp__ora { grid-area: ora; display: inline-flex; align-items: center; gap: 1px; font-size: 13px; color: #8E8E93; }
.as-mp__ora .as-uic { width: 14px; height: 14px; }
.as-mp__ogg { grid-area: ogg; min-width: 0; margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.as-mp__ante { grid-area: ante; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: #8E8E93; }
.as-mp .as-wm__eti { margin-right: 5px; padding: 0 5px; font-size: 11px; line-height: 16px; }
.as-mp__tocco { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(0, 0, 0, .16); opacity: 0; transform: scale(0); pointer-events: none; }
.as-mp .as-mp__oggetto { margin: 6px 0 12px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.as-mp__chi { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #E5E5EA; font-size: 15px; }
.as-mp__chi .as-wm__av { width: 36px; height: 36px; margin: 0; font-size: 13px; }
.as-mp__chi b { font-weight: 600; }
.as-mp__chi > span:last-child { margin-left: auto; font-size: 13px; color: #8E8E93; }
.as-mp__testo { padding-top: 12px; font-size: 15px; line-height: 1.45; }
.as-mp .as-mp__testo p { margin: 0 0 10px; }
.as-mp .as-mp__barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 10px 26px 34px; border-top: 1px solid #E5E5EA; background: rgba(249, 249, 249, .94); }
.as-mp__barra .as-uic { width: 24px; height: 24px; }
.as-mp__foglio { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; display: grid; padding: 8px 16px 18px; border-radius: 26px; background: #fff; box-shadow: 0 -2px 30px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .08); transform: translateY(115%); }
.as-mp__maniglia { justify-self: center; width: 36px; height: 5px; margin-bottom: 8px; border-radius: 3px; background: #C7C7CC; }
.as-mp .as-mp__foglio-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.as-mp__foglio-h .as-uic { width: 19px; height: 19px; }
.as-mp__art { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EFEFF4; font-size: 14px; }
.as-mp__art b { font-weight: 600; white-space: nowrap; }
.as-mp__art.is-cons span { color: #8E8E93; }
.as-mp .as-mp__crea { position: relative; display: grid; place-items: center; height: 46px; margin-top: 12px; border-radius: 23px; background: #007AFF; color: #fff; font-size: 15px; font-weight: 600; }
.as-mp__crea > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.as-mp__crea .is-dopo { opacity: 0; }
.as-mp__crea .as-uic { width: 17px; height: 17px; }
.as-demo-vivo .as-mp__bar { animation: as-mp-bar 12s infinite; }
.as-demo-vivo .as-mp__bar .as-mp__tocco { animation: as-mp-tocco1 12s infinite; }
.as-demo-vivo .as-mp__casella { animation: as-mp-casella 12s infinite; }
.as-demo-vivo .as-mp__lettura { animation: as-mp-lettura 12s infinite; }
.as-demo-vivo .as-mp .as-wm__ev.is-1 { animation: as-mp-ev1 12s infinite both; }
.as-demo-vivo .as-mp .as-wm__ev.is-2 { animation: as-mp-ev2 12s infinite both; }
.as-demo-vivo .as-mp .as-wm__ev.is-3 { animation: as-mp-ev3 12s infinite both; }
.as-demo-vivo .as-mp__foglio { animation: as-mp-foglio 12s infinite; }
.as-demo-vivo .as-mp__crea { animation: as-mp-crea 12s infinite; }
.as-demo-vivo .as-mp__crea .as-mp__tocco { animation: as-mp-tocco2 12s infinite; }
.as-demo-vivo .as-mp__crea .is-prima { animation: as-mp-via 12s infinite both; }
.as-demo-vivo .as-mp__crea .is-dopo { animation: as-mp-vieni 12s infinite both; }
@keyframes as-mp-bar { 0%, 13% { background: #fff; } 15%, 22% { background: #E5E5EA; } 26%, 100% { background: #fff; } }
@keyframes as-mp-tocco1 { 0%, 13% { opacity: 0; transform: scale(0); } 15% { opacity: 1; transform: scale(.6); } 20%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes as-mp-casella { 0%, 19% { transform: none; filter: none; } 24%, 88% { transform: translateX(-30%); filter: brightness(.92); } 93%, 100% { transform: none; filter: none; } }
@keyframes as-mp-lettura { 0%, 19% { transform: translateX(100%); } 24%, 88% { transform: none; } 93%, 100% { transform: translateX(100%); } }
@keyframes as-mp-ev1 { 0%, 28% { background: transparent; } 31%, 90% { background: #CFE3FF; } 94%, 100% { background: transparent; } }
@keyframes as-mp-ev2 { 0%, 33% { background: transparent; } 36%, 90% { background: #CFE3FF; } 94%, 100% { background: transparent; } }
@keyframes as-mp-ev3 { 0%, 38% { background: transparent; } 41%, 90% { background: #CFE3FF; } 94%, 100% { background: transparent; } }
@keyframes as-mp-foglio { 0%, 44% { transform: translateY(115%); } 50%, 86% { transform: none; } 91%, 100% { transform: translateY(115%); } }
@keyframes as-mp-crea { 0%, 57% { transform: none; background: #007AFF; } 59% { transform: scale(.97); background: #007AFF; } 61%, 88% { transform: none; background: #248A3D; } 92%, 100% { transform: none; background: #007AFF; } }
@keyframes as-mp-tocco2 { 0%, 56% { opacity: 0; transform: scale(0); } 58% { opacity: 1; transform: scale(.6); } 63%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes as-mp-via { 0%, 59% { opacity: 1; } 61%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes as-mp-vieni { 0%, 59% { opacity: 0; } 61%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* ── [mockup-browser] fine della posta ── */

/* ── [mockup-browser] IL PRIMA E DOPO · v0.38 · 29/09/2026 ───────────────────
   Lo stesso indirizzo nello stesso Chrome, in due epoche. La maniglia divide TUTTO:
   la cornice (a sinistra «Non sicuro», a destra il lucchetto) e la pagina (a sinistra il
   sito del 2009 largo 900px sul fondo a quadretti, a destra il sito nuovo). Lo schermo è
   un monitor da 1280×720 virtuali scalato col contenitore (cqw): nessun JS per la scala.
   --pos sta sulla vista (.as-confronto__vista): la anima il CSS, la muove motion.js. */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.as-demo.as-demo--confronto { display: block; max-width: 1120px; padding: 0; background: transparent; box-shadow: none; }
.as-confronto__vista { --pos: 50%; }
.as-confronto__finestra { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 30px 60px -30px rgba(0, 0, 0, .5); }
.as-confronto__cornice { position: relative; }
.as-confronto__prima { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.as-confronto__schermo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.as-confronto__nuovo, .as-confronto__vecchio { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #fff; }
.as-confronto__vecchio { z-index: 1; background: #C9D3DD; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } /* due contesti: la barra di Safari del «dopo» non passa sopra il «prima» */
.as-confronto__finestra .as-vecchio__sito { font-size: calc(100cqw * 11 / 1280); }
.as-confronto__scorri { position: absolute; top: 0; right: 0; bottom: 0; width: 1.3cqw; background: #F1F1F1 linear-gradient(#C1C1C1, #C1C1C1) 50% 1.5cqw / 58% 24% no-repeat; box-shadow: inset 1px 0 0 #E2E2E2; } /* la barra di scorrimento di Windows della pagina lunga */
.as-confronto__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 14px rgba(0, 0, 0, .25); pointer-events: none; }
.as-confronto__maniglia { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06); }
.as-confronto__maniglia svg { width: 20px; height: 20px; fill: none; stroke: #1F1F1F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* il puntatore «trascina» di Windows sulla maniglia: dice che si tira; col mouse vero sparisce */
.as-confronto__puntatore { left: 50%; top: 50%; width: 23px; height: 18px; margin: 10px 0 0 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 18'%3E%3Cpath d='M1.5 9 6.5 4v3.2h10V4l5 5-5 5v-3.2h-10V14Z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-manuale .as-confronto__puntatore { display: none; }
.as-confronto__eti { position: absolute; top: 13cqw; z-index: 4; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; font: 600 12px/1.25 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; letter-spacing: .02em; pointer-events: none; }
.as-confronto__eti.is-prima { left: 14px; }
.as-confronto__eti.is-dopo { right: 14px; }
.as-demo-vivo .as-confronto__vista:not(.is-manuale) { animation: as-confronto 9s ease-in-out infinite; }
@keyframes as-confronto { 0%, 100% { --pos: 50%; } 25% { --pos: 27%; } 62% { --pos: 77%; } }

/* Il sito nuovo da computer: una pagina di 1280px, 1em = 16px virtuali = 1,25cqw del
   contenitore (lo schermo del confronto, lo schermo del sito in servizi/siti-web). */
.as-sitonuovo { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #13303A; font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-size: 1.25cqw; line-height: 1.4; }
.as-sitonuovo p { margin: 0; }
.as-sitonuovo__top { display: flex; gap: 2.2em; padding: .62em 3.75em; background: #13303A; color: #C9D8DD; font-size: .8em; white-space: nowrap; }
.as-sitonuovo__top b { font-weight: 600; color: #fff; }
.as-sitonuovo__top span:last-child { margin-left: auto; }
.as-sitonuovo__nav { display: flex; align-items: center; gap: 2.1em; padding: 1em 3em; border-bottom: 1px solid #E4EAEC; font-size: .94em; color: #2B4650; white-space: nowrap; }
.as-sitonuovo__logo { display: flex; align-items: center; gap: .75em; margin-right: auto; }
.as-sitonuovo__logo i { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .5em; background: #1E4D5C; color: #fff; font: 600 1em/1 Georgia, 'Times New Roman', serif; font-style: normal; letter-spacing: .02em; }
.as-sitonuovo__logo b { display: grid; font: 600 1.3em/1.1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; color: #13303A; }
.as-sitonuovo__logo small { font: 400 .55em/1.45 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; letter-spacing: .01em; color: #6A7F86; }
.as-sitonuovo__nav em { padding: .8em 1.35em; border-radius: .45em; background: #1E4D5C; color: #fff; font-style: normal; font-weight: 600; }
.as-sitonuovo__eroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5em; align-items: center; padding: 2.2em 3em 2em; }
.as-sitonuovo__h { font: 400 3.6em/1.04 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: -.015em; color: #13303A; }
.as-sitonuovo .as-sitonuovo__t { max-width: 27em; margin-top: 1.1em; font-size: 1.1em; line-height: 1.55; color: #4A5F66; }
.as-sitonuovo .as-sitonuovo__btn { display: flex; gap: .8em; margin-top: 1.7em; }
.as-sitonuovo__btn em, .as-sitonuovo__btn span { padding: .95em 1.55em; border-radius: .45em; font-style: normal; font-weight: 600; }
.as-sitonuovo__btn em { background: #1E4D5C; color: #fff; }
.as-sitonuovo__btn span { box-shadow: inset 0 0 0 1.5px #1E4D5C; color: #1E4D5C; }
.as-sitonuovo .as-sitonuovo__fiducia { display: flex; align-items: center; gap: .55em; margin-top: 1.6em; font-size: .92em; color: #4A5F66; }
.as-sitonuovo__fiducia b { color: #13303A; }
.as-sitonuovo__stelle { display: inline-block; flex: 0 0 auto; width: 6.2em; height: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cpath d='M10.0 1.0 L12.4 7.1 L18.9 7.5 L13.9 11.7 L15.5 18.0 L10.0 14.5 L4.5 18.0 L6.1 11.7 L1.1 7.5 L7.6 7.1Z M32.0 1.0 L34.4 7.1 L40.9 7.5 L35.9 11.7 L37.5 18.0 L32.0 14.5 L26.5 18.0 L28.1 11.7 L23.1 7.5 L29.6 7.1Z M54.0 1.0 L56.4 7.1 L62.9 7.5 L57.9 11.7 L59.5 18.0 L54.0 14.5 L48.5 18.0 L50.1 11.7 L45.1 7.5 L51.6 7.1Z M76.0 1.0 L78.4 7.1 L84.9 7.5 L79.9 11.7 L81.5 18.0 L76.0 14.5 L70.5 18.0 L72.1 11.7 L67.1 7.5 L73.6 7.1Z M98.0 1.0 L100.4 7.1 L106.9 7.5 L101.9 11.7 L103.5 18.0 L98.0 14.5 L92.5 18.0 L94.1 11.7 L89.1 7.5 L95.6 7.1Z' fill='%231F2A2E'/%3E%3C/svg%3E") left center / contain no-repeat; } /* stelle scure, mai gialle (regola 3) */
.as-sitonuovo__eroe img { display: block; width: 100%; height: 25em; object-fit: cover; border-radius: .8em; }
.as-sitonuovo__lavori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; padding: 0 3em; }
.as-sitonuovo .as-sitonuovo__lavori p { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; font: 400 1.6em/1.2 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.as-sitonuovo__lavori p span { font: 600 .55em/1 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: #1E4D5C; }
.as-sitonuovo__lavori > span { height: 12em; border-radius: .7em; background: #DDE3E5 center / cover no-repeat; }
/* ── [mockup-browser] fine del prima e dopo da computer ── */

/* ── [mockup-browser] GOOGLE, LE AI E I NUMERI · v0.38 · 29/09/2026 ────────────
   Da computer: Google a sinistra (non si tocca: è il metro delle altre), a destra
   l'assistente (di un collega, inc/demo-app.php) sopra e il Rendimento sotto, alti
   insieme quanto Google. Da telefono (sotto gli 820px): UNA schermata alla volta, alta
   fissa, con le linguette sopra; girano da sole ogni 6s quando la sezione è in vista e
   si fermano al primo tocco (radio + label, senza JS: il tocco vince sull'animazione). */
.as-demo.as-demo--seogeo { display: grid; max-width: 1080px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: 0; background: transparent; box-shadow: none; }
.as-seogeo__schede { display: none; }
.as-seogeo__google { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.as-seogeo__google .as-demo { max-width: none; min-height: 100%; align-content: start; } /* min-height, non height: le schede di Google (overflow hidden) non si schiacciano a zero */
.as-seogeo__ai { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.as-seogeo__ai .as-demo.as-demo--ai { max-width: none; height: 100%; }
.as-seogeo__ai .as-ai { height: 100%; align-content: start; }
/* Il Rendimento, come nella console dei webmaster: filtri, quattro tessere con la casella
   (clic blu, impressioni viola accese), due linee dentellate un punto al giorno su due
   assi, le date, e il riquadro del giorno sotto il mouse che passa da agosto a settembre. */
.as-gsc { container: as-gsc / inline-size; grid-column: 2; grid-row: 2; min-width: 0; display: grid; gap: 12px; padding: 16px 16px 14px; border-radius: 18px; background: #fff; box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .35); font-family: Roboto, 'Segoe UI', system-ui, Arial, 'Helvetica Neue', sans-serif; color: #202124; }
.as-gsc p { margin: 0; }
.as-gsc__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; }
.as-gsc__testa b { font-weight: 400; }
.as-gsc__testa span { font-size: 11.5px; color: #5F6368; }
.as-gsc__filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.as-gsc__filtri span { padding: 4px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #747775; font-size: 12px; line-height: 1.3; color: #444746; }
.as-gsc__filtri .is-piu { box-shadow: none; font-weight: 500; color: #0B57D0; }
.as-gsc__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px #DADCE0; }
.as-gsc__tiles p { display: grid; align-content: start; gap: 2px; padding: 10px 10px 12px; font-size: 11.5px; line-height: 1.25; color: #5F6368; }
.as-gsc__tiles p + p { box-shadow: inset 1px 0 0 #DADCE0; }
.as-gsc__tiles i { width: 14px; height: 14px; margin-bottom: 5px; border-radius: 2px; box-shadow: inset 0 0 0 1.6px #5F6368; }
.as-gsc__tiles .is-on i { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5' fill='none' stroke='%23202124' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; box-shadow: none; }
.as-gsc__tiles .is-ctr i { box-shadow: inset 0 0 0 1.6px #00897B; }
.as-gsc__tiles .is-pos i { box-shadow: inset 0 0 0 1.6px #E8710A; }
.as-gsc__tiles b { margin-top: 3px; font-size: 21px; font-weight: 400; line-height: 1.1; color: #202124; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-gsc__tiles .is-clic.is-on { background: #4285F4; }
.as-gsc__tiles .is-imp.is-on { background: #5E35B1; }
.as-gsc__tiles .is-on, .as-gsc__tiles .is-on b { color: #fff; }
.as-gsc__tiles .is-on + .is-on, .as-gsc__tiles .is-on + p { box-shadow: none; }
.as-gsc__grafico { display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px; grid-template-rows: 150px auto; column-gap: 8px; margin-top: 22px; }
.as-gsc__asse { position: relative; font-size: 10.5px; line-height: 1; color: #5F6368; }
.as-gsc__asse span { position: absolute; right: 0; transform: translateY(-50%); }
.as-gsc__asse.is-dx span { left: 0; right: auto; }
.as-gsc__asse span:nth-child(1) { top: -21px; transform: none; }
.as-gsc__asse span:nth-child(2) { top: 0; }
.as-gsc__asse span:nth-child(3) { top: 33.3%; }
.as-gsc__asse span:nth-child(4) { top: 66.7%; }
.as-gsc__asse span:nth-child(5) { top: 100%; }
.as-gsc__area { position: relative; min-width: 0; }
.as-gsc__area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.as-gsc__griglia { fill: none; stroke: #E8EAED; stroke-width: 1; vector-effect: non-scaling-stroke; }
.as-gsc__linea { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.as-gsc__linea.is-clic { stroke: #4285F4; }
.as-gsc__linea.is-imp { stroke: #5E35B1; }
.as-gsc .as-gsc__date { grid-column: 2; display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: #5F6368; }
.as-gsc__cursore { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: #9AA0A6; opacity: 0; }
.as-gsc__cursore.is-b { opacity: 1; }
.as-gsc__cursore > i { position: absolute; left: -4px; top: var(--y); width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.as-gsc__cursore i.is-clic { background: #4285F4; }
.as-gsc__cursore i.is-imp { background: #5E35B1; }
.as-gsc__tip { position: absolute; right: 12px; top: 2px; display: grid; gap: 4px; min-width: 156px; padding: 8px 10px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); font-size: 11.5px; font-weight: 500; color: #202124; white-space: nowrap; }
.as-gsc__tip span { display: flex; align-items: center; gap: 6px; font-weight: 400; color: #3C4043; }
.as-gsc__tip span b { margin-left: auto; padding-left: 14px; font-weight: 500; color: #202124; }
.as-gsc__tip span i { width: 8px; height: 8px; border-radius: 50%; }
.as-demo-vivo .as-gsc__cursore.is-a { animation: as-gsc-a 10s -5.5s infinite both; }
.as-demo-vivo .as-gsc__cursore.is-b { animation: as-gsc-b 10s -5.5s infinite both; }
@container as-gsc (max-width: 459px) {
	.as-gsc__tiles p { padding: 9px 8px 10px; font-size: 11px; }
	.as-gsc__tiles b { font-size: 18px; }
}
@keyframes as-gsc-a { 0%, 45% { opacity: 1; } 49%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes as-gsc-b { 0%, 45% { opacity: 0; } 49%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 819px) {
	.as-demo.as-demo--seogeo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 560px; gap: 14px; max-width: 440px; margin-inline: auto; }
	.as-seogeo__schede { grid-row: 1; display: flex; margin: 0; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .06); }
	.as-seogeo__schede label { flex: 1; display: grid; place-items: center; min-height: 44px; border-radius: 10px; font: 500 15px/1.1 var(--as-font); color: var(--as-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
	.as-seogeo__schede label:active { opacity: .6; }
	.as-seogeo__google, .as-seogeo__ai, .as-gsc { grid-column: 1; grid-row: 2; height: 560px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
	.as-seogeo__google { opacity: 1; visibility: visible; }
	.as-seogeo__schede label:nth-child(1) { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
	.as-seogeo__r.is-2:checked ~ .as-seogeo__google, .as-seogeo__r.is-3:checked ~ .as-seogeo__google { opacity: 0; visibility: hidden; }
	.as-seogeo__r.is-2:checked ~ .as-seogeo__ai, .as-seogeo__r.is-3:checked ~ .as-gsc { opacity: 1; visibility: visible; }
	.as-seogeo__r.is-2:checked ~ .as-seogeo__schede label:nth-child(1), .as-seogeo__r.is-3:checked ~ .as-seogeo__schede label:nth-child(1) { background: transparent; color: var(--as-muted); box-shadow: none; }
	.as-seogeo__r.is-2:checked ~ .as-seogeo__schede label:nth-child(2), .as-seogeo__r.is-3:checked ~ .as-seogeo__schede label:nth-child(3) { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-seogeo__google { animation: as-sg-1 18s infinite; }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-seogeo__ai { animation: as-sg-2 18s infinite; }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-gsc { animation: as-sg-3 18s infinite; }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-seogeo__schede label:nth-child(1) { animation: as-sgl-1 18s infinite; }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-seogeo__schede label:nth-child(2) { animation: as-sgl-2 18s infinite; }
	.as-demo-vivo .as-demo--seogeo:not(:has(.as-seogeo__r:checked)) .as-seogeo__schede label:nth-child(3) { animation: as-sgl-3 18s infinite; }
	/* Google da telefono: il logo sopra, la casella a tutta larghezza, la ricerca intera */
	.as-seogeo__google .as-serp__testa { flex-direction: column; align-items: stretch; gap: 12px; }
	.as-seogeo__google .as-serp__logo { text-align: center; font-size: 24px; }
	.as-seogeo__google .as-serp__x, .as-seogeo__google .as-serp__sep, .as-seogeo__google .as-serp__mic { display: none; }
	.as-seogeo__google .as-demo.as-serp { padding-inline: 16px; }
	.as-seogeo__ai .as-demo--ai, .as-seogeo__ai .as-ai { height: 100%; }
	.as-seogeo__ai .is-compatto .as-ai { --u: .85px; } /* v0.39: da telefono i 13 punti fanno 11px veri (con .82 erano 10,6) */
	.as-gsc { align-content: start; }
	.as-gsc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-gsc__tiles p:nth-child(3) { box-shadow: inset 0 1px 0 #DADCE0; }
	.as-gsc__tiles p:nth-child(4) { box-shadow: inset 1px 1px 0 #DADCE0; }
	.as-gsc__grafico { grid-template-rows: 196px auto; } /* il grafico riempie la scheda alta 560 */
	.as-gsc__date span:nth-child(2), .as-gsc__date span:nth-child(4) { display: none; }
}
@keyframes as-sg-1 { 0%, 31% { opacity: 1; visibility: visible; } 34%, 97% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes as-sg-2 { 0%, 31% { opacity: 0; visibility: hidden; } 34%, 64% { opacity: 1; visibility: visible; } 67%, 100% { opacity: 0; visibility: hidden; } }
@keyframes as-sg-3 { 0%, 64% { opacity: 0; visibility: hidden; } 67%, 97% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes as-sgl-1 { 0%, 31% { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } 34%, 97% { background: transparent; color: var(--as-muted); box-shadow: none; } 100% { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } }
@keyframes as-sgl-2 { 0%, 31% { background: transparent; color: var(--as-muted); box-shadow: none; } 34%, 64% { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } 67%, 100% { background: transparent; color: var(--as-muted); box-shadow: none; } }
@keyframes as-sgl-3 { 0%, 64% { background: transparent; color: var(--as-muted); box-shadow: none; } 67%, 97% { background: #fff; color: var(--as-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } 100% { background: transparent; color: var(--as-muted); box-shadow: none; } }
/* ── [mockup-browser] fine di Google, le AI e i numeri ── */

@media (max-width: 800px) {
	.as-demo.as-demo--chatbot { flex-direction: column; align-items: center; gap: 18px; }
}

/* ── [mockup-browser] IL PRIMA E DOPO DAL TELEFONO · v0.38 ────────────────────
   Sotto gli 820px la finestra lascia il posto a UN telefono diviso in due: a sinistra il
   sito del 2009 com'è davvero su un telefono (la pagina da 900px rimpicciolita: il testo
   minuscolo è l'argomento), a destra il sito nuovo per il telefono; ognuno con la sua
   barra di Safari («Non sicuro» e il lucchetto). Maniglia da 40px, si trascina col dito. */
.as-confronto__tel { display: none; }
@media (max-width: 819px) {
	.as-confronto__finestra { display: none; }
	.as-demo--confronto .as-confronto__tel { display: grid; font-size: 15.8px; } /* 19em = 300px di schermo */
}
.as-confronto__tel .as-confronto__schermo { position: absolute; inset: 0; aspect-ratio: auto; container-type: normal; cursor: default; }
.as-confronto__tel .as-confronto__vecchio { background: #fff; }
.as-confronto__tel .as-vecchio, .as-confronto__tel .as-nuovo { top: calc(58 * var(--u)); }
.as-confronto__tel .as-nuovo__scorre { padding-bottom: calc(96 * var(--u)); }
.as-confronto__tel .as-confronto__maniglia { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.as-confronto__tel .as-confronto__eti { top: calc(118 * var(--u)); padding: 3px 8px; font: 600 12px/1.25 -apple-system, 'SF Pro Text', system-ui, Arial, sans-serif; }
.as-confronto__tel .as-confronto__eti.is-prima { left: 10px; }
.as-confronto__tel .as-confronto__eti.is-dopo { right: 10px; }
.as-safari { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(24 * var(--u)); z-index: 3; display: flex; align-items: center; gap: 8px; height: calc(50 * var(--u)); padding: 0 14px; border-radius: 999px; background: rgba(250, 250, 250, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2px 14px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .1); font: 500 12.5px/1 -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; color: #1C1C1E; white-space: nowrap; }
.as-safari__aa { font-weight: 600; }
.as-safari__url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.as-safari .as-uic { width: 15px; height: 15px; }
.as-safari.is-nonsicuro .as-safari__url { color: #3A3A3C; }
/* ── [mockup-browser] fine del prima e dopo dal telefono ── */

/* ══ [mockup-servizi] LE SCHERMATE DEI SERVIZI · v0.38 · 29/09/2026 ════════════════
   Rami, 28/09: «i mockup rendili il più possibile reali, ora sono AI slop». Il metro è la
   finta ricerca Google: UNA interfaccia vera per schermata, rifatta con le sue misure,
   in px veri (computer) o in punti veri del telefono (--u, vedi la cornice), coi font
   di sistema e i colori dell'app, mai Archivo né l'arancio dello studio.
   - sitoweb: la home dell'impresa in Chrome + lo stesso sito in Safari sul telefono.
   - software: il modulo preventivi di un gestionale edile (.as-pv) · telefono .as-pvm.
   - cruscotto: il gestionale di un distributore (.as-gs) · telefono del magazzino .as-gsm.
   - negozio (in «9 · il negozio»): la scheda prodotto di una bottega (.as-bt).
   Il patto di sempre: il ciclo gira solo sotto .as-demo-vivo; ferma, ogni schermata è
   piena e mostra il momento «dopo». Da telefono (< 700) ogni prova è la versione telefono
   dell'app, larga fino a 340px, testo mai sotto gli 11px reali (14 punti e più). */

/* Le icone di linea delle app (arfia_demo_ico) */
.as-ico { display: block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Il dito che tocca: dentro il bottone, al centro */
.as-ps-tocco { position: absolute; left: 50%; top: 50%; z-index: 6; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u)); border-radius: 50%; background: rgba(60, 60, 60, .3); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; }
@keyframes as-ps-tocco { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }

/* Il «prima» e il «dopo» di un numero o di uno stato: uno sopra l'altro, fermo si vede il dopo */
:is(.as-pv, .as-pvm, .as-gs, .as-gsm, .as-bt, .as-bt__foglio) :has(> .is-prima) { display: inline-grid; }
:is(.as-pv, .as-pvm, .as-gs, .as-gsm, .as-bt, .as-bt__foglio) :has(> .is-prima) > :is(.is-prima, .is-dopo) { grid-area: 1 / 1; }
:is(.as-pv, .as-pvm, .as-gs, .as-gsm, .as-bt, .as-bt__foglio) .is-prima { opacity: 0; }

/* ── L'APP WEB DA COMPUTER (preventivi e gestionale): barra in alto, barra laterale ── */
.as-wa { position: relative; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; line-height: 1.35; letter-spacing: 0; color: #1F2328; background: #fff; font-variant-numeric: tabular-nums; }
.as-wa p { margin: 0; }
.as-wa__top { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; border-bottom: 1px solid #E6E8EB; }
.as-wa__marchio { flex: 0 0 170px; display: flex; align-items: center; gap: 9px; }
.as-wa__marchio i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #1E4D5C; color: #fff; font: italic 600 12px/1 Georgia, 'Times New Roman', serif; }
.as-wa__marchio.is-azienda i { background: #5B3A29; font: 700 11px/1 'Segoe UI', system-ui, Arial, sans-serif; letter-spacing: .02em; }
.as-wa__marchio b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.as-wa__cerca { flex: 1 1 auto; min-width: 0; max-width: 400px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 11px; border-radius: 8px; background: #F3F4F6; box-shadow: inset 0 0 0 1px #E5E7EB; color: #6B7280; }
.as-wa__cerca .as-ico { width: 16px; height: 16px; }
.as-wa__cerca span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-wa__cerca kbd { padding: 3px 6px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EB; font: 500 11px/1.2 inherit; color: #6B7280; }
.as-wa__scelta { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px 0 11px; border-radius: 8px; box-shadow: inset 0 0 0 1px #E0E3E7; font-weight: 500; white-space: nowrap; }
.as-wa__scelta .as-ico { width: 16px; height: 16px; color: #6B7280; }
.as-wa__azioni { margin-left: auto !important; display: flex; align-items: center; gap: 18px; }
.as-wa__campana { position: relative; color: #4B5563; }
.as-wa__campana .as-ico { width: 20px; height: 20px; }
.as-wa__campana i { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D93025; box-shadow: 0 0 0 2px #fff; color: #fff; font: 600 10px/16px 'Segoe UI', system-ui, Arial, sans-serif; font-style: normal; text-align: center; }
.as-wa__utente { display: flex; align-items: center; gap: 9px; }
.as-wa__utente > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font: 600 11px/1 'Segoe UI', system-ui, Arial, sans-serif; font-style: normal; }
.as-wa__utente > span { display: grid; font-size: 11.5px; line-height: 1.25; color: #6B7280; white-space: nowrap; }
.as-wa__utente b { font-size: 13px; font-weight: 600; color: #1F2328; }
.as-wa__corpo { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 540px; }
.as-wa__lato { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid #E6E8EB; background: #FAFAFB; }
.as-wa__lato p { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; font-weight: 500; color: #374151; }
.as-wa__lato .as-ico { color: #6B7280; }
.as-wa__lato p.is-on { background: #E6EDF7; color: #173A6B; }
.as-wa__lato p.is-on .as-ico { color: #173A6B; }
.as-wa__lato em { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 10px; background: #ECEEF1; font: 600 11px/16px 'Segoe UI', system-ui, Arial, sans-serif; font-style: normal; text-align: center; color: #4B5563; }
.as-wa__lato p.is-on em { background: #fff; color: #173A6B; }
.as-wa__lato em.is-rosso { background: #FCE8E6; color: #B3261E; }
.as-wa__lato-fondo { margin-top: auto !important; }
.as-wa__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 8px; background: #1F5FAD; color: #fff; font-weight: 600; white-space: nowrap; }
.as-wa__btn.is-sec { background: #fff; box-shadow: inset 0 0 0 1px #D0D5DB; color: #1F2328; }
.as-wa__btn .as-ico { width: 16px; height: 16px; }
.as-wa__toast { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border-radius: 10px; background: #1F2328; color: #fff; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
.as-wa__toast .as-ico { width: 18px; height: 18px; color: #86D6A4; }
/* Le finestre stanno in una colonna larga: sotto i 1060px la finestra si rimpicciolisce intera (zoom), non si stringe. */
.as-demo--software, .as-demo--cruscotto { container: as-ps / inline-size; }
@container as-ps (max-width: 1060px) { .as-pv__pc, .as-gs__pc, .as-gs__tel { zoom: .86; } }
@container as-ps (max-width: 900px) { .as-pv__pc, .as-gs__pc, .as-gs__tel { zoom: .74; } }
@container as-ps (max-width: 780px) { .as-pv__pc, .as-gs__pc, .as-gs__tel { zoom: .62; } }
/* Da telefono i telefoni delle prove sono larghi quanto la colonna (fino a 340px): 14 punti = 11,7px reali a 390. */
.as-pv__tel, .as-gs__tel { --tel-w: 270px; font-size: calc(var(--tel-w) / 19); }

/* Il modulo del sito, in fondo alla pagina (arfia_demo_nuovo( true )) */
.as-nuovo__modulo { display: grid; gap: .6em; margin-top: .9em; padding: 1.1em 1em; border-radius: .6em; background: #F1F5F6; }
.as-nuovo__modulo p { margin: 0; }
.as-nuovo__modulo-h { font: 400 1.25em/1.1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; color: #13303A; }
.as-nuovo__campo { display: grid; gap: .3em; font-size: .8em; line-height: 1.35; color: #13303A; }
.as-nuovo__campo span { font-size: .9em; font-weight: 600; color: #4A5F66; }
.as-nuovo__campo em { display: block; padding: .6em .75em; border-radius: .45em; background: #fff; box-shadow: inset 0 0 0 1px #C3CED2; font-style: normal; }
.as-nuovo__campo.is-alto em { min-height: 4.4em; box-shadow: inset 0 0 0 2px #1E4D5C; }
.as-nuovo__invia { position: relative; overflow: visible; }
@keyframes as-ps-eti { 0%, 38% { opacity: 0; } 42.5%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ── SOFTWARE: il modulo preventivi di prima (Chrome animato + telefono) è uscito con la v0.89: ora è il preventivatore nel
   MacBook, blocco «IL PREVENTIVATORE» in fondo al file. Il vecchio CSS sta nel git fino alla v0.88.3. ── */

/* ── CRUSCOTTO: il gestionale del distributore, e il telefono del magazzino ── */
/* (i due keyframes che il cruscotto prendeva in prestito dal modulo preventivi) */
@keyframes as-pv-prima { 0%, 19% { opacity: 1; } 22%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes as-pv-dopo { 0%, 19% { opacity: 0; } 22%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
.as-demo.as-demo--cruscotto { position: relative; display: block; max-width: 1180px; padding: 0 0 96px; background: transparent; box-shadow: none; }
.as-gs__pc { margin-right: 150px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .4); }
.as-gs__tel { position: absolute; right: 0; bottom: 0; z-index: 3; --tel-w: 262px; }
.as-gs__main { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 16px 126px 20px 20px; }
.as-gs__titolo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-gs__titolo > p:first-child { display: flex; align-items: baseline; gap: 12px; }
.as-gs__titolo b { font-size: 19px; font-weight: 600; }
.as-gs__titolo span { font-size: 12.5px; color: #6B7280; }
.as-gs__azioni { display: flex; gap: 8px; }
.as-gs__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.as-gs__kpi > p { display: grid; align-content: start; gap: 3px; padding: 11px 13px; border: 1px solid #E6E8EB; border-radius: 9px; }
.as-gs__kpi > p > span { font-size: 12px; color: #6B7280; }
.as-gs__kpi > p > b { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.as-gs__kpi small { font-size: 11.5px; color: #6B7280; }
.as-gs__kpi small.is-su { color: #17803D; }
.as-gs__kpi small.is-su::before { content: "▲ "; font-size: .8em; }
.as-gs__grafico svg { display: block; width: 100%; height: 42px; margin-top: 6px; }
.as-gs__grafico rect { fill: #C8D5E8; }
.as-gs__grafico rect.is-oggi { fill: #1F5FAD; }
.as-gs__schede { display: flex; gap: 2px; margin-bottom: -6px !important; border-bottom: 1px solid #E6E8EB; }
.as-gs__schede > span { padding: 7px 11px 9px; font-weight: 500; color: #4B5563; }
.as-gs__schede > span.is-on { color: #1F5FAD; box-shadow: inset 0 -2px 0 #1F5FAD; }
.as-gs__schede em { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #ECEEF1; font-size: 11px; font-style: normal; color: #4B5563; }
.as-gs__tab { border: 1px solid #E6E8EB; border-radius: 9px; overflow: hidden; }
.as-gs__th, .as-gs__tr { display: grid; grid-template-columns: 42px minmax(0, 1.05fr) minmax(0, 1.5fr) 80px 70px 100px; align-items: center; column-gap: 12px; padding: 0 12px; }
.as-gs__th { height: 32px; border-bottom: 1px solid #E6E8EB; background: #F7F8FA; font-size: 11.5px; font-weight: 600; color: #6B7280; }
.as-gs__tr { min-height: 48px; border-bottom: 1px solid #EEF0F2; font-size: 12.5px; }
.as-gs__tr:last-child { border-bottom: 0; }
.as-gs__th > :nth-child(5), .as-gs__tr > :nth-child(5) { text-align: right; }
.as-gs__tr > :first-child { font-weight: 600; color: #1F5FAD; }
.as-gs__tr > :nth-child(2) { display: grid; min-width: 0; font-size: 12px; color: #6B7280; }
.as-gs__tr > :nth-child(2) b { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: #1F2328; }
.as-gs__tr > :nth-child(3) { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; white-space: nowrap; color: #374151; }
.as-gs__art-t { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; } /* v0.39: il testo lungo finisce coi puntini, non tagliato a metà */
.as-gs__tr > :nth-child(4) { color: #4B5563; }
.as-gs__mini { flex: 0 0 auto; display: flex; }
.as-gs__mini i { width: 26px; height: 26px; border-radius: 6px; background: #EEE center / cover no-repeat; box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px #E1E4E8; }
.as-gs__mini i + i { margin-left: -8px; }
.as-gs__tr em, .as-gsm em { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.as-gs em.is-nuovo, .as-gsm em.is-nuovo { background: #E3EDFB; color: #1F5FAD; }
.as-gs em.is-prep, .as-gsm em.is-prep { background: #EFE8FA; color: #5E3A99; }
.as-gs em.is-via { background: #DFF2EE; color: #0F6E66; }
.as-gs em.is-ok, .as-gsm em.is-ok { background: #E4F3E9; color: #17803D; }
.as-gs__nuovo { min-height: 0; max-height: 64px; overflow: hidden; }
.as-gs__toast { left: 208px; bottom: 18px; }
.as-gs__toast .as-ico { color: #fff; }
/* il giro (12 s): entra l'ordine 2043, i numeri salgono, sul telefono scende in cima */
.as-demo-vivo .as-demo--cruscotto .as-gs__nuovo { animation: as-gs-riga 12s infinite; }
.as-demo-vivo .as-demo--cruscotto .is-prima { animation: as-pv-prima 12s infinite; }
.as-demo-vivo .as-demo--cruscotto .is-dopo { animation: as-pv-dopo 12s infinite; }
.as-demo-vivo .as-demo--cruscotto .as-gs__toast { animation: as-gs-toast 12s infinite; }
.as-demo-vivo .as-demo--cruscotto .as-gsm__nuovo { animation: as-gsm-nuovo 12s infinite; }
@keyframes as-gs-riga { 0%, 16% { max-height: 0; opacity: 0; border-bottom-width: 0; background: #EAF2FD; } 21% { max-height: 64px; opacity: 1; border-bottom-width: 1px; background: #EAF2FD; } 50%, 93% { max-height: 64px; opacity: 1; border-bottom-width: 1px; background: #fff; } 98%, 100% { max-height: 0; opacity: 0; border-bottom-width: 0; background: #fff; } }
@keyframes as-gs-toast { 0%, 18% { opacity: 0; transform: translateY(-10px); } 21%, 52% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes as-gsm-nuovo { 0%, 19% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(-10 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #1F5FAD; } 25% { max-height: calc(200 * var(--u)); opacity: 1; padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); margin-bottom: 0; box-shadow: 0 0 0 calc(2 * var(--u)) #1F5FAD; } 55%, 93% { max-height: calc(200 * var(--u)); opacity: 1; padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); margin-bottom: 0; box-shadow: 0 0 0 0 rgba(31, 95, 173, 0); } 98%, 100% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(-10 * var(--u)); box-shadow: none; } }
/* Il telefono del magazzino */
.as-gsm { position: absolute; inset: 0; overflow: hidden; background: #F2F2F7; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; font-size: calc(17 * var(--u)); line-height: 1.3; letter-spacing: -.01em; color: #000; font-variant-numeric: tabular-nums; }
.as-gsm p { margin: 0; }
.as-gsm__nav { display: flex; align-items: center; justify-content: space-between; height: calc(36 * var(--u)); margin-top: calc(56 * var(--u)) !important; padding: 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); color: #6C6C70; }
.as-gsm__nav b { font-weight: 600; color: #5B3A29; }
.as-gsm__h { padding: 0 calc(16 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.as-gsm__seg { display: grid; grid-template-columns: 1fr 1fr; margin: calc(10 * var(--u)) calc(16 * var(--u)) 0 !important; padding: calc(2 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(118, 118, 128, .12); }
.as-gsm__seg > span { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; }
.as-gsm__seg > span.is-on { background: #fff; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.as-gsm__seg em { font-style: normal; font-weight: 400; color: #6C6C70; }
.as-gsm__lista { display: grid; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; }
.as-gsm__ordine { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; overflow: hidden; }
.as-gsm__nuovo { max-height: calc(200 * var(--u)); }
.as-gsm__testa { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.as-gsm__testa b { overflow: hidden; font-size: calc(17 * var(--u)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.as-gsm em { padding: calc(3 * var(--u)) calc(9 * var(--u)); font-size: calc(14 * var(--u)); }
.as-gsm__quando { margin-top: calc(-5 * var(--u)) !important; font-size: calc(14.5 * var(--u)); color: #6C6C70; }
.as-gsm__art { display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); }
.as-gsm__art i { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); background: #EEE center / cover no-repeat; }
.as-gsm__art span { display: grid; min-width: 0; font-size: calc(14 * var(--u)); color: #6C6C70; }
.as-gsm__art b { overflow: hidden; font-size: calc(16 * var(--u)); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: #000; }
.as-gsm__art strong { font-size: calc(17 * var(--u)); font-weight: 600; }
.as-gsm__art.is-fatto { opacity: .45; }
.as-gsm__art.is-fatto b { text-decoration: line-through; }
.as-gsm__schede { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(7 * var(--u)) calc(4 * var(--u)) calc(var(--sa-giu, 30 * var(--u)) + 2 * var(--u)); /* v0.39: le voci sopra la barra di chiusura */ background: rgba(249, 249, 251, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -.5px 0 rgba(60, 60, 67, .29); }
.as-gsm__schede > span { display: grid; justify-items: center; gap: calc(2 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: 0; color: #8E8E93; }
.as-gsm__schede > span.is-on { color: #5B3A29; }
.as-gsm__schede .as-ico { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }

/* Il tablet e il telefono */
@media (max-width: 699px) {
	.as-pv__tel, .as-gs__tel { --tel-w: min(340px, calc(100vw - 58px)); }
	.as-demo.as-demo--software, .as-demo.as-demo--cruscotto { display: grid; justify-items: center; padding: 0 0 8px; }
	.as-pv__pc, .as-gs__pc { display: none; }
	.as-pv__tel { display: grid; }
	.as-gs__tel { position: relative; right: auto; bottom: auto; }
	.as-gs__tel { zoom: 1; }
	/* la mail per il titolare scende sopra la parte bassa del telefono: niente spazio vuoto che aspetta */
}
/* Nei casi di Problemi & Soluzioni (chiave «gestionale»): da telefono il telefono del magazzino, nella colonna del caso */
@media (max-width: 699px) {
	/* 29/09: il magazzino e il negozio larghi quanto la colonna, come le altre app dei casi
	   (76 = i margini della pagina e l'imbottitura della scatola grigia; 1.04 come in «prenota»):
	   a 280 px il testo dentro scendeva a 9 px */
	.as-caso__demo .as-gs__tel, .as-caso__demo .as-demo--app.as-demo--negozio { --tel-w: min(340px, calc((100vw - 76px) / 1.04)); }
	.as-caso__demo .as-demo.as-demo--cruscotto { zoom: 1; } /* lo zoom .6 dei casi vale per la finestra da computer */
	/* v0.39: nei casi lo schermo è di 302 px: niente testo sotto gli 11px veri (14,5 punti). */
	.as-caso__demo :is(.as-gsm em, .as-gsm__art span, .as-gsm__seg em, .as-gsm__schede > span, .as-bt__avviso, .as-bt__voto, .as-bt__stelle) { font-size: calc(14.5 * var(--u)); }
	.as-caso__demo .as-bt__borsa > i { min-width: calc(21 * var(--u)); height: calc(21 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(21 * var(--u)); }
}
/* ══ [mockup-servizi] fine delle schermate dei servizi ══ */

/* ══ LE SCHERMATE VERE (v0.37, inc/demo-app.php) ════════════════════════════
   Rami, 28/09: «rendile il più realistiche possibile, come la ricerca Google».
   App vere dentro telefoni e browser, con foto d'archivio. Stesso patto: il
   ciclo gira solo sotto .as-demo-vivo; fermo, ogni schermata è intera. */
.as-demo.as-demo--app { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; max-width: none; padding: 0; background: transparent; box-shadow: none; }
/* v0.38 (cornice): la taglia del telefono delle app è una larghezza, --tel-w, che chi
   ospita la schermata può cambiare (19em = lo schermo). Nei casi, da computer, segue
   l'altezza della finestra (il pannello resta dentro lo schermo); da telefono la dà il
   contenitore (vedi le query «as-app» più sotto: mai più largo della colonna). */
.as-demo--app .as-app-tel { flex: 0 0 auto; font-size: calc(var(--tel-w, 272px) / 19); }
@media (min-width: 700px) {
	.as-prova__demo .as-demo--app { --tel-w: 300px; }
	/* v0.38 [mockup-assistente-chat]: 390 = il pannello fermo a 110 px, la soluzione e il
	   testo sopra (~215), la scatola grigia (40): a 900 d'altezza il telefono ci sta intero. */
	/* v0.39: il telefono del kit ha il telaio dentro la sua misura (42,82em per 19em di schermo,
	   prima 41,19em + la cornice disegnata fuori): .4437 = 19 / 42,82, così resta alto come prima. */
	.as-caso__demo .as-demo--app { --tel-w: clamp(226px, calc((100vh - 390px) * .4437), 282px); }
}
@media (max-width: 699px) {
	/* 110 = i margini della pagina e l'imbottitura della scatola grigia, più la cornice */
	.as-demo--app { --tel-w: min(312px, calc(100vw - 110px)); }
}

/* ── LA NOTIFICA (v0.38, 29/09, mockup-telefono-app) ──────────────────────────
   Il banner di iOS di oggi, in misure vere (px del sito, non scalati): icona 38
   con gli angoli delle app, titolo 15 semibold con l'ora a destra («ora»), testo
   15/20 su due righe al massimo, vetro rgba(255,255,255,.75) + sfocatura, raggio 22.
   Niente intestazione maiuscola. Le icone sono quelle delle app dei clienti, coi loghi
   di inc/loghi.php: le richieste della villa (arco e cipresso su bordeaux), la bottega
   (la brocca su terracotta), la posta, il pannello. */
.as-notifica-box { flex: 0 1 280px; min-width: 0; display: grid; align-content: center; gap: 10px; }
.as-notifica-box p { margin: 0; }
.as-notifica__eti { font-size: 13px; line-height: 1.35; color: var(--as-muted); }
.as-notifica { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 14px 11px 11px; border-radius: 22px; background: rgba(250, 250, 252, .8); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .38), 0 0 0 .5px rgba(0, 0, 0, .06); font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; color: #000; text-align: left; }
.as-notifica__corpo { min-width: 0; }
.as-notifica__app { position: relative; width: 38px; height: 38px; border-radius: 9px; background: #1C1C1E; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.as-notifica__app::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
/* Le richieste di Villa Castelmora: il suo segno bianco su bordeaux (il nome chiamato 'calendario' resta per chi la usa già). */
.as-notifica__app--calendario { background: linear-gradient(160deg, #86303F, #5E1A26); }
.as-notifica__app--calendario::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 31.5V18.5a9 9 0 0 1 18 0v13M7.5 31.5h25' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 12.5c-2.7 4.3-3.3 10.6-1 16.5h2c2.3-5.9 1.7-12.2-1-16.5z' fill='white'/%3E%3C/svg%3E") center / 86% no-repeat; }
.as-notifica__app--negozio { background: linear-gradient(160deg, #94573F, #6A3A28); }
.as-notifica__app--negozio::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 9.5h8M17 9.5c0 3.4-4.8 5.2-4.8 11.6 0 5.4 3.4 9.4 7.8 9.4s7.8-4 7.8-9.4C27.8 14.7 23 12.9 23 9.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.9 20.5h14.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 86% no-repeat; }
.as-notifica__app--posta { background: linear-gradient(#4AA3F8, #1E6FE3) ; }
.as-notifica__app--posta::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12.5' rx='2.2' fill='white'/%3E%3Cpath d='M3.6 7.2 12 13.4l8.4-6.2' fill='none' stroke='%231E6FE3' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 66% no-repeat; }
.as-notifica__app--pannello { background: linear-gradient(160deg, #3A3A3C, #1C1C1E); }
.as-notifica__app--pannello::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.6' fill-opacity='.55'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.6' fill-opacity='.55'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") center / 60% no-repeat; }
.as-notifica__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.as-notifica__titolo { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.012em; }
.as-notifica__testa span { flex: 0 0 auto; font-size: 13px; line-height: 20px; color: rgba(60, 60, 67, .6); }
.as-notifica__testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 20px; letter-spacing: -.012em; color: #000; }
/* La SCHERMATA DI BLOCCO di chi riceve ($opz['blocco']): la parte alta di un telefono,
   sfondo fotografico (colline nella nebbia, fredde), data, ora grande, la pila. Sfuma in
   basso: è un ritaglio, non un telefono più corto. */
/* v0.39: il telefono è l'iPhone del kit, largo quanto la scatola (20,51em = il corpo intero),
   ritagliato poco sotto la pila; la schermata sta nelle zone sicure del kit. I testi restano
   in px del sito (più grandi del vero: si leggono anche da telefono). */
.as-notifica-box--blocco { flex-basis: 276px; container-type: inline-size; }
.as-blocco-tel { font-size: calc(100cqw / 20.51); height: calc(222px + 4em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.as-blocco { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; padding: calc(var(--sa-su) + 2px) 8px 0; background: #5B6670 center 40% / cover no-repeat; color: #fff; }
.as-blocco::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.as-blocco > * { position: relative; z-index: 1; }
.as-blocco__data { font: 600 15px/1.2 -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; color: rgba(255, 255, 255, .92); }
.as-blocco__ora { margin-top: 2px !important; font: 600 64px/1 -apple-system, 'SF Pro Display', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; color: rgba(255, 255, 255, .96); text-shadow: 0 1px 12px rgba(0, 0, 0, .12); }
.as-blocco__pila { display: grid; width: 100%; margin-top: 22px; padding-bottom: 12px; }
.as-blocco__pila > .as-notifica { grid-area: 1 / 1; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 10px 12px 10px 10px; border-radius: 20px; background: rgba(245, 245, 247, .74); }
.as-blocco .as-notifica__app { width: 34px; height: 34px; border-radius: 8px; }
.as-blocco .as-notifica__app--calendario::after { font-size: 14px; }
.as-blocco .as-notifica__titolo, .as-blocco .as-notifica__testo { font-size: 14px; line-height: 18px; }
/* 29/09: sulla schermata di blocco stretta (da computer, accanto al telefono: 228-270 px)
   il titolo va a capo invece di finire coi puntini: si legge intero */
.as-blocco .as-notifica__titolo { white-space: normal; }
.as-blocco .as-notifica__testa span { font-size: 12px; line-height: 18px; }
.as-blocco__pila > .as-notifica.is-prima { z-index: 0; transform: translateY(12px) scale(.92); opacity: .6; }
/* Dietro, come su iOS, si vede solo il bordo della scheda: il suo testo non traspare. */
.as-blocco__pila > .as-notifica.is-prima > * { opacity: 0; }
.as-blocco__pila > .as-notifica.is-nuova { background: rgba(246, 246, 248, .86); }
.as-blocco__pila > .as-notifica.is-nuova { z-index: 1; }
/* Il banner nuovo scende dall'alto con la molla e spinge dietro quello di prima: la
   pila non è mai vuota. Solo sotto .as-demo-vivo; fermo, il nuovo è già arrivato.
   Il ciclo e il momento li dà la schermata che la ospita (--nt-dur, --nt-rit). */
.as-demo-vivo .as-blocco__pila > .as-notifica.is-nuova { animation: as-nt-arriva var(--nt-dur, 10s) var(--nt-rit, 0s) infinite both; }
.as-demo-vivo .as-blocco__pila > .as-notifica.is-prima { animation: as-nt-dietro var(--nt-dur, 10s) var(--nt-rit, 0s) infinite both; }
.as-demo-vivo .as-blocco__pila > .as-notifica.is-prima > * { animation: as-nt-dietro-testo var(--nt-dur, 10s) var(--nt-rit, 0s) infinite both; }
.as-demo-vivo .as-blocco-tel .as-disp__schermo { animation: as-nt-sveglia var(--nt-dur, 10s) var(--nt-rit, 0s) infinite both; }
/* Il giro: schermo spento (velato), arriva la notifica e lo sveglia, resta; poi lo
   schermo si rispegne e la notifica di prima torna davanti, senza doppioni a metà. */
@keyframes as-nt-arriva { 0%, 38% { opacity: 0; transform: translateY(-120%); } 42.5% { opacity: 1; transform: translateY(4%); } 45%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-30%) scale(.96); } }
@keyframes as-nt-dietro { 0%, 38% { opacity: 1; transform: none; } 43%, 95% { opacity: .6; transform: translateY(12px) scale(.92); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes as-nt-dietro-testo { 0%, 38% { opacity: 1; } 41%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes as-nt-sveglia { 0%, 37% { filter: brightness(.5); } 40%, 91% { filter: none; } 95%, 100% { filter: brightness(.5); } }
.as-demo-vivo .as-app-notifica { animation: as-app-notifica 9s infinite both; }
@keyframes as-app-notifica { 0%, 52% { opacity: 0; transform: translateY(-12px) scale(.97); } 56%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-12px) scale(.97); } }

/* Nei casi di Problemi & Soluzioni la schermata grande del gestionale entra rimpicciolita
   intera (zoom), invece di stringersi e andare a capo. */
.as-caso__demo .as-demo--cruscotto { zoom: .6; }

/* ── PRENOTA (v0.38, 29/09, mockup-telefono-app; v0.39 la villa) ────────────────
   La pagina «Verifica la tua data» del sito di Villa Castelmora in Safari, in punti
   veri (var(--u)): testo 17/15/14 come iOS, font di sistema per l'interfaccia e il
   serif della villa solo per il nome e il titolo. Colori della villa (bordeaux #6E1F2B),
   grigi di sistema, zero arancio di Studio Arfia. Scena: sabato 10 ottobre 2026, 18:12. */
.as-demo.as-demo--prenota { container: as-app / inline-size; flex-wrap: wrap; column-gap: 34px; --nt-dur: 10s; }
.as-demo--prenota .as-notifica-box { flex: 1 1 228px; max-width: 290px; }
.as-os { position: absolute; inset: 0; overflow: hidden; background: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; font-size: calc(17 * var(--u)); line-height: 1.3; letter-spacing: -.012em; color: #1C1C1E; }
.as-os p { margin: 0; }
.as-os::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: calc(150 * var(--u)); background: linear-gradient(rgba(255, 255, 255, 0), #fff calc(24 * var(--u))); pointer-events: none; }
.as-os__eroe { position: relative; height: calc(220 * var(--u)); background: #6A6C70 center 58% / cover no-repeat; }
.as-os__eroe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, 0)); }
.as-os__nav { position: absolute; top: calc(58 * var(--u)); left: 0; right: 0; height: calc(48 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)); color: #fff; }
.as-os__nav b { font: 400 calc(21 * var(--u))/1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .01em; }
.as-os__menu { width: calc(24 * var(--u)); height: calc(13 * var(--u)); background: linear-gradient(#fff 0 0) top / 100% calc(2 * var(--u)) no-repeat, linear-gradient(#fff 0 0) bottom / 100% calc(2 * var(--u)) no-repeat; }
.as-os__corpo { padding: calc(18 * var(--u)) calc(20 * var(--u)) 0; }
.as-os__h { font: 400 calc(29 * var(--u))/1.1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: 0; }
.as-os__dove { margin-top: calc(6 * var(--u)) !important; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: #6E6E73; }
.as-os__voto { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: #6E6E73; }
.as-os__voto b { font-weight: 600; color: #1C1C1E; }
.as-os__k { margin: calc(18 * var(--u)) 0 calc(8 * var(--u)) !important; font-size: calc(15 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); }
.as-os__k em { font-style: normal; font-weight: 400; color: #6E6E73; }
/* Le righe che scorrono col dito: escono dal bordo destro, l'ultima tagliata. */
.as-os__riga { display: flex; gap: calc(8 * var(--u)); margin-right: calc(-20 * var(--u)) !important; overflow: hidden; }
.as-os__ospiti span { flex: 0 0 auto; display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; font-size: calc(17 * var(--u)); }
.as-os__ospiti span.is-on { background: #6E1F2B; color: #fff; box-shadow: none; font-weight: 600; }
.as-os__giorni span { flex: 0 0 auto; display: grid; align-content: center; justify-items: center; gap: calc(1 * var(--u)); width: calc(58 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; font-size: calc(19 * var(--u)); font-weight: 600; line-height: 1.1; }
.as-os__giorni small { font-size: calc(15 * var(--u)); font-weight: 400; color: #6E6E73; }
.as-os__giorni span.is-on { background: #6E1F2B; color: #fff; box-shadow: none; }
.as-os__giorni span.is-on small { color: rgba(255, 255, 255, .82); }
.as-os__giorni span.is-chiuso, .as-os__giorni span.is-chiuso small { background: #F2F2F7; box-shadow: none; color: #C7C7CC; }
/* v0.39 (la villa): sotto il numero lo stato della data, e la data in opzione tratteggiata. */
.as-os__giorni i { font-size: calc(10.5 * var(--u)); font-style: normal; font-weight: 500; line-height: 1.2; letter-spacing: .01em; color: #2E7A4B; }
.as-os__giorni span.is-on i { color: rgba(255, 255, 255, .85); }
.as-os__giorni span.is-chiuso i { color: #C7C7CC; }
.as-os__giorni span.is-opzione { box-shadow: none; outline: calc(1.2 * var(--u)) dashed #AEAEB2; outline-offset: calc(-1.2 * var(--u)); }
.as-os__giorni span.is-opzione i { color: #8E8E93; }
/* Evento e invitati: due campi a tendina, alti quanto la fila che c'era prima (i tocchi restano al loro posto). */
.as-os__scelte { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin-right: 0 !important; }
.as-os__scelte span { position: relative; display: grid; align-content: center; gap: calc(1 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1.1; }
.as-os__scelte small { font-size: calc(11 * var(--u)); font-weight: 400; color: #8E8E93; }
.as-os__scelte span::after { content: ""; position: absolute; top: 50%; right: calc(13 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-5 * var(--u)); border: solid #8E8E93; border-width: 0 calc(1.6 * var(--u)) calc(1.6 * var(--u)) 0; transform: rotate(45deg); }
.as-os__ore { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.as-os__ore span { display: grid; place-items: center; height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; font-size: calc(16 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.as-os__ore span.as-os__scelta { background: #6E1F2B; color: #fff; box-shadow: none; }
.as-os__ore span.is-pieno { background: #F2F2F7; box-shadow: none; color: #AEAEB2; }
.as-os__attesa { margin-top: calc(10 * var(--u)) !important; font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u)); color: #6E6E73; }
/* Il bottone fisso, sopra la barra di Safari. Fermo: già pronto per la visita delle 15:30. */
.as-os__cta { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(86 * var(--u)); z-index: 2; display: grid; height: calc(50 * var(--u)); border-radius: calc(13 * var(--u)); background: #6E1F2B; color: #fff; font-size: calc(17 * var(--u)); font-weight: 600; }
.as-os__cta > span { grid-area: 1 / 1; display: grid; place-items: center; }
.as-os__cta-a { opacity: 0; }
/* Il foglio della conferma sale dal basso sopra la pagina velata, come i modali veri. */
.as-os__velo { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; }
.as-os__foglio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(92 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: #fff; transform: translateY(102%); }
.as-os__maniglia { justify-self: center; width: calc(36 * var(--u)); height: calc(5 * var(--u)); margin-bottom: calc(4 * var(--u)); border-radius: 999px; background: #D1D1D6; }
.as-os__ok { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.as-os__spunta { flex: 0 0 auto; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5 10.3 16.2 17.5 8.5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.as-os__riepilogo { display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #F2F2F7; }
.as-os__mini { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(10 * var(--u)); background: #6A6C70 center / cover no-repeat; }
.as-os__riepilogo b { display: block; font-size: calc(17 * var(--u)); font-weight: 600; }
.as-os__riepilogo span:not(.as-os__mini) { display: block; margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.3; color: #6E6E73; }
.as-os__indirizzo { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); color: #3A3A3C; }
.as-os__indirizzo b { flex: 0 0 auto; font-weight: 600; color: #6E1F2B; }
.as-os__bottoni { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(10 * var(--u)); }
.as-os__bottoni span { display: grid; place-items: center; height: calc(46 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; font-size: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; }
.as-os__bottoni span.is-pieno { background: #6E1F2B; color: #fff; box-shadow: none; }
.as-os__nota { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: #6E6E73; }
/* Il dito: un cerchio grigio come quello delle registrazioni dello schermo. */
.as-os__tocco { position: absolute; left: calc(151 * var(--u)); top: calc(628 * var(--u)); z-index: 7; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .2); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }
/* LA BARRA DI SAFARI (iOS 26): capsula di vetro sopra la pagina, sopra l'indicatore home. */
.as-safari { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(22 * var(--u)); z-index: 6; display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) calc(48 * var(--u)); align-items: center; height: calc(50 * var(--u)); margin: 0; border-radius: 999px; background: rgba(252, 252, 253, .8); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .1), 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .12); font: 500 calc(16 * var(--u))/1 -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; color: #000; }
.as-safari__url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.as-safari__ic { justify-self: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); background: #000; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.as-safari__ic.is-indietro { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-safari__ic.is-altro { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }
/* Il telefono della villa: la notifica arriva 0,4 s dopo il foglio. */
.as-os__titolare .as-notifica__eti { font-size: 14px; color: var(--as-carbone, #1C1C1A); }
/* Il ciclo (10 s), solo dal vivo: scorre le date, tocca 15:30, prenota, sale il foglio. */
.as-demo-vivo .as-demo--prenota .as-os__giorni span { animation: as-os-scorri 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__scelta { animation: as-os-scelta 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__cta { animation: as-os-cta 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__cta-a { animation: as-os-cta-a 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__cta-b { animation: as-os-cta-b 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__velo { animation: as-os-velo 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__foglio { animation: as-os-foglio 10s infinite both; }
.as-demo-vivo .as-demo--prenota .as-os__tocco { animation: as-os-tocco 10s infinite both; }
@keyframes as-os-scorri { 0%, 4% { transform: none; } 9% { transform: translateX(calc(-52 * var(--u))); } 11%, 93% { transform: translateX(calc(-46 * var(--u))); } 99%, 100% { transform: none; } }
@keyframes as-os-scelta { 0%, 16% { background: #fff; color: #1C1C1E; box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; } 17.5%, 94% { background: #6E1F2B; color: #fff; box-shadow: none; } 96%, 100% { background: #fff; color: #1C1C1E; box-shadow: inset 0 0 0 calc(1 * var(--u)) #D1D1D6; } }
@keyframes as-os-cta { 0%, 16% { background: #E5E5EA; color: #AEAEB2; transform: none; } 17.5%, 29.5% { background: #6E1F2B; color: #fff; transform: none; } 30.5% { transform: scale(.97); } 32%, 94% { background: #6E1F2B; color: #fff; transform: none; } 96%, 100% { background: #E5E5EA; color: #AEAEB2; } }
@keyframes as-os-cta-a { 0%, 16% { opacity: 1; } 17.5%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes as-os-cta-b { 0%, 16% { opacity: 0; } 17.5%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes as-os-velo { 0%, 32% { opacity: 0; } 37%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes as-os-foglio { 0%, 32% { transform: translateY(102%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 37.5%, 88% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .9, .6); } 92.5%, 100% { transform: translateY(102%); } }
@keyframes as-os-tocco {
	0%, 3% { opacity: 0; left: calc(318 * var(--u)); top: calc(482 * var(--u)); transform: scale(.7); }
	4.5% { opacity: 1; left: calc(318 * var(--u)); top: calc(482 * var(--u)); transform: none; }
	9% { opacity: 1; left: calc(262 * var(--u)); top: calc(484 * var(--u)); transform: none; }
	10.5% { opacity: 0; left: calc(262 * var(--u)); top: calc(484 * var(--u)); transform: scale(1.2); }
	11%, 14% { opacity: 0; left: calc(151 * var(--u)); top: calc(628 * var(--u)); transform: scale(.7); }
	15.5%, 16.5% { opacity: 1; left: calc(151 * var(--u)); top: calc(628 * var(--u)); transform: scale(.9); }
	18.5% { opacity: 0; left: calc(151 * var(--u)); top: calc(628 * var(--u)); transform: scale(1.3); }
	19%, 27.5% { opacity: 0; left: calc(196 * var(--u)); top: calc(741 * var(--u)); transform: scale(.7); }
	29%, 30.5% { opacity: 1; left: calc(196 * var(--u)); top: calc(741 * var(--u)); transform: scale(.9); }
	32.5%, 100% { opacity: 0; left: calc(196 * var(--u)); top: calc(741 * var(--u)); transform: scale(1.3); }
}
/* Da telefono (contenitore sotto i 480 px: un telefono, anche il più largo, e mai il
   pannello dei casi, che a 1280 è largo 518): il telefono largo quanto la colonna,
   sotto la schermata di blocco della villa a tutta larghezza, più bassa. */
@container as-app (max-width: 479px) {
	/* 1.04: lo schermo prende quasi tutta la colonna, la cornice e i tasti escono di
	   qualche px nell'imbottitura della scatola grigia (così il testo resta a 11 px veri) */
	.as-demo--prenota .as-app-tel { font-size: calc(min(var(--tel-w-m, 314px), 100cqw / 1.04) / 19); }
	.as-demo--prenota .as-notifica-box { max-width: none; }
	.as-demo--prenota .as-blocco__ora { font-size: 56px; }
	.as-demo--prenota .as-blocco .as-notifica__titolo, .as-demo--prenota .as-blocco .as-notifica__testo { font-size: 15px; line-height: 20px; }
	/* v0.39: da telefono niente testo sotto gli 11px veri (schermo di 302-314 px: 14,5 punti
	   ≈ 11,1 px). Le date un po' più larghe, così «occupata» ci sta. */
	.as-demo--prenota .as-os__scelte small { font-size: calc(14.5 * var(--u)); }
	.as-demo--prenota .as-os__giorni span { width: calc(68 * var(--u)); }
	.as-demo--prenota .as-os__giorni i { font-size: calc(14.5 * var(--u)); letter-spacing: 0; }
}

/* ── EVENTI (v0.38, 29/09, mockup-telefono-app) ──────────────────────────────
   L'app di check-in dello staff: fotocamera a tutto schermo (la foto è la mano che
   mostra il biglietto, allineata così che il QR cada nel mirino), il resto scurito,
   barra traslucida con evento e conteggio, esito VERDE o ROSSO a tutto foglio come
   nelle app vere. Punti veri (var(--u)), font di sistema, nessun arancio del sito.
   Da computer accanto la lista ospiti della web app (px veri, 12-13 px). */
.as-demo.as-demo--eventi { container: as-app / inline-size; flex-wrap: wrap; column-gap: 30px; row-gap: 14px; }
.as-ev { position: absolute; inset: 0; overflow: hidden; background: #000; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.012em; color: #fff; }
.as-ev p { margin: 0; }
.as-ev__camera { position: absolute; left: calc(-198 * var(--u)); top: calc(-173 * var(--u)); width: calc(730 * var(--u)); height: calc(1036 * var(--u)); background: #3A3F46 0 0 / 100% 100% no-repeat; transform-origin: calc(394 * var(--u)) calc(603 * var(--u)); filter: contrast(1.04) saturate(.94); }
/* Il mirino: il buco nel velo scuro è la sua ombra, gli angoli sono i quattro <i>. */
.as-ev__mirino { position: absolute; left: calc(76.5 * var(--u)); top: calc(310 * var(--u)); width: calc(240 * var(--u)); height: calc(240 * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 0 0 calc(1400 * var(--u)) rgba(0, 0, 0, .5); }
.as-ev__mirino i { position: absolute; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border: calc(5 * var(--u)) solid #fff; }
.as-ev__mirino i:nth-child(1) { left: calc(-3 * var(--u)); top: calc(-3 * var(--u)); border-right: 0; border-bottom: 0; border-top-left-radius: calc(22 * var(--u)); }
.as-ev__mirino i:nth-child(2) { right: calc(-3 * var(--u)); top: calc(-3 * var(--u)); border-left: 0; border-bottom: 0; border-top-right-radius: calc(22 * var(--u)); }
.as-ev__mirino i:nth-child(3) { left: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); border-right: 0; border-top: 0; border-bottom-left-radius: calc(22 * var(--u)); }
.as-ev__mirino i:nth-child(4) { right: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); border-left: 0; border-top: 0; border-bottom-right-radius: calc(22 * var(--u)); }
.as-ev__barra { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: calc(58 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); background: rgba(22, 22, 24, .56); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.as-ev__riga { display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) calc(64 * var(--u)); align-items: center; height: calc(48 * var(--u)); }
.as-ev__chiudi { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 55% no-repeat; }
.as-ev__evento { text-align: center; line-height: 1.2; }
.as-ev__evento b { display: block; font-size: calc(17 * var(--u)); font-weight: 600; }
.as-ev__evento small { display: block; font-size: calc(15 * var(--u)); color: rgba(255, 255, 255, .72); }
.as-ev__conta { justify-self: end; font-size: calc(17 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.as-ev__num { display: inline-grid; }
.as-ev__num > span { grid-area: 1 / 1; }
.as-ev__num .is-prima { opacity: 0; }
.as-ev__schede { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(10 * var(--u)) !important; padding: calc(2 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(118, 118, 128, .3); }
.as-ev__schede span { display: grid; place-items: center; height: calc(32 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; }
.as-ev__schede span.is-on { background: rgba(255, 255, 255, .26); font-weight: 600; }
.as-ev__aiuto { position: absolute; left: 0; right: 0; top: calc(572 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); opacity: 0; }
.as-ev__tasti { position: absolute; left: 0; right: 0; bottom: calc(52 * var(--u)); display: flex; justify-content: space-between; padding: 0 calc(62 * var(--u)); opacity: 0; }
.as-ev__tasti span { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .18) center / 44% no-repeat; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.as-ev__tasti .is-torcia { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8v4l-2 3v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V9L8 6V2Z' fill='white'/%3E%3Ccircle cx='12' cy='13' r='1.3' fill='%23333'/%3E%3C/svg%3E"); }
.as-ev__tasti .is-tastiera { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='2' y='6' width='20' height='13' rx='2.5'/%3E%3Cg fill='%23555'%3E%3Crect x='5' y='9' width='2' height='2' rx='.4'/%3E%3Crect x='9' y='9' width='2' height='2' rx='.4'/%3E%3Crect x='13' y='9' width='2' height='2' rx='.4'/%3E%3Crect x='17' y='9' width='2' height='2' rx='.4'/%3E%3Crect x='5' y='13' width='2' height='2' rx='.4'/%3E%3Crect x='9' y='13' width='6' height='2' rx='.4'/%3E%3Crect x='17' y='13' width='2' height='2' rx='.4'/%3E%3C/g%3E%3C/svg%3E"); }
.as-ev__lampo { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
/* L'esito: il foglio verde (valido) o rosso (già usato) che sale dal basso. Fermo: verde su. */
.as-ev__esito { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; justify-items: start; gap: calc(3 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(56 * var(--u)); border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; background: #1E8E3E; }
.as-ev__esito.is-no { background: #D93025; transform: translateY(104%); }
.as-ev__segno { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-bottom: calc(10 * var(--u)); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5 10.3 16.2 17.5 8.5' fill='none' stroke='%231E8E3E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat; }
.is-no .as-ev__segno { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%23D93025' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ev__stato { font-size: calc(22 * var(--u)); font-weight: 600; }
.as-ev__nome { font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.as-ev__info { font-size: calc(17 * var(--u)); }
.as-ev__quando { margin-top: calc(6 * var(--u)) !important; font-size: calc(15 * var(--u)); color: rgba(255, 255, 255, .84); }
/* La lista ospiti dell'organizzatore (web app, da computer): una tabella vera che si aggiorna. */
.as-ev-lista { flex: 1 1 236px; max-width: 330px; min-width: 0; display: grid; gap: 10px; padding: 16px 14px 6px; border-radius: 12px; background: #fff; box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); font: 13px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #202124; text-align: left; }
.as-ev-lista p { margin: 0; }
.as-ev-lista__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.as-ev-lista__testa b { font-size: 15px; font-weight: 600; }
.as-ev-lista__testa span { font-size: 12px; color: #5F6368; white-space: nowrap; }
.as-ev-lista__conti { color: #5F6368; }
.as-ev-lista__conti b { font-weight: 600; color: #202124; font-variant-numeric: tabular-nums; }
.as-ev-lista__cerca { height: 32px; padding-left: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px #DADCE0; line-height: 32px; color: #80868B; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%2380868B' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='%2380868B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px center / 15px no-repeat; }
.as-ev-lista__schede { display: flex; gap: 16px; border-bottom: 1px solid #E8EAED; color: #5F6368; white-space: nowrap; }
.as-ev-lista__schede span { padding: 4px 0 8px; }
.as-ev-lista__schede span.is-on { color: #2A5DB0; font-weight: 600; box-shadow: inset 0 -2px 0 #2A5DB0; }
/* La tabella si vede per sei righe e mezza: quando la riga nuova entra le altre scendono
   sotto il bordo, la scheda non cambia altezza. */
.as-ev-lista__vista { height: 222px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.as-demo .as-ev-lista__tab { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.as-ev-lista__tab th { padding: 4px 4px 6px; border-bottom: 1px solid #E8EAED; font-size: 12px; font-weight: 500; color: #5F6368; text-align: left; }
.as-ev-lista__tab td { padding: 7px 4px; border-bottom: 1px solid #F1F3F4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-ev-lista__tab tr:last-child td { border-bottom: 0; }
.as-ev-lista__tab th:nth-child(1), .as-ev-lista__tab td:nth-child(1) { width: 40%; }
.as-ev-lista__tab th:nth-child(2), .as-ev-lista__tab td:nth-child(2) { width: 13%; }
.as-ev-lista__tab th:nth-child(4), .as-ev-lista__tab td:nth-child(4) { width: 17%; text-align: right; }
.as-ev-lista__tab .is-pagato { color: #188038; }
.as-ev-lista__tab .is-saldo { color: #C5221F; }
.as-ev__didascalia { display: none; flex: 1 1 100%; font-size: 14px; line-height: 1.4; color: var(--as-carbone, #1C1C1A); text-align: center; }
/* Il ciclo (16 s), solo dal vivo: inquadra, aggancia, lampo, VERDE (97 → 98, la riga
   entra nella lista); poi lo stesso biglietto mostrato di nuovo, ROSSO. */
.as-demo-vivo .as-demo--eventi .as-ev__camera { animation: as-ev-cam 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__mirino { animation: as-ev-aggancia 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__lampo { animation: as-ev-lampo 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__esito.is-ok { animation: as-ev-ok 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__esito.is-no { animation: as-ev-no 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__aiuto, .as-demo-vivo .as-demo--eventi .as-ev__tasti { animation: as-ev-aiuto 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__num .is-prima { animation: as-ev-prima 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev__num .is-dopo { animation: as-ev-dopo 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev-lista__nuova { animation: as-ev-entra 16s infinite both; }
.as-demo-vivo .as-demo--eventi .as-ev-lista__nuova td { animation: as-ev-riga 16s infinite both; }
@keyframes as-ev-cam { 0% { transform: scale(.93) translate(calc(10 * var(--u)), calc(14 * var(--u))); } 9%, 32% { transform: none; } 42% { transform: scale(.94) translate(calc(-12 * var(--u)), calc(16 * var(--u))); } 55%, 78% { transform: none; } 100% { transform: scale(.93) translate(calc(10 * var(--u)), calc(14 * var(--u))); } }
@keyframes as-ev-aggancia { 0%, 9% { transform: none; } 10%, 30% { transform: scale(.93); } 32%, 55% { transform: none; } 56%, 76% { transform: scale(.93); } 78%, 100% { transform: none; } }
@keyframes as-ev-lampo { 0%, 10% { opacity: 0; } 10.4% { opacity: .75; } 11.2%, 56% { opacity: 0; } 56.4% { opacity: .75; } 57.2%, 100% { opacity: 0; } }
@keyframes as-ev-ok { 0%, 10.8% { transform: translateY(104%); animation-timing-function: cubic-bezier(.2, .9, .3, 1.12); } 14.5%, 29% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 32%, 100% { transform: translateY(104%); } }
@keyframes as-ev-no { 0%, 56.8% { transform: translateY(104%); animation-timing-function: cubic-bezier(.2, .9, .3, 1.12); } 60.5%, 75% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 78%, 100% { transform: translateY(104%); } }
@keyframes as-ev-aiuto { 0%, 10% { opacity: 1; } 11%, 31% { opacity: 0; } 33%, 56% { opacity: 1; } 57%, 77% { opacity: 0; } 79%, 100% { opacity: 1; } }
@keyframes as-ev-prima { 0%, 12.5% { opacity: 1; } 13%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes as-ev-dopo { 0%, 12.5% { opacity: 0; } 13%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
/* La riga nuova entra in cima (le altre scendono di una), verde che sfuma in 2 s. */
@keyframes as-ev-entra { 0%, 12.9% { visibility: collapse; } 13%, 97.9% { visibility: visible; } 98%, 100% { visibility: collapse; } }
@keyframes as-ev-riga { 0%, 13% { background: #E6F4EA; } 26%, 100% { background: rgba(230, 244, 234, 0); } }
/* Da telefono: solo il telefono, la lista diventa una riga. */
@container as-app (max-width: 479px) {
	.as-demo--eventi .as-app-tel { font-size: calc(min(var(--tel-w-m, 314px), 100cqw / 1.04) / 19); }
	.as-demo--eventi .as-ev-lista { display: none; }
	.as-demo--eventi .as-ev__didascalia { display: block; }
}

/* ── PREVENTIVO (v0.38, 29/09, mockup-telefono-app) ──────────────────────────
   Il configuratore del bagno sul sito di Falciani Ristrutturazioni (inventata): il
   SUO carattere (Helvetica) e il SUO blu petrolio #1F4E5F, niente Archivo, niente
   pillole nere né arancio di Studio Arfia. Da computer la finestra di Chrome su
   Windows a grandezza vera (px del sito, testo 11,5-19 px); da telefono (contenitore
   sotto i 480 px) la versione mobile dello stesso sito in Safari, in punti veri. */
.as-demo.as-demo--configuratore { container: as-app / inline-size; display: block; max-width: 860px; padding: 0; background: transparent; box-shadow: none; }
.as-cf { position: relative; overflow: hidden; border-radius: 10px 10px 8px 8px; background: #fff; box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .09); font: 13px/1.35 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1D2B33; text-align: left; }
.as-cf p { margin: 0; }
/* La finestra: schede, barra degli strumenti, i tre tasti di Windows (niente semafori). */
.as-cf__chrome { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; color: #202124; }
.as-cf__schede { display: flex; align-items: flex-end; height: 36px; padding-left: 8px; background: #DEE1E6; }
.as-cf__scheda { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 226px; min-width: 0; height: 30px; padding: 0 8px 0 11px; border-radius: 9px 9px 0 0; font-size: 12px; color: #45474A; }
.as-cf__scheda span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.as-cf__scheda b { flex: 0 0 auto; width: 16px; height: 16px; background: #5F6368; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.as-cf__scheda.is-on { z-index: 1; background: #fff; color: #202124; }
.as-cf__scheda.is-on::before, .as-cf__scheda.is-on::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.as-cf__scheda.is-on::before { left: -9px; background: radial-gradient(circle at 0 0, transparent 8.5px, #fff 9px); }
.as-cf__scheda.is-on::after { right: -9px; background: radial-gradient(circle at 100% 0, transparent 8.5px, #fff 9px); }
.as-cf__scheda:not(.is-on)::after { content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: #A7ABB0; }
.as-cf__fav { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; background: #1F4E5F; }
.as-cf__fav::after { content: "F"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 10.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; }
.as-cf__fav.is-altro { border-radius: 50%; background: #E8EAED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%235F6368' stroke-width='1.2'/%3E%3Cpath d='M2.5 8h11M8 2.5c-2.2 2.8-2.2 8.2 0 11M8 2.5c2.2 2.8 2.2 8.2 0 11' fill='none' stroke='%235F6368' stroke-width='1.1'/%3E%3C/svg%3E") center / 100% no-repeat; }
.as-cf__fav.is-altro::after { content: none; }
.as-cf__piu { flex: 0 0 auto; width: 28px; height: 28px; margin: 0 0 1px 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%23444746' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.as-cf__win { display: flex; align-self: stretch; margin-left: auto; }
.as-cf__win i { width: 42px; background: center / 10px no-repeat; }
.as-cf__win .is-riduci { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 5h10' stroke='%23202124' stroke-width='1'/%3E%3C/svg%3E"); }
.as-cf__win .is-ingrandisci { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='.5' y='.5' width='9' height='9' rx='1.2' fill='none' stroke='%23202124' stroke-width='1'/%3E%3C/svg%3E"); }
.as-cf__win .is-chiudi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0l10 10M10 0 0 10' stroke='%23202124' stroke-width='1'/%3E%3C/svg%3E"); }
.as-cf__barra { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 6px; border-bottom: 1px solid #DADCE0; background: #fff; }
.as-cf__nav { display: flex; }
.as-cf__nav i { width: 28px; height: 28px; background: center / 16px no-repeat; }
.as-cf__nav .is-indietro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3.5M7.5 3.5 3 8l4.5 4.5' fill='none' stroke='%235F6368' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-cf__nav .is-avanti { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23C4C7C5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-cf__nav .is-ricarica { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.8 8a4.8 4.8 0 1 1-1.4-3.4M12.9 2.8v2.9H10' fill='none' stroke='%235F6368' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-cf__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 28px; padding: 0 12px 0 10px; border-radius: 14px; background: #EEF1F4; font-size: 13px; white-space: nowrap; overflow: hidden; }
.as-cf__url i { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5h6M11.5 5h2M2.5 11h2M7.5 11h6' stroke='%235F6368' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='5' r='1.6' fill='none' stroke='%235F6368' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='11' r='1.6' fill='none' stroke='%235F6368' stroke-width='1.3'/%3E%3C/svg%3E") center / 100% no-repeat; }
.as-cf__url b { font-weight: 400; color: #1F1F1F; }
.as-cf__url span { color: #5F6368; overflow: hidden; text-overflow: ellipsis; }
.as-cf__profilo { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; background: #4E7D8C; font-size: 11px; font-weight: 600; color: #fff; }
/* Il sito dell'impresa, a grandezza vera. */
.as-cf__sito { position: relative; }
.as-cf__sito::after { content: ""; position: absolute; right: 2px; top: 6px; width: 6px; height: 34%; border-radius: 3px; background: rgba(0, 0, 0, .26); }
.as-cf__testa { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 20px; border-bottom: 1px solid #E6EAEC; }
.as-cf__logo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; margin-right: auto !important; line-height: 1.05; }
.as-cf__logo .as-lg { grid-row: span 2; width: 32px; height: 32px; border-radius: 8px; }
.as-cfm__testa b .as-lg { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .28em; vertical-align: -.14em; }
.as-cf__logo b { font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: #1F4E5F; }
.as-cf__logo small { font-size: 11px; letter-spacing: .01em; color: #5B6B73; }
.as-cf__tel { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.as-cf__sopr { padding: 7px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #1F4E5F; font-size: 12px; font-weight: 600; color: #1F4E5F; white-space: nowrap; }
.as-cf__passi { position: relative; display: flex; align-items: center; gap: 20px; height: 40px; padding: 0 20px; background: #F4F7F8; font-size: 12.5px; color: #7C8A91; white-space: nowrap; box-shadow: inset 0 -1px 0 #E6EAEC; }
.as-cf__passi::after { content: ""; position: absolute; left: 0; bottom: 0; width: 66%; height: 3px; background: #1F4E5F; }
.as-cf__passi span { display: flex; align-items: center; gap: 7px; }
.as-cf__passi i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 11px; font-style: normal; font-weight: 700; }
.as-cf__passi .is-fatto { color: #1F4E5F; }
.as-cf__passi .is-fatto i { box-shadow: none; background: #1F4E5F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5 10.3 16.2 17.5 8.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; color: transparent; }
.as-cf__passi .is-on { font-weight: 600; color: #1D2B33; }
.as-cf__passi .is-on i { box-shadow: none; background: #1F4E5F; color: #fff; }
.as-cf__corpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.as-cf__scelte { display: grid; align-content: start; gap: 8px; padding: 16px 16px 18px 20px; }
.as-cf__h { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.as-cf__k { margin-top: 4px !important; font-size: 12px; font-weight: 600; color: #5B6B73; }
.as-cf__mat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.as-cf__mat p { display: grid; align-content: start; gap: 3px; padding: 4px 4px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1px #DCE2E5; }
.as-cf__mat img { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 2px; object-fit: cover; border-radius: 5px; }
.as-cf__mat b { padding: 0 3px; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.as-cf__mat span { padding: 0 3px; font-size: 11.5px; color: #1F4E5F; }
.as-cf__mat p.is-on { box-shadow: inset 0 0 0 2px #1F4E5F; }
.as-cf__extra { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #EEF1F3; font-size: 12.5px; }
.as-cf__extra small { font-size: 12px; color: #5B6B73; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-cf__extra i, .as-cfm__extra i { position: relative; display: block; border-radius: 999px; background: #1F4E5F; }
.as-cf__extra i { width: 34px; height: 20px; }
.as-cf__extra i::after, .as-cfm__extra i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.as-cf__stima { display: grid; align-content: start; gap: 6px; padding: 16px 16px 18px; border-left: 1px solid #E6EAEC; background: #F4F7F8; }
.as-cf__stima-h { margin-bottom: 2px !important; font-size: 14px; font-weight: 700; }
.as-cf__voce { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #3C4A51; }
.as-cf__voce b { font-weight: 500; color: #1D2B33; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-cf__totale { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 3px !important; padding-top: 8px; border-top: 1px solid #D6DEE2; }
.as-cf__totale > span { font-size: 12px; font-weight: 600; }
.as-cf__totale b, .as-cfm__barra b { display: inline-grid; justify-items: end; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-cf__totale b { font-size: 16px; }
.as-cf__totale b > span, .as-cfm__barra b > span { grid-area: 1 / 1; }
.as-cf .is-prima, .as-cfm .is-prima { opacity: 0; }
.as-cf__iva { font-size: 11px; color: #5B6B73; }
.as-cf__chi { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; font-size: 11.5px; line-height: 1.3; color: #3C4A51; }
.as-cf__chi img { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.as-cf__btn { margin-top: 4px !important; padding: 9px 10px; border-radius: 7px; background: #1F4E5F; font-size: 12.5px; font-weight: 600; text-align: center; color: #fff; }
/* Il puntatore di sistema (freccia nera bordata di bianco): vive dentro l'interruttore
   del riscaldamento, così ci arriva sempre qualunque sia la larghezza. Fermo: appena
   scostato, dopo il clic. */
.as-cf__puntatore { position: absolute; left: 58%; top: 42%; z-index: 5; width: 17px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 24'%3E%3Cpath d='M1.5 1.5v18.2l4.6-4.4 3.1 7.1 3.2-1.4-3.1-7h6.3Z' fill='black' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); transform: translate(18px, 26px); pointer-events: none; }
.as-cf__extra i { --cf-corsa: 14px; }
.as-cfm__extra i { --cf-corsa: calc(20 * var(--u)); }
/* La versione da telefono, in punti veri: nascosta finché il contenitore è largo. */
.as-cf-tel { display: none; }
.as-cfm { position: absolute; inset: 0; overflow: hidden; background: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: calc(17 * var(--u)); line-height: 1.3; color: #1D2B33; }
.as-cfm p { margin: 0; }
.as-cfm__testa { display: flex; align-items: center; justify-content: space-between; height: calc(50 * var(--u)); margin-top: calc(54 * var(--u)) !important; padding: 0 calc(20 * var(--u)); }
.as-cfm__testa b { font-size: calc(23 * var(--u)); font-weight: 700; letter-spacing: -.025em; color: #1F4E5F; }
.as-cfm__menu { width: calc(24 * var(--u)); height: calc(14 * var(--u)); background: linear-gradient(#1D2B33 0 0) top / 100% calc(2 * var(--u)) no-repeat, linear-gradient(#1D2B33 0 0) center / 100% calc(2 * var(--u)) no-repeat, linear-gradient(#1D2B33 0 0) bottom / 100% calc(2 * var(--u)) no-repeat; }
.as-cfm__passo { position: relative; display: flex; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(20 * var(--u)); background: #F4F7F8; font-size: calc(15 * var(--u)); color: #5B6B73; }
.as-cfm__passo i { position: absolute; left: 0; bottom: 0; width: 66%; height: calc(3 * var(--u)); background: #1F4E5F; }
.as-cfm__foto { display: block; height: calc(170 * var(--u)); background: #7B8488 center 55% / cover no-repeat; }
.as-cfm__corpo { padding: calc(16 * var(--u)) calc(20 * var(--u)) 0; }
.as-cfm__h { font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.as-cfm__k { margin: calc(14 * var(--u)) 0 calc(8 * var(--u)) !important; font-size: calc(15 * var(--u)); font-weight: 600; color: #5B6B73; }
.as-cfm__mat { display: flex; gap: calc(10 * var(--u)); margin-right: calc(-20 * var(--u)); overflow: hidden; }
.as-cfm__mat p { flex: 0 0 calc(146 * var(--u)); display: grid; align-content: start; gap: calc(4 * var(--u)); padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #DCE2E5; }
.as-cfm__mat img { display: block; width: 100%; height: calc(96 * var(--u)); margin-bottom: calc(2 * var(--u)); object-fit: cover; border-radius: calc(8 * var(--u)); }
.as-cfm__mat b { padding: 0 calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; line-height: 1.2; }
.as-cfm__mat span { padding: 0 calc(4 * var(--u)); font-size: calc(15 * var(--u)); color: #1F4E5F; }
.as-cfm__mat p.is-on { box-shadow: inset 0 0 0 calc(2.5 * var(--u)) #1F4E5F; }
.as-cfm__extra { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); min-height: calc(56 * var(--u)); border-top: calc(1 * var(--u)) solid #EEF1F3; }
.as-cfm__extra small { display: block; font-size: calc(15 * var(--u)); color: #5B6B73; font-variant-numeric: tabular-nums; }
.as-cfm__extra i { flex: 0 0 auto; width: calc(51 * var(--u)); height: calc(31 * var(--u)); }
.as-cfm__extra i::after { top: calc(2 * var(--u)); right: calc(2 * var(--u)); width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.as-cfm__barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; height: calc(146 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)) 0; background: #fff; box-shadow: 0 calc(-1 * var(--u)) 0 #E3E8EA; }
.as-cfm__barra small { display: block; font-size: calc(15 * var(--u)); color: #5B6B73; }
.as-cfm__barra b { font-size: calc(19 * var(--u)); }
.as-cfm__btn { display: grid; place-items: center; height: calc(46 * var(--u)); padding: 0 calc(24 * var(--u)); border-radius: calc(12 * var(--u)); background: #1F4E5F; font-size: calc(17 * var(--u)); font-weight: 600; color: #fff; }
.as-cfm__tocco { position: absolute; left: calc(348 * var(--u)); top: calc(639 * var(--u)); z-index: 7; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .2); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }
/* Il ciclo (10 s), solo dal vivo: il riscaldamento parte spento, il clic (o il dito) lo
   accende, la voce entra nella stima, il totale sale. Fermo: già acceso. */
.as-demo-vivo .as-demo--configuratore :is(.as-cf__extra--nuovo, .as-cfm__extra--nuovo) i { animation: as-cf-int 10s infinite both; }
.as-demo-vivo .as-demo--configuratore :is(.as-cf__extra--nuovo, .as-cfm__extra--nuovo) i::after { animation: as-cf-pomello 10s infinite both; }
.as-demo-vivo .as-demo--configuratore .as-cf__voce--nuova { animation: as-cf-voce 10s infinite both; }
.as-demo-vivo .as-demo--configuratore .is-prima { animation: as-cf-prima 10s infinite both; }
.as-demo-vivo .as-demo--configuratore .is-dopo { animation: as-cf-dopo 10s infinite both; }
.as-demo-vivo .as-demo--configuratore .as-cf__puntatore { animation: as-cf-mouse 10s infinite both; }
.as-demo-vivo .as-demo--configuratore .as-cfm__tocco { animation: as-cf-tocco 10s infinite both; }
@keyframes as-cf-int { 0%, 17% { background: #C9D1D5; } 19%, 92% { background: #1F4E5F; } 95%, 100% { background: #C9D1D5; } }
@keyframes as-cf-pomello { 0%, 17% { transform: translateX(calc(-1 * var(--cf-corsa, 14px))); } 19%, 92% { transform: none; } 95%, 100% { transform: translateX(calc(-1 * var(--cf-corsa, 14px))); } }
@keyframes as-cf-voce { 0%, 19% { max-height: 0; opacity: 0; margin-top: -6px; background: rgba(31, 78, 95, .12); } 22% { max-height: 40px; opacity: 1; margin-top: 0; background: rgba(31, 78, 95, .12); } 36%, 92% { max-height: 40px; opacity: 1; margin-top: 0; background: rgba(31, 78, 95, 0); } 96%, 100% { max-height: 0; opacity: 0; margin-top: -6px; background: rgba(31, 78, 95, 0); } }
@keyframes as-cf-prima { 0%, 20% { opacity: 1; } 22%, 93% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes as-cf-dopo { 0%, 20% { opacity: 0; } 22%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes as-cf-mouse { 0%, 2% { opacity: 0; transform: translate(120px, 96px); } 4% { opacity: 1; transform: translate(120px, 96px); } 14.5% { opacity: 1; transform: none; animation-timing-function: ease-in-out; } 16% { transform: scale(.86); } 17.5%, 24% { opacity: 1; transform: none; } 34%, 86% { opacity: 1; transform: translate(18px, 26px); } 92%, 100% { opacity: 0; transform: translate(18px, 26px); } }
@keyframes as-cf-tocco { 0%, 14% { opacity: 0; transform: scale(.7); } 16%, 17.5% { opacity: 1; transform: scale(.9); } 20%, 100% { opacity: 0; transform: scale(1.3); } }
@container as-app (max-width: 479px) {
	.as-demo--configuratore .as-cf { display: none; }
	.as-demo--configuratore .as-cf-tel { display: grid; font-size: calc(min(var(--tel-w-m, 314px), 100cqw / 1.04) / 19); }
}

/* ── L'ASSISTENTE AI (v0.38, 29/09) [mockup-assistente-chat] ─────────────────
   Rami, 28/09: «i mockup rendili il più possibile reali, ora sono AI slop». L'app di
   un assistente AI come quella che hanno tutti, senza marchi né stelline: barra col
   nome del modello, domanda in bolla grigia a destra, stato della ricerca, risposta
   a tutta larghezza con le schede delle imprese, fonti come pillole col dominio,
   azioni, campo. Punti veri (var(--u)): nel telefono (geo) li dà lo schermo; nuda,
   dentro «seogeo», un punto è .82 px. Solo neri e grigi di sistema: niente arancio. */
.as-demo.as-demo--app.as-demo--ai { container: as-app / inline-size; }
.as-demo.as-demo--ai.is-compatto { display: block; max-width: none; padding: 0; background: transparent; box-shadow: none; }
.as-ai { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: calc(54 * var(--u)); background: #fff; font: 400 calc(17 * var(--u))/1.42 -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.012em; color: #1C1C1E; text-align: left; }
.is-compatto .as-ai { --u: .82px; position: relative; height: 100%; min-height: calc(560 * var(--u)); padding-top: calc(4 * var(--u)); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 48px -30px rgba(0, 0, 0, .35); }
.as-ai p { margin: 0; }
.as-ai__ic { display: inline-block; flex: 0 0 auto; width: calc(22 * var(--u)); height: calc(22 * var(--u)); background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.as-ai__ic.is-menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h16M4 15h10' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-giu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-nuova { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4H6.5A2.5 2.5 0 0 0 4 6.5v11A2.5 2.5 0 0 0 6.5 20h11a2.5 2.5 0 0 0 2.5-2.5V12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M17.6 3.6a1.9 1.9 0 0 1 2.8 2.8l-7.9 7.9L9 15l.7-3.5 7.9-7.9Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-globo, .as-ai__ic.is-sito { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5s-1.1 5.9-3.6 8.5c-2.5-2.6-3.6-5.4-3.6-8.5S9.5 6.1 12 3.5Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E"); }
.as-ai__ic.is-avanti { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-stella { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8L12 3.5Z'/%3E%3C/svg%3E"); }
.as-ai__ic.is-tel { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.5h2.8l1.4 4.2-2 1.4a11 11 0 0 0 6.1 6.1l1.4-2 4.2 1.4v2.8a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-copia { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M15.5 5.5a2 2 0 0 0-2-1h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 1 1.7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-su, .as-ai__ic.is-giuu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10.5v9h-3v-9h3Zm0 0 3.8-6.5c1.4 0 2.4 1 2.2 2.4l-.5 3.1h5.3c1.3 0 2.2 1.2 1.9 2.4l-1.5 6.4a2 2 0 0 1-1.9 1.7H7.5' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-giuu { transform: scaleY(-1); }
.as-ai__ic.is-rigenera { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-condividi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14V3.5M8 7.5l4-4 4 4M7 10.5H6A1.5 1.5 0 0 0 4.5 12v7A1.5 1.5 0 0 0 6 20.5h12a1.5 1.5 0 0 0 1.5-1.5v-7a1.5 1.5 0 0 0-1.5-1.5h-1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-piu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-mic { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ai__ic.is-onda { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 8v8M20 10.5v3' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.as-ai__barra { flex: 0 0 auto; display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) calc(44 * var(--u)); align-items: center; height: calc(48 * var(--u)); padding: 0 calc(8 * var(--u)); }
.as-ai__barra b { justify-self: center; display: flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 600; }
.as-ai__barra > .as-ai__ic { justify-self: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.as-ai__barra .is-giu { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #8E8E93; }
.as-ai__chat { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)) 0; }
.as-ai__domanda { align-self: flex-end; max-width: 78%; padding: calc(10 * var(--u)) calc(15 * var(--u)); border-radius: calc(20 * var(--u)); background: #F2F2F7; }
.as-ai__stato { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: #8E8E93; }
.as-ai__stato .as-ai__ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.as-ai__stato .is-avanti { grid-column: 3; width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.as-ai__cerca, .as-ai__fatto { grid-area: 1 / 2; }
.as-ai__cerca { opacity: 0; background: linear-gradient(90deg, #8E8E93 35%, #E5E5EA 50%, #8E8E93 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-ai__risposta { display: grid; gap: calc(12 * var(--u)); }
.as-ai__risposta b { font-weight: 600; }
.as-ai__luoghi { display: flex; gap: calc(10 * var(--u)); margin-right: calc(-18 * var(--u)); overflow: hidden; }
.as-ai__luogo { flex: 0 0 calc(292 * var(--u)); display: grid; grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr); gap: calc(10 * var(--u)) calc(12 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #E5E5EA; }
.as-ai__foto { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(10 * var(--u)); background: #C7C7CC center / cover no-repeat; }
.as-ai__luogo-t { display: grid; align-content: start; gap: calc(2 * var(--u)); min-width: 0; }
.as-ai__luogo-t b { font-size: calc(17 * var(--u)); line-height: 1.25; }
/* v0.39: la riga delle stelle va a capo invece di finire tagliata a metà («… · Firenz»). */
.as-ai__luogo-t small { display: block; font-size: calc(13 * var(--u)); line-height: 1.3; color: #8E8E93; }
.as-ai__luogo-t small .as-ai__ic { display: inline-block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-right: calc(3 * var(--u)); vertical-align: calc(-1 * var(--u)); color: #3A3A3C; }
.as-ai__luogo-t > span { font-size: calc(14 * var(--u)); line-height: 1.3; color: #3A3A3C; }
.as-ai__pillole { grid-column: 1 / -1; display: flex; gap: calc(5 * var(--u)); }
/* v0.39: 9 punti di lato (erano 11): le tre pillole stanno dentro la scheda, «Indicazioni» non esce dal bordo */
.as-ai__pillole > span { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 999px; background: #F2F2F7; font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; }
.as-ai__pillole .as-ai__ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.as-ai__fonte { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(2 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(4 * var(--u)); border-radius: calc(8 * var(--u)); background: #F2F2F7; font-size: calc(13 * var(--u)); font-weight: 500; line-height: 1; color: #3A3A3C; white-space: nowrap; vertical-align: calc(1 * var(--u)); }
.as-ai__fonte i { display: grid; place-items: center; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(4 * var(--u)); color: #fff; font-size: calc(9 * var(--u)); font-style: normal; font-weight: 700; }
.as-ai__azioni { display: flex; gap: calc(18 * var(--u)); padding-top: calc(2 * var(--u)); color: #8E8E93; }
.as-ai__azioni .as-ai__ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.as-ai__campo { flex: 0 0 auto; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(52 * var(--u)); margin: calc(10 * var(--u)) calc(12 * var(--u)) calc(34 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(26 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(1 * var(--u)) #E5E5EA, 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .06); color: #8E8E93; }
.as-ai__campo-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.as-ai__campo > .as-ai__ic { color: #1C1C1E; }
.as-ai__voce { display: grid; place-items: center; flex: 0 0 auto; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #1C1C1E; color: #fff; }
.as-ai__voce .as-ai__ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.is-compatto .as-ai__campo { margin-bottom: calc(14 * var(--u)); }
/* v0.39 (Rami, 29/09: «la barra "Chiedi qualsiasi cosa" finisce sotto la barra di chiusura»):
   .as-ai p { margin: 0 } batteva i margini del campo, che finiva sul fondo dello schermo,
   sotto la barra di chiusura e tagliato dagli angoli. Nel telefono il campo sta sopra la zona
   sicura del kit (--sa-giu), come nelle app vere. */
.as-tel2 .as-ai p.as-ai__campo { margin: calc(10 * var(--u)) calc(12 * var(--u)) calc(var(--sa-giu) + 4 * var(--u)); }
/* Il giro (11 s), solo dal vivo: la domanda sale dal campo, «Sto cercando sul web…»
   luccica, poi la risposta arriva a gruppi di parole (--w = il turno) su uno spazio già
   riservato. Ogni gruppo resta acceso 7,8 s e si spegne mentre la risposta intera è già
   svanita (as-ai-risp): i turni sfalsati non si vedono mai. */
.as-demo-vivo .as-ai__domanda { animation: as-ai-domanda 11s infinite both; }
.as-demo-vivo .as-ai__stato { animation: as-ai-stato 11s infinite both; }
.as-demo-vivo .as-ai__cerca { animation: as-ai-cerca 11s infinite both, as-ai-luccica 1.3s linear infinite; }
.as-demo-vivo .as-ai__fatto, .as-demo-vivo .as-ai__stato .is-avanti { animation: as-ai-fatto 11s infinite both; }
.as-demo-vivo .as-ai__risposta { animation: as-ai-risp 11s infinite both; }
.as-demo-vivo .as-ai__w { animation: as-ai-w 11s calc(2.4s + var(--w) * .11s) infinite both; }
.as-demo-vivo .as-ai__luoghi { animation-name: as-ai-w2; }
@keyframes as-ai-domanda { 0%, 1% { opacity: 0; transform: translateY(calc(40 * var(--u))); } 4.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes as-ai-stato { 0%, 5% { opacity: 0; } 7%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes as-ai-cerca { 0%, 5% { opacity: 0; } 7%, 19% { opacity: 1; } 20.5%, 100% { opacity: 0; } }
@keyframes as-ai-luccica { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes as-ai-fatto { 0%, 20% { opacity: 0; } 22%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes as-ai-risp { 0%, 20% { opacity: 0; } 21%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes as-ai-w { 0% { opacity: 0; } 2%, 70.9% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes as-ai-w2 { 0% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 3%, 70.9% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; transform: none; } }

/* ── LA CHAT DEL SITO (v0.38, 29/09) [mockup-assistente-chat] ────────────────
   Il sito di Villa Castelmora in Safari alle 23:41 (lo stesso mondo di «prenota»), il
   bottone tondo della chat, il foglio a tutto schermo come nei widget veri: testata col
   logo, bolle bordeaux di chi scrive e grigie di sistema della villa, risposte
   rapide, la scheda della visita con la spunta verde di sistema, il campo e la
   tastiera di iOS. Punti veri (var(--u)), font di sistema; il serif solo nel sito.
   La lista (.as-cs__lista) è ancorata in basso e alta almeno quanto la finestra: i
   messaggi partono dall'alto e, quando non ci stanno più, scorrono su da soli.
   Fermo (senza .as-demo-vivo): la chat aperta, intera, con la scheda. */
.as-demo.as-demo--chatsito { container: as-app / inline-size; flex-wrap: wrap; column-gap: 34px; row-gap: 14px; --nt-dur: 16s; --nt-rit: 6.4s; }
.as-demo--chatsito .as-notifica-box { flex: 1 1 228px; max-width: 290px; }
.as-cs__titolare .as-notifica__eti { font-size: 14px; color: var(--as-carbone, #1C1C1A); }
.as-cs { position: absolute; inset: 0; overflow: hidden; background: #fff; font: 400 calc(17 * var(--u))/1.3 -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.012em; color: #1C1C1E; text-align: left; }
.as-cs p { margin: 0; }
.as-cs__sito { position: absolute; inset: 0; }
.as-cs__eroe { position: relative; height: calc(420 * var(--u)); background: #5B5F63 center 55% / cover no-repeat; color: #fff; }
.as-cs__eroe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .08) 38%, rgba(0, 0, 0, .55)); }
.as-cs__nav { position: absolute; top: calc(58 * var(--u)); left: 0; right: 0; height: calc(48 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)); }
.as-cs__nav b, .as-cs__eroe-t, .as-cs__h { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-weight: 400; letter-spacing: 0; }
.as-cs__nav b { font-size: calc(21 * var(--u)); }
.as-cs__menu { width: calc(22 * var(--u)); height: calc(2 * var(--u)); margin-top: calc(-7 * var(--u)); border-radius: 2px; background: #fff; box-shadow: 0 calc(7 * var(--u)) 0 #fff; }
.as-cs__eroe-t { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(26 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.06; }
.as-cs__pagina { display: grid; gap: calc(10 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)); }
.as-cs__h { font-size: calc(25 * var(--u)); line-height: 1.15; }
.as-cs__p { font-size: calc(16 * var(--u)); line-height: 1.45; color: #48484A; }
.as-cs__btn { justify-self: start; margin-top: calc(6 * var(--u)) !important; padding: calc(13 * var(--u)) calc(20 * var(--u)); border-radius: calc(12 * var(--u)); background: #6E1F2B; color: #fff; font-size: calc(16 * var(--u)); font-weight: 600; }
.as-cs__lancia { position: absolute; right: calc(18 * var(--u)); bottom: calc(92 * var(--u)); z-index: 5; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; background: #6E1F2B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5c4.7 0 8.5 3.1 8.5 7s-3.8 7-8.5 7c-1 0-2-.1-2.9-.4L5 19.5l1.2-3.4C4.5 14.8 3.5 13.2 3.5 11.5c0-3.9 3.8-7 8.5-7Z' fill='white'/%3E%3C/svg%3E") center / 46% no-repeat; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .3); }
.as-cs__velo { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .42); }
.as-cs__foglio { position: absolute; left: 0; right: 0; top: calc(62 * var(--u)); bottom: 0; z-index: 8; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; background: #fff; }
.as-cs__testa { flex: 0 0 auto; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: max(1px, calc(.5 * var(--u))) solid #E5E5EA; }
.as-cs__ic { flex: 0 0 auto; width: calc(24 * var(--u)); height: calc(24 * var(--u)); background: #3A3A3C; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.as-cs__ic.is-giu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-cs__ic.is-altro { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E"); }
/* Il logo della villa nel cerchio (inc/loghi.php; il doppio filetto resta per chi non ha il segno). */
.as-cs__logo { display: grid; place-items: center; flex: 0 0 auto; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #F6F1EA; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) #6E1F2B, inset 0 0 0 calc(3.2 * var(--u)) #F6F1EA, inset 0 0 0 calc(4 * var(--u)) #6E1F2B; color: #6E1F2B; font: 400 calc(14 * var(--u))/1 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .06em; }
.as-cs__chi { flex: 1 1 auto; min-width: 0; }
.as-cs__chi b { display: block; font-size: calc(16 * var(--u)); font-weight: 600; }
.as-cs__chi small { display: block; overflow: hidden; font-size: calc(12.5 * var(--u)); white-space: nowrap; text-overflow: ellipsis; color: #8E8E93; }
.as-cs__flusso { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.as-cs__lista { position: absolute; left: 0; right: 0; bottom: 0; min-height: 100%; padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); }
.as-cs__ora { padding: calc(10 * var(--u)) 0 calc(2 * var(--u)); font-size: calc(13 * var(--u)); text-align: center; color: #8E8E93; }
.as-cs__v { display: grid; grid-template-rows: 1fr; }
.as-cs__v > div { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.as-cs__v > div > * { margin-top: calc(8 * var(--u)); }
.as-cs__msg { max-width: 78%; padding: calc(9 * var(--u)) calc(13 * var(--u)); border-radius: calc(18 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.32; }
.as-cs__msg.is-tu { align-self: flex-end; background: #6E1F2B; color: #fff; border-bottom-right-radius: calc(5 * var(--u)); }
.as-cs__msg.is-bot { align-self: flex-start; background: #F2F2F7; border-bottom-left-radius: calc(5 * var(--u)); }
.as-cs__scrive { align-self: flex-start; display: flex; gap: calc(4 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #F2F2F7; }
.as-cs__scrive i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #8E8E93; animation: as-cs-punti 1.1s infinite; }
.as-cs__scrive i:nth-child(2) { animation-delay: .15s; }
.as-cs__scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes as-cs-punti { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(calc(-3 * var(--u))); } }
.as-cs__rapide { display: flex; gap: calc(8 * var(--u)); overflow: hidden; }
.as-cs__rapide span { flex: 0 0 auto; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 calc(1 * var(--u)) #6E1F2B; color: #6E1F2B; font-size: calc(15 * var(--u)); font-weight: 500; }
.as-cs__rapide span.is-scelta { background: #6E1F2B; color: #fff; }
.as-cs__scheda { align-self: flex-start; display: grid; gap: calc(10 * var(--u)); width: 84%; padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #E5E5EA; }
.as-cs__scheda-h { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.as-cs__spunta { flex: 0 0 auto; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5 10.3 16.2 17.5 8.5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.as-cs__scheda-r { display: grid; grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(10 * var(--u)); }
.as-cs__mini { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(9 * var(--u)); background: #6A6C70 center / cover no-repeat; }
.as-cs__scheda-r b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; }
.as-cs__scheda-r span:not(.as-cs__mini) { display: block; font-size: calc(13.5 * var(--u)); line-height: 1.3; color: #6E6E73; }
.as-cs__scheda-b { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(8 * var(--u)); }
.as-cs__scheda-b span { display: grid; place-items: center; height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #6E1F2B; color: #6E1F2B; font-size: calc(13.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.as-cs__campo { flex: 0 0 auto; display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(42 * var(--u)); margin: calc(8 * var(--u)) calc(12 * var(--u)) calc(34 * var(--u)); padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); border-radius: calc(22 * var(--u)); background: #F2F2F7; }
/* v0.39: .as-cs p { margin: 0 } batteva questi margini e, ferma, la chat aveva il campo sul fondo
   dello schermo, sotto la barra di chiusura (dal vivo li rimetteva l'animazione). */
.as-cs p.as-cs__campo { margin: calc(8 * var(--u)) calc(12 * var(--u)) var(--sa-giu, calc(34 * var(--u))); }
.as-cs__campo-t { flex: 1 1 auto; display: grid; min-width: 0; }
.as-cs__segna, .as-cs__digita { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; }
.as-cs__segna { color: #8E8E93; }
.as-cs__digita { opacity: 0; }
.as-cs__invia { flex: 0 0 auto; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #6E1F2B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6M6 11l6-6 6 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 58% no-repeat; }
/* La tastiera di iOS: tasti bianchi su #D1D3D9, la riga dei suggerimenti. Ferma è giù. */
.as-cs__tastiera { position: relative; flex: 0 0 auto; height: 0; overflow: hidden; }
.as-cs__tasti { position: absolute; top: 0; left: 0; right: 0; height: calc(291 * var(--u)); padding: 0 calc(3 * var(--u)); background: #D1D3D9; font-size: calc(22 * var(--u)); color: #000; }
.as-cs__sugg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); text-align: center; }
.as-cs__sugg span + span { border-left: max(1px, calc(.5 * var(--u))) solid #A9ACB2; }
.as-cs__fila { display: flex; justify-content: center; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)) !important; }
.as-cs__fila.is-0 { margin-top: calc(4 * var(--u)) !important; }
.as-cs__fila span { display: grid; place-items: center; flex: 0 0 calc(33.3 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(5 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) 0 #898A8D; line-height: 1; }
.as-cs__fila span.is-mod { flex-basis: calc(42 * var(--u)); background: #ABB0BA center / 50% no-repeat; font-size: calc(16 * var(--u)); }
.as-cs__fila.is-2 span.is-mod:first-child { margin-right: calc(8 * var(--u)); }
.as-cs__fila.is-2 span.is-mod:last-child { margin-left: calc(8 * var(--u)); }
.as-cs__fila .is-maiusc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5 4.5 12h4v6.5h7V12h4L12 4.5Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.as-cs__fila .is-canc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6h10.5A1.5 1.5 0 0 1 21 7.5v9a1.5 1.5 0 0 1-1.5 1.5H9L3.5 12 9 6ZM12.5 9.5l5 5M17.5 9.5l-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.as-cs__fila.is-3 span.is-mod { flex-basis: calc(88 * var(--u)); }
.as-cs__fila .is-spazio { flex: 1 1 auto !important; font-size: calc(16 * var(--u)); }
/* Il dito: il cerchio grigio delle registrazioni dello schermo, come in «prenota». */
.as-cs__tocco { position: absolute; left: calc(347 * var(--u)); top: calc(731 * var(--u)); z-index: 10; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .2); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }
/* Il giro (16 s), solo dal vivo: il sito, il tocco sul bottone, la chat sale; sale la
   tastiera, la sposa scrive e invia, i puntini, la risposta con gli orari, 11:00,
   la domanda sugli invitati, il nome; la tastiera scende e arriva la scheda. Alle 12,5 s,
   accanto, la notifica sul telefono della titolare (--nt-rit). */
.as-demo-vivo .as-cs__velo { animation: as-cs-velo 16s infinite both; }
.as-demo-vivo .as-cs__foglio { animation: as-cs-foglio 16s infinite both; }
.as-demo-vivo .as-cs__lancia { animation: as-cs-lancia 16s infinite both; }
.as-demo-vivo .as-cs__tastiera { animation: as-cs-tastiera 16s infinite both; }
.as-demo-vivo .as-cs__campo { animation: as-cs-campo 16s infinite both; }
.as-demo-vivo .as-cs__segna { animation: as-cs-segna 16s infinite both; }
.as-demo-vivo .as-cs__digita.is-1 { animation: as-cs-d1 16s infinite both; }
.as-demo-vivo .as-cs__digita.is-2 { animation: as-cs-d2 16s infinite both; }
.as-demo-vivo .as-cs__digita.is-3 { animation: as-cs-d3 16s infinite both; }
.as-demo-vivo .as-cs__tocco { animation: as-cs-tocco 16s infinite both; }
.as-demo-vivo .as-cs__rapide .is-scelta { animation: as-cs-scelta 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:1"] { animation: as-cs-v1 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:2"] { animation: as-cs-v2 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:3"] { animation: as-cs-v3 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:4"] { animation: as-cs-v4 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:5"] { animation: as-cs-v5 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:6"] { animation: as-cs-v6 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:7"] { animation: as-cs-v7 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:8"] { animation: as-cs-v8 16s infinite both; }
.as-demo-vivo .as-cs__v[style*="--m:9"] { animation: as-cs-v9 16s infinite both; }
@keyframes as-cs-velo { 0%, 7% { opacity: 0; } 10%, 96% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
@keyframes as-cs-foglio { 0%, 7.2% { transform: translateY(102%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 10.5%, 96% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .9, .6); } 99.5%, 100% { transform: translateY(102%); } }
@keyframes as-cs-lancia { 0%, 5.8% { transform: none; } 6.4% { transform: scale(.9); } 7.2%, 100% { transform: none; } }
@keyframes as-cs-tastiera { 0%, 13.5% { height: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 15.5%, 70% { height: calc(291 * var(--u)); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 72%, 100% { height: 0; } }
@keyframes as-cs-campo { 0%, 13.5% { margin-bottom: calc(34 * var(--u)); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 15.5%, 70% { margin-bottom: calc(8 * var(--u)); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 72%, 100% { margin-bottom: calc(34 * var(--u)); } }
@keyframes as-cs-segna { 0%, 16.4% { opacity: 1; } 16.5%, 28% { opacity: 0; } 28.1%, 45.4% { opacity: 1; } 45.5%, 53.5% { opacity: 0; } 53.6%, 61.4% { opacity: 1; } 61.5%, 66% { opacity: 0; } 66.1%, 100% { opacity: 1; } }
@keyframes as-cs-d1 { 0%, 16.5% { opacity: 0; clip-path: inset(0 100% 0 0); } 16.6% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(27, end); } 26.5%, 28% { opacity: 1; clip-path: inset(0 0 0 0); } 28.1%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes as-cs-d2 { 0%, 45.5% { opacity: 0; clip-path: inset(0 100% 0 0); } 45.6% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(23, end); } 52.5%, 53.5% { opacity: 1; clip-path: inset(0 0 0 0); } 53.6%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes as-cs-d3 { 0%, 61.5% { opacity: 0; clip-path: inset(0 100% 0 0); } 61.6% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(8, end); } 64.5%, 66% { opacity: 1; clip-path: inset(0 0 0 0); } 66.1%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes as-cs-tocco {
	0%, 5.2% { opacity: 0; left: calc(347 * var(--u)); top: calc(731 * var(--u)); transform: scale(.7); }
	6% { opacity: 1; left: calc(347 * var(--u)); top: calc(731 * var(--u)); transform: scale(.9); }
	7.5% { opacity: 0; left: calc(347 * var(--u)); top: calc(731 * var(--u)); transform: scale(1.3); }
	8%, 12.2% { opacity: 0; left: calc(170 * var(--u)); top: calc(789 * var(--u)); transform: scale(.7); }
	13% { opacity: 1; left: calc(170 * var(--u)); top: calc(789 * var(--u)); transform: scale(.9); }
	14.5% { opacity: 0; left: calc(170 * var(--u)); top: calc(789 * var(--u)); transform: scale(1.3); }
	15%, 27.2% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.7); }
	28% { opacity: 1; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.9); }
	29.5% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(1.3); }
	30%, 52.7% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.7); }
	53.5% { opacity: 1; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.9); }
	55% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(1.3); }
	55.5%, 65.2% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.7); }
	66% { opacity: 1; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(.9); }
	67.5%, 100% { opacity: 0; left: calc(360 * var(--u)); top: calc(533 * var(--u)); transform: scale(1.3); }
}
@keyframes as-cs-scelta { 0%, 41.5% { background: transparent; color: #6E1F2B; } 42.5%, 100% { background: #6E1F2B; color: #fff; } }
@keyframes as-cs-v1 { 0%, 28.2% { grid-template-rows: 0fr; opacity: 0; } 29.5%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v2 { 0%, 30% { grid-template-rows: 0fr; opacity: 0; } 31%, 35.5% { grid-template-rows: 1fr; opacity: 1; } 36.5%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v3 { 0%, 36.2% { grid-template-rows: 0fr; opacity: 0; } 37.5%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v4 { 0%, 38% { grid-template-rows: 0fr; opacity: 0; } 39.3%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v5 { 0%, 42.8% { grid-template-rows: 0fr; opacity: 0; } 44%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v6 { 0%, 53.7% { grid-template-rows: 0fr; opacity: 0; } 55%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v7 { 0%, 57.8% { grid-template-rows: 0fr; opacity: 0; } 59%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v8 { 0%, 66.2% { grid-template-rows: 0fr; opacity: 0; } 67.5%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes as-cs-v9 { 0%, 72% { grid-template-rows: 0fr; opacity: 0; } 74%, 97% { grid-template-rows: 1fr; opacity: 1; } 99%, 100% { grid-template-rows: 0fr; opacity: 0; } }
/* Da telefono (contenitore sotto i 480 px): il telefono largo quanto la colonna, sotto
   la schermata di blocco della titolare a tutta larghezza, come in «prenota». */
@container as-app (max-width: 479px) {
	.as-demo--ai .as-app-tel, .as-demo--chatsito .as-app-tel { font-size: calc(min(var(--tel-w-m, 314px), 100cqw / 1.04) / 19); }
	.as-demo--chatsito .as-notifica-box { max-width: none; }
	.as-demo--chatsito .as-blocco__ora { font-size: 56px; }
	.as-demo--chatsito .as-blocco .as-notifica__titolo, .as-demo--chatsito .as-blocco .as-notifica__testo { font-size: 15px; line-height: 20px; }
	/* v0.39: da telefono niente testo sotto gli 11px veri (14,5 punti su uno schermo di 302-314 px).
	   L'assistente: le schede con la riga delle stelle su due righe e due pillole (Indicazioni
	   resta da computer); la chat: il sottotitolo della testata e la scheda della visita. */
	.as-demo--ai :is(.as-ai__luogo-t small, .as-ai__luogo-t > span, .as-ai__pillole > span, .as-ai__fonte) { font-size: calc(14.5 * var(--u)); }
	.as-demo--ai .as-ai__pillole > span:nth-child(3) { display: none; }
	.as-demo--chatsito :is(.as-cs__chi small, .as-cs__ora, .as-cs__scheda-r span:not(.as-cs__mini), .as-cs__scheda-b span) { font-size: calc(14.5 * var(--u)); }
	.as-demo--chatsito .as-cs__scheda { width: 94%; }
}

@media (max-width: 800px) {
	.as-demo.as-demo--app { flex-direction: column; gap: 18px; }
	.as-notifica-box { flex: 0 0 auto; width: 100%; max-width: 320px; }
	/* v0.38: il configuratore e lo scanner decidono da soli col contenitore (query «as-app»). */
}

/* ══ TI È MAI SUCCESSO? (site/scene, v0.37: il test) ═══════════════════════
   Una frase per riga, grande e breve; la soluzione sale solo sotto quella che
   tocchi (.is-si), in fondo il conto e l'invito. Tutto spento solo quando lo
   script gira (.as-scene--viva): senza, frasi e soluzioni sono in vista. */
.as-scene__griglia { display: grid; gap: var(--as-sp-6); }
@media (min-width: 1000px) {
	.as-scene__griglia { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: var(--as-sp-8); align-items: start; }
	.as-scene__testa { grid-column: 1; grid-row: 1 / span 2; }
	.as-scene__lista, .as-scene__esito { grid-column: 2; }
}
.as-scene__titolo { margin: 0; max-width: 11ch; }
.as-scene__titolo em, .as-prova__titolo em { font-style: normal; color: var(--as-grigio-display); }
.as-scene__istruzione { display: flex; align-items: center; gap: 10px; margin: var(--as-sp-5) 0 0; font-size: 17px; color: var(--as-muted); }
/* v0.38 (29/09): il segno accanto all'istruzione è il cerchio VUOTO delle righe (prima era
   arancio già spuntato: sembrava che una voce fosse già scelta). Il gesto lo mostra la prima
   riga, che pulsa una volta quando la lista entra (.is-invito, motion.js). */
.as-scene__istruzione::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .3); }
.as-scene.is-invito .as-scena:first-child .as-scena__spunta { animation: as-scene-invito 1.1s .2s cubic-bezier(.34, 1.56, .64, 1) 2; }
@keyframes as-scene-invito { 0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .3); } 45% { transform: scale(1.14); box-shadow: inset 0 0 0 2px var(--as-arancio); } }
.as-scene .as-scene__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--as-line); }
.as-scena { border-bottom: 1px solid var(--as-line); }
.as-scena__frase { appearance: none; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 20px; width: 100%; margin: 0; padding: 24px 0; border: 0; background: none; color: var(--as-ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-scena__parole { font-size: clamp(20px, 1.8vw, 27px); line-height: 1.28; letter-spacing: -.016em; transition: transform .45s var(--as-ease-out); }
.as-scena__spunta { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .3); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 L10.2 16.5 L18 8' fill='none' stroke='%230A0A0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0% no-repeat; transition: background-color .3s ease, background-size .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.as-scena.is-si .as-scena__spunta { background-color: var(--as-arancio); background-size: 60%; box-shadow: none; transform: scale(1.08); }
@media (hover: hover) {
	.as-scena__frase:hover .as-scena__parole { transform: translateX(6px); }
	.as-scena__frase:hover .as-scena__spunta { box-shadow: inset 0 0 0 1.5px var(--as-ink); }
	.as-scena.is-si .as-scena__frase:hover .as-scena__spunta { box-shadow: none; }
}
.as-scena__frase:focus-visible { outline: 2px solid var(--as-arancio); outline-offset: 4px; border-radius: 10px; }
.as-scena__soluzione { position: relative; margin: -6px 0 24px 50px; padding-left: 26px; font-size: 17px; line-height: 1.5; color: var(--as-ink); }
.as-scena__soluzione::before { content: ""; position: absolute; left: 0; top: .55em; width: 15px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4' fill='none' stroke='%23F37022' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.as-scene--viva .as-scena__soluzione { max-height: 0; margin-bottom: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height .55s var(--as-ease-out), margin .55s var(--as-ease-out), opacity .35s ease, transform .55s var(--as-ease-out); }
.as-scene--viva .as-scena.is-si .as-scena__soluzione { max-height: 6em; margin-bottom: 24px; opacity: 1; transform: none; }
.as-scene:not(.as-scene--viva) .as-scena__spunta,
.as-scene:not(.as-scene--viva) .as-scene__istruzione,
.as-scene:not(.as-scene--viva) .as-scene__conto { display: none; }
.as-scene:not(.as-scene--viva) .as-scena__frase { grid-template-columns: minmax(0, 1fr); cursor: default; }
.as-scene:not(.as-scene--viva) .as-scena__soluzione { margin-left: 0; }
/* Il conto e l'invito: grigio chiaro finché non si tocca niente, poi carbone. */
.as-scene__esito { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; padding: 22px 24px 22px 28px; border-radius: calc(22px * var(--as-brm)); background: var(--as-sup); transition: background-color .45s ease, color .45s ease; }
@supports (corner-shape: squircle) { .as-scene__esito { corner-shape: squircle; } }
.as-scene__esito p { margin: 0; }
.as-scene__conto { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.as-scene__conto b { display: inline-block; font-weight: 300; }
.as-scene__conto b.is-scatto { animation: as-scene-scatto .5s cubic-bezier(.34, 1.56, .64, 1); }
.as-scene__conto span { font-size: .5em; color: var(--as-muted); }
@keyframes as-scene-scatto { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: var(--as-arancio); } 100% { transform: scale(1); } }
.as-scene__msg { flex: 1 1 240px; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.as-scene__cta { flex: 0 0 auto; }
/* v0.38: il conto si vede solo dal primo tocco (.is-contato): prima un «0/5» si leggeva come
   un voto zero. Prima c'è solo l'invito. */
.as-scene--viva:not(.is-contato) .as-scene__conto { display: none; }
/* Da telefono, dal primo tocco il riquadro diventa una barra ferma in fondo allo schermo
   (sticky dentro la sezione: scorrendo si posa al suo posto sotto la lista). Nella barra
   il conto e l'invito; la frase lunga torna quando nessuna voce è scelta. */
@media (max-width: 699px) {
	.as-scene__esito { margin-top: 20px; padding: 18px 18px 18px 22px; }
	.as-scene__cta { flex: 1 1 auto; }
	.as-scene.is-contato .as-scene__esito { position: sticky; bottom: 12px; z-index: 6; flex-wrap: nowrap; gap: 14px; min-height: 64px; padding: 8px 8px 8px 20px; box-shadow: 0 10px 30px -12px rgba(10, 10, 10, .45); }
	.as-scene.is-contato .as-scene__msg { display: none; }
	.as-scene.is-contato .as-scene__conto { font-size: 30px; flex: 1 1 auto; }
	.as-scene.is-contato .as-scene__cta { flex: 0 0 auto; }
}
/* LA MACCHINA DA SCRIVERE (v0.102, Rami 04/11: «le righe scritte una alla volta, in stile macchina da scrivere»).
   motion.js (macchinaDaScrivere) spezza ogni frase in lettere e accende .as-scene--tw: le lettere aspettano trasparenti al
   loro posto (l'impaginazione è già quella finale) e cadono una alla volta (.is-b): scendono un po' storte e più grandi, si
   schiacciano sul foglio e si posano dritte. Il cerchio della riga compare quando la riga comincia (.is-tw-su). Il cursore è
   largo zero: non sposta mai una lettera. */
.as-tw__p { white-space: nowrap; }
.as-tw__c { display: inline-block; }
.as-scene--tw .as-tw__c { opacity: 0; }
.as-scene--tw .as-tw__c.is-b { opacity: 1; animation: as-tw-colpo .2s cubic-bezier(.2, .9, .3, 1) both; }
.as-scene--tw .as-tw__c.is-subito { animation: none; }
@keyframes as-tw-colpo {
	0% { opacity: 0; transform: translateY(-.34em) rotate(var(--r, 0deg)) scale(1.18); }
	38% { opacity: 1; transform: translateY(.05em) rotate(calc(var(--r, 0deg) * .35)) scale(.97); }
	100% { opacity: 1; transform: none; }
}
.as-tw__cur { position: relative; display: inline-block; width: 0; height: 1em; }
.as-tw__cur::after { content: ""; position: absolute; left: .05em; bottom: -.2em; width: 2px; height: 1.15em; border-radius: 1px; background: var(--as-arancio); }
.as-tw__cur.is-ferma::after { animation: as-tw-cursore 1.05s steps(1) infinite; }
@keyframes as-tw-cursore { 50% { opacity: 0; } }
.as-scene--tw .as-scena:not(.is-tw-su) .as-scena__spunta { opacity: 0; transform: scale(.4); }
.as-scene--tw .as-scena__spunta { transition: opacity .3s ease, background-color .3s ease, background-size .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }

/* ══ GUARDA COME FUNZIONA (site/prova) ═════════════════════════════════════
   [mockup-browser] v0.38 · 29/09/2026. Da computer: la versione LARGA mette il titolo a
   sinistra e la riga sotto a destra sulla sua base, i quattro punti in fila sotto (prima
   stavano in basso a destra e lasciavano vuoto un quadrante). Il titolo è un titolo di
   sezione: 64px al massimo, un gradino sotto l'H1 (88); nella versione AFFIANCATA (il
   telefono accanto al testo) va su tre righe e non su cinque. Sotto i 1000px l'ordine diventa titolo, riga, SCHERMATA,
   punti: la cosa promessa arriva subito, non dopo uno schermo di testo. Da telefono
   niente riquadro grigio: la schermata (che lì è sempre un telefono) sta sul bianco. */
.as-prova__griglia { display: grid; gap: var(--as-sp-7); }
.as-prova__titolo { margin: 0; max-width: 16ch; }
.as-prova__sotto { margin: var(--as-sp-5) 0 0; max-width: 42ch; color: var(--as-muted); }
/* v0.73 (Rami, 29/10): i punti sono quattro MINI CARD. Nella variante larga, senza la riga sotto il titolo, stanno a destra
   del titolo (2 × 2), al posto della riga; con la riga restano sotto, in fila da 4. */
.as-prova__punti { list-style: none; margin: var(--as-sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.as-prova__card { display: grid; gap: 6px; align-content: start; padding: 18px 18px 20px; border-radius: calc(16px * var(--as-brm)); background: var(--as-sup); }
@supports (corner-shape: squircle) { .as-prova__card { corner-shape: squircle; } }
.as-prova__card-n { font-size: 12px; letter-spacing: .08em; color: var(--as-muted); }
.as-prova__card b { font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--as-ink); }
.as-prova__card > span:last-child { font-size: 15px; line-height: 1.45; color: var(--as-muted); }
.as-prova__palco { min-width: 0; }
.as-prova__demo { display: flex; justify-content: center; padding: clamp(22px, 3vw, 52px); border-radius: calc(28px * var(--as-brm)); background: var(--as-sup); overflow: hidden; }
@supports (corner-shape: squircle) { .as-prova__demo { corner-shape: squircle; } }
/* ── ECOMMERCE: i due telefoni fotografici (v0.86, 01/11; inc/demo.php caso «negozio») ──
   A sinistra il cliente (iPhone blu dal basso, intero), a destra il titolare (iPhone argento di sbieco) che esce dal bordo del
   pannello e sfuma verso destra e in basso: «si veda solo a metà, sfumato» (Rami). Il pannello ritaglia (overflow hidden).
   Da telefono resta solo il cliente, grande. Nessun figlio assoluto da solo: le immagini stanno nel flusso (Errori 1.73). */
.as-ec { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: end; width: 100%; }
.as-ec__tel { margin: 0; min-width: 0; }
.as-ec__tel img { display: block; width: 100%; height: auto; }
.as-ec__tel--cliente { position: relative; z-index: 2; justify-self: start; width: 100%; max-width: 340px; margin-bottom: -2%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .22)); }
.as-ec__tel--titolare { position: relative; z-index: 1; justify-self: end; align-self: end; width: 87%; margin-right: 1%; margin-bottom: -46%; container-type: inline-size; -webkit-mask-image: linear-gradient(to top, transparent 30%, #000 56%); mask-image: linear-gradient(to top, transparent 30%, #000 56%); } /* v0.86.3 (Rami): frontale e vivo (l'iPhone del kit coi tasti), più in basso: si vede meno schermo, la metà bassa sfuma nel pannello */
.as-ec__tel--titolare .as-iphone { font-size: calc(100cqw / 20.51); } /* 434 punti di telaio: il telefono riempie il figure */
.as-ec__dida { display: block; margin: 0 0 14px 6%; }
/* v0.86.4 (Rami, 01/11: «dal telefono i mockup sono giganteschi; il secondo levalo, l'altro rimpiccioliscilo e trova un bel
   layout»): sotto i 900px resta solo il cliente, piccolo, al centro del pannello grigio (come da computer), che esce dal
   fondo del pannello: il fondo del telefono si taglia sul bordo. */
@media (max-width: 899px) {
	.as-prova__demo:has(> .as-ec) { display: block; padding: 32px 0 40px; border-radius: calc(28px * var(--as-brm)); background: var(--as-sup); overflow: hidden; } /* v0.86.5 (Rami: «tagliato in basso, ombre tagliate»): il telefono intero e l'ombra dentro il pannello */
	.as-ec { display: block; }
	.as-ec__tel--cliente { width: 50%; max-width: 230px; margin: 0 auto; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .16)); }
	.as-ec__tel--titolare { display: none; }
}
.as-prova__nota { margin: 12px 0 0; text-align: right; color: var(--as-muted); }
/* v0.74 (Rami, 29/10: «troppe scritte»): su Siti web la sezione è solo i mockup e UNA frase sotto, grande, al centro. */
.as-prova__frase { margin: var(--as-sp-7) auto 0; max-width: 20ch; text-align: center; text-wrap: balance; }
.as-prova__frase em { font-style: normal; color: var(--as-grigio-display); }
@media (max-width: 699px) { .as-prova__frase { margin-top: var(--as-sp-6); font-size: var(--as-type-display-sm); } }
@media (min-width: 1000px) {
	.as-prova:not(.as-prova--larga) .as-prova__griglia { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: var(--as-sp-8); align-items: center; }
	.as-prova .as-prova__titolo { font-size: clamp(40px, 4.4vw, 64px); } /* titolo di sezione, un gradino sotto l'H1 (88) */
	.as-prova--larga .as-prova__testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--as-sp-8); align-items: start; }
	.as-prova--larga .as-prova__sotto { grid-column: 2; grid-row: 1; margin: 0; }
	.as-prova--larga .as-prova__punti { grid-column: 2; grid-row: 1; margin-top: 0; align-self: start; }
	.as-prova--larga .as-prova__titolo { align-self: start; } /* v0.73.1 (Rami): il titolo in alto, allineato alle card, non in fondo */
	.as-prova--larga .as-prova__sotto ~ .as-prova__punti { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--as-sp-6); margin-top: var(--as-sp-7); padding-top: var(--as-sp-6); border-top: 1px solid var(--as-line); }
}
@media (max-width: 999px) {
	.as-prova__griglia { gap: 0; }
	.as-prova__testa { display: contents; }
	.as-prova__titolo { order: 1; }
	.as-prova__sotto { order: 2; }
	.as-prova__palco { order: 3; margin-top: var(--as-sp-6); }
	.as-prova__punti { order: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--as-sp-7); }
}
@media (max-width: 699px) {
	.as-prova__titolo { font-size: var(--as-type-display-sm); max-width: 18ch; }
	.as-prova__sotto { margin-top: 14px; }
	.as-prova__palco { margin-top: 28px; }
	.as-prova__demo { padding: 0; border-radius: 0; background: transparent; overflow-x: clip; overflow-y: visible; } /* le ombre dei telefoni escono in basso, niente sborda di lato */
	.as-prova__punti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; } /* v0.86.4: 2×2 anche da telefono, più compatte */
	.as-prova__card b { font-size: 16px; }
	.as-prova__card > span:last-child { font-size: 14.5px; }
	.as-prova__nota { margin-top: 16px; text-align: left; }
}

/* ── LA CONCESSIONARIA (v0.39, 29/09, caso 10 di Problemi & Soluzioni) ─────────────
   Il gestionale web di Autosalone Bellini (inc/demo-app.php, arfia_demo_concessionaria):
   le richieste da ogni fonte in un elenco solo, la scheda dell'auto, l'agenda delle prove.
   Font di sistema, grigi da gestionale, stati a pillola come nel cruscotto (mai gialli).
   Fermo = stato finale (richiesta entrata, prova fissata); il giro di 12 s solo dal vivo. */
.as-demo.as-demo--concessionaria { container: as-cc / inline-size; display: block; max-width: 880px; padding: 0; background: transparent; box-shadow: none; }
.as-cc { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .45); font: 13px/1.35 -apple-system, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.005em; color: #1C2330; font-variant-numeric: tabular-nums; }
.as-cc p { margin: 0; }
.as-cc .as-ico { width: 15px; height: 15px; flex: none; }
.as-cc__ic { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-cc__top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #E6E8EC; background: #FBFBFC; }
.as-cc__marchio { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.as-cc__marchio .as-lg { width: 28px; height: 28px; border-radius: 7px; }
.as-cc__cerca { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; overflow: hidden; border-radius: 8px; background: #F0F2F5; font-size: 12.5px; color: #6B7280; white-space: nowrap; }
.as-cc__utente { display: flex; align-items: center; gap: 8px; margin-left: auto !important; font-size: 11.5px; line-height: 1.2; color: #6B7280; white-space: nowrap; }
.as-cc__utente b { display: block; font-size: 12.5px; color: #1C2330; }
.as-cc__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #EEF0F3; color: #4B5563; }
.as-cc__av.is-fonte .as-cc__ic { width: 17px; height: 17px; }
.as-cc__corpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.as-cc__lista { min-width: 0; padding: 12px 12px 10px; border-right: 1px solid #E6E8EC; }
.as-cc__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px !important; }
.as-cc__h b { font-size: 14px; }
.as-cc__h > span { font-size: 12px; color: #6B7280; }
.as-cc__conta { display: inline-grid; min-width: 22px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #E3EDFB; color: #1F5FAD; font-style: normal; font-weight: 600; text-align: center; }
.as-cc :is(.as-cc__conta, .as-cc__stati, .as-cc__btn) > * { grid-area: 1 / 1; }
.as-cc .is-prima { opacity: 0; }
.as-cc__filtri { display: flex; gap: 6px; margin-bottom: 6px !important; overflow: hidden; }
.as-cc__filtri span { flex: none; padding: 4px 9px; border-radius: 999px; background: #F0F2F5; font-size: 11.5px; color: #4B5563; }
.as-cc__filtri span.is-on { background: #1F2F46; color: #fff; }
.as-cc__richieste { display: grid; margin: 0; padding: 0; list-style: none; }
.as-cc__rich { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av chi stato" "av fonte fonte" "av veicolo veicolo" "av msg msg"; column-gap: 10px; row-gap: 1px; max-height: 120px; padding: 9px 8px; overflow: hidden; border-radius: 10px; }
.as-cc__rich + .as-cc__rich { box-shadow: 0 -1px 0 #F0F2F5; }
.as-cc__rich.is-scelta { background: #EEF3FB; box-shadow: none; }
.as-cc__rich .as-cc__av { grid-area: av; align-self: start; }
.as-cc__chi { grid-area: chi; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.as-cc__chi b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.as-cc__chi small { flex: none; font-size: 11.5px; color: #8A919C; }
.as-cc__fonte { grid-area: fonte; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #6B7280; }
.as-cc__fonte.is-whatsapp { color: #1F7A46; }
.as-cc__fonte.is-sito { color: #1F5FAD; }
.as-cc__fonte.is-portale { color: #5E3A99; }
.as-cc__veicolo { grid-area: veicolo; font-size: 12px; font-weight: 600; }
.as-cc__msg { grid-area: msg; overflow: hidden; font-size: 12px; color: #4B5563; white-space: nowrap; text-overflow: ellipsis; }
.as-cc__stato { grid-area: stato; align-self: start; justify-self: start; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.as-cc__stato.is-nuova { background: #E3EDFB; color: #1F5FAD; }
.as-cc__stato.is-prova { background: #E4F3E9; color: #17803D; }
.as-cc__stato.is-richiama { background: #FBE9E7; color: #B3412F; }
.as-cc__stato.is-trattativa { background: #EFE8FA; color: #5E3A99; }
.as-cc__stato.is-disponibile { background: #F0F2F5; color: #4B5563; }
.as-cc__destra { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 12px; background: #FAFBFC; }
.as-cc__scheda { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E6E8EC; }
.as-cc__foto { align-self: start; aspect-ratio: 3 / 2; border-radius: 8px; background: #D9DCE1 center / cover no-repeat; }
.as-cc__dati { min-width: 0; }
.as-cc__modello { font-size: 14px; font-weight: 700; line-height: 1.25; }
.as-cc__spec { display: grid; gap: 1px; margin-top: 3px !important; font-size: 11.5px; color: #6B7280; }
.as-cc__prezzo { margin-top: 6px !important; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.as-cc__prezzo small { margin-left: 6px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #8A919C; }
.as-cc__stati { display: inline-grid; margin-top: 6px !important; }
.as-cc__stati.is-riga { grid-area: stato; align-self: start; justify-self: end; margin-top: 0 !important; }
.as-cc__stati.is-riga > em { justify-self: end; }
.as-cc__azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.as-cc__btn { display: inline-grid; place-items: center; height: 34px; padding: 0 12px; border-radius: 8px; background: #1F2F46; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.as-cc__btn > span { display: inline-flex; align-items: center; gap: 5px; }
.as-cc__btn .as-ico { width: 14px; height: 14px; }
.as-cc__btn.is-sec { display: grid; background: #fff; color: #1C2330; box-shadow: inset 0 0 0 1px #D5D9E0; }
.as-cc__agenda { padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E6E8EC; }
.as-cc__agenda ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.as-cc__agenda li { display: grid; grid-template-columns: 56px 46px minmax(0, 1fr); align-items: center; gap: 10px; max-height: 60px; padding: 6px; overflow: hidden; border-radius: 8px; }
.as-cc__agenda time { font-size: 11px; line-height: 1.2; color: #6B7280; }
.as-cc__agenda time b { display: block; font-size: 13px; color: #1C2330; }
.as-cc__agenda i { width: 46px; height: 31px; border-radius: 6px; background: #D9DCE1 center / cover no-repeat; }
.as-cc__agenda li > span { min-width: 0; overflow: hidden; font-size: 11.5px; color: #6B7280; white-space: nowrap; text-overflow: ellipsis; }
.as-cc__agenda li > span b { display: block; font-size: 12.5px; color: #1C2330; }
.as-cc__nuova { background: #F1F8F3; }
.as-cc__toast { position: absolute; top: 58px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #1C2330; color: #fff; font-size: 12px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }
/* Il pannello dei casi (560-759 px): sempre due colonne, la foto dell'auto sopra i dati. */
@container as-cc (max-width: 759px) {
	.as-cc__cerca, .as-cc__btn.is-sec { display: none; }
	.as-cc__scheda { grid-template-columns: minmax(0, 1fr); }
	.as-cc__foto { aspect-ratio: 16 / 9; }
	.as-cc__rich { padding-inline: 6px; }
}
/* Il contenitore stretto (telefono): una colonna, le due richieste più recenti, la scheda
   e l'agenda; in testata restano il logo e il volto. */
@container as-cc (max-width: 559px) {
	.as-cc__corpo { grid-template-columns: minmax(0, 1fr); }
	.as-cc__lista { border-right: 0; border-bottom: 1px solid #E6E8EC; }
	.as-cc__utente > span:not(.as-cc__av) { display: none; }
	.as-cc .is-extra { display: none; }
	.as-cc__scheda { grid-template-columns: 128px minmax(0, 1fr); }
	.as-cc__toast { top: auto; bottom: 12px; left: 12px; right: 12px; }
}
@container as-cc (max-width: 379px) {
	.as-cc__scheda { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
	.as-cc__prezzo { font-size: 16px; }
	.as-cc__btn.is-sec { display: none; }
}
/* Il giro (12 s), solo dal vivo: entra la richiesta, sale il contatore, si fissa la prova. */
.as-demo-vivo .as-cc__arrivo { animation: as-cc-arrivo 12s infinite; }
.as-demo-vivo .as-cc__conta .is-prima { animation: as-cc-via 12s infinite; }
.as-demo-vivo .as-cc__conta .is-dopo { animation: as-cc-vieni 12s infinite; }
.as-demo-vivo .as-cc__toast { animation: as-cc-toast 12s infinite; }
.as-demo-vivo .as-cc__btn:not(.is-sec) { animation: as-cc-premi 12s infinite; }
.as-demo-vivo :is(.as-cc__azioni, .as-cc__stati) .is-prima { animation: as-cc-via2 12s infinite; }
.as-demo-vivo :is(.as-cc__azioni, .as-cc__stati) .is-dopo { animation: as-cc-vieni2 12s infinite; }
.as-demo-vivo .as-cc__nuova { animation: as-cc-nuova 12s infinite; }
@keyframes as-cc-arrivo { 0%, 12% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } 18% { max-height: 120px; padding-top: 9px; padding-bottom: 9px; opacity: 1; } 96% { max-height: 120px; padding-top: 9px; padding-bottom: 9px; opacity: 1; } 100% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } }
@keyframes as-cc-via { 0%, 15% { opacity: 1; } 18%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes as-cc-vieni { 0%, 15% { opacity: 0; } 18%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes as-cc-toast { 0%, 15% { opacity: 0; transform: translateY(-8px); } 19%, 42% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes as-cc-premi { 0%, 47% { transform: none; } 49% { transform: scale(.96); } 51%, 100% { transform: none; } }
@keyframes as-cc-via2 { 0%, 49% { opacity: 1; } 52%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes as-cc-vieni2 { 0%, 49% { opacity: 0; } 52%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes as-cc-nuova { 0%, 50% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; background: #DDF0E3; } 56% { max-height: 60px; padding-top: 6px; padding-bottom: 6px; opacity: 1; background: #DDF0E3; } 80%, 95% { max-height: 60px; padding-top: 6px; padding-bottom: 6px; opacity: 1; background: #F1F8F3; } 100% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } }

/* ══ SITOWEB (v0.73): il sito dal computer e dal telefono, FERMO, sui dispositivi del kit ═══════════════════════
   Rami, 29/10: «falli statici e super realistici, iPhone e Mac; il design della concessionaria per il computer,
   dell'impresa per il telefono». Il MacBook (Safari, menu chiaro) col sito di Bellini rimesso in piedi per lo schermo
   largo (.as-sw2-ab, in --p sul canvas 812 × 507); davanti, in basso a destra, l'iPhone col sito di La tua impresa
   (la pagina del flusso, servizi.css, ferma in cima: --corso 0, --f 0, il foglio della conferma spento). */
.as-demo.as-demo--sitoweb2 { position: relative; display: block; width: 100%; max-width: 1180px; padding: 0 0 5%; background: transparent; box-shadow: none; container-type: inline-size;
	--f-ab: 'Anton', Impact, 'Arial Narrow Bold', sans-serif; --f-ab-t: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
	--f-ti: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; --f-ti-t: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.as-sw2__mac { width: 86%; }
.as-sw2__mac .as-macbook { font-size: calc(86cqw / 66); }
.as-sw2__tel { position: absolute; right: 0; bottom: 0; z-index: 3; width: 25%; }
.as-sw2__tel .as-iphone { font-size: calc(25cqw / 20.51); }
.as-sw2__sito { position: absolute; inset: 0; --corso: 0; --f: 0; }
.as-sw2__sito .as-fl-ok { display: none; }
.as-sw2__sito .as-fl-safari { left: 50%; right: auto; transform: translateX(-50%); } /* qui il centro con i margini auto non regge: si centra col transform */
.as-sw2__sito .as-volto, .as-sw2-ab .as-volto { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-sw2__sito img { display: block; }
@media (max-width: 699px) {
	.as-demo.as-demo--sitoweb2 { padding: 0; }
	.as-sw2__mac { display: none; }
	.as-sw2__tel { position: relative; width: min(340px, 100%); margin: 0 auto; }
	.as-sw2__tel .as-iphone { font-size: calc(min(340px, 100cqw) / 20.51); }
}
/* Il sito di Bellini da computer, in Safari (un px è --p). v0.73.1: hero fotografica a tutto schermo, la ricerca delle
   auto che la attraversa, le auto in evidenza sotto, tagliate dal bordo. */
.as-sw2-ab { --p: calc(var(--u) * 1.862); position: absolute; inset: 0; overflow: hidden; background: #F1EFE8; color: #0F0F10; font-family: var(--f-ab-t); font-size: calc(13 * var(--p)); line-height: 1.4; }
:where(.as-sw2-ab p) { margin: 0; } /* v0.73.3: a specificità zero, così i margini delle classi (titolo, pulsanti) valgono */
.as-sw2-ab svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.as-sw2-ab .as-sw2-ab__safari { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--p)); height: calc(40 * var(--p)); padding: 0 calc(12 * var(--p)); background: #E9E7E0; box-shadow: inset 0 -1px 0 rgba(15, 15, 16, .12); }
.as-sw2-ab .as-sw2-ab__semafori { display: flex; gap: calc(6 * var(--p)); }
.as-sw2-ab .as-sw2-ab__semafori i { width: calc(11 * var(--p)); height: calc(11 * var(--p)); border-radius: 50%; background: #C9C7C0; }
.as-sw2-ab .as-sw2-ab__nav { display: flex; gap: calc(10 * var(--p)); font-size: calc(18 * var(--p)); line-height: 1; color: rgba(15, 15, 16, .35); }
.as-sw2-ab .as-sw2-ab__nav i { font-style: normal; }
.as-sw2-ab .as-sw2-ab__url { justify-self: center; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--p)); width: 50%; height: calc(26 * var(--p)); border-radius: calc(7 * var(--p)); background: #F7F6F2; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .08); font-size: calc(11.5 * var(--p)); color: #3A3A3C; }
.as-sw2-ab .as-sw2-ab__url svg { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 1.8; color: #6A6A6E; }
.as-sw2-ab .as-sw2-ab__azioni { display: flex; gap: calc(8 * var(--p)); }
.as-sw2-ab .as-sw2-ab__azioni i { width: calc(14 * var(--p)); height: calc(14 * var(--p)); border-radius: calc(3 * var(--p)); box-shadow: inset 0 0 0 calc(1.5 * var(--p)) rgba(15, 15, 16, .3); }
.as-sw2-ab .as-sw2-ab__pag { position: absolute; top: calc(40 * var(--p)); left: 0; right: 0; bottom: 0; }
/* v0.74.2: la striscia sopra (sede, orari, telefono) e la testata vera. */
.as-sw2-ab .as-sw2-ab__striscia { display: flex; align-items: center; gap: calc(22 * var(--p)); height: calc(24 * var(--p)); padding: 0 calc(30 * var(--p)); background: #0F0F10; color: rgba(241, 239, 232, .72); font-size: calc(9.5 * var(--p)); font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.as-sw2-ab .as-sw2-ab__striscia span { display: flex; align-items: center; gap: calc(6 * var(--p)); }
.as-sw2-ab .as-sw2-ab__striscia .is-dx { margin-left: auto; color: #F1EFE8; }
.as-sw2-ab .as-sw2-ab__striscia svg { width: calc(10 * var(--p)); height: calc(10 * var(--p)); stroke-width: 1.8; color: #6F8EF2; }
.as-sw2-ab .as-sw2-ab__testa { display: flex; align-items: center; gap: calc(18 * var(--p)); height: calc(62 * var(--p)); padding: 0 calc(30 * var(--p)); background: #F1EFE8; box-shadow: inset 0 -1px 0 rgba(15, 15, 16, .1); }
/* v0.74.3: i marchi «veri» (arfia_sw2_logo_bellini / _impresa). */
.as-sw2-logo { display: flex; align-items: center; gap: calc(10 * var(--p)); }
.as-sw2-logo > svg { flex: none; width: calc(36 * var(--p)); height: calc(36 * var(--p)); }
.as-sw2-ab .as-sw2-logo--ab > svg { width: calc(40 * var(--p)); height: calc(31.5 * var(--p)); stroke: #0F0F10; } /* v0.74.7: l'auto a tratto fine, 56×44, alta quanto il blocco del nome; il tratto lo decide ogni path */
.as-sw2-logo > span { display: grid; line-height: 1; }
.as-sw2-logo--ab b { font-family: var(--f-ab); font-weight: 400; font-size: calc(22 * var(--p)); letter-spacing: .03em; text-transform: uppercase; color: #0F0F10; }
.as-sw2-logo--ab small { margin-top: calc(3 * var(--p)); font-size: calc(8.5 * var(--p)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(15, 15, 16, .55); white-space: nowrap; }
.as-sw2__sito .as-sw2-logo--ti { gap: calc(9 * var(--u)); }
.as-sw2__sito .as-sw2-logo--ti > svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.as-sw2__sito .as-sw2-logo--ti b { font-family: var(--f-ti); font-weight: 600; font-size: calc(16 * var(--u)); letter-spacing: -.02em; color: #12313A; }
.as-sw2__sito .as-sw2-logo--ti small { margin-top: calc(2 * var(--u)); font-size: calc(8.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(18, 49, 58, .6); white-space: nowrap; }
.as-sw2-ab .as-sw2-ab__voci { display: flex; gap: calc(20 * var(--p)); margin-left: calc(26 * var(--p)); font-size: calc(12.5 * var(--p)); font-weight: 500; letter-spacing: -.005em; color: rgba(15, 15, 16, .82); white-space: nowrap; }
.as-sw2-ab .as-sw2-ab__voci span:first-child { position: relative; color: #0F0F10; font-weight: 600; }
.as-sw2-ab .as-sw2-ab__voci span:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-6 * var(--p)); height: calc(2 * var(--p)); border-radius: 1px; background: #1F4FD8; }
.as-sw2-ab .as-sw2-ab__valuta { display: flex; align-items: center; gap: calc(7 * var(--p)); margin-left: auto; font-size: calc(12 * var(--p)); font-weight: 600; color: #0F0F10; white-space: nowrap; }
.as-sw2-ab .as-sw2-ab__valuta svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); color: #1F4FD8; }
.as-sw2-ab .as-sw2-ab__cta { display: flex; align-items: center; gap: calc(10 * var(--p)); height: calc(38 * var(--p)); padding: 0 calc(5 * var(--p)) 0 calc(16 * var(--p)); border-radius: 999px; background: #1F4FD8; color: #fff; white-space: nowrap; box-shadow: 0 calc(8 * var(--p)) calc(18 * var(--p)) calc(-8 * var(--p)) rgba(31, 79, 216, .7); }
.as-sw2-ab .as-sw2-ab__cta b { font-family: var(--f-ab); font-weight: 400; font-size: calc(13 * var(--p)); letter-spacing: .02em; text-transform: uppercase; }
.as-sw2-ab .as-sw2-ab__cta i { display: grid; place-items: center; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: 50%; background: #fff; color: #1F4FD8; font-style: normal; }
.as-sw2-ab .as-sw2-ab__cta svg { width: calc(13 * var(--p)); height: calc(13 * var(--p)); }
/* La hero: la foto a tutto schermo, il testo a sinistra sul velo, la ricerca che attraversa il bordo basso. */
.as-sw2-ab .as-sw2-ab__hero { position: relative; height: calc(286 * var(--p)); padding: calc(30 * var(--p)) calc(30 * var(--p)) 0; color: #fff; background: #2B2E33 center 62% / cover no-repeat; isolation: isolate; }
.as-sw2-ab .as-sw2-ab__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .55) 42%, rgba(10, 11, 13, .12) 72%), linear-gradient(180deg, rgba(10, 11, 13, 0) 55%, rgba(10, 11, 13, .55) 100%); }
.as-sw2-ab .as-sw2-ab__occhio { display: flex; align-items: center; gap: calc(7 * var(--p)); font-size: calc(10.5 * var(--p)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.as-sw2-ab .as-sw2-ab__occhio i { width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; background: #1F4FD8; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(31, 79, 216, .3); }
.as-sw2-ab .as-sw2-ab__h1 { margin-top: calc(12 * var(--p)); font-family: var(--f-ab); font-size: calc(58 * var(--p)); line-height: .92; letter-spacing: -.005em; text-transform: uppercase; }
.as-sw2-ab .as-sw2-ab__lede { margin-top: calc(12 * var(--p)); max-width: calc(330 * var(--p)); font-size: calc(13 * var(--p)); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.as-sw2-ab .as-sw2-ab__azioni2 { display: flex; gap: calc(8 * var(--p)); margin-top: calc(22 * var(--p)); } /* v0.74.1 (Rami): pulsanti vicini al titolo (22) e lontani dalla ricerca (44) */
.as-sw2-ab .as-sw2-ab__azioni2 span { display: flex; align-items: center; gap: calc(8 * var(--p)); height: calc(36 * var(--p)); padding: 0 calc(16 * var(--p)); border-radius: 999px; font-family: var(--f-ab); font-size: calc(13 * var(--p)); letter-spacing: .02em; text-transform: uppercase; }
.as-sw2-ab .as-sw2-ab__azioni2 .is-pieno { background: #fff; color: #0F0F10; }
.as-sw2-ab .as-sw2-ab__azioni2 .is-pieno svg { color: #1F4FD8; width: calc(14 * var(--p)); height: calc(14 * var(--p)); }
.as-sw2-ab .as-sw2-ab__azioni2 .is-vuoto { box-shadow: inset 0 0 0 calc(1.5 * var(--p)) rgba(255, 255, 255, .7); color: #fff; }
.as-sw2-ab .as-sw2-ab__cerca { position: absolute; left: calc(30 * var(--p)); right: calc(30 * var(--p)); bottom: calc(-28 * var(--p)); z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; height: calc(58 * var(--p)); padding: 0 calc(6 * var(--p)) 0 calc(18 * var(--p)); border-radius: calc(12 * var(--p)); background: #fff; color: #0F0F10; box-shadow: 0 calc(16 * var(--p)) calc(34 * var(--p)) calc(-12 * var(--p)) rgba(10, 11, 13, .45); }
.as-sw2-ab .as-sw2-ab__cerca > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(8 * var(--p)); padding-right: calc(14 * var(--p)); margin-right: calc(14 * var(--p)); border-right: 1px solid rgba(15, 15, 16, .12); line-height: 1.2; }
.as-sw2-ab .as-sw2-ab__cerca > span small { grid-column: 1; font-size: calc(9.5 * var(--p)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(15, 15, 16, .5); }
.as-sw2-ab .as-sw2-ab__cerca > span b { grid-column: 1; font-size: calc(12.5 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sw2-ab .as-sw2-ab__cerca > span svg { grid-column: 2; grid-row: 1 / span 2; width: calc(12 * var(--p)); height: calc(12 * var(--p)); color: rgba(15, 15, 16, .45); }
.as-sw2-ab .as-sw2-ab__cerca em { display: flex; align-items: center; gap: calc(8 * var(--p)); height: calc(46 * var(--p)); padding: 0 calc(18 * var(--p)); border-radius: calc(9 * var(--p)); background: #1F4FD8; color: #fff; font-family: var(--f-ab); font-style: normal; font-size: calc(14 * var(--p)); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.as-sw2-ab .as-sw2-ab__cerca em svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); }
/* Le auto in evidenza: tagliate dal bordo basso, la pagina continua. */
.as-sw2-ab .as-sw2-ab__evidenza { padding: calc(46 * var(--p)) calc(30 * var(--p)) 0; }
.as-sw2-ab .as-sw2-ab__sez { display: flex; justify-content: space-between; align-items: baseline; }
.as-sw2-ab .as-sw2-ab__sez b { font-family: var(--f-ab); font-weight: 400; font-size: calc(18 * var(--p)); letter-spacing: .01em; text-transform: uppercase; }
.as-sw2-ab .as-sw2-ab__sez span { font-size: calc(10.5 * var(--p)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1F4FD8; }
.as-sw2-ab .as-sw2-ab__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--p)); margin-top: calc(12 * var(--p)); }
.as-sw2-ab .as-sw2-ab__card { display: grid; gap: calc(3 * var(--p)); }
.as-sw2-ab .as-sw2-ab__card-foto { display: block; height: calc(96 * var(--p)); margin-bottom: calc(6 * var(--p)); border-radius: calc(8 * var(--p)); background: #E4E1D8 center 60% / cover no-repeat; }
.as-sw2-ab .as-sw2-ab__card b { font-family: var(--f-ab); font-weight: 400; font-size: calc(15 * var(--p)); line-height: 1; text-transform: uppercase; }
.as-sw2-ab .as-sw2-ab__card small { font-size: calc(9.5 * var(--p)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(15, 15, 16, .55); }
.as-sw2-ab .as-sw2-ab__card em { margin-top: calc(2 * var(--p)); font-family: var(--f-ab); font-style: normal; font-size: calc(16 * var(--p)); line-height: 1; }

/* ══ LA SCHERMATA BLOCCATA DEL TITOLARE (hero-ordine, v0.86.3, 01/11) ════════════════════════════════════════════════
   Com'è su iOS, scritta in PUNTI dello schermo (--u del kit, inc/dispositivi.php: 1px sulla pagina nuda, la scala del
   telefono sulla pagina). Vive dentro l'iPhone disegnato della scena Ecommerce (inc/demo.php, caso «negozio») e nella
   pagina nuda (?arfia_demo=hero-ordine | tel-hero-ordine). Rami: «molto più realistico, i tasti fisici, l'icona del wifi
   è bruttissima, e falla animata»: icone di stato in SVG, il telefono vero del kit coi tasti, e in vista (.as-demo-vivo)
   lo schermo si accende e la notifica scende dall'alto, in loop. Senza script resta acceso con la notifica al suo posto. */
.as-hd--lock { position: relative; overflow: hidden; width: calc(402 * var(--u)); height: calc(874 * var(--u)); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.as-disp__app > .as-hd--lock { width: 100%; height: 100%; }
.as-hd--lock *, .as-hd--lock *::before, .as-hd--lock *::after { box-sizing: border-box; margin: 0; padding: 0; }
.as-hd--lock .as-hd__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.as-hd--lock .as-hd__velo { position: absolute; inset: 0; pointer-events: none; }
.as-hd--lock { background: #0D0B0A; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif; text-align: center; -webkit-font-smoothing: antialiased; }
.as-hd--lock .as-hd__foto { object-position: 50% 42%; filter: brightness(.66) saturate(1.04); }
.as-hd--lock .as-hd__velo { background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .06) 36%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .5) 100%); }
.as-hd--lock .as-hd__stato { position: absolute; top: calc(18 * var(--u)); right: calc(30 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(14 * var(--u)); }
.as-hd--lock .as-hd__lucchetto { position: absolute; left: 50%; top: calc(66 * var(--u)); width: calc(12 * var(--u)); height: calc(10 * var(--u)); transform: translateX(-50%); border-radius: calc(2.5 * var(--u)); background: #fff; }
.as-hd--lock .as-hd__lucchetto::before { content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: -calc(7 * var(--u)); height: calc(9 * var(--u)); border: calc(2 * var(--u)) solid #fff; border-bottom: 0; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; }
.as-hd--lock .as-hd__data { position: absolute; left: 0; right: 0; top: calc(86 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .96); }
.as-hd--lock .as-hd__ora { position: absolute; left: 0; right: 0; top: calc(108 * var(--u)); font-size: calc(98 * var(--u)); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; color: #fff; }
.as-hd--lock .as-hd__pila { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(238 * var(--u)); text-align: left; } /* la vista «elenco» di iOS: la notifica sotto l'orologio, così resta in vista anche quando la metà bassa del telefono sfuma nel pannello */
.as-hd--lock .as-hd__notifica { position: relative; display: grid; grid-template-columns: calc(38 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); align-items: start; padding: calc(13 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(calc(34 * var(--u))) saturate(1.4); backdrop-filter: blur(calc(34 * var(--u))) saturate(1.4); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .2); }
.as-hd--lock .as-hd__app { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); background: #7A4430; color: #fff; }
.as-hd--lock .as-hd__app svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.as-hd--lock .as-hd__corpo { display: grid; row-gap: calc(1 * var(--u)); min-width: 0; padding-top: calc(1 * var(--u)); }
.as-hd--lock .as-hd__chi { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: calc(15 * var(--u)); letter-spacing: -.01em; }
.as-hd--lock .as-hd__chi small { font-weight: 400; font-size: calc(13 * var(--u)); color: rgba(255, 255, 255, .62); }
.as-hd--lock .as-hd__cosa { font-size: calc(15 * var(--u)); font-weight: 400; letter-spacing: -.01em; color: rgba(255, 255, 255, .96); }
.as-hd--lock .as-hd__dett { font-size: calc(15 * var(--u)); line-height: 1.28; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-hd--lock .as-hd__torcia, .as-hd--lock .as-hd__camera { position: absolute; bottom: calc(48 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(calc(24 * var(--u))); backdrop-filter: blur(calc(24 * var(--u))); }
.as-hd--lock .as-hd__torcia { left: calc(46 * var(--u)); }
.as-hd--lock .as-hd__camera { right: calc(46 * var(--u)); }
.as-hd--lock .as-hd__torcia::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(11 * var(--u)); height: calc(21 * var(--u)); transform: translate(-50%, -50%); border-radius: calc(2 * var(--u)); background: #fff; clip-path: polygon(15% 0, 85% 0, 100% 36%, 100% 100%, 0 100%, 0 36%); }
.as-hd--lock .as-hd__camera::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(24 * var(--u)); height: calc(18 * var(--u)); transform: translate(-50%, -50%); border: calc(2 * var(--u)) solid #fff; border-radius: calc(5 * var(--u)); }
.as-hd--lock .as-hd__camera::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); transform: translate(-50%, -50%); border: calc(2 * var(--u)) solid #fff; border-radius: 50%; }
.as-hd--lock .as-hd__home { position: absolute; left: 50%; bottom: calc(9 * var(--u)); width: calc(140 * var(--u)); height: calc(5 * var(--u)); transform: translateX(-50%); border-radius: calc(3 * var(--u)); background: rgba(255, 255, 255, .92); }
.as-hd--lock .as-hd__stato svg { display: block; height: calc(12 * var(--u)); width: auto; fill: #fff; }
.as-hd--lock .as-hd__nero { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; }
.as-demo-vivo .as-hd--lock .as-hd__nero { animation: as-lock-nero 11s ease-in-out infinite; }
.as-demo-vivo .as-hd--lock .as-hd__pila { animation: as-lock-pila 11s cubic-bezier(.2, .9, .25, 1.12) infinite; }
@keyframes as-lock-nero { 0%, 8% { opacity: 1; } 14%, 80% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes as-lock-pila { 0%, 18% { opacity: 0; transform: translateY(calc(-70 * var(--u))) scale(.96); } 25%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(calc(-30 * var(--u))) scale(.98); } }

/* ══ IL PREVENTIVATORE NEL MACBOOK (v0.89, 02/11/2026; inc/demo.php caso «software», arfia_demo_preventivatore) ══════════
   Rami: «migliora tantissimo quella dashboard, non serve che sia animata, serve che sembri un prodotto a misura esageratamente
   bello e colorato; mettila dentro il mockup di un MacBook». Il MacBook del kit a schermo intero (menu 'tutto': l'app arriva al
   bordo alto e la tacca le si disegna sopra; il centro della fascia alta resta libero). Dentro, la ricetta dei pannelli che Rami
   approva (v0.65 della Landing): una luce colorata sotto (pesca, rosa, cielo, lavanda, menta: niente gialli), vetri bianchi col
   filo chiaro, angoli squircle della firma (--as-brm; i pill restano tondi), il contenuto del cliente dentro. Ogni categoria del
   listino ha il suo colore: lo stesso nella riga, nella barra del totale e nella legenda. Caratteri dell'impresa (gli stessi del
   suo sito nel telefono di Siti web): Bricolage Grotesque per titoli e cifre, Albert Sans per il resto (@font-face in
   servizi.css). Niente backdrop-filter: sopra una luce sfumata il vetro si legge uguale, e Safari non ha niente da ricalcolare.
   Tutto in px dell'app (--p) sul canvas 864 × 561 (lo schermo da 1512 × 982 punti diviso 1,75). */
.as-pq-scena { position: relative; isolation: isolate; width: 100%; max-width: 1180px; container-type: inline-size; }
.as-pq-scena .as-macbook { position: relative; z-index: 1; font-size: calc(94cqw / 66); margin: 0 auto; }
/* La luce dello schermo che cade sul pannello grigio: tre macchie morbide dietro il MacBook, ferme. */
.as-pq-scena__luce { position: absolute; z-index: 0; inset: 2% 4% 10%; pointer-events: none; background: radial-gradient(38% 46% at 18% 42%, rgba(255, 150, 120, .34) 0, rgba(255, 150, 120, 0) 72%), radial-gradient(40% 50% at 54% 30%, rgba(160, 130, 255, .3) 0, rgba(160, 130, 255, 0) 72%), radial-gradient(36% 46% at 86% 58%, rgba(110, 170, 255, .3) 0, rgba(110, 170, 255, 0) 72%); }

.as-pq {
	--p: calc(var(--u) * 1.75);
	--sq: var(--as-brm, 1);
	--ink: #14202B;
	--muted: #6B7180;
	--vetro: rgba(255, 255, 255, .6);
	--filo: inset 0 0 0 1px rgba(255, 255, 255, .85);
	--ombra: 0 calc(14 * var(--p)) calc(30 * var(--p)) calc(-20 * var(--p)) rgba(52, 36, 96, .42);
	--f-t: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	position: absolute;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: calc(172 * var(--p)) minmax(0, 1fr) calc(252 * var(--p));
	column-gap: calc(12 * var(--p));
	padding: calc(12 * var(--p));
	background: #F1ECF7;
	color: var(--ink);
	font-family: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: calc(11 * var(--p));
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
}
.as-pq::before { content: ''; position: absolute; z-index: -1; inset: -8%; background: radial-gradient(40% 46% at 4% 4%, #FF9E7F 0, rgba(255, 158, 127, 0) 70%), radial-gradient(34% 40% at 52% -4%, #FF92C8 0, rgba(255, 146, 200, 0) 70%), radial-gradient(40% 48% at 102% 26%, #8DB4FF 0, rgba(141, 180, 255, 0) 70%), radial-gradient(46% 46% at 66% 106%, #A98CFF 0, rgba(169, 140, 255, 0) 70%), radial-gradient(34% 40% at 8% 96%, #86E0BD 0, rgba(134, 224, 189, 0) 70%); }
:where(.as-pq) p { margin: 0; }
:where(.as-pq) :is(b, small, em, i, u, s) { font-style: normal; text-decoration: none; }
.as-pq img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-pq .as-ico { width: calc(15 * var(--p)); height: calc(15 * var(--p)); stroke-width: 1.8; }
.as-pq__lato, .as-pq__voci, .as-pq__firma, .as-pq__cerca, .as-pq__campana { background: var(--vetro); box-shadow: var(--filo), var(--ombra); }
@supports (corner-shape: squircle) {
	.as-pq :is(.as-pq__lato, .as-pq__nav span, .as-pq__cant, .as-pq__me, .as-pq__me i, .as-pq__hero, .as-pq__cliente i, .as-pq__foto img, .as-pq__voci, .as-pq__voci-h em, .as-pq__riga, .as-pq__riga > i, .as-pq__tot, .as-pq__barra i, .as-pq__firma, .as-pq__invia, .as-pq__carta) { corner-shape: squircle; }
}

/* La barra laterale: un vetro alto; il marchio dell'impresa, le voci, il cantiere aperto, chi sta lavorando. */
.as-pq__lato { display: flex; flex-direction: column; gap: calc(12 * var(--p)); min-width: 0; padding: calc(12 * var(--p)) calc(10 * var(--p)); border-radius: calc(18 * var(--p) * var(--sq)); }
.as-pq__ws { padding: calc(2 * var(--p)) calc(4 * var(--p)) calc(4 * var(--p)); }
.as-pq .as-sw2-logo { display: flex; align-items: center; gap: calc(8 * var(--p)); font-family: var(--f-t); color: #12313A; }
.as-pq .as-sw2-logo > svg { flex: none; width: calc(30 * var(--p)); height: calc(30 * var(--p)); filter: drop-shadow(0 calc(4 * var(--p)) calc(6 * var(--p)) rgba(18, 49, 58, .25)); }
.as-pq .as-sw2-logo > span { display: grid; gap: calc(2 * var(--p)); line-height: 1; min-width: 0; }
.as-pq .as-sw2-logo b { font-size: calc(13.5 * var(--p)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.as-pq .as-sw2-logo small { font-family: 'Albert Sans', sans-serif; font-size: calc(8 * var(--p)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(18, 49, 58, .5); white-space: nowrap; }
.as-pq__nav { display: grid; gap: calc(2 * var(--p)); }
.as-pq__nav span { display: flex; align-items: center; gap: calc(9 * var(--p)); height: calc(29 * var(--p)); padding: 0 calc(9 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); font-size: calc(11.5 * var(--p)); font-weight: 500; color: #4E5463; }
.as-pq__nav .as-ico { width: calc(15 * var(--p)); height: calc(15 * var(--p)); color: #8A8F9C; }
.as-pq__nav em { margin-left: auto; min-width: calc(19 * var(--p)); height: calc(17 * var(--p)); padding: 0 calc(5 * var(--p)); border-radius: 999px; background: rgba(20, 32, 43, .06); font-size: calc(9.5 * var(--p)); font-weight: 700; line-height: calc(17 * var(--p)); text-align: center; color: #5B6170; font-variant-numeric: tabular-nums; }
.as-pq__nav .is-on { background: #fff; color: #12313A; font-weight: 600; box-shadow: 0 calc(6 * var(--p)) calc(14 * var(--p)) calc(-8 * var(--p)) rgba(52, 36, 96, .45); }
.as-pq__nav .is-on .as-ico { color: #1E4D5C; }
.as-pq__nav .is-on em { background: #1E4D5C; color: #fff; }
.as-pq__cant { position: relative; flex: 1; min-height: calc(110 * var(--p)); overflow: hidden; border-radius: calc(14 * var(--p) * var(--sq)); color: #fff; box-shadow: 0 calc(12 * var(--p)) calc(24 * var(--p)) calc(-16 * var(--p)) rgba(30, 24, 60, .7); }
.as-pq__cant img { position: absolute; inset: 0; object-position: 28% 60%; }
.as-pq__cant::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 20, 30, 0) 30%, rgba(16, 20, 30, .85) 100%); }
.as-pq__cant i { position: absolute; z-index: 1; top: calc(8 * var(--p)); left: calc(8 * var(--p)); display: inline-flex; align-items: center; gap: calc(5 * var(--p)); height: calc(19 * var(--p)); padding: 0 calc(8 * var(--p)) 0 calc(7 * var(--p)); border-radius: 999px; background: rgba(16, 20, 30, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: calc(9.5 * var(--p)); font-weight: 600; }
.as-pq__cant i::before { content: ''; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 calc(2.5 * var(--p)) rgba(61, 220, 132, .3); }
.as-pq__cant span { position: absolute; z-index: 1; left: calc(10 * var(--p)); right: calc(10 * var(--p)); bottom: calc(10 * var(--p)); display: grid; gap: calc(2 * var(--p)); }
.as-pq__cant b { font-family: var(--f-t); font-size: calc(14 * var(--p)); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.as-pq__cant em { font-size: calc(9.5 * var(--p)); color: rgba(255, 255, 255, .8); }
.as-pq__me { display: flex; align-items: center; gap: calc(9 * var(--p)); padding: calc(6 * var(--p)); border-radius: calc(12 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .72); box-shadow: var(--filo); }
.as-pq__me i { flex: none; width: calc(28 * var(--p)); height: calc(28 * var(--p)); overflow: hidden; border-radius: calc(9 * var(--p) * var(--sq)); }
.as-pq__me span { display: grid; min-width: 0; line-height: 1.25; }
.as-pq__me b { font-size: calc(11 * var(--p)); font-weight: 600; }
.as-pq__me small { font-size: calc(9.5 * var(--p)); color: var(--muted); }

/* La colonna di mezzo: dove sei, il progetto in foto, le voci. */
.as-pq__main, .as-pq__dx { display: flex; flex-direction: column; gap: calc(12 * var(--p)); min-width: 0; min-height: 0; }
.as-pq__top { display: flex; flex: none; align-items: center; gap: calc(8 * var(--p)); height: calc(28 * var(--p)); padding: 0 calc(4 * var(--p)); }
.as-pq__dove { display: flex; align-items: center; gap: calc(6 * var(--p)); font-size: calc(11.5 * var(--p)); color: var(--muted); white-space: nowrap; }
.as-pq__dove i { font-style: normal; color: rgba(20, 32, 43, .25); }
.as-pq__dove b { font-weight: 600; color: var(--ink); }
.as-pq__salvato { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); margin-left: auto; font-size: calc(10 * var(--p)); font-weight: 600; color: #178A57; }
.as-pq__salvato .as-ico { width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 2.4; }
.as-pq__hero { position: relative; flex: none; height: calc(152 * var(--p)); overflow: hidden; border-radius: calc(18 * var(--p) * var(--sq)); color: #fff; box-shadow: 0 calc(18 * var(--p)) calc(34 * var(--p)) calc(-22 * var(--p)) rgba(30, 24, 60, .75); }
.as-pq__hero > img { position: absolute; inset: 0; object-position: 50% 62%; }
.as-pq__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 18, 28, .1) 0%, rgba(14, 18, 28, 0) 32%, rgba(14, 18, 28, .78) 100%); }
.as-pq__cliente, .as-pq__progetto, .as-pq__sopr { position: absolute; z-index: 1; }
.as-pq__cliente { top: calc(10 * var(--p)); left: calc(10 * var(--p)); display: flex; align-items: center; gap: calc(7 * var(--p)); padding: calc(4 * var(--p)) calc(10 * var(--p)) calc(4 * var(--p)) calc(4 * var(--p)); border-radius: 999px; background: rgba(255, 255, 255, .86); box-shadow: 0 calc(6 * var(--p)) calc(14 * var(--p)) calc(-8 * var(--p)) rgba(14, 18, 28, .5); color: var(--ink); }
.as-pq__cliente i { width: calc(24 * var(--p)); height: calc(24 * var(--p)); overflow: hidden; border-radius: 50%; }
.as-pq__cliente span { display: grid; line-height: 1.2; }
.as-pq__cliente b { font-size: calc(11 * var(--p)); font-weight: 600; }
.as-pq__cliente small { font-size: calc(9 * var(--p)); color: var(--muted); }
.as-pq__progetto { left: calc(14 * var(--p)); bottom: calc(12 * var(--p)); display: grid; gap: calc(3 * var(--p)); }
.as-pq__progetto b { font-family: var(--f-t); font-size: calc(24 * var(--p)); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.as-pq__progetto span { font-size: calc(10 * var(--p)); color: rgba(255, 255, 255, .85); }
.as-pq__sopr { right: calc(12 * var(--p)); bottom: calc(12 * var(--p)); display: flex; align-items: center; gap: calc(7 * var(--p)); padding: calc(5 * var(--p)) calc(10 * var(--p)) calc(5 * var(--p)) calc(5 * var(--p)); border-radius: calc(12 * var(--p)); background: rgba(14, 18, 28, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.as-pq__foto { display: flex; }
.as-pq__foto img { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: calc(7 * var(--p) * var(--sq)); box-shadow: 0 0 0 calc(1.5 * var(--p)) rgba(255, 255, 255, .9); }
.as-pq__foto img + img { margin-left: calc(-8 * var(--p)); }
.as-pq__sopr > span:last-child { display: grid; line-height: 1.2; }
.as-pq__sopr b { font-size: calc(10 * var(--p)); font-weight: 600; }
.as-pq__sopr small { font-size: calc(9 * var(--p)); color: rgba(255, 255, 255, .75); }
.as-pq__voci { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: calc(10 * var(--p)) calc(8 * var(--p)) calc(6 * var(--p)); border-radius: calc(18 * var(--p) * var(--sq)); }
.as-pq__voci-h { display: flex; align-items: center; gap: calc(8 * var(--p)); flex: none; height: calc(26 * var(--p)); margin-bottom: calc(4 * var(--p)); padding: 0 calc(6 * var(--p)); }
.as-pq__voci-h b { font-family: var(--f-t); font-size: calc(14.5 * var(--p)); font-weight: 600; letter-spacing: -.02em; }
.as-pq__voci-h span { font-size: calc(10 * var(--p)); color: var(--muted); }
.as-pq__voci-h em { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); height: calc(24 * var(--p)); margin-left: auto; padding: 0 calc(10 * var(--p)) 0 calc(8 * var(--p)); border-radius: calc(8 * var(--p) * var(--sq)); background: #14202B; color: #fff; font-size: calc(10.5 * var(--p)); font-weight: 600; box-shadow: 0 calc(8 * var(--p)) calc(16 * var(--p)) calc(-10 * var(--p)) rgba(20, 32, 43, .8); }
.as-pq__voci-h em .as-ico { width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 2.4; }
.as-pq__riga { display: grid; grid-template-columns: calc(32 * var(--p)) minmax(0, 1fr) auto calc(64 * var(--p)); align-items: center; column-gap: calc(10 * var(--p)); flex: 1; min-height: 0; padding: 0 calc(6 * var(--p)); border-radius: calc(11 * var(--p) * var(--sq)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .06); }
.as-pq__riga:last-child { box-shadow: none; }
.as-pq__riga > i { width: calc(32 * var(--p)); height: calc(32 * var(--p)); overflow: hidden; border-radius: calc(9 * var(--p) * var(--sq)); box-shadow: 0 calc(4 * var(--p)) calc(8 * var(--p)) calc(-4 * var(--p)) rgba(20, 32, 43, .5); }
.as-pq__voce { display: grid; gap: calc(2 * var(--p)); min-width: 0; line-height: 1.2; }
.as-pq__voce b { font-size: calc(11.5 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pq__voce small { display: flex; align-items: center; gap: calc(5 * var(--p)); font-size: calc(9.5 * var(--p)); color: var(--muted); white-space: nowrap; overflow: hidden; }
.as-pq__voce u { flex: none; width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 calc(2 * var(--p)) color-mix(in srgb, var(--c) 22%, transparent); }
.as-pq__voce small > u + * , .as-pq__voce small { color: var(--muted); }
.as-pq__voce s { color: rgba(20, 32, 43, .25); }
.as-pq__sconto { padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: calc(9.5 * var(--p)); font-weight: 700; font-variant-numeric: tabular-nums; }
.as-pq__ora { display: inline-flex; align-items: center; gap: calc(5 * var(--p)); font-size: calc(9.5 * var(--p)); font-weight: 600; color: #E2611B; white-space: nowrap; }
.as-pq__ora::before { content: ''; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #F37022; box-shadow: 0 0 0 calc(2.5 * var(--p)) rgba(243, 112, 34, .22); }
.as-pq__euro { font-size: calc(12 * var(--p)); font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-pq__riga.is-nuova { background: #fff; box-shadow: 0 calc(10 * var(--p)) calc(22 * var(--p)) calc(-12 * var(--p)) rgba(52, 36, 96, .45); }
.as-pq__riga.is-nuova + .as-pq__riga, .as-pq__riga:has(+ .is-nuova) { box-shadow: none; }

/* La colonna di destra: cerca, il totale (un vetro scuro con le sue luci), la carta e la firma. */
.as-pq__top--dx { padding: 0; }
.as-pq__cerca { display: flex; flex: 1; align-items: center; gap: calc(7 * var(--p)); height: calc(28 * var(--p)); padding: 0 calc(11 * var(--p)); border-radius: 999px; font-size: calc(10.5 * var(--p)); color: #8A8F9C; }
.as-pq__cerca .as-ico { width: calc(13 * var(--p)); height: calc(13 * var(--p)); }
.as-pq__campana { position: relative; display: grid; place-items: center; flex: none; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: 50%; color: #4E5463; }
.as-pq__campana .as-ico { width: calc(14 * var(--p)); height: calc(14 * var(--p)); }
.as-pq__campana i { position: absolute; top: calc(-3 * var(--p)); right: calc(-3 * var(--p)); min-width: calc(15 * var(--p)); height: calc(15 * var(--p)); padding: 0 calc(4 * var(--p)); border-radius: 999px; background: #F37022; box-shadow: 0 0 0 calc(2 * var(--p)) #F4EEF8; color: #fff; font-size: calc(9 * var(--p)); font-weight: 700; line-height: calc(15 * var(--p)); text-align: center; }
.as-pq__tot { position: relative; flex: none; overflow: hidden; padding: calc(14 * var(--p)) calc(16 * var(--p)) calc(14 * var(--p)); border-radius: calc(20 * var(--p) * var(--sq)); background: radial-gradient(70% 60% at 100% 0%, rgba(139, 92, 246, .68) 0, rgba(139, 92, 246, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(238, 69, 150, .46) 0, rgba(238, 69, 150, 0) 70%), radial-gradient(50% 40% at 100% 100%, rgba(47, 123, 255, .42) 0, rgba(47, 123, 255, 0) 70%), #16142A; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(20 * var(--p)) calc(36 * var(--p)) calc(-20 * var(--p)) rgba(22, 20, 42, .8); }
.as-pq__tot-h { display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: calc(10.5 * var(--p)); color: rgba(255, 255, 255, .7); }
.as-pq__tot-h em { margin-left: auto; padding: calc(2 * var(--p)) calc(8 * var(--p)); border-radius: 999px; background: rgba(61, 220, 132, .16); color: #7CF2B2; font-size: calc(9.5 * var(--p)); font-weight: 700; }
.as-pq__tot-n { margin-top: calc(6 * var(--p)) !important; font-family: var(--f-t); font-size: calc(40 * var(--p)); font-weight: 500; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.as-pq__tot-n small { font-size: .55em; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
.as-pq__tot-sub { display: flex; gap: calc(12 * var(--p)); margin-top: calc(8 * var(--p)) !important; font-size: calc(9.5 * var(--p)); color: rgba(255, 255, 255, .55); white-space: nowrap; }
.as-pq__tot-sub b { font-weight: 600; color: rgba(255, 255, 255, .9); font-variant-numeric: tabular-nums; }
.as-pq__barra { display: flex; gap: calc(3 * var(--p)); height: calc(10 * var(--p)); margin-top: calc(14 * var(--p)) !important; }
.as-pq__barra i { flex-basis: 0; min-width: calc(6 * var(--p)); border-radius: calc(4 * var(--p) * var(--sq)); background: var(--c); box-shadow: 0 0 calc(10 * var(--p)) color-mix(in srgb, var(--c) 55%, transparent); }
.as-pq__leg { display: grid; gap: calc(5 * var(--p)); margin-top: calc(12 * var(--p)) !important; }
.as-pq__leg span { display: grid; grid-template-columns: calc(8 * var(--p)) minmax(0, 1fr) auto calc(30 * var(--p)); align-items: center; column-gap: calc(7 * var(--p)); font-size: calc(10.5 * var(--p)); color: rgba(255, 255, 255, .8); }
.as-pq__leg u { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: calc(2.5 * var(--p)); background: var(--c); }
.as-pq__leg b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.as-pq__leg em { font-size: calc(9.5 * var(--p)); color: rgba(255, 255, 255, .45); text-align: right; font-variant-numeric: tabular-nums; }
.as-pq__firma { flex: 1; display: flex; flex-direction: column; gap: calc(10 * var(--p)); min-height: 0; padding: calc(12 * var(--p)); border-radius: calc(20 * var(--p) * var(--sq)); }
.as-pq__carta { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(8 * var(--p) * var(--sq)); background: #fff; color: #12313A; box-shadow: 0 calc(10 * var(--p)) calc(20 * var(--p)) calc(-12 * var(--p)) rgba(52, 36, 96, .5); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.as-pq__carta-testa { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--p)); padding-bottom: calc(9 * var(--p)); box-shadow: inset 0 -1px 0 rgba(18, 49, 58, .12); }
.as-pq__carta .as-sw2-logo > svg { width: calc(20 * var(--p)); height: calc(20 * var(--p)); filter: none; }
.as-pq__carta .as-sw2-logo b { font-size: calc(10 * var(--p)); }
.as-pq__carta .as-sw2-logo small { font-size: calc(6.5 * var(--p)); }
.as-pq__carta-testa > span:last-child { font-size: calc(7.5 * var(--p)); line-height: 1.25; text-align: right; color: rgba(18, 49, 58, .55); }
.as-pq__carta-testa > span:last-child b { font-family: var(--f-t); font-size: calc(10 * var(--p)); font-weight: 600; color: #12313A; }
.as-pq__carta-a { margin-top: calc(9 * var(--p)) !important; font-size: calc(8 * var(--p)); line-height: 1.4; color: rgba(18, 49, 58, .7); }
.as-pq__carta-a b { color: #12313A; }
.as-pq__carta-r { display: flex; justify-content: space-between; margin-top: calc(5 * var(--p)) !important; padding-bottom: calc(4 * var(--p)); font-size: calc(8 * var(--p)); box-shadow: inset 0 -1px 0 rgba(18, 49, 58, .08); font-variant-numeric: tabular-nums; }
.as-pq__carta-a + .as-pq__carta-r { margin-top: calc(9 * var(--p)) !important; }
.as-pq__invia { display: flex; flex: none; align-items: center; justify-content: center; gap: calc(7 * var(--p)); height: calc(38 * var(--p)); border-radius: calc(12 * var(--p) * var(--sq)); background: linear-gradient(135deg, #FF8A4A 0%, #F36A24 55%, #E8551A 100%); color: #fff; font-size: calc(12 * var(--p)); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 calc(12 * var(--p)) calc(22 * var(--p)) calc(-10 * var(--p)) rgba(232, 85, 26, .75); }
.as-pq__invia svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.as-pq__nota-firma { display: flex; flex: none; align-items: center; justify-content: center; gap: calc(6 * var(--p)); font-size: calc(9.5 * var(--p)); color: var(--muted); }
.as-pq__nota-firma i { width: calc(16 * var(--p)); height: calc(16 * var(--p)); overflow: hidden; border-radius: 50%; }

/* Le sezioni col MacBook (as-prova--mac, la variante di site/prova.php: Software e Gestionali). Da computer il MacBook
   arriva subito dopo il titolo e le 4 card stanno sotto, in fila: prima si vede il prodotto, poi si legge. La riga sotto il
   titolo sta a destra, sulla base del titolo. */
@media (min-width: 1000px) {
	.as-prova--mac .as-prova__testa { display: contents; }
	.as-prova--mac .as-prova__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--as-sp-8); row-gap: 0; }
	.as-prova--mac .as-prova__titolo { grid-column: 1; grid-row: 1; align-self: end; }
	.as-prova--mac .as-prova__sotto { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
	.as-prova--mac .as-prova__palco { grid-column: 1 / -1; grid-row: 2; margin-top: var(--as-sp-7); }
	.as-prova--mac .as-prova__sotto ~ .as-prova__punti { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--as-sp-6); padding-top: 0; border-top: 0; }
}
/* Da telefono il MacBook intero sarebbe largo 320px e lo schermo illeggibile: entra più grande (135% della colonna) e il
   bordo sinistro dello schermo lo taglia, come un primo piano. Restano in vista le voci, il totale e la firma, col bordo
   destro e la base del Mac; il taglio lo fa la sezione (overflow-x: clip), non il pannello, così arriva fino al bordo. */
@media (max-width: 699px) {
	.as-prova--mac { overflow-x: clip; }
	.as-prova--mac .as-prova__demo { overflow: visible; }
	.as-pq-scena { flex: none; width: 135%; max-width: none; margin-left: -35%; }
	.as-pq-scena .as-macbook { font-size: calc(100cqw / 66); }
}

/* ══ IL GESTIONALE NEL MACBOOK (v0.90, 02/11/2026; inc/demo.php caso «gestionale-mac», arfia_demo_gestionale_mac) ═════════
   Rami: «anche qui stesso discorso mockup che abbiamo appena fatto, e lo stesso layout della pagina software». La stessa
   famiglia del preventivatore (.as-pq: canvas, vetri, barra laterale, colonne), con l'identità di La tua azienda: il verde
   bosco del marchio, Instrument Sans per il testo (Bricolage resta per titoli e cifre), una luce con più menta e lavanda.
   Al centro i numeri del giorno (il primo arancio pieno con i 14 giorni a barre, come i contatori della Landing) e gli
   ordini; a destra l'incassato del mese con i sei mesi a colonne e i pezzi liberi per sabato, con la barra che si fa
   arancio sotto il 30% e rossa sotto il 10%. Ogni stato ha il suo colore, nella pastiglia e nel puntino. */
.as-pq--gestionale { background: #ECEFF6; font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; }
.as-pq--gestionale::before { background: radial-gradient(40% 46% at 2% 6%, #8FE3C4 0, rgba(143, 227, 196, 0) 70%), radial-gradient(36% 42% at 50% -6%, #FFB59C 0, rgba(255, 181, 156, 0) 70%), radial-gradient(40% 50% at 104% 22%, #B79BFF 0, rgba(183, 155, 255, 0) 70%), radial-gradient(46% 46% at 70% 108%, #FF9CCB 0, rgba(255, 156, 203, 0) 70%), radial-gradient(36% 42% at 6% 98%, #94BEFF 0, rgba(148, 190, 255, 0) 70%); }
@supports (corner-shape: squircle) {
	.as-pq :is(.as-pq__tile, .as-pq__kpi > p, .as-pq__ord, .as-pq__chi, .as-pq__art img, .as-pq__lib > i, .as-pq__mesi i) { corner-shape: squircle; }
}
/* il marchio: la sedia a tratto su un quadro verde bosco */
.as-pq__tile { display: grid; place-items: center; flex: none; width: calc(30 * var(--p)); height: calc(30 * var(--p)); padding: calc(4 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); background: #2F4A3A; box-shadow: 0 calc(4 * var(--p)) calc(8 * var(--p)) calc(-2 * var(--p)) rgba(47, 74, 58, .45); }
.as-pq__tile .as-lg { display: block; width: 100%; height: 100%; }
.as-pq--gestionale .as-sw2-logo { color: #22362B; }
.as-pq--gestionale .as-sw2-logo small { font-family: inherit; color: rgba(34, 54, 43, .5); }
.as-pq--gestionale .as-pq__nav .is-on { color: #22362B; }
.as-pq--gestionale .as-pq__nav .is-on .as-ico { color: #2F4A3A; }
.as-pq--gestionale .as-pq__nav .is-on em { background: #2F4A3A; }
.as-pq__nav em.is-allarme { background: #FFE0E2; color: #D2283A; }
.as-pq--gestionale .as-pq__cant img { object-position: 50% 50%; }
/* i numeri del giorno */
.as-pq__kpi { display: grid; flex: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(10 * var(--p)); }
.as-pq__kpi > p { position: relative; display: grid; align-content: start; gap: calc(4 * var(--p)); min-width: 0; height: calc(94 * var(--p)); padding: calc(12 * var(--p)) calc(13 * var(--p)); overflow: hidden; border-radius: calc(16 * var(--p) * var(--sq)); background: var(--vetro); box-shadow: var(--filo), var(--ombra); }
.as-pq__kpi > p > span:first-child { font-size: calc(10 * var(--p)); color: var(--muted); }
.as-pq__kpi b { font-family: var(--f-t); font-size: calc(30 * var(--p)); font-weight: 500; line-height: 1; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-pq__kpi b small { font-size: .52em; letter-spacing: -.01em; color: var(--muted); }
.as-pq__kpi > p > small { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); font-size: calc(9.5 * var(--p)); color: var(--muted); white-space: nowrap; }
.as-pq__kpi small .as-ico { width: calc(12 * var(--p)); height: calc(12 * var(--p)); }
.as-pq__kpi em { justify-self: start; padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: rgba(19, 148, 95, .13); color: #0F7F51; font-size: calc(9.5 * var(--p)); font-weight: 700; white-space: nowrap; }
.as-pq__kpi .is-hero { background: linear-gradient(145deg, #FF8A4A 0%, #F2611F 60%, #E2501A 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 calc(16 * var(--p)) calc(30 * var(--p)) calc(-16 * var(--p)) rgba(226, 80, 26, .8); }
.as-pq__kpi .is-hero > span:first-child, .as-pq__kpi .is-hero > small { color: rgba(255, 255, 255, .85); }
.as-pq__barre { position: absolute; right: calc(12 * var(--p)); bottom: calc(13 * var(--p)); display: flex; align-items: flex-end; gap: calc(2.5 * var(--p)); width: 46%; height: calc(36 * var(--p)); }
.as-pq__barre i { flex: 1; min-width: 0; border-radius: calc(1.5 * var(--p)); background: rgba(255, 255, 255, .4); }
.as-pq__barre .is-oggi { background: #fff; box-shadow: 0 0 calc(8 * var(--p)) rgba(255, 255, 255, .7); }
/* gli ordini di oggi */
.as-pq__schede { display: flex; flex: none; gap: calc(4 * var(--p)); margin: 0 0 calc(6 * var(--p)) !important; padding: 0 calc(4 * var(--p)); }
.as-pq__schede span { display: inline-flex; align-items: center; gap: calc(5 * var(--p)); height: calc(22 * var(--p)); padding: 0 calc(9 * var(--p)); border-radius: 999px; font-size: calc(10 * var(--p)); font-weight: 500; color: var(--muted); white-space: nowrap; }
.as-pq__schede em { min-width: calc(15 * var(--p)); height: calc(15 * var(--p)); padding: 0 calc(4 * var(--p)); border-radius: 999px; background: rgba(20, 32, 43, .07); font-size: calc(9 * var(--p)); font-weight: 700; line-height: calc(15 * var(--p)); text-align: center; color: #5B6170; }
.as-pq__schede .is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 calc(4 * var(--p)) calc(10 * var(--p)) calc(-6 * var(--p)) rgba(52, 36, 96, .45); }
.as-pq__schede .is-on em { background: #14202B; color: #fff; }
.as-pq__ord { display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) auto calc(82 * var(--p)) calc(56 * var(--p)); align-items: center; column-gap: calc(8 * var(--p)); flex: 1; min-height: 0; padding: 0 calc(6 * var(--p)); border-radius: calc(11 * var(--p) * var(--sq)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .06); }
.as-pq__ord:last-child { box-shadow: none; }
.as-pq__ord.is-nuova { background: #fff; box-shadow: 0 calc(10 * var(--p)) calc(22 * var(--p)) calc(-12 * var(--p)) rgba(52, 36, 96, .45); }
.as-pq__ord.is-nuova + .as-pq__ord, .as-pq__ord:has(+ .is-nuova) { box-shadow: none; }
.as-pq__chi { width: calc(28 * var(--p)); height: calc(28 * var(--p)); overflow: hidden; border-radius: calc(9 * var(--p) * var(--sq)); box-shadow: 0 calc(4 * var(--p)) calc(8 * var(--p)) calc(-5 * var(--p)) rgba(20, 32, 43, .5); }
.as-pq__chi :is(svg, img) { display: block; width: 100%; height: 100%; }
.as-pq__art { display: flex; padding-left: calc(7 * var(--p)); }
.as-pq__art img { width: calc(24 * var(--p)); height: calc(24 * var(--p)); margin-left: calc(-7 * var(--p)); border-radius: calc(7 * var(--p) * var(--sq)); box-shadow: 0 0 0 calc(1.5 * var(--p)) #fff, 0 calc(3 * var(--p)) calc(6 * var(--p)) calc(-3 * var(--p)) rgba(20, 32, 43, .5); }
.as-pq__stato { display: inline-flex; align-items: center; justify-self: start; gap: calc(5 * var(--p)); height: calc(20 * var(--p)); padding: 0 calc(7 * var(--p)) 0 calc(6 * var(--p)); border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: calc(9 * var(--p)); font-weight: 700; white-space: nowrap; }
.as-pq__stato u { flex: none; width: calc(5.5 * var(--p)); height: calc(5.5 * var(--p)); border-radius: 50%; background: var(--c); }
/* l'incassato del mese: un vetro scuro con le luci fredde, sei mesi a colonne */
.as-pq__incasso { background: radial-gradient(70% 60% at 100% 0%, rgba(47, 123, 255, .55) 0, rgba(47, 123, 255, 0) 70%), radial-gradient(60% 55% at 0% 100%, rgba(18, 179, 162, .42) 0, rgba(18, 179, 162, 0) 70%), radial-gradient(50% 45% at 100% 100%, rgba(139, 92, 246, .5) 0, rgba(139, 92, 246, 0) 70%), #12182A; }
.as-pq__mesi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: calc(8 * var(--p)); margin-top: calc(14 * var(--p)) !important; }
.as-pq__mesi span { display: grid; justify-items: center; gap: calc(5 * var(--p)); }
.as-pq__mesi i { width: 100%; height: calc(var(--h) * 58 * var(--p)); border-radius: calc(5 * var(--p) * var(--sq)) calc(5 * var(--p) * var(--sq)) calc(2 * var(--p)) calc(2 * var(--p)); background: linear-gradient(180deg, rgba(167, 139, 250, .5), rgba(96, 165, 250, .28)); }
.as-pq__mesi small { font-size: calc(8.5 * var(--p)); color: rgba(255, 255, 255, .5); }
.as-pq__mesi .is-ora i { background: linear-gradient(180deg, #F0ABFC 0%, #A78BFA 45%, #60A5FA 100%); box-shadow: 0 0 calc(14 * var(--p)) rgba(167, 139, 250, .6); }
.as-pq__mesi .is-ora small { font-weight: 700; color: #fff; }
/* i pezzi liberi per sabato */
.as-pq__liberi { gap: 0; padding: calc(12 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p)); }
.as-pq__liberi-h { display: flex; flex: none; align-items: center; gap: calc(8 * var(--p)); height: calc(24 * var(--p)); margin-bottom: calc(4 * var(--p)) !important; padding: 0 calc(2 * var(--p)); }
.as-pq__liberi-h b { font-family: var(--f-t); font-size: calc(14 * var(--p)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.as-pq__liberi-h em { margin-left: auto; padding: calc(2 * var(--p)) calc(8 * var(--p)); border-radius: 999px; background: rgba(229, 72, 77, .12); color: #D2283A; font-size: calc(9.5 * var(--p)); font-weight: 700; white-space: nowrap; }
.as-pq__lib { display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr); column-gap: calc(9 * var(--p)); row-gap: calc(5 * var(--p)); align-content: center; flex: 1; min-height: 0; padding: 0 calc(2 * var(--p)); box-shadow: inset 0 -1px 0 rgba(20, 32, 43, .06); }
.as-pq__lib:last-child { box-shadow: none; }
.as-pq__lib > i { grid-row: 1 / span 2; width: calc(28 * var(--p)); height: calc(28 * var(--p)); overflow: hidden; border-radius: calc(8 * var(--p) * var(--sq)); }
.as-pq__lib > span { display: flex; align-items: baseline; justify-content: space-between; gap: calc(6 * var(--p)); min-width: 0; }
.as-pq__lib b { font-size: calc(10.5 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pq__lib small { font-size: calc(9.5 * var(--p)); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-pq__lib u { display: block; height: calc(5 * var(--p)); overflow: hidden; border-radius: 999px; background: rgba(20, 32, 43, .08); }
.as-pq__lib u s { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2BD195, #13945F); }
.as-pq__lib.is-meno u s { background: linear-gradient(90deg, #FFA36B, #F06418); }
.as-pq__lib.is-poco u s { background: linear-gradient(90deg, #FF7A8A, #E5484D); }
.as-pq__lib.is-poco small { font-weight: 700; color: #D2283A; }