/* Landing page · v0.67.0 · 27/10/2026 · /servizi/landing-page/
   IL SIMULATORE DEL CONTATTO (site/viaggio, quarta versione). Rami, 27/10: «mockup REALI, un po' di animazione
   senza esagerare, un simulatore di lead: l'utente capisce con le proprie mani il flusso di un contatto».
   Due dispositivi veri: il telefono di Giulia (il feed, la landing, la conferma, la mail in arrivo, la chiamata, a
   strati) e il MacBook del titolare col pannello (i contatti, i numeri). Lo stato lo scrive landing.js sul root
   [data-as-sim] (data-fase 0-4 e classi is-*); qui le transizioni. Nel markup c'è lo stato finale: senza script si
   vede quello, fermo (regola 4).

   COME È FATTO
   · Da computer (da 1100px) telefono a sinistra (--tel-w) e MacBook a destra (--mac-w), centrati; i passi sopra, su
     una linea. Sotto, in colonna: i passi, il telefono, la scheda col pannello (il MacBook si nasconde).
   · Dentro il telefono le misure sono in punti (--u, dal kit); dentro il pannello in --p sul canvas 812 × 527 del
     MacBook a schermo intero; nella scheda da telefono --p nasce dalla scheda (406 di larghezza) e il pannello si
     rimpagina in colonna.
   · Colori: carbone e bianco; l'arancio solo per i passi, il tocco e quello che è nuovo nel pannello. L'annuncio e la
     landing hanno l'identità della villa. Niente gialli. Il tocco da fare pulsa (l'unica cosa che si muove da sola). */

/* ══ LA SEZIONE ═══════════════════════════════════════════════════════════════════════════════ */
/* v0.87.6 (Rami: «quando scrolli ci sono moltissimi effetti lampo», anche su Chrome da computer). Visto in un Chrome vero
   (scheda video, screencast): nei fotogrammi del lampo il telefono e il MacBook ci sono, ma il fondo nero della sezione no.
   Il fondo aveva il bordo a cupola animato (border-radius che cambia a ogni fotogramma): così Chrome doveva ridipingere
   tutta la sezione (1700×1700 px) a ogni fotogramma, e scorrendo svelto non faceva in tempo e mostrava il bianco della
   pagina. Provato anche il fondo su uno strato a sé con lo stesso bordo: lampeggia uguale, il costo è ridipingerlo.
   Ora il fondo della sezione è un rettangolo fermo che non si ridipinge mai, e la forma la fanno due TAPPI bassi:
   · la cupola, nera, appoggiata SOPRA la sezione (::before; sale sopra la foto d'apertura, poi si spiana);
   · la pancia, DENTRO la sezione in fondo (::after): gli angoli col bianco della pagina, come il flusso di /servizi/
     (v0.53.1), così resta dov'era e non scende sul titolo dopo.
   Stesse variabili (--as-goccia, --as-goccia2) e stessa curva; a ogni fotogramma si ridipinge solo la striscia del tappo. */
.as-viaggio {
	--as-goccia: 0px;
	--as-goccia2: 0px;
	position: relative;
	overflow: visible;   /* annulla .as-copre (base.css): niente ritaglio */
	border-radius: 0;    /* annulla .as-copre: il bordo animato era il lampo */
	padding-block: var(--as-sect);
}
.as-viaggio::before, .as-viaggio::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.as-viaggio::before { bottom: calc(100% - 1px); height: calc(var(--as-goccia) + 1px); background: radial-gradient(50% 100% at 50% 100%, var(--as-carbone) 99.4%, transparent 100%); }
.as-viaggio::after { bottom: -2px; height: calc(var(--as-goccia2) + 2px); background: radial-gradient(50% 100% at 50% 0, transparent 99.4%, var(--as-bianco) 100%); }
/* v0.87.1 (Rami dall'iPhone: «nella simulazione lo sfondo fa moltissimi scatti, bianco e nero»). Su Safari la sezione nera,
   alta due schermi, con la cupola ridisegnata a ogni fotogramma (border-radius che cambia) e overflow clip faceva da maschera
   ai vetri sfocati del simulatore: a ogni ricalcolo, per un fotogramma, il nero spariva e si vedeva il bianco del palco sotto.
   È lo stesso male curato in /servizi/ (v0.53.1). Da telefono la cupola e la pancia sono FERME a 44px (motion.js non le anima);
   dalla v0.87.6 sono i due tappi qui sopra, come da computer. */
@media (hover: none) {
	.as-viaggio { --as-goccia: 44px; --as-goccia2: 44px; }
}
.as-viaggio__testa { display: grid; gap: var(--as-sp-5); margin-bottom: clamp(36px, 4.5vw, 56px); }
.as-viaggio__titolo { margin: 0; max-width: 16ch; }
.as-viaggio__sotto { margin: 0; max-width: 42ch; color: var(--as-muted); }
.as-viaggio__piede { margin-top: clamp(44px, 5vw, 72px); }
.as-viaggio__chiusa { margin: 0; max-width: 24ch; font-size: min(var(--as-type-display-sm), 44px); line-height: 1.08; }
.as-viaggio__nota { margin: 16px 0 0; font-size: 14px; color: var(--as-muted); }

/* ══ IL SIMULATORE ════════════════════════════════════════════════════════════════════════════ */
.as-sim { position: relative; padding-inline: var(--as-gutter); }
.as-sim__passi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto 28px; }
.as-sim__linea { position: absolute; z-index: 0; left: 12.5%; right: 12.5%; top: 14px; height: 1px; background: rgba(255, 255, 255, .14); pointer-events: none; }
.as-sim__linea i { position: absolute; inset: 0; background: var(--as-arancio); transform: scaleX(var(--k, 1)); transform-origin: 0 50%; transition: transform .9s var(--as-ease-io); }
.as-sim__passo { position: relative; z-index: 1; display: grid; justify-items: center; row-gap: 8px; text-align: center; }
.as-sim__nodo {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--as-carbone);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .55);
	font-variant-numeric: tabular-nums;
	transition: box-shadow .5s var(--as-ease-out), color .5s var(--as-ease-out), background-color .5s var(--as-ease-out);
}
.as-sim__passo.is-fatto .as-sim__nodo { background: var(--as-arancio); box-shadow: inset 0 0 0 1px var(--as-arancio); color: var(--as-carbone); }
.as-sim__passo.is-ora .as-sim__nodo { box-shadow: inset 0 0 0 1.5px var(--as-arancio), 0 0 0 5px rgba(243, 112, 34, .16); color: var(--as-arancio); }
.as-sim__nome { font-size: 12px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, .6); transition: color .5s; }
.as-sim__passo.is-fatto .as-sim__nome, .as-sim__passo.is-ora .as-sim__nome { color: var(--as-bianco); }
.as-sim__riga { display: none; font-size: 14px; line-height: 1.3; color: var(--as-grigio-testo-inv); }
.as-sim__palco { position: relative; display: grid; justify-items: center; row-gap: 28px; }
/* Le taglie dei dispositivi nascono dalla larghezza del loro contenitore (container query): il corpo dell'iPhone del kit
   è 20,51em, il MacBook 66em. (Un «100%» dentro font-size guarderebbe il carattere del genitore, non la larghezza.) */
