/*
 * Studio Arfia — casi/fianco.css · v0.108.0 · 05/11/2026
 * Il restyling fianco a fianco (inc/casi/fianco.php), sulla pagina /soluzioni/restyling-sito-web/: due iPhone affiancati, la stessa
 * ricerca su Google, a sinistra il sito del 2009 e a destra lo stesso sito rifatto. Una regia a tempo (motion.js, data-as-rs) nello
 * stile della posta in Gmail e del chatbot del salone: palco, telecamera, dito, capitoli fuori.
 * Misure: la tela è 86 × 50em (i due iPhone del kit, alti 42,8em, con la didascalia sotto); dentro i telefoni i punti dello schermo
 * (var(--u), 402 × 874). Google viene da casi/seo.css (as-k-seo__t), il sito del 2009 da demo.css (.as-vecchio). Il sito nuovo di
 * La tua impresa è quello di casi/restyling.css, riportato qui in punti. Niente backdrop-filter sui telefoni (Errori 1.78).
 * Colori di La tua impresa: inchiostro #12262D, petrolio #1E4D5C, carta #F2EFE9, verde porta #A6DB8E. Niente gialli.
 */

/* ══ IL PALCO E LA TELECAMERA ══ */
.as-rs { position: relative; width: 100%; }
.as-rs__palco {
	--a: 1.9;
	--z: 1.8;
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: var(--a);
	overflow: hidden;
	border-radius: calc(28px * var(--as-brm));
	background: linear-gradient(180deg, #EEF0F2 0%, #E6E8EB 100%);
}
@supports (corner-shape: squircle) { .as-rs__palco { corner-shape: squircle; } }
/* il dopo: si accende la luce colorata (pesca, rosa, cielo, lavanda, menta) dalla parte del telefono nuovo */
.as-rs__luce { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
	background:
		radial-gradient(24% 46% at 60% 26%, rgba(255, 186, 160, .62), rgba(255, 186, 160, 0) 72%),
		radial-gradient(26% 50% at 79% 74%, rgba(255, 160, 205, .5), rgba(255, 160, 205, 0) 72%),
		radial-gradient(26% 52% at 90% 18%, rgba(140, 196, 255, .58), rgba(140, 196, 255, 0) 72%),
		radial-gradient(22% 42% at 68% 98%, rgba(186, 164, 255, .5), rgba(186, 164, 255, 0) 72%),
		radial-gradient(20% 40% at 51% 70%, rgba(150, 228, 196, .42), rgba(150, 228, 196, 0) 72%); }
.as-rs.is-dopo .as-rs__luce { opacity: 1; }
.as-rs__cam {
	/* il campo lungo (anche senza JS): tutta la tela, centrata */
	--cs: calc(.815 / var(--z));
	--cx: 9.25cqw;
	--cy: 2.6cqw;
	position: absolute;
	left: 0;
	top: 0;
	width: 86em;
	height: 50em;
	font-size: calc(var(--z) * 100cqw / 86);
	transform-origin: 0 0;
	transform: translate(var(--cx), var(--cy)) scale(var(--cs));
	transition: transform 1.35s cubic-bezier(.65, 0, .3, 1);
}
@media (max-width: 999px) {
	.as-rs__palco { --a: 1.5; --z: 2.3; }
	.as-rs__cam { --cs: calc(.9 / var(--z)); --cx: 5cqw; --cy: 7.2cqw; }
}
@media (max-width: 699px) {
	.as-rs__palco { --a: .82; --z: 3.5; border-radius: calc(22px * var(--as-brm)); }
	.as-rs__cam { --cs: calc(1.525 / var(--z)); --cx: -26.3cqw; --cy: 16.6cqw; }
	.as-rs__luce { background:
		radial-gradient(40% 30% at 72% 22%, rgba(255, 186, 160, .62), rgba(255, 186, 160, 0) 72%),
		radial-gradient(44% 30% at 88% 70%, rgba(255, 160, 205, .5), rgba(255, 160, 205, 0) 72%),
		radial-gradient(40% 28% at 96% 40%, rgba(140, 196, 255, .58), rgba(140, 196, 255, 0) 72%),
		radial-gradient(36% 24% at 64% 94%, rgba(186, 164, 255, .5), rgba(186, 164, 255, 0) 72%),
		radial-gradient(30% 24% at 56% 52%, rgba(150, 228, 196, .42), rgba(150, 228, 196, 0) 72%); }
}
.as-rs__scena { position: absolute; left: 0; top: 0; width: 86em; height: 50em; }
.as-rs__lato { position: absolute; top: .6em; display: grid; justify-items: center; gap: 1.3em; }
.as-rs__lato.is-prima { left: 18.5em; }
.as-rs__lato.is-dopo { left: 47em; transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.as-rs:not(.is-dopo) .as-rs__lato.is-dopo { opacity: 0; transform: translateY(2.4em) scale(.97); }
.as-rs__lato .as-iphone { margin: 0; }
/* la didascalia sotto ogni telefono, col cronometro: compare quando il sito comincia a caricare */
.as-rs__eti { display: flex; align-items: baseline; gap: .65em; margin: 0; font-family: var(--as-font); font-size: 1.55em; line-height: 1; color: var(--as-ink); white-space: nowrap; }
.as-rs__eti b { font-weight: 500; letter-spacing: -.02em; }
.as-rs__eti span { font-weight: 300; color: var(--as-muted); transition: opacity .4s ease; }
.as-rs__eti em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--as-ink); }
.as-rs__lato.is-dopo .as-rs__eti em { color: var(--as-arancio); }
.as-rs:not(.is-p-carica) .as-rs__lato.is-prima .as-rs__eti span,
.as-rs:not(.is-d-carica) .as-rs__lato.is-dopo .as-rs__eti span { opacity: 0; }
@media (max-width: 699px) { .as-rs__eti { font-size: 2.3em; } .as-rs__lato { gap: 1em; } }
.as-rs--fermo *, .as-rs--fermo, .as-rs.is-salto, .as-rs.is-salto * { transition: none !important; animation: none !important; }
.as-rs-zona, .as-rs-punto { position: absolute; display: block; visibility: hidden; pointer-events: none; }
.as-rs-t :is(.as-rs-zona, .as-rs-punto) { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w, 1) * var(--u)); height: calc(var(--h, 1) * var(--u)); }
.as-rs-zona.is-tela { left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: calc(var(--w) * 1em); height: calc(var(--h) * 1em); }
.as-rs-ic { display: block; flex: none; }