.as-sim__tel { width: min(100%, 380px); container-type: inline-size; }
.as-sim__tel .as-iphone { margin: 0 auto; font-size: calc(100cqw / 20.51); }
.as-sim__mac { display: none; container-type: inline-size; }
.as-sim__scheda { width: min(100%, 440px); }
.as-sim__rifai { margin: 22px 0 0; text-align: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.as-sim.is-fine .as-sim__rifai { opacity: 1; visibility: visible; }
.as-sim__rifai-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); font: 500 14px/1 var(--as-font); cursor: pointer; transition: color .3s, box-shadow .3s; }
.as-sim__rifai-btn:hover, .as-sim__rifai-btn:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.as-sim__rifai-btn .as-ic { stroke: currentColor; }
/* Sulla chiamata la barra di stato e la barra di chiusura del telefono diventano bianche (schermo scuro). */
.as-sim.is-chiamata .as-sim__iphone .as-disp__stato { color: #fff; }
.as-sim.is-chiamata .as-sim__iphone .as-iphone__home { background: rgba(255, 255, 255, .92); }

@media (min-width: 700px) {
	.as-sim__nodo { width: 34px; height: 34px; font-size: 12px; }
	.as-sim__linea { top: 17px; }
	.as-sim__nome { font-size: 17px; }
	.as-sim__riga { display: block; }
}
@media (min-width: 1100px) {
	.as-sim { --tel-w: clamp(280px, 22.5vw, 330px); padding-inline: clamp(16px, 2.8vw, 40px); }
	.as-sim__passi { margin-bottom: 36px; }
	.as-sim__palco { grid-template-columns: var(--tel-w) minmax(0, 860px); column-gap: 48px; justify-content: center; align-items: center; }
	.as-sim__tel { width: 100%; }
	.as-sim__mac { display: block; width: 100%; }
	.as-sim__mac .as-macbook { margin: 0 auto; font-size: calc(100cqw / 66); }
	.as-sim__scheda { display: none; }
}

/* Il tocco da fare (v0.63, Rami: «i tap non sono abbastanza dinamici»): preme sul bersaglio ogni 1,6 s, un'onda parte
   dal punto toccato e il bersaglio si accende a tempo. L'unica cosa che si muove da sola.
   v0.87.7 (Rami: «la mano è bruttissima»): niente più mano disegnata. Il tocco è il POLPASTRELLO dei video dei prodotti
   Apple: un disco di vetro piatto (bordo chiaro, filo scuro fuori, ombra morbida: si legge sul bianco, sulle foto e sui
   bottoni colorati), che si abbassa quando preme; l'onda è arancio. Solo transform e opacity: niente filtri, niente
   ombre animate (su Safari ogni ridipinta a ogni fotogramma è un rischio di lampi, Errori 1.78). */
.as-sim-tocco { position: absolute; z-index: 3; left: 50%; top: 50%; display: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: calc(-20 * var(--u)) 0 0 calc(-20 * var(--u)); border-radius: 50%; pointer-events: none; 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, .2), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .22); animation: as-sim-preme 1.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.as-sim-tocco::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: calc(2 * var(--u)) solid var(--as-arancio); opacity: 0; animation: as-sim-onda 1.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes as-sim-preme { 0%, 18%, 56%, 100% { transform: scale(1); } 30% { transform: scale(.84); } }
@keyframes as-sim-onda { 0%, 28% { opacity: 0; transform: scale(.9); } 33% { opacity: .95; transform: scale(1); } 82%, 100% { opacity: 0; transform: scale(2); } }
.as-sim[data-fase="0"] [data-sim-tap="annuncio"] .as-sim-tocco,
.as-sim[data-fase="1"] [data-sim-tap="campo"] .as-sim-tocco,
.as-sim[data-fase="2"].is-scritto [data-sim-tap="prenota"] .as-sim-tocco,
.as-sim.is-pronto [data-sim-tap="chiama"] .as-sim-tocco { display: block; }
/* Il bersaglio si accende a tempo con la mano. */
.as-sim[data-fase="0"] [data-sim-tap="annuncio"], .as-sim[data-fase="1"] [data-sim-tap="campo"] .as-sim-land__val, .as-sim[data-fase="2"].is-scritto [data-sim-tap="prenota"], .as-sim.is-pronto [data-sim-tap="chiama"] { animation: as-sim-brilla 1.6s ease-out infinite; }
@keyframes as-sim-brilla { 0%, 26% { box-shadow: 0 0 0 0 rgba(243, 112, 34, .8); } 70%, 100% { box-shadow: 0 0 0 calc(9 * var(--u)) rgba(243, 112, 34, 0); } }
/* LA FRECCIA (v0.64, Rami: «il tocca qui va scritto nel nero fuori dal mockup, con una freccia dinamica che punta lì»):
   la riga guida nel nero è l'etichetta; da lì parte una freccia tratteggiata che scorre lungo il bordo del dispositivo
   (a sinistra del telefono, a destra del pannello) ed entra nel bottone da toccare. La traccia la disegna landing.js
   (mira), su un SVG che copre il contenitore del dispositivo; il tratteggio scorre verso la punta. */
.as-sim__tel, .as-sim__mac, .as-sim__scheda { position: relative; }
.as-sim__mira { position: absolute; z-index: 20; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .35s; }
.as-sim__mira.is-on { opacity: 1; }
.as-sim__mira-via { fill: none; stroke: var(--as-arancio); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 8; filter: drop-shadow(0 0 6px rgba(243, 112, 34, .55)); animation: as-sim-fluisce .9s linear infinite; }
@keyframes as-sim-fluisce { to { stroke-dashoffset: -16; } }
.as-sim__mira-punta { fill: var(--as-arancio); filter: drop-shadow(0 0 6px rgba(243, 112, 34, .55)); }
/* Sui bottoni col testo centrato il tocco sta un po' a destra, così non copre la parola. */
.as-sim-land__btn .as-sim-tocco { left: 70%; }
.as-sim-pan__chiama .as-sim-tocco { left: 78%; }
.as-sim [data-sim-tap] { cursor: pointer; font-family: inherit; }
.as-sim [data-sim-tap]:focus-visible { outline: 2px solid var(--as-arancio); outline-offset: 2px; }

/* La guida sopra ogni dispositivo: chi è, e cosa fare adesso. Una riga sola, cambia con la fase. */
.as-sim__guida { display: grid; justify-items: center; gap: 4px; margin: 0 0 16px; text-align: center; }
.as-sim__guida small { font-size: 13px; letter-spacing: .02em; color: var(--as-grigio-testo-inv); }
.as-sim__guida span { display: none; align-items: center; gap: 10px; min-height: 26px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--as-bianco); }
.as-sim__guida span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--as-arancio); box-shadow: 0 0 0 4px rgba(243, 112, 34, .2); }
.as-sim__guida [data-per="p0"]::before, .as-sim__guida [data-per="2"]::before, .as-sim__guida [data-per="3"]::before, .as-sim__guida [data-per="p3"]::before { background: rgba(255, 255, 255, .4); box-shadow: none; }
.as-sim[data-fase="0"] [data-per="0"], .as-sim[data-fase="1"] [data-per="1"], .as-sim[data-fase="2"]:not(.is-scritto) [data-per="2"], .as-sim[data-fase="2"].is-scritto [data-per="2b"], .as-sim[data-fase="3"]:not(.is-pronto) [data-per="3"], .as-sim[data-fase="3"].is-pronto [data-per="3b"], .as-sim[data-fase="4"] [data-per="4"],
.as-sim:not([data-fase="3"]):not([data-fase="4"]) [data-per="p0"], .as-sim[data-fase="3"]:not(.is-pronto) [data-per="p3"], .as-sim[data-fase="3"].is-pronto [data-per="p3b"], .as-sim[data-fase="4"] [data-per="p4"] { display: inline-flex; }
@media (max-width: 699px) { .as-sim__guida span { font-size: 16px; } }

/* ══ L'APP SUL TELEFONO: gli strati (in punti) ════════════════════════════════════════════════ */
.as-lp-ic { display: block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-sim-app { position: absolute; inset: 0; overflow: hidden; background: #fff; }
:where(.as-sim-app) > div { position: absolute; inset: 0; }
:where(.as-sim-app) p, :where(.as-sim-app) ul, :where(.as-sim-app) figure { margin: 0; }
:where(.as-sim-app) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }

/* ── Il feed: un social qualunque ── */
.as-sim-feed { z-index: 1; color: #0C0C0C; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.as-sim-feed__top { position: absolute; top: calc(62 * var(--u)); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); }
.as-sim-feed__sel { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.as-sim-feed__sel .as-lp-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2.4; }
.as-sim-feed__ic { display: flex; gap: calc(20 * var(--u)); font-size: calc(25 * var(--u)); }
.as-sim-feed__ic i { position: relative; display: block; font-style: normal; }
.as-sim-feed__ic .has-punto::after { content: ""; position: absolute; top: calc(-1 * var(--u)); right: calc(-1 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.as-sim-feed__ic .has-n::after { content: attr(data-n); position: absolute; top: calc(-6 * var(--u)); right: calc(-7 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: 999px; background: #FF3B30; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; color: #fff; font-size: calc(11 * var(--u)); font-weight: 700; line-height: calc(17 * var(--u)); text-align: center; }
.as-sim-feed__storie { position: absolute; top: calc(110 * var(--u)); left: 0; right: 0; display: flex; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); list-style: none; overflow: hidden; }
.as-sim-feed__storie li { display: grid; justify-items: center; gap: calc(4 * var(--u)); flex: none; width: calc(68 * var(--u)); }
.as-sim-feed__storie i { display: block; width: calc(64 * var(--u)); height: calc(64 * var(--u)); padding: calc(3 * var(--u)); border-radius: 50%; background: linear-gradient(45deg, #F56040, #E1306C 50%, #833AB4); }
.as-sim-feed__storie .is-tua i { background: #DBDBDB; }
.as-sim-feed__storie .as-volto { border-radius: 50%; border: calc(2.5 * var(--u)) solid #fff; }
.as-sim-feed__storie span { max-width: 100%; overflow: hidden; font-size: calc(11 * var(--u)); color: #262626; white-space: nowrap; text-overflow: ellipsis; }
.as-sim-feed__post { position: absolute; top: calc(196 * var(--u)); left: 0; right: 0; }
.as-sim-feed__chi { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(22 * var(--u)); }
.as-sim-feed__chi > i { display: grid; place-items: center; flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: calc(7 * var(--u)); border-radius: 50%; background: #1F2F46; }
.as-sim-feed__chi .as-lg { width: 100%; height: 100%; }
.as-sim-feed__chi > span { display: grid; flex: 1; line-height: 1.2; }
.as-sim-feed__chi b { font-size: calc(14 * var(--u)); font-weight: 600; }
.as-sim-feed__chi small { font-size: calc(12 * var(--u)); color: #737373; }
.as-sim-feed__foto { position: relative; height: calc(372 * var(--u)); overflow: hidden; background: #1F2F46; }
.as-sim-feed__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; filter: saturate(.84) brightness(.88); }
.as-sim-feed__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: calc(8 * var(--u)); padding: calc(80 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .72)); color: #fff; font-family: var(--as-font); }
.as-sim-feed__foto small { font-size: calc(11 * var(--u)); letter-spacing: .28em; text-transform: uppercase; opacity: .86; }
.as-sim-feed__foto b { font-size: calc(32 * var(--u)); font-weight: 200; line-height: 1.04; letter-spacing: -.03em; }
.as-sim-feed__cta { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); background: #3E5A47; color: #fff; font-size: calc(14 * var(--u)); font-weight: 600; }
.as-sim-feed__cta .as-lp-ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; }
.as-sim-feed__azioni { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(25 * var(--u)); }
.as-sim-feed__azioni > span { flex: 1; }
.as-sim-feed__like { padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.as-sim-feed__like b { font-weight: 600; }
.as-sim-feed__testo { margin-top: calc(4 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-sim-feed__testo b { font-weight: 600; }
.as-sim-feed__testo span { color: #737373; }
.as-sim-feed__quando { margin-top: calc(4 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: #737373; }
.as-sim-feed__tab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-start; justify-content: space-around; height: calc(84 * var(--u)); padding: calc(12 * var(--u)) calc(6 * var(--u)) 0; border-top: 1px solid #EFEFEF; background: #fff; font-size: calc(27 * var(--u)); }
.as-sim-feed__tab i { display: block; width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(1.5 * var(--u)) #0C0C0C; }

/* ── La landing nel browser dell'app: sale dal basso quando si tocca l'annuncio ── */
.as-sim-land { z-index: 2; background: #fff; color: #171717; font-family: var(--as-font); transform: translate3d(0, 103%, 0); transition: transform .65s cubic-bezier(.32, .72, 0, 1); box-shadow: 0 calc(-8 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .22); }
.as-sim.is-landing .as-sim-land { transform: translate3d(0, 0, 0); }
.as-sim-land::before { content: ""; position: absolute; z-index: 6; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .5s; pointer-events: none; }
.as-sim.is-prenotato .as-sim-land::before { opacity: 1; }
.as-sim-land__barra { position: absolute; top: calc(62 * var(--u)); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: 1px solid #ECECEC; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; font-size: calc(22 * var(--u)); }
.as-sim-land__barra > span { display: grid; justify-items: center; line-height: 1.2; }
.as-sim-land__barra b { font-size: calc(14 * var(--u)); font-weight: 600; }
.as-sim-land__barra small { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); color: #737373; }
.as-sim-land__barra small .as-lp-ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.as-sim-land__hero { position: absolute; top: calc(106 * var(--u)); left: 0; right: 0; height: calc(300 * var(--u)); overflow: hidden; background: #1F2F46; color: #fff; text-align: center; }
.as-sim-land__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(.74) brightness(.76); }
.as-sim-land__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 12, .2), rgba(12, 12, 12, .1) 40%, rgba(12, 12, 12, .62)); }
.as-sim-land__hero p { position: absolute; z-index: 1; left: calc(20 * var(--u)); right: calc(20 * var(--u)); }
.as-sim-land__occ { top: calc(96 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; opacity: .88; white-space: nowrap; }
.as-sim-land__h1 { top: calc(122 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 100; line-height: 1.04; letter-spacing: -.035em; }
.as-sim-land__h1 em { font-style: italic; font-weight: 200; }
.as-sim-land__riga { top: calc(212 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 300; line-height: 1.35; opacity: .92; }
.as-sim-land__form { position: absolute; top: calc(406 * var(--u)); left: 0; right: 0; display: grid; gap: calc(11 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) 0; }
.as-sim-land__h2 { font-size: calc(19 * var(--u)); font-weight: 300; letter-spacing: -.02em; }
.as-sim-land__campo { position: relative; display: grid; width: 100%; gap: calc(5 * var(--u)); }
.as-sim-land__campo small { font-size: calc(10.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A; }
.as-sim-land__val { display: flex; align-items: center; height: calc(42 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1px solid #D9D9D9; font-size: calc(15 * var(--u)); color: #171717; transition: border-color .3s; }
.as-sim-land__val > span { min-height: 1em; white-space: nowrap; }
.as-sim-land__caret { display: none; width: 1.5px; height: 1.05em; margin-left: calc(2 * var(--u)); background: #171717; animation: as-sim-caret 1s steps(1, end) infinite; }
@keyframes as-sim-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.as-sim.is-scrive-nome [data-sim-nome] + .as-sim-land__caret, .as-sim.is-scrive-tel [data-sim-tel] + .as-sim-land__caret { display: block; }
.as-sim.is-scrive-nome [data-sim-tap="campo"] .as-sim-land__val, .as-sim.is-scrive-tel .as-sim-land__campo:not(button) .as-sim-land__val { border-color: #171717; }
.as-sim-land__scelta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); }
.as-sim-land__scelta small { flex: 0 0 100%; font-size: calc(10.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A; }
.as-sim-land__scelta > span { padding: calc(8 * var(--u)) calc(13 * var(--u)); border: 1px solid #D9D9D9; font-size: calc(13.5 * var(--u)); transition: background-color .3s, border-color .3s, color .3s; }
.as-sim.is-scritto .as-sim-land__scelta > .is-on { background: #171717; border-color: #171717; color: #fff; }
.as-sim-land__consenso { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(12.5 * var(--u)); color: #555; }
.as-sim-land__consenso i { display: grid; place-items: center; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border: 1px solid #171717; color: #fff; font-size: calc(14 * var(--u)); transition: background-color .3s; }
.as-sim-land__consenso .as-lp-ic { stroke-width: 2.6; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s var(--as-ease-out); }
.as-sim.is-scritto .as-sim-land__consenso i { background: #171717; }
.as-sim.is-scritto .as-sim-land__consenso .as-lp-ic { opacity: 1; transform: scale(1); }
.as-sim-land__btn { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(50 * var(--u)); margin-top: calc(2 * var(--u)); background: #171717; color: #fff; font-size: calc(12 * var(--u)); letter-spacing: .22em; text-transform: uppercase; transition: background-color .3s, transform .2s; }
.as-sim-land__btn .as-fl-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.5; }
.as-sim.is-prenotato .as-sim-land__btn { background: #3E5A47; }
.as-sim-land__nota { text-align: center; font-size: calc(12 * var(--u)); color: #8A8A8A; }
.as-sim-land__piede { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-start; justify-content: space-around; height: calc(84 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) 0; border-top: 1px solid #ECECEC; background: #F9F9F9; color: #1A73E8; font-size: calc(24 * var(--u)); font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.as-sim-land__piede .as-lp-ic:nth-child(2) { color: #C7C7CC; }

/* ── La conferma: il foglio di iOS che sale ── */
.as-sim-sheet { z-index: 3; top: auto; height: calc(446 * var(--u)); display: grid; align-content: start; justify-items: center; gap: calc(10 * var(--u)); padding: calc(36 * var(--u)) calc(26 * var(--u)) 0; border-radius: calc(38 * var(--u)) calc(38 * var(--u)) 0 0; background: #fff; color: #171717; font-family: var(--as-font); text-align: center; box-shadow: 0 calc(-8 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .28); transform: translate3d(0, 106%, 0); transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
.as-sim.is-prenotato .as-sim-sheet { transform: translate3d(0, 0, 0); }
.as-sim-sheet__maniglia { position: absolute; top: calc(8 * var(--u)); left: 50%; width: calc(38 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-19 * var(--u)); border-radius: 999px; background: rgba(0, 0, 0, .16); }
.as-sim-sheet__segno { width: calc(56 * var(--u)); height: calc(56 * var(--u)); fill: none; stroke: #2E7D4F; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.as-sim-sheet__segno * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease-out; }
.as-sim.is-prenotato .as-sim-sheet__segno circle { stroke-dashoffset: 0; transition-delay: .35s; }
.as-sim.is-prenotato .as-sim-sheet__segno path { stroke-dashoffset: 0; transition-delay: .7s; }
.as-sim-sheet__h { margin-top: calc(4 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.as-sim-sheet__t { max-width: 26ch; font-size: calc(14.5 * var(--u)); line-height: 1.4; color: #555; }
.as-sim-sheet__riep { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; margin-top: calc(8 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid #E5E5E5; text-align: left; font-size: calc(24 * var(--u)); }
.as-sim-sheet__riep .as-lp-ic { stroke-width: 1.5; }
.as-sim-sheet__riep span { display: grid; gap: calc(3 * var(--u)); }
.as-sim-sheet__riep b { font-size: calc(13.5 * var(--u)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.as-sim-sheet__riep small { font-size: calc(13 * var(--u)); color: #8A8A8A; }
.as-sim-sheet__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(48 * var(--u)); margin-top: calc(4 * var(--u)); background: #171717; color: #fff; font-size: calc(11.5 * var(--u)); letter-spacing: .22em; text-transform: uppercase; }

/* ── La mail che arriva a Giulia: la notifica di iOS, dall'alto ── */
.as-sim-banner { z-index: 4; inset: auto calc(10 * var(--u)) auto calc(10 * var(--u)); top: calc(66 * var(--u)); display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); column-gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(245, 245, 247, .92); -webkit-backdrop-filter: blur(calc(20 * var(--u))) saturate(1.8); backdrop-filter: blur(calc(20 * var(--u))) saturate(1.8); box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .22); color: #0C0C0C; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; transform: translate3d(0, calc(-100% - 80 * var(--u)), 0); transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
.as-sim.is-mail .as-sim-banner { transform: translate3d(0, 0, 0); }
.as-sim-banner__app { grid-row: 1 / span 3; display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(180deg, #2a2d33, #121316); color: #fff; font-size: calc(20 * var(--u)); }
.as-sim-banner__capo { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); color: rgba(60, 60, 67, .62); }
.as-sim-banner__capo span { text-transform: uppercase; letter-spacing: .02em; }
.as-sim-banner__h { font-size: calc(15 * var(--u)); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.as-sim-banner__t { font-size: calc(14.5 * var(--u)); line-height: 1.3; letter-spacing: -.015em; color: rgba(0, 0, 0, .86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── La chiamata in arrivo: tutto lo schermo ── */
.as-sim-call { z-index: 5; background: #0B0D0B; color: #fff; font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; text-align: center; opacity: 0; visibility: hidden; transform: scale(1.03); transition: opacity .5s ease-out, visibility .5s, transform .5s ease-out; }
.as-sim.is-chiamata .as-sim-call { opacity: 1; visibility: visible; transform: scale(1); }
.as-sim-call__fondo { position: absolute; inset: calc(-20 * var(--u)); width: calc(100% + 40 * var(--u)); height: calc(100% + 40 * var(--u)); object-fit: cover; filter: blur(calc(14 * var(--u))) brightness(.42) saturate(.7); }
.as-sim-call > p, .as-sim-call > span { position: absolute; left: 0; right: 0; }
.as-sim-call__chi { top: calc(132 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 300; letter-spacing: -.01em; }
.as-sim-call__stato { top: calc(178 * var(--u)); display: flex; justify-content: center; gap: calc(4 * var(--u)); font-size: calc(16 * var(--u)); color: rgba(255, 255, 255, .72); }
.as-sim-call__puntini { display: inline-flex; gap: calc(3 * var(--u)); align-items: flex-end; padding-bottom: calc(4 * var(--u)); }
.as-sim-call__puntini i { width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 50%; background: currentColor; animation: as-sim-punti 1.4s ease-in-out infinite; }
.as-sim-call__puntini i:nth-child(2) { animation-delay: .2s; }
.as-sim-call__puntini i:nth-child(3) { animation-delay: .4s; }
@keyframes as-sim-punti { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.as-sim-call .as-sim-call__volto { top: calc(300 * var(--u)); left: 50%; right: auto; width: calc(108 * var(--u)); height: calc(108 * var(--u)); margin-left: calc(-54 * var(--u)); display: grid; place-items: center; padding: calc(24 * var(--u)); border-radius: 50%; background: #1F2F46; box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .08); }
.as-sim-call__volto .as-lg { width: 100%; height: 100%; }
.as-sim-call__opzioni { bottom: calc(196 * var(--u)); display: flex; justify-content: space-between; padding: 0 calc(54 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(255, 255, 255, .9); }
.as-sim-call__opzioni span { display: grid; justify-items: center; gap: calc(8 * var(--u)); }
.as-sim-call__opzioni i { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(26 * var(--u)); }
.as-sim-call__tasti { bottom: calc(78 * var(--u)); display: flex; justify-content: space-between; padding: 0 calc(54 * var(--u)); font-size: calc(13 * var(--u)); }
.as-sim-call__tasti span { display: grid; justify-items: center; gap: calc(10 * var(--u)); }
.as-sim-call__tasti i { display: grid; place-items: center; width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: 50%; font-size: calc(36 * var(--u)); color: #fff; }
.as-sim-call__tasti .is-no i { background: #FF3B30; transform: rotate(135deg); }
.as-sim-call__tasti .is-si i { background: #34C759; animation: as-sim-squilla 1.6s ease-in-out infinite; }
@keyframes as-sim-squilla { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); } 50% { transform: scale(1.06); box-shadow: 0 0 0 calc(14 * var(--u)) rgba(52, 199, 89, 0); } }

/* ══ IL PANNELLO: VETRO SULLA VILLA (in --p sul canvas 812 × 527) · v0.65 ═══════════════════════════════
   Rami, 27/10, sulla v0.64: «il concetto c'è, ma rendilo molto più personalizzato, squircle, glassmorphism: così
   sembra moltissimo AI». Sotto, una luce colorata (pesca, rosa, lavanda, salvia: niente gialli) che sfuma sul
   fondo; sopra, pannelli di vetro (bianco a metà, sfocatura di quello che c'è dietro, filo bianco) con gli angoli
   squircle della firma del sito (--as-brm). Dentro, la villa: il marchio nella barra laterale, la foto dell'open
   day come scheda della campagna, i volti veri nelle righe (Giulia è la stessa del telefono), Irene la titolare in
   fondo. I pill (tag, cerca, campana, contatori) restano tondi: i pill non si squircolano. Scala 4/8/12/16/24. */
.as-sim-pan { --p: calc(var(--u) * 1.862); --sq: var(--as-brm, 1); --vetro: rgba(255, 255, 255, .55); --filo: inset 0 0 0 1px rgba(255, 255, 255, .75); --ombra: 0 12px 32px -22px rgba(60, 40, 80, .5); position: absolute; inset: 0; isolation: isolate; display: grid; grid-template-columns: calc(194 * var(--p)) minmax(0, 1fr); overflow: hidden; background: #EFEBF3; color: #17161C; font-family: var(--as-font); font-size: calc(12 * var(--p)); line-height: 1.4; }
.as-sim-pan::before { content: ''; position: absolute; z-index: -1; inset: -10%; background: radial-gradient(42% 46% at 8% 4%, #FFC2A4 0, rgba(255, 194, 164, 0) 70%), radial-gradient(36% 40% at 96% 10%, #F2B4D2 0, rgba(242, 180, 210, 0) 70%), radial-gradient(48% 44% at 62% 104%, #C2B4FF 0, rgba(194, 180, 255, 0) 70%), radial-gradient(30% 34% at 26% 78%, #B8E4CC 0, rgba(184, 228, 204, 0) 70%); }
:where(.as-sim-pan) p { margin: 0; }
:where(.as-sim-pan) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.as-sim-pan__side, .as-sim-kpi, .as-sim-tab { background: var(--vetro); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--filo), var(--ombra); }
@supports (corner-shape: squircle) {
	.as-sim-pan :is(.as-sim-pan__side, .as-sim-pan__ws i, .as-sim-pan__nav span, .as-sim-pan__camp, .as-sim-pan__me, .as-sim-pan__me i, .as-sim-pan__nuovo, .as-sim-pan__toast, .as-sim-pan__toast i, .as-sim-kpi, .as-sim-kpi__barre i, .as-sim-tab, .as-sim-tab__tabs span, .as-sim-tab__av, .as-sim-tab__chiama) { corner-shape: squircle; }
}
/* La barra laterale: un vetro che galleggia; il marchio, le voci, la scheda della campagna, Irene in fondo. */
.as-sim-pan__side { display: flex; flex-direction: column; gap: calc(12 * var(--p)); min-width: 0; margin: calc(12 * var(--p)) 0 calc(12 * var(--p)) calc(12 * var(--p)); padding: calc(12 * var(--p)); border-radius: calc(16 * var(--p) * var(--sq)); }
.as-sim-pan__ws { display: flex; align-items: center; gap: calc(10 * var(--p)); padding: calc(2 * var(--p)) calc(4 * var(--p)); }
.as-sim-pan__ws i { display: grid; place-items: center; flex: none; width: calc(32 * var(--p)); height: calc(32 * var(--p)); padding: calc(6 * var(--p)); border-radius: calc(10 * var(--p) * var(--sq)); background: #1F2F46; box-shadow: 0 6px 14px -8px rgba(30, 35, 29, .8); }
.as-sim-pan__ws .as-lg { width: 100%; height: 100%; }
.as-sim-pan__ws span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.as-sim-pan__ws b { font-size: calc(12 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sim-pan__ws small { font-size: calc(11 * var(--p)); color: #7A7886; }
.as-sim-pan__nav { display: grid; gap: calc(2 * var(--p)); }
.as-sim-pan__nav span { display: flex; align-items: center; gap: calc(10 * var(--p)); height: calc(32 * var(--p)); padding: 0 calc(10 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); font-size: calc(12.5 * var(--p)); font-weight: 500; color: #5A5964; }
.as-sim-pan__nav .as-lp-ic { width: calc(16 * var(--p)); height: calc(16 * var(--p)); stroke-width: 1.8; }
.as-sim-pan__nav .is-on { background: rgba(255, 255, 255, .9); color: #D85A14; box-shadow: var(--filo), 0 6px 16px -10px rgba(60, 40, 80, .5); }
.as-sim-pan__nav em { margin-left: auto; min-width: calc(20 * var(--p)); height: calc(18 * var(--p)); padding: 0 calc(6 * var(--p)); border-radius: 999px; background: rgba(23, 22, 28, .06); color: #5A5964; font-size: calc(10.5 * var(--p)); font-style: normal; font-weight: 600; line-height: calc(18 * var(--p)); text-align: center; font-variant-numeric: tabular-nums; }
.as-sim-pan__nav .is-on em { background: #F37022; color: #fff; }
.as-sim-pan__camp { position: relative; flex: 1; min-height: calc(96 * var(--p)); overflow: hidden; border-radius: calc(14 * var(--p) * var(--sq)); background: #1F2F46; color: #fff; box-shadow: 0 14px 30px -18px rgba(30, 35, 29, .7); }
.as-sim-pan__camp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-sim-pan__camp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 24, 0) 35%, rgba(20, 18, 24, .82) 100%); }
.as-sim-pan__camp span { position: absolute; z-index: 1; left: calc(12 * var(--p)); right: calc(12 * var(--p)); bottom: calc(12 * var(--p)); display: grid; gap: calc(2 * var(--p)); }
.as-sim-pan__camp b { font-size: calc(15 * var(--p)); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.as-sim-pan__camp em { font-style: normal; font-size: calc(11 * var(--p)); color: rgba(255, 255, 255, .8); }
.as-sim-pan__camp i { position: absolute; z-index: 1; top: calc(10 * var(--p)); left: calc(10 * var(--p)); display: inline-flex; align-items: center; gap: calc(5 * var(--p)); padding: calc(3 * var(--p)) calc(8 * var(--p)) calc(3 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: rgba(20, 18, 24, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: calc(10.5 * var(--p)); font-style: normal; font-weight: 600; }
.as-sim-pan__camp i::before { content: ''; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(61, 220, 132, .3); }
.as-sim-pan__camp.is-tel { display: none; }
.as-sim-pan__me { display: flex; align-items: center; gap: calc(10 * var(--p)); padding: calc(6 * var(--p)); border-radius: calc(12 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .7); box-shadow: var(--filo); }
.as-sim-pan__me i { flex: none; width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: calc(10 * var(--p) * var(--sq)); overflow: hidden; }
.as-sim-pan__me .as-volto { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-sim-pan__me span { display: grid; min-width: 0; line-height: 1.25; }
.as-sim-pan__me b { font-size: calc(12 * var(--p)); font-weight: 600; }
.as-sim-pan__me small { font-size: calc(10.5 * var(--p)); color: #7A7886; }
/* Il corpo: in alto i comandi senza barra (il centro resta libero, dove sta la tacca), poi il contenuto. */
.as-sim-pan__main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: calc(12 * var(--p)); }
.as-sim-pan__top { display: flex; flex: none; align-items: center; gap: calc(8 * var(--p)); height: calc(32 * var(--p)); margin-bottom: calc(12 * var(--p)); padding: 0 calc(4 * var(--p)); }
.as-sim-pan__dove { display: flex; align-items: center; gap: calc(6 * var(--p)); font-size: calc(12.5 * var(--p)); color: #7A7886; white-space: nowrap; }
.as-sim-pan__dove i { font-style: normal; color: rgba(23, 22, 28, .25); }
.as-sim-pan__dove b { font-weight: 600; color: #17161C; }
.as-sim-pan__cerca { display: flex; align-items: center; gap: calc(8 * var(--p)); width: calc(180 * var(--p)); height: calc(32 * var(--p)); margin-left: auto; padding: 0 calc(12 * var(--p)); border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: var(--filo); font-size: calc(12 * var(--p)); color: #8A8894; white-space: nowrap; }
.as-sim-pan__campana { position: relative; display: grid; place-items: center; width: calc(32 * var(--p)); height: calc(32 * var(--p)); border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: var(--filo); font-size: calc(16 * var(--p)); color: #4B4A55; }
.as-sim-pan__campana i { position: absolute; top: calc(-2 * var(--p)); right: calc(-2 * var(--p)); min-width: calc(16 * var(--p)); height: calc(16 * var(--p)); padding: 0 calc(4 * var(--p)); border-radius: 999px; background: #F37022; box-shadow: 0 0 0 2px #F3EEF5; color: #fff; font-size: calc(10 * var(--p)); font-style: normal; font-weight: 700; line-height: calc(16 * var(--p)); text-align: center; }
.as-sim-pan__nuovo { display: inline-flex; align-items: center; height: calc(32 * var(--p)); padding: 0 calc(12 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); background: #17161C; color: #fff; font-size: calc(12 * var(--p)); font-weight: 600; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(23, 22, 28, .8); }
/* L'avviso: vetro scuro in basso a destra; sale quando arriva la richiesta e poi se ne va. */
.as-sim-pan__toast { position: absolute; z-index: 5; right: calc(12 * var(--p)); bottom: calc(12 * var(--p)); display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) auto; align-items: start; gap: calc(10 * var(--p)); width: calc(256 * var(--p)); padding: calc(10 * var(--p)) calc(12 * var(--p)); border-radius: calc(12 * var(--p) * var(--sq)); background: rgba(23, 22, 28, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 36px -16px rgba(23, 22, 28, .7); color: #fff; opacity: 0; transform: translate3d(0, calc(8 * var(--p)), 0); transition: opacity .45s ease-out, transform .45s var(--as-ease-out); }
.as-sim.is-arrivato .as-sim-pan__toast { opacity: 1; transform: translate3d(0, 0, 0); }
.as-sim-pan__toast i { display: grid; place-items: center; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); background: #F37022; color: #fff; font-size: calc(15 * var(--p)); }
.as-sim-pan__toast span { display: grid; gap: calc(2 * var(--p)); min-width: 0; }
.as-sim-pan__toast b { font-size: calc(12.5 * var(--p)); font-weight: 600; }
.as-sim-pan__toast small { font-size: calc(11 * var(--p)); line-height: 1.35; color: rgba(255, 255, 255, .7); }
.as-sim-pan__toast em { font-style: normal; font-size: calc(10.5 * var(--p)); color: rgba(255, 255, 255, .5); }
.as-sim-pan__corpo { display: grid; flex: 1; align-content: start; gap: calc(12 * var(--p)); min-height: 0; }
.as-sim-pan__capo { display: flex; align-items: baseline; gap: calc(10 * var(--p)); padding: 0 calc(4 * var(--p)); }
.as-sim-pan__capo b { font-size: calc(17 * var(--p)); font-weight: 600; letter-spacing: -.015em; }
.as-sim-pan__capo span { font-size: calc(12 * var(--p)); color: #7A7886; }
.as-sim-pan__capo em { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); margin-left: auto; padding: calc(3 * var(--p)) calc(9 * var(--p)); border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: var(--filo); color: #1B7F4B; font-size: calc(11 * var(--p)); font-style: normal; font-weight: 600; }
.as-sim-pan__capo em i { width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #22A35B; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(34, 163, 91, .18); }
/* I contatori: quattro vetri; il primo, i contatti, è arancio pieno con gli ultimi sette giorni a barre. */
.as-sim-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--p)); }
.as-sim-kpi { position: relative; display: grid; align-content: start; gap: calc(6 * var(--p)); min-height: calc(86 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(14 * var(--p) * var(--sq)); overflow: hidden; }
.as-sim-kpi small { font-size: calc(11 * var(--p)); color: #7A7886; }
.as-sim-kpi b { font-size: calc(24 * var(--p)); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.as-sim-kpi em { justify-self: start; padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: 999px; font-size: calc(10.5 * var(--p)); font-style: normal; font-weight: 600; }
.as-sim-kpi em.is-su { background: rgba(34, 163, 91, .14); color: #1B7F4B; }
.as-sim-kpi em.is-giu { background: rgba(47, 95, 214, .12); color: #2F5FD6; }
.as-sim-kpi [data-sim-oggi] { background: rgba(255, 255, 255, .22); color: #fff; opacity: 0; transform: translateY(calc(4 * var(--p))); transition: opacity .4s, transform .4s var(--as-ease-out); }
.as-sim.is-contati .as-sim-kpi [data-sim-oggi] { opacity: 1; transform: translateY(0); }
.as-sim-kpi.is-hero { background: linear-gradient(145deg, #F9843F, #E85F14 70%, #D8520F); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 16px 34px -18px rgba(216, 82, 15, .8); -webkit-backdrop-filter: none; backdrop-filter: none; }
.as-sim-kpi.is-hero small { color: rgba(255, 255, 255, .78); }
.as-sim-kpi__barre { position: absolute; right: calc(12 * var(--p)); bottom: calc(12 * var(--p)); display: flex; align-items: flex-end; gap: calc(4 * var(--p)); height: calc(42 * var(--p)); }
.as-sim-kpi__barre i { width: calc(8 * var(--p)); height: calc(var(--h) * 100%); border-radius: calc(3 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .38); transform-origin: 50% 100%; transition: transform .6s var(--as-ease-out); }
.as-sim-kpi__barre .is-oggi { background: #fff; box-shadow: 0 0 0 calc(2 * var(--p)) rgba(255, 255, 255, .25); }
/* Le richieste: un vetro con le schede, i volti negli angoli squircle, i tag tondi. */
.as-sim-tab { overflow: hidden; border-radius: calc(16 * var(--p) * var(--sq)); }
.as-sim-tab__tabs { display: flex; gap: calc(4 * var(--p)); padding: calc(8 * var(--p)) calc(10 * var(--p)); border-bottom: 1px solid rgba(23, 22, 28, .06); }
.as-sim-tab__tabs span { display: inline-flex; align-items: center; padding: calc(6 * var(--p)) calc(10 * var(--p)); border-radius: calc(8 * var(--p) * var(--sq)); font-size: calc(12 * var(--p)); font-weight: 500; color: #7A7886; }
.as-sim-tab__tabs em { margin-left: calc(6 * var(--p)); padding: 0 calc(6 * var(--p)); border-radius: 999px; background: rgba(23, 22, 28, .06); font-size: calc(10.5 * var(--p)); font-style: normal; font-weight: 600; line-height: calc(16 * var(--p)); font-variant-numeric: tabular-nums; }
.as-sim-tab__tabs .is-on { background: rgba(255, 255, 255, .9); color: #17161C; box-shadow: var(--filo), 0 4px 12px -8px rgba(60, 40, 80, .5); }
.as-sim-tab__tabs .is-on em { background: #F37022; color: #fff; }
.as-sim-tab__testa, .as-sim-tab__riga { display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) calc(70 * var(--p)) calc(70 * var(--p)) calc(64 * var(--p)) calc(96 * var(--p)) calc(76 * var(--p)); align-items: center; column-gap: calc(10 * var(--p)); padding: 0 calc(14 * var(--p)); }
.as-sim-tab__testa { height: calc(26 * var(--p)); background: rgba(255, 255, 255, .3); font-size: calc(10.5 * var(--p)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A8894; }
.as-sim-tab__testa span:first-child { grid-column: 1 / span 2; }
.as-sim-tab__riga { height: calc(38 * var(--p)); box-shadow: inset 0 -1px 0 rgba(23, 22, 28, .06); }
.as-sim-tab__riga.is-nuova { background: rgba(255, 255, 255, .72); box-shadow: inset 0 -1px 0 rgba(23, 22, 28, .06); }
.as-sim-tab__av { display: grid; place-items: center; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); overflow: hidden; font-size: calc(10.5 * var(--p)); font-style: normal; font-weight: 700; letter-spacing: .02em; }
.as-sim-tab__av .as-volto { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-sim-tab__av.is-giulia { box-shadow: 0 0 0 2px #F37022; }
.as-sim-tab__av.is-viola { background: #E6E0FF; color: #5B3DF5; }
.as-sim-tab__av.is-blu { background: #DCE8FF; color: #2F5FD6; }
.as-sim-tab__av.is-verde { background: #D8F2E2; color: #1B7F4B; }
.as-sim-tab__av.is-rosa { background: #FBE0EC; color: #C93B7A; }
.as-sim-tab__av.is-acqua { background: #D6F0ED; color: #0F7F77; }
.as-sim-tab__chi { display: grid; min-width: 0; line-height: 1.3; }
.as-sim-tab__chi b { font-size: calc(12.5 * var(--p)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sim-tab__chi small { font-size: calc(11 * var(--p)); color: #7A7886; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sim-tab__quando { font-size: calc(11.5 * var(--p)); color: #7A7886; white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-nuova .as-sim-tab__quando { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); font-weight: 600; color: #D85A14; }
.is-nuova .as-sim-tab__quando::before { content: ''; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #F37022; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(243, 112, 34, .2); }
.as-sim-tag { display: inline-flex; align-items: center; justify-self: start; height: calc(20 * var(--p)); padding: 0 calc(8 * var(--p)); border-radius: 999px; font-size: calc(10.5 * var(--p)); font-weight: 600; white-space: nowrap; }
.as-sim-tag.is-fonte { background: #E6E0FF; color: #5B3DF5; }
.as-sim-tag.is-aperta { background: #D8F2E2; color: #1B7F4B; }
.as-sim-tag.is-inviata { background: #DCE8FF; color: #2F5FD6; }
.as-sim-tag.is-richiama { background: #FFE4D4; color: #D85A14; }
.as-sim-tag.is-visita { background: #D6F0ED; color: #0F7F77; }
.as-sim-tag.is-fatto { background: rgba(23, 22, 28, .07); color: #55545C; }
.as-sim-tab [data-sim-chip] { opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s var(--as-ease-out); }
.as-sim.is-mail .as-sim-tab [data-sim-chip] { opacity: 1; transform: scale(1); }
.as-sim-tab__chiama { --u: var(--p); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--p)); height: calc(28 * var(--p)); padding: 0 calc(10 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(23, 22, 28, .08); color: #4B4A55; font-size: calc(11.5 * var(--p)); font-weight: 600; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.as-sim-tab__chiama .as-lp-ic { width: calc(13 * var(--p)); height: calc(13 * var(--p)); stroke-width: 1.9; }
.as-sim-tab__chiama .as-sim-tocco { left: 72%; }
.as-sim-tab__chiama.is-fermo { color: #A09FA8; }
.as-sim.is-pronto .as-sim-tab__chiama:not(.is-fermo) { background: #F37022; color: #fff; box-shadow: 0 8px 18px -8px rgba(243, 112, 34, .9); }

/* La scheda da telefono e tablet: la stessa dashboard in colonna (senza barra laterale: la campagna sale in cima al
   corpo; quattro contatori in due colonne; la tabella senza fonte e stato, cinque righe). --p dalla larghezza (406). */
.as-lp-card { container-type: inline-size; position: relative; overflow: hidden; border-radius: 18px; background: #EFEBF3; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
@supports (corner-shape: squircle) { .as-lp-card { corner-shape: squircle; border-radius: 26px; } }
.as-lp-card .as-sim-pan { --p: calc(100cqw / 406); position: relative; inset: auto; display: block; }
.as-lp-card .as-sim-pan__side { display: none; }
.as-lp-card .as-sim-pan__cerca, .as-lp-card .as-sim-pan__nuovo { display: none; }
.as-lp-card .as-sim-pan__campana { margin-left: auto; }
.as-lp-card .as-sim-pan__camp.is-tel { display: block; flex: none; min-height: calc(92 * var(--p)); }
.as-lp-card .as-sim-pan__toast { right: calc(12 * var(--p)); bottom: calc(12 * var(--p)); width: calc(260 * var(--p)); }
.as-lp-card .as-sim-pan__capo { flex-wrap: wrap; }
.as-lp-card .as-sim-kpis { grid-template-columns: 1fr 1fr; gap: calc(10 * var(--p)); }
.as-lp-card .as-sim-tab__tabs span:nth-child(n+3) { display: none; }
.as-lp-card .as-sim-tab__testa, .as-lp-card .as-sim-tab__riga { grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) calc(64 * var(--p)) calc(78 * var(--p)); padding: 0 calc(10 * var(--p)); }
.as-lp-card .as-sim-tab__testa span:nth-child(2), .as-lp-card .as-sim-tab__testa span:nth-child(3), .as-lp-card .as-sim-tab__testa span:nth-child(5), .as-lp-card .as-sim-tab__quando, .as-lp-card .as-sim-tag.is-fonte, .as-lp-card .as-sim-tag.is-stato { display: none; }
.as-lp-card .as-sim-tab__riga:nth-child(n+7) { display: none; }
@media (max-width: 1099px) {
	.as-sim-feed__storie span, .as-sim-feed__foto small, .as-sim-feed__chi small, .as-sim-feed__quando, .as-sim-land__barra small, .as-sim-land__occ, .as-sim-land__campo small, .as-sim-land__scelta small, .as-sim-land__btn, .as-sim-land__nota, .as-sim-land__consenso, .as-sim-sheet__riep small, .as-sim-sheet__riep, .as-sim-banner__capo, .as-sim-call__opzioni, .as-sim-sheet__btn { font-size: max(calc(11 * var(--u)), 11px); }
	.as-sim .as-sim-land__riga, .as-sim .as-sim-land__scelta > span, .as-sim .as-sim-sheet__riep b, .as-sim .as-sim-call__opzioni, .as-sim .as-sim-call__opzioni span, .as-sim .as-sim-call__tasti { font-size: max(calc(11 * var(--u)), 11px); }
	.as-sim-pan__campana i { font-size: max(calc(11 * var(--p)), 11px); min-width: max(calc(16 * var(--p)), 16px); height: max(calc(16 * var(--p)), 16px); }
	.as-sim-tab__testa, .as-sim-tab__av, .as-sim-tab__chi small, .as-sim-tab__quando, .as-sim-tag, .as-sim-tab__tabs em, .as-sim-tab__chiama, .as-sim-kpi small, .as-sim-kpi em, .as-sim-pan__capo span, .as-sim-pan__capo em, .as-sim-pan__toast small, .as-sim-pan__toast em, .as-sim-pan__dove, .as-sim-pan__camp em, .as-sim-pan__camp i { font-size: max(calc(11 * var(--p)), 11px); }
	.as-sim-tab__chi b, .as-sim-pan__toast b, .as-sim-tab__tabs span { font-size: max(calc(12.5 * var(--p)), 13px); }
}

/* ══ COSA CAMBIA: QUATTRO FINESTRE SUL GESTIONALE (template-parts/site/vantaggi.php) · v0.66 ═══════════════════
   Rami, 27/10: «questa sezione non mi piace, puoi fare molto di meglio». Ogni vantaggio è mostrato: una scheda
   squircle con, sopra, una finestra sul gestionale della villa nella lingua del simulatore (luce colorata sotto,
   vetro sopra) e, sotto, titolo e una riga. Le misure dentro la finestra sono in --p, una LUNGHEZZA (1px a 560 di larghezza,
   mai sotto .78px: un numero puro dentro clamp con una lunghezza è invalido e spegne ogni regola che lo usa) e i testi non scendono sotto gli 11px. Da telefono le schede stanno in colonna. */
.as-vant__testa { display: grid; gap: var(--as-sp-5); margin-bottom: var(--as-sp-7); }
@media (min-width: 900px) { .as-vant__testa { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.as-vant__titolo { margin: 0; max-width: 14ch; text-wrap: balance; }
.as-vant__cta { margin: 0; }
.as-vant__griglia { display: grid; gap: var(--as-sp-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .as-vant__griglia { grid-template-columns: 1fr 1fr; gap: var(--as-sp-6); } }
/* v0.88: la forma della card sta nell'involucro .as-vant__carta (la card, li, la riempie: da computer identica a prima). */
.as-vant__card { display: grid; }
.as-vant__carta { --sq: var(--as-brm, 1); container-type: inline-size; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: calc(22px * var(--sq)); background: rgba(10, 10, 10, .04); }
.as-vant__buio, .as-vant__cta--piede { display: none; }
@supports (corner-shape: squircle) { .as-vant :is(.as-vant__carta, .as-vant__vetro, .as-vant__kpi, .as-vant__av, .as-vant__marchio, .as-vant__riga.is-nuova, .as-vant__barre i) { corner-shape: squircle; } }
.as-vant__finestra { --p: clamp(.78px, 100cqw / 560, 1px); --t11: max(calc(11 * var(--p)), 11px); --t12: max(calc(12 * var(--p)), 12px); --t13: max(calc(13 * var(--p)), 12.5px); --filo: inset 0 0 0 1px rgba(255, 255, 255, .8); --ombra: 0 24px 48px -28px rgba(60, 40, 80, .55); position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(236 * var(--p)); padding: calc(24 * var(--p)); overflow: hidden; color: #17161C; font-family: var(--as-font); font-size: var(--t12); line-height: 1.4; }
.as-vant__finestra::before { content: ''; position: absolute; z-index: -1; inset: -10%; background: #EFEBF3; background-image: radial-gradient(42% 46% at 8% 4%, #FFC2A4 0, rgba(255, 194, 164, 0) 70%), radial-gradient(36% 40% at 96% 10%, #F2B4D2 0, rgba(242, 180, 210, 0) 70%), radial-gradient(48% 44% at 62% 104%, #C2B4FF 0, rgba(194, 180, 255, 0) 70%), radial-gradient(30% 34% at 26% 78%, #B8E4CC 0, rgba(184, 228, 204, 0) 70%); }
:where(.as-vant__finestra) p { margin: 0; }
.as-vant .as-fl-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.as-vant__vetro { width: min(100%, calc(440 * var(--p))); padding: calc(14 * var(--p)) calc(16 * var(--p)); border-radius: calc(16 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--filo), var(--ombra); }
.as-vant__capo { display: flex; align-items: center; gap: calc(10 * var(--p)); margin-bottom: calc(12 * var(--p)); }
.as-vant__capo > span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.as-vant__capo b { font-size: var(--t13); font-weight: 600; }
.as-vant__capo small { font-size: var(--t11); color: #7A7886; }
.as-vant__capo em { flex: none; padding: calc(2 * var(--p)) calc(8 * var(--p)); border-radius: 999px; background: rgba(23, 22, 28, .06); font-size: var(--t11); font-style: normal; font-weight: 600; color: #5A5964; font-variant-numeric: tabular-nums; }
/* Il grafico: quattro settimane, due barre ciascuna (grigio il link al profilo, arancio la landing). */
.as-vant__legenda { display: flex; flex-wrap: wrap; gap: calc(6 * var(--p)) calc(14 * var(--p)); margin-bottom: calc(10 * var(--p)); font-size: var(--t11); color: #5A5964; }
.as-vant__legenda span { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); }
.as-vant__legenda span::before { content: ''; width: calc(9 * var(--p)); height: calc(9 * var(--p)); border-radius: calc(2.5 * var(--p)); background: rgba(23, 22, 28, .2); }
.as-vant__legenda .is-dopo::before { background: #F37022; }
.as-vant__barre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--p)); height: calc(104 * var(--p)); }
.as-vant__barre > span { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(4 * var(--p)); padding-bottom: calc(20 * var(--p)); }
.as-vant__barre i { width: calc(12 * var(--p)); height: calc(var(--h) * 100%); border-radius: calc(3.5 * var(--p) * var(--sq)); background: rgba(23, 22, 28, .24); }
.as-vant__barre .is-dopo { background: linear-gradient(180deg, #F9843F, #E85F14); box-shadow: 0 6px 14px -8px rgba(216, 82, 15, .8); }
.as-vant__barre small { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: var(--t11); color: #7A7886; white-space: nowrap; }
/* La lista: tre contatti coi volti; il primo è appena arrivato. */
.as-vant__riga { display: grid; grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) auto auto; align-items: center; column-gap: calc(10 * var(--p)); padding: calc(7 * var(--p)) 0; box-shadow: inset 0 -1px 0 rgba(23, 22, 28, .06); }
.as-vant__riga:last-child { box-shadow: none; }
.as-vant__riga.is-nuova { margin: 0 calc(-8 * var(--p)); padding: calc(7 * var(--p)) calc(8 * var(--p)); border-radius: calc(10 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 18px -12px rgba(60, 40, 80, .6); }
.as-vant__av { width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: calc(9 * var(--p) * var(--sq)); overflow: hidden; }
.as-vant__av .as-volto { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-vant__chi { display: grid; min-width: 0; line-height: 1.3; }
.as-vant__chi b { font-size: var(--t12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-vant__chi small { font-size: var(--t11); color: #7A7886; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-vant__tag { display: inline-flex; align-items: center; height: calc(20 * var(--p)); padding: 0 calc(8 * var(--p)); border-radius: 999px; background: #E6E0FF; color: #5B3DF5; font-size: var(--t11); font-weight: 600; white-space: nowrap; }
.as-vant__quando { font-size: var(--t11); color: #7A7886; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v0.66.1 (Rami: «la barra laterale colorata è molto AI»): niente barra a sinistra; la riga nuova è sollevata in bianco e «adesso» ha il puntino dei non letti. */
.as-vant__quando.is-ora { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); font-weight: 600; color: #D85A14; }
.as-vant__quando.is-ora::before { content: ''; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: #F37022; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(243, 112, 34, .2); }
/* La mail: il marchio della villa, oggetto, due righe, il timbro verde. */
.as-vant__marchio { display: grid; place-items: center; flex: none; width: calc(30 * var(--p)); height: calc(30 * var(--p)); padding: calc(6 * var(--p)); border-radius: calc(10 * var(--p) * var(--sq)); background: #1F2F46; }
.as-vant__marchio .as-lg { width: 100%; height: 100%; }
.as-vant__mail .as-vant__capo em { background: #D8F2E2; color: #1B7F4B; }
.as-vant__oggetto { margin-bottom: calc(6 * var(--p)); font-size: var(--t13); font-weight: 600; }
.as-vant__corpo { font-size: var(--t12); line-height: 1.5; color: #44434C; text-wrap: pretty; }
.as-vant__timbro { display: flex; align-items: center; gap: calc(6 * var(--p)); margin-top: calc(12 * var(--p)); font-size: var(--t11); font-weight: 600; color: #1B7F4B; }
.as-vant__timbro i { display: grid; place-items: center; width: calc(16 * var(--p)); height: calc(16 * var(--p)); border-radius: 50%; background: #D8F2E2; font-size: calc(10 * var(--p)); }
/* Il costo: tre contatori, l'ultimo arancio pieno. */
.as-vant__kpis { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: calc(10 * var(--p)); width: min(100%, calc(460 * var(--p))); }
.as-vant__kpi { display: grid; align-content: start; gap: calc(6 * var(--p)); min-height: calc(96 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(14 * var(--p) * var(--sq)); background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--filo), var(--ombra); }
.as-vant__kpi small { font-size: var(--t11); color: #7A7886; }
.as-vant__kpi b { font-size: max(calc(24 * var(--p)), 20px); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.as-vant__kpi em { justify-self: start; padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: 999px; font-size: var(--t11); font-style: normal; font-weight: 600; }
.as-vant__kpi em.is-su { background: rgba(34, 163, 91, .14); color: #1B7F4B; }
.as-vant__kpi.is-hero { background: linear-gradient(145deg, #F9843F, #E85F14 70%, #D8520F); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 16px 34px -18px rgba(216, 82, 15, .8); }
.as-vant__kpi.is-hero small { color: rgba(255, 255, 255, .8); }
.as-vant__kpi.is-hero em { background: rgba(255, 255, 255, .22); color: #fff; }
/* Il testo sotto la finestra. */
.as-vant__testo { padding: var(--as-sp-5) var(--as-sp-5) var(--as-sp-6); }
.as-vant__nome { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.as-vant__sotto { margin: 8px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.5; color: var(--as-muted); text-wrap: pretty; }
@media (max-width: 899px) {
	.as-vant__nome { font-size: 20px; }
	.as-vant__testo { padding: var(--as-sp-4) var(--as-sp-4) var(--as-sp-5); }
	.as-vant__kpis { grid-template-columns: 1fr 1fr; }
	.as-vant__kpi.is-hero { grid-column: 1 / -1; }
}

/* ── IL MAZZO (v0.88, 02/11, Rami da telefono: «il pulsante "Scopri quanto costa" dopo le 4 card, e le 4 card farle comparire
   una ad una in super stile wow, sorprendimi») ──
   Da telefono, nella Landing (--finestre), le quattro card sono un mazzo: ognuna si FERMA sotto l'header (sticky del
   telefono, nessun pin: su touch i pin di ScrollTrigger non si usano, Errori 1.76), 12px più in basso della precedente, e la
   successiva le scivola sopra. Lo script (motion.js, «4 · Il mazzo») aggiunge il resto: la card arriva inclinata all'indietro
   e si raddrizza salendo, quella sotto arretra, si stringe e si scurisce (in alto restano i bordi del mazzo, sempre più
   stretti), e quando arriva la sua finestra si accende (barre, contatti, mail, numeri). Senza script: il mazzo resta, fermo e
   leggibile. La card (li) è nascosta come contenitore e la carta dentro visibile: Safari 26 non usa lo strato fermo per
   colorare le sue barre (regola della 1.78). Solo transform e opacity. Il rimando va dopo il mazzo. */
@media (max-width: 899px) {
	.as-vant--finestre .as-vant__cta--testa { display: none; }
	.as-vant--finestre .as-vant__cta--piede { display: block; margin-top: var(--as-sp-6); }
	.as-vant--finestre .as-vant__griglia { display: block; }
	.as-vant--finestre .as-vant__card { position: sticky; top: calc(80px + var(--i, 0) * 12px); visibility: hidden; }
	.as-vant--finestre .as-vant__card + .as-vant__card { margin-top: var(--as-sp-5); }
	.as-vant--finestre .as-vant__card > * { visibility: visible; }
	.as-vant--finestre .as-vant__carta { position: relative; background: #F5F5F5; box-shadow: 0 -16px 36px -24px rgba(10, 10, 10, .5); }
	.as-vant--finestre .as-vant__buio { display: block; position: absolute; z-index: 4; inset: 0; background: #0A0A0A; opacity: 0; pointer-events: none; }
	/* la finestra si accende quando la card arriva (.is-viva, motion.js); gli stati di partenza solo con lo script (--mazzo) */
	.as-vant--mazzo :is(.as-vant__vetro, .as-vant__kpi, .as-vant__riga, .as-vant__oggetto, .as-vant__corpo, .as-vant__timbro, .as-vant__legenda) { transition: opacity .55s ease, transform .85s cubic-bezier(.2, .8, .2, 1); }
	.as-vant--mazzo .as-vant__card:not(.is-viva) :is(.as-vant__vetro, .as-vant__kpi) { opacity: 0; transform: translate3d(0, 22px, 0) scale(.96); }
	.as-vant--mazzo .as-vant__card:not(.is-viva) :is(.as-vant__riga, .as-vant__legenda) { opacity: 0; transform: translate3d(-16px, 0, 0); }
	.as-vant--mazzo .as-vant__card:not(.is-viva) :is(.as-vant__oggetto, .as-vant__corpo, .as-vant__timbro) { opacity: 0; transform: translate3d(0, 12px, 0); }
	.as-vant--mazzo .as-vant__barre i { transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
	.as-vant--mazzo .as-vant__card:not(.is-viva) .as-vant__barre i { transform: scaleY(0); }
	.as-vant--mazzo .as-vant__legenda { transition-delay: .2s; }
	.as-vant--mazzo .as-vant__barre > span:nth-child(1) i { transition-delay: .3s; }
	.as-vant--mazzo .as-vant__barre > span:nth-child(2) i { transition-delay: .4s; }
	.as-vant--mazzo .as-vant__barre > span:nth-child(3) i { transition-delay: .5s; }
	.as-vant--mazzo .as-vant__barre > span:nth-child(4) i { transition-delay: .6s; }
	.as-vant--mazzo .as-vant__barre > span i.is-dopo { transition-duration: 1.1s; }
	.as-vant--mazzo .as-vant__riga:nth-child(2) { transition-delay: .3s; }
	.as-vant--mazzo .as-vant__riga:nth-child(3) { transition-delay: .42s; }
	.as-vant--mazzo .as-vant__riga:nth-child(4) { transition-delay: .54s; }
	.as-vant--mazzo .as-vant__oggetto { transition-delay: .3s; }
	.as-vant--mazzo .as-vant__corpo { transition-delay: .45s; }
	.as-vant--mazzo .as-vant__timbro { transition-delay: .75s; }
	.as-vant--mazzo .as-vant__kpi:nth-child(2) { transition-delay: .12s; }
	.as-vant--mazzo .as-vant__kpi:nth-child(3) { transition-delay: .24s; }
}

/* ── v0.87.2 (01/11, Rami dall'iPhone: «ci sono ancora moltissimi scatti bianchi quando si scorre quella sezione, è un incubo») ──
   La cupola ferma (v0.87.1) non bastava. Nella sezione c'erano 17 vetri sfocati (backdrop-filter: il pannello del titolare,
   i contatori, la tabella, i fogli del telefono) e la freccia tratteggiata che scorre all'infinito con un'ombra-filtro su un SVG
   grande quanto il telefono: su Safari ogni fotogramma di scroll li ricalcola tutti, e quando non fa in tempo si vede il bianco
   sotto. Da telefono (touch) niente sfocature e niente ombre-filtro, qui e in «Cosa cambia»: i vetri restano velati di bianco
   sul fondo chiaro del pannello, la freccia resta arancio e scorre. Da computer invariato.
   !important: deroga motivata, deve battere ogni regola dei vetri (alcune hanno due classi). */
@media (hover: none) {
	.as-viaggio *, .as-viaggio *::before, .as-viaggio *::after,
	.as-vant *, .as-vant *::before, .as-vant *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.as-sim__mira-via, .as-sim__mira-punta, .as-sim-tocco { filter: none; }
}
/* La freccia da telefono: il telefono si stringe di 52px e sta al centro, la freccia gli corre a 24px dal bordo (prima a 12,
   attaccata; Rami: «dagli un po' di spazio»). */
@media (max-width: 699px) {
	.as-sim__tel .as-iphone { font-size: calc((100cqw - 52px) / 20.51); }
}

/* ── v0.87.3 (01/11, Rami dall'iPhone: «ci sono ancora gli stessi problemi»). Su iPhone, oltre a sfocature e filtri:
   · mentre si scorre (html.as-scorre, landing.js) le animazioni infinite della sezione si fermano: ridipingevano a ogni
     fotogramma (il tratteggio della freccia su un SVG grande quanto il telefono, il bersaglio che pulsa con l'ombra);
   · la freccia sta su un suo strato, così quando scorre non ridipinge il telefono sotto;
   · i fogli bianchi che aspettano fuori dallo schermo del telefono (la landing, la conferma, la notifica, l'avviso del
     pannello) sono nascosti davvero finché non servono: Safari, scorrendo, a volte non li ritaglia e li mostra per un attimo.
   Da computer niente cambia. */
@media (hover: none) {
	html.as-scorre .as-viaggio *, html.as-scorre .as-viaggio *::before, html.as-scorre .as-viaggio *::after { animation-play-state: paused !important; } /* deroga motivata: batte ogni animazione della sezione */
	.as-sim__mira { will-change: transform; }
	.as-sim-land { visibility: hidden; transition: transform .65s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .65s; }
	.as-sim.is-landing .as-sim-land { visibility: visible; transition: transform .65s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
	.as-sim-sheet { visibility: hidden; transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .55s; }
	.as-sim.is-prenotato .as-sim-sheet { visibility: visible; transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
	.as-sim-banner { visibility: hidden; transition: transform .6s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .6s; }
	.as-sim.is-mail .as-sim-banner { visibility: visible; transition: transform .6s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
	.as-sim-pan__toast { visibility: hidden; transition: opacity .45s ease-out, transform .45s var(--as-ease-out), visibility 0s linear .45s; }
	.as-sim.is-arrivato .as-sim-pan__toast { visibility: visible; transition: opacity .45s ease-out, transform .45s var(--as-ease-out), visibility 0s; }
}