/* ══ LO SCHERMO ══ */
.as-rs-t { position: absolute; inset: 0; overflow: hidden; background: #fff; color: #111; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.as-rs-t *, .as-rs-t *::before, .as-rs-t *::after { box-sizing: border-box; }
.as-rs-t p { margin: 0; }
.as-rs-t :is(b, small, em, i) { font-style: normal; }
/* la barra di stato: scura sul bianco, chiara sulla foto del sito nuovo e sulla chiamata */
.as-rs-st { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: calc(62 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) calc(126 * var(--u)) minmax(0, 1fr); align-items: center; color: #111; font: 600 calc(17 * var(--u)) / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; pointer-events: none; transition: color .3s ease; }
.as-rs-st__ora { grid-column: 1; justify-self: center; padding-left: calc(14 * var(--u)); font-variant-numeric: tabular-nums; }
.as-rs-st__ic { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(6 * var(--u)); padding-right: calc(8 * var(--u)); }
.as-rs-st__ic svg { display: block; fill: currentColor; }
.as-rs-st__ic .is-campo { width: calc(17.5 * var(--u)); height: calc(11.3 * var(--u)); }
.as-rs-st__ic .is-wifi { width: calc(16 * var(--u)); height: calc(11.5 * var(--u)); fill: none; }
.as-rs-st__ic .is-wifi circle { fill: currentColor; }
.as-rs-st__ic .is-batteria { width: calc(27 * var(--u)); height: calc(12.8 * var(--u)); }
.as-rs.is-p-chiama .is-p .as-rs-st, .as-rs.is-d-sito .is-d .as-rs-st { color: #fff; }
.as-rs.is-d-tastiera .is-d .as-rs-st { color: #fff; }

/* ══ GOOGLE (as-k-seo__t di casi/seo.css), con quello che serve in più ══ */
.as-rs-g { z-index: 1; }
.as-rs-g .as-k-seo__t-schede { margin-bottom: 0 !important; }
.as-rs-g__fav { display: grid; place-items: center; flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); overflow: hidden; border-radius: 50%; background: #F1F3F4; box-shadow: 0 0 0 1px #E8EAED; }
.as-rs-g__fav .as-lg, .as-rs-g__fav svg { width: 100%; height: 100%; }
.as-rs-g__fav.is-vuoto { color: #5F6368; }
.as-rs-g__fav.is-vuoto svg { width: 62%; height: 62%; }
.as-rs-g__ris .as-k-seo__t-titolo { transition: color .3s ease; }
.as-rs.is-p-via .is-p .as-rs-g__ris .as-k-seo__t-titolo { color: #681DA8; } /* il link già visitato */
.as-rs-g__att { display: grid; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.as-rs-g__imp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(12 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid #EBEBEB; }
.as-rs-g__imp-t { display: grid; gap: calc(1 * var(--u)); min-width: 0; font-size: calc(14 * var(--u)); line-height: 1.42; color: #70757A; }
.as-rs-g__imp-t > b { font-size: calc(17 * var(--u)); font-weight: 400; line-height: 1.35; color: #202124; }
.as-rs-g__imp-t > span { display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; }
.as-rs-g__imp-t em { color: #3C4043; }
.as-rs-g__imp-t i { color: #188038; }
.as-rs-g__chiama { display: grid; justify-items: center; gap: calc(4 * var(--u)); color: #0B57D0; }
.as-rs-g__chiama svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: calc(10 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px #DADCE0; }
.as-rs-g__chiama small { font-size: calc(12 * var(--u)); font-weight: 500; }

/* ══ SAFARI DI IOS 26: tre vetri chiari in fondo, il filo blu del caricamento sotto l'indirizzo ══ */
.as-rs-sf { position: absolute; z-index: 8; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u)); transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.as-rs-sf__tondo, .as-rs-sf__vetro { height: calc(48 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255, 255, 255, .86); box-shadow: inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .9), 0 0 0 calc(.5 * var(--u)) rgba(15, 15, 16, .1), 0 calc(8 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(15, 15, 16, .35); color: #111; }
.as-rs-sf__tondo { flex: none; display: grid; place-items: center; width: calc(48 * var(--u)); }
.as-rs-sf__tondo .as-rs-ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.as-rs-sf__vetro { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.as-rs-sf__url { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: -.012em; white-space: nowrap; transition: opacity .2s ease; }
.as-rs-sf__url .as-rs-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); opacity: .7; }
.as-rs-sf__url b { font-weight: 400; }
.as-rs-sf__url small { margin-right: calc(5 * var(--u)); font-size: calc(13.5 * var(--u)); color: rgba(0, 0, 0, .55); }
.as-rs-sf__url.is-sito { opacity: 0; }
.as-rs.is-p-carica:not(.is-p-via) .is-p .as-rs-sf__url.is-sito, .as-rs.is-d-carica .is-d .as-rs-sf__url.is-sito { opacity: 1; }
.as-rs.is-p-carica:not(.is-p-via) .is-p .as-rs-sf__url.is-google, .as-rs.is-d-carica .is-d .as-rs-sf__url.is-google { opacity: 0; }
.is-p .as-rs-sf__url.is-sito .as-rs-ic { color: #111; opacity: .8; }
.as-rs-sf__filo { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(4 * var(--u)); height: calc(2.5 * var(--u)); border-radius: 2px; opacity: 0; transition: opacity .3s ease; }
.as-rs-sf__filo i { display: block; width: 0; height: 100%; border-radius: inherit; background: #0A84FF; }
/* il sito del 2009: il filo si trascina (5 secondi per arrivare a tre quarti), poi scatta alla fine e sparisce */
.as-rs.is-p-carica:not(.is-p-pronto) .is-p .as-rs-sf__filo { opacity: 1; }
.as-rs.is-p-carica .is-p .as-rs-sf__filo i { width: 76%; transition: width 5.4s cubic-bezier(.2, .5, .4, 1); }
.as-rs.is-p-pronto .is-p .as-rs-sf__filo i { width: 100%; transition: width .2s ease; }
/* il sito nuovo: un attimo */
.as-rs.is-d-carica:not(.is-d-sito) .is-d .as-rs-sf__filo { opacity: 1; }
.as-rs.is-d-carica .is-d .as-rs-sf__filo i { width: 100%; transition: width .75s cubic-bezier(.3, .6, .3, 1); }
/* con la chiamata o col tastierino, la barra se ne va */
.as-rs.is-p-chiama .is-p .as-rs-sf { opacity: 0; }
.as-rs.is-d-tastiera .is-d .as-rs-sf { opacity: 0; transform: translateY(calc(40 * var(--u))); }

/* ══ IL SITO DEL 2009, CHE ARRIVA A PEZZI ══ */
.as-rs-b { position: absolute; z-index: 2; inset: 0; background: #fff; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s .15s; }
.as-rs.is-p-carica:not(.is-p-via) .as-rs-b { opacity: 1; visibility: visible; transition: none; }
.as-rs-b .as-vecchio { top: calc(62 * var(--u)); background: #fff; }
.as-rs.is-p-s1 .as-rs-b .as-vecchio { background: #C9D3DD; }
.as-rs:not(.is-p-s1) .as-rs-b .as-vecchio__sito { visibility: hidden; }
.as-rs:not(.is-p-s2) .as-rs-b .as-vecchio__pagina > :not(.as-vecchio__testata):not(.as-vecchio__menu) { visibility: hidden; }
.as-rs:not(.is-p-s3) .as-rs-b :is(.as-vecchio img, .as-vecchio__miniature span) { visibility: hidden; }
/* il pizzico: la pagina si ingrandisce sul paragrafo dei contatti (2,7 volte), poi scorre di lato */
.as-rs-b .as-vecchio__sito { transform-origin: 0 0; transition: transform 1s cubic-bezier(.3, .7, .25, 1); }
.as-rs.is-p-zoom .as-rs-b .as-vecchio__sito { transform: translate(-59cqw, -21cqw) scale(2.7); }
.as-rs.is-p-lato .as-rs-b .as-vecchio__sito { transform: translate(-112cqw, -21cqw) scale(2.7); transition-duration: 1.1s; }
.as-rs-b__scorri { position: absolute; z-index: 3; border-radius: 999px; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .3s ease .4s; }
.as-rs-b__scorri.is-x { left: calc(22 * var(--u)); bottom: calc(80 * var(--u)); width: calc(132 * var(--u)); height: calc(3 * var(--u)); }
.as-rs-b__scorri.is-y { right: calc(3 * var(--u)); top: calc(84 * var(--u)); width: calc(3 * var(--u)); height: calc(54 * var(--u)); }
.as-rs.is-p-zoom .as-rs-b__scorri { opacity: 1; }
.as-rs-b__scorri.is-x { transition: opacity .3s ease .4s, transform 1.1s ease; }
.as-rs.is-p-lato .as-rs-b__scorri.is-x { transform: translateX(calc(110 * var(--u))); }

/* ══ LA CHIAMATA A UN'ALTRA IMPRESA (iOS 26) ══ */
.as-rs-call { position: absolute; z-index: 9; inset: 0; display: grid; grid-template-rows: auto 1fr; padding: calc(150 * var(--u)) calc(30 * var(--u)) calc(70 * var(--u)); background: radial-gradient(120% 70% at 50% 18%, #4A5260 0%, #262B33 52%, #15181D 100%); color: #fff; opacity: 0; transform: translateY(calc(24 * var(--u))); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.as-rs.is-p-chiama .as-rs-call { opacity: 1; transform: none; }
.as-rs-call__chi { display: grid; justify-items: center; gap: calc(8 * var(--u)); text-align: center; }
.as-rs-call__chi b { font-size: calc(34 * var(--u)); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.as-rs-call__chi span { font-size: calc(17 * var(--u)); color: rgba(255, 255, 255, .62); }
.as-rs-call__tasti { align-self: end; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)) calc(14 * var(--u)); justify-items: center; }
.as-rs-call__t { display: grid; justify-items: center; gap: calc(8 * var(--u)); }
.as-rs-call__t i { display: grid; place-items: center; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .17); }
.as-rs-call__t .as-rs-ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.as-rs-call__t small { font-size: calc(12.5 * var(--u)); color: rgba(255, 255, 255, .85); }
.as-rs-call__t.is-fine i { background: #FF3B30; }
.as-rs-call__t.is-fine .as-rs-ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

/* ══ IL SITO NUOVO DI LA TUA IMPRESA (da casi/restyling.css, in punti) ══ */
.as-rs-n { position: absolute; z-index: 2; inset: 0; overflow: hidden; background: #F2EFE9; color: #12262D; font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.as-rs-n *, .as-rs-n *::before, .as-rs-n *::after { box-sizing: border-box; margin: 0; padding: 0; }
.as-rs-n__foto { position: absolute; left: 0; top: 0; width: 100%; height: calc(548 * var(--u)); object-fit: cover; object-position: 50% 58%; display: block; }
.as-rs-n__velo { position: absolute; left: 0; top: 0; right: 0; height: calc(548 * var(--u)); background: linear-gradient(180deg, rgba(9, 11, 11, .66) 0%, rgba(9, 11, 11, .3) 18%, rgba(9, 11, 11, .22) 44%, rgba(9, 11, 11, 0) 62%, rgba(9, 11, 11, .12) 84%, rgba(9, 11, 11, .4) 100%); }

/* la testata del sito: il marchio e il menu */
.as-rs-n__barra { position: absolute; top: calc(72 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; align-items: center; justify-content: space-between; color: #fff; }
.as-rs-n__marchio { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); }
.as-rs-n__marchio svg { display: block; width: calc(34 * var(--u)); height: calc(34 * var(--u)); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .16); border-radius: calc(9 * var(--u)); }
.as-rs-n__marchio span { display: grid; gap: calc(3 * var(--u)); }
.as-rs-n__marchio b { font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: -.01em; }
.as-rs-n__marchio small { font-size: calc(9.5 * var(--u)); line-height: 1; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.as-rs-n__burger { display: grid; gap: calc(6 * var(--u)); width: calc(24 * var(--u)); }
.as-rs-n__burger i { display: block; height: calc(1.6 * var(--u)); border-radius: calc(2 * var(--u)); background: #fff; }
.as-rs-n__burger i:last-child { width: calc(15 * var(--u)); justify-self: end; }

/* il titolo sulla foto */
.as-rs-n__eroe { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(136 * var(--u)); color: #fff; } /* sulla parete scura, sopra la vasca: lì il bianco si legge */
.as-rs-n__voto { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: .01em; color: rgba(255, 255, 255, .86); }
.as-rs-n__voto b { font-weight: 600; color: #fff; }
.as-rs-n__stelle { display: inline-flex; gap: calc(2 * var(--u)); }
.as-rs-n__stelle svg { display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: #fff; }
.as-rs-n__titolo { margin-top: calc(16 * var(--u)); font-weight: 600; font-size: calc(54 * var(--u)); line-height: .94; letter-spacing: -.045em; text-shadow: 0 calc(2 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .35); }
.as-rs-n__titolo em { font-style: normal; font-weight: 300; letter-spacing: -.035em; color: #CFE6DC; }

/* il foglio chiaro sotto la foto */
.as-rs-n__foglio { position: absolute; left: 0; right: 0; top: calc(548 * var(--u)); bottom: 0; padding: calc(22 * var(--u)) calc(20 * var(--u)) 0; background: #F2EFE9; }
.as-rs-n__riga { font-size: calc(15 * var(--u)); line-height: 1.48; color: rgba(18, 38, 45, .78); max-width: calc(345 * var(--u)); }
.as-rs-n__azioni { display: flex; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(20 * var(--u)); }
.as-rs-n__btn { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(9 * var(--u)); border-bottom: calc(1 * var(--u)) solid #12262D; color: #12262D; font-weight: 600; font-size: calc(12 * var(--u)); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.as-rs-n__btn::after { content: "↗"; font-size: calc(13 * var(--u)); letter-spacing: 0; }
.as-rs-n__btn.is-tel { gap: calc(8 * var(--u)); border-bottom-color: rgba(18, 38, 45, .32); font-weight: 500; letter-spacing: .12em; color: rgba(18, 38, 45, .8); }
.as-rs-n__btn.is-tel::after { content: none; }
.as-rs-n__btn.is-tel svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.as-rs-n__numeri { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(26 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(18, 38, 45, .14); }
.as-rs-n__numeri li { display: grid; gap: calc(5 * var(--u)); padding: calc(14 * var(--u)) calc(10 * var(--u)) 0 0; }
.as-rs-n__numeri li + li { padding-left: calc(14 * var(--u)); border-left: calc(1 * var(--u)) solid rgba(18, 38, 45, .14); }
.as-rs-n__numeri b { font-weight: 300; font-size: calc(34 * var(--u)); line-height: .9; letter-spacing: -.04em; color: #1E4D5C; }
.as-rs-n__numeri b small { margin-left: calc(3 * var(--u)); font-weight: 500; font-size: calc(13 * var(--u)); letter-spacing: 0; color: #12262D; }
.as-rs-n__numeri span { font-size: calc(11.5 * var(--u)); line-height: 1.3; color: rgba(18, 38, 45, .62); }
.as-rs-n__lavori { display: flex; gap: calc(10 * var(--u)); margin: calc(26 * var(--u)) calc(-20 * var(--u)) 0 0; } /* le foto continuano sotto il vetro di Safari: la pagina va avanti */
.as-rs-n__lavori figure { position: relative; flex: none; width: calc(150 * var(--u)); height: calc(196 * var(--u)); overflow: hidden; border-radius: calc(14 * var(--u)); background: #D9D4CB 50% 50% / cover no-repeat; }
.as-rs-n__lavori figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); }
.as-rs-n__lavori figcaption { position: absolute; z-index: 1; left: calc(12 * var(--u)); right: calc(10 * var(--u)); bottom: calc(11 * var(--u)); color: #fff; font-size: calc(9.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; }

.as-rs-n { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.as-rs.is-d-sito .as-rs-n { opacity: 1; visibility: visible; transition: opacity .2s ease; }

/* ══ IL FOGLIO DEL SOPRALLUOGO (del sito: carta, inchiostro, scritte col filo) e il tastierino del telefono ══ */
.as-rs-velo { position: absolute; z-index: 5; inset: 0; background: rgba(9, 14, 16, .46); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.as-rs.is-d-form .as-rs-velo { opacity: 1; }
.as-rs-f { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(96 * var(--u)); border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0; background: #F2EFE9; color: #12262D; font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; box-shadow: 0 calc(-10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .18); transform: translateY(105%); transition: transform .5s cubic-bezier(.2, .8, .2, 1), bottom .38s cubic-bezier(.2, .8, .2, 1), padding .38s cubic-bezier(.2, .8, .2, 1); }
.as-rs.is-d-form .as-rs-f { transform: none; }
.as-rs.is-d-tastiera .as-rs-f { bottom: calc(286 * var(--u)); padding-bottom: calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
.as-rs-f__maniglia { display: block; width: calc(38 * var(--u)); height: calc(5 * var(--u)); margin: 0 auto calc(18 * var(--u)); border-radius: 999px; background: rgba(18, 38, 45, .22); }
.as-rs-f__h { font-weight: 600; font-size: calc(27 * var(--u)); line-height: 1; letter-spacing: -.035em; }
.as-rs-f__chi { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)) !important; font-size: calc(14 * var(--u)); line-height: 1.35; color: rgba(18, 38, 45, .74); }
.as-rs-f__av { flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); overflow: hidden; border-radius: 50%; }
.as-rs-f__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-rs-f__av.is-grande { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.as-rs-f__eti { margin-top: calc(20 * var(--u)) !important; font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(18, 38, 45, .56); }
.as-rs-f__chips { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)) !important; }
.as-rs-f__chips span { display: inline-flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(3 * var(--u)); box-shadow: inset 0 0 0 1px rgba(18, 38, 45, .26); font-size: calc(14.5 * var(--u)); font-weight: 500; white-space: nowrap; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.as-rs.is-d-bagno .as-rs-f__chips .is-bagno { background: #12262D; color: #fff; box-shadow: none; }
.as-rs-f__campo { position: relative; display: flex; align-items: center; height: calc(46 * var(--u)); margin-top: calc(4 * var(--u)) !important; border-bottom: 1px solid #12262D; font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.as-rs-f__segna { position: absolute; left: 0; color: rgba(18, 38, 45, .36); font-weight: 400; }
.as-rs-f__digita:not(:empty) ~ .as-rs-f__segna, .as-rs-f__digita:not(:empty) + .as-rs-f__segna { display: none; }
.as-rs-f__campo:has(.as-rs-f__digita:not(:empty)) .as-rs-f__segna { display: none; }
.as-rs.is-d-tastiera .as-rs-f__digita::after { content: ""; display: inline-block; width: calc(2 * var(--u)); height: calc(24 * var(--u)); margin-left: calc(2 * var(--u)); vertical-align: calc(-4 * var(--u)); background: #1E4D5C; animation: as-rs-cursore 1s steps(1) infinite; }
.as-rs.is-d-tastiera .as-rs-f__segna { left: calc(4 * var(--u)); }
@keyframes as-rs-cursore { 50% { opacity: 0; } }
.as-rs-f__invia { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); margin-top: calc(22 * var(--u)) !important; border-radius: calc(3 * var(--u)); background: #12262D; color: #fff; font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.as-rs-f__invia::after { content: "↗"; font-size: calc(14 * var(--u)); letter-spacing: 0; }
.as-rs-f__ok { display: none; justify-items: start; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
.as-rs.is-d-inviato .as-rs-f__modulo { display: none; }
.as-rs.is-d-inviato .as-rs-f__ok { display: grid; animation: as-rs-ok .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes as-rs-ok { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } }
.as-rs-f__spunta { display: grid; place-items: center; width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin-bottom: calc(6 * var(--u)); border-radius: 50%; background: #A6DB8E; color: #12262D; }
.as-rs-f__spunta .as-rs-ic { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.as-rs-f__ok-r { font-size: calc(15 * var(--u)); color: rgba(18, 38, 45, .7); }
.as-rs-f__paolo { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; margin-top: calc(10 * var(--u)) !important; padding-top: calc(16 * var(--u)); border-top: 1px solid rgba(18, 38, 45, .14); }
.as-rs-f__paolo > span:last-child { display: grid; gap: calc(3 * var(--u)); }
.as-rs-f__paolo b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.as-rs-f__paolo small { font-size: calc(13 * var(--u)); color: rgba(18, 38, 45, .64); }
.as-rs-k { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: calc(286 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)) 0; background: #D1D4DA; transform: translateY(105%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.as-rs.is-d-tastiera .as-rs-k { transform: none; }
.as-rs-k__tasti { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(7 * var(--u)); }
.as-rs-k__tasti span { display: grid; place-items: center; align-content: center; height: calc(50 * var(--u)); border-radius: calc(9 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, .26); line-height: 1; }
.as-rs-k__tasti b { font-size: calc(25 * var(--u)); font-weight: 400; }
.as-rs-k__tasti small { margin-top: calc(1 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 600; letter-spacing: .16em; }
.as-rs-k__tasti .is-mod { background: none; box-shadow: none; }
.as-rs-k__tasti .is-mod b { font-size: calc(19 * var(--u)); }

/* ══ IL DITO: il polpastrello dei video Apple (come il salone), e il secondo dito del pizzico ══ */
.as-rs-dito { position: absolute; z-index: 30; left: 0; top: 0; 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(255, 255, 255, .55); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .95), 0 0 0 calc(.75 * var(--u)) rgba(20, 20, 20, .22), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .24); opacity: 0; pointer-events: none; transform: translate(var(--tx, 200px), var(--ty, 600px)) scale(.7); transition: transform .55s cubic-bezier(.45, 0, .2, 1), opacity .25s ease; }
.as-rs-dito.is-su { opacity: 1; transform: translate(var(--tx, 200px), var(--ty, 600px)); }
.as-rs-dito.is-lento { transition: transform 1.05s cubic-bezier(.35, .1, .25, 1), opacity .25s ease; }
.as-rs-dito.is-premi { animation: as-rs-premi .42s ease; }
@keyframes as-rs-premi { 40% { transform: translate(var(--tx), var(--ty)) scale(.8); background: rgba(255, 255, 255, .75); } }

/* ══ LA SEZIONE (site/prova, demo «fianco»): titolo, la scena, i capitoli sotto (come la posta e il salone) ══ */
.as-prova--fianco .as-prova__demo { display: block; padding: 0; border-radius: 0; background: none; overflow: visible; }
@media (min-width: 1000px) {
	.as-prova--fianco .as-prova__testa { display: block; }
	.as-prova--fianco .as-prova__titolo { max-width: none; }
}