/*
 * Studio Arfia · caso «Prenotazioni perse» (chiave prenota) · v0.95 · 03/11/2026
 * Il booking engine di Podere Le Viole (B&B in Chianti) sul telefono di Chiara e il planning del podere sul telefono del
 * titolare (inc/casi/prenota.php). Le schermate sono in PUNTI dello schermo vero: calc(N * var(--u)). --u lo dà l'iPhone
 * disegnato del kit, oppure (iPhone fotografico) lo schermo vivo sopra la foto: 100cqw / 402.
 * UNA volta sola (33 s, terzo giro: era 18) sotto .as-demo-vivo (la scena la accende quando si apre la tab; .as-demo-pausa la ferma fuori
 * schermo, soluzioni.css), poi ferma sull'ultimo fotogramma: il telefono del podere con la prenotazione, la notifica e i
 * numeri nuovi. È anche lo stato senza movimento.
 * Tempi: in secondi nel blocco «LA SCENA, UNA VOLTA» in fondo (33 s; terzo giro, Rami: «troppo veloce»).
 */

.as-k-prenota { --t: 33s; --viola: #5B2A4E; --viola-2: #8C5A80; --lilla: #F1E8F0; --grigio: rgba(60, 60, 67, .6); --grigio-2: rgba(60, 60, 67, .3); --filo: rgba(60, 60, 67, .16); --verde: #23824A; --sf: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; width: 100%; container-type: inline-size; color: #000; }
.as-k-prenota__tela { display: grid; justify-items: center; align-items: end; }
.as-k-prenota__fig { grid-area: 1 / 1; display: grid; justify-items: center; gap: 3.4cqw; margin: 0; }
.as-k-prenota__fig .as-k-prenota__tel { font-size: calc(37cqw / 20.51); }
.as-k-prenota__dida { margin: 0; font: 400 max(11px, 1.95cqw) / 1.3 var(--as-font, sans-serif); letter-spacing: .01em; color: var(--as-muted, #707070); white-space: nowrap; }
.as-k-prenota__corpo { display: contents; }
/* Fermo (e alla fine): il telefono di Chiara è uscito, resta quello del podere. */
.as-k-prenota__fig.is-cliente { opacity: 0; transform: translateX(-125%); }

/* L'iPhone fotografico: la foto (con lo schermo finale già dentro) e sopra lo schermo vivo, allineato in percentuale. */
/* Misure dal LEGGIMI del kit (iphone3, immagine intera 980 × 2000): schermo, angoli, isola. */
/* v0.100: l'ombra in px (gli stessi valori di prima a 640 di larghezza): con le unità cqw dentro un filter, su iPhone nella scena
   rimpicciolita l'ombra rischia i bordi netti (Rami, 04/11, sul caso «Sito vecchio»). */
.as-k-prenota__foto-tel { position: relative; width: 38cqw; filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .24)) drop-shadow(0 3px 5px rgba(0, 0, 0, .14)); }
.as-k-prenota__foto-tel > img { display: block; width: 100%; height: auto; }
.as-k-prenota__vivo { position: absolute; left: 4.503%; top: 1.789%; width: 90.824%; height: 96.421%; overflow: hidden; isolation: isolate; border-radius: 14.967% / 6.905%; container-type: size; }
.as-k-prenota__schermo { --u: calc(100cqw / 402); position: absolute; inset: 0; overflow: hidden; background: #fff; }
.as-k-prenota__isola { position: absolute; z-index: 40; left: 36.04%; top: 1.58%; width: 27.98%; height: 3.76%; border-radius: 999px; background: #000; }
.as-k-prenota__vetrofoto { position: absolute; z-index: 41; inset: 0; background: rgba(255, 255, 255, .05); pointer-events: none; }
.as-k-prenota__home { position: absolute; z-index: 40; left: 50%; bottom: calc(8 * var(--u)); width: calc(140 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-70 * var(--u)); border-radius: 999px; background: rgba(0, 0, 0, .88); }
/* La pagina nuda: la schermata a misura vera (1 punto = 1 px), da fotografare. */
.as-k-prenota--nudo { width: 402px; container-type: normal; }
.as-k-prenota__nudo { position: relative; width: 402px; height: 874px; overflow: hidden; }
.as-k-prenota__nudo .as-k-prenota__schermo { --u: 1px; }

/* ── L'app: base comune ─────────────────────────────────────────────────────────────── */
.as-k-prenota__app { position: absolute; inset: 0; overflow: hidden; font-family: var(--sf); font-size: calc(15 * var(--u)); line-height: 1.3; letter-spacing: -.012em; color: #000; -webkit-font-smoothing: antialiased; }
.as-k-prenota__app :is(p, h4) { margin: 0; }
.as-k-prenota__app b, .as-k-prenota__app strong { font-weight: 600; }
.as-k-prenota__ic { display: block; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.as-k-prenota__sch { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(58 * var(--u)) calc(16 * var(--u)) 0; background: #fff; opacity: 0; }
.as-k-prenota__sch.is-ok { opacity: 1; }

/* La barra di stato di iOS (la disegna la schermata). */
.as-k-prenota__stato { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: calc(64 * var(--u)); margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) calc(126 * var(--u)) minmax(0, 1fr); align-items: center; font: 600 calc(17 * var(--u)) / 1 var(--sf); letter-spacing: -.01em; color: #000; pointer-events: none; }
.as-k-prenota__stato .is-ora { grid-column: 1; justify-self: center; padding-left: calc(14 * var(--u)); font-variant-numeric: tabular-nums; }
.as-k-prenota__stato .is-icone { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(6 * var(--u)); padding-right: calc(8 * var(--u)); }
.as-k-prenota__stato .as-disp__ic { display: block; fill: currentColor; }
.as-k-prenota__stato .is-campo { width: calc(17.5 * var(--u)); height: calc(11.3 * var(--u)); }
.as-k-prenota__stato .is-wifi { width: calc(16 * var(--u)); height: calc(11.5 * var(--u)); }
.as-k-prenota__stato .is-batteria { width: calc(27 * var(--u)); height: calc(12.8 * var(--u)); }

/* La barra di Safari (iOS 26): due tondi e la capsula di vetro, sospesi sopra la pagina. */
.as-k-prenota__safari { position: absolute; z-index: 12; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u)); margin: 0 !important; }
.as-k-prenota__safari > span { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: 100%; border-radius: 999px; background: rgba(246, 246, 248, .86); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .9), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .14), 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .06); color: #1C1C1E; }
.as-k-prenota__safari .is-tondo { width: calc(48 * var(--u)); flex: none; }
.as-k-prenota__safari .is-url { flex: 1; font-size: calc(15 * var(--u)); }
.as-k-prenota__safari .is-url b { font-weight: 500; letter-spacing: -.01em; }
.as-k-prenota__safari .is-url .as-k-prenota__ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: rgba(60, 60, 67, .7); }
.as-k-prenota__safari .as-k-prenota__ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }

/* Testate */
.as-k-prenota__testa { display: flex; align-items: center; justify-content: space-between; height: calc(46 * var(--u)); flex: none; }
.as-k-prenota__testa.is-centro { justify-content: center; }
.as-k-prenota__marchio { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--viola); }
.as-k-prenota__segno { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.as-k-prenota__marchio span { font: 500 calc(19 * var(--u)) / 1 var(--serif); letter-spacing: -.005em; }
.as-k-prenota__lingua { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--grigio); }
.as-k-prenota__barra { display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr) calc(38 * var(--u)); align-items: center; height: calc(50 * var(--u)); flex: none; }
.as-k-prenota__barra .is-tondo { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #F2F2F7; color: var(--viola); }
.as-k-prenota__barra p { text-align: center; }
.as-k-prenota__barra p b { font-size: calc(17 * var(--u)); }

/* I passi del booking engine */
.as-k-prenota__passi { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(28 * var(--u)); flex: none; font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__passi span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.as-k-prenota__passi span + span::before { content: ""; width: calc(12 * var(--u)); height: calc(1 * var(--u)); margin-right: calc(2 * var(--u)); background: rgba(60, 60, 67, .25); }
.as-k-prenota__passi i { display: grid; place-items: center; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) rgba(60, 60, 67, .3); font: 600 calc(11 * var(--u)) / 1 var(--sf); font-style: normal; }
.as-k-prenota__passi .is-ora { color: #000; font-weight: 600; }
.as-k-prenota__passi .is-ora i { background: var(--viola); box-shadow: none; color: #fff; }
.as-k-prenota__passi .is-fatto { color: var(--viola); }
.as-k-prenota__passi .is-fatto i { background: var(--lilla); box-shadow: none; color: var(--viola); }
.as-k-prenota__passi .is-fatto .as-k-prenota__ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.6; }

.as-k-prenota__h { margin-top: calc(12 * var(--u)) !important; font: 700 calc(26 * var(--u)) / 1.12 var(--sf); letter-spacing: -.02em; }
.as-k-prenota__h.is-centro { text-align: center; }
.as-k-prenota__btn { position: relative; display: inline-grid; place-items: center; height: calc(48 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--viola); color: #fff; font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; }

/* Il tocco: un disco di vetro al centro di quello che tocca. */
.as-k-prenota__tocco { position: absolute; z-index: 9; left: 50%; top: 50%; 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, .38); box-shadow: inset 0 0 0 calc(1.6 * var(--u)) rgba(255, 255, 255, .95), 0 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .14), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; }

/* ── 1 · Il calendario (foglio a tutto schermo) ── */
.as-k-prenota__foglio-t { display: grid; grid-template-columns: calc(60 * var(--u)) 1fr calc(60 * var(--u)); align-items: center; height: calc(46 * var(--u)); flex: none; text-align: center; }
.as-k-prenota__foglio-t b { font-size: calc(17 * var(--u)); }
.as-k-prenota__foglio-t .is-x { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #F2F2F7; color: #3C3C43; }
.as-k-prenota__foglio-t .is-x .as-k-prenota__ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2.2; }
.as-k-prenota__foglio-t .is-dx { justify-self: end; font-size: calc(15 * var(--u)); color: var(--viola); }
.as-k-prenota__quando { display: grid; grid-template-columns: 1fr calc(22 * var(--u)) 1fr; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.as-k-prenota__quando p { display: grid; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(60, 60, 67, .24); }
.as-k-prenota__quando p.is-partenza { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--viola); }
.as-k-prenota__quando small { font-size: calc(12 * var(--u)); color: var(--grigio); }
.as-k-prenota__quando b { grid-area: 2 / 1; font-size: calc(17 * var(--u)); }
.as-k-prenota__quando .is-vuoto { color: rgba(60, 60, 67, .38); font-weight: 500; opacity: 0; }
.as-k-prenota__freccina { color: var(--grigio-2); }
.as-k-prenota__freccina .as-k-prenota__ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.as-k-prenota__sett { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: calc(12 * var(--u)) calc(-16 * var(--u)) 0 !important; padding: calc(8 * var(--u)) calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--filo); text-align: center; font-size: calc(12 * var(--u)); font-weight: 600; color: rgba(60, 60, 67, .45); }
.as-k-prenota__mese { margin-top: calc(14 * var(--u)) !important; font-size: calc(17 * var(--u)); font-weight: 600; }
.as-k-prenota__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: calc(6 * var(--u)); text-align: center; }
.as-k-prenota__cal > span { position: relative; display: grid; align-content: center; height: calc(48 * var(--u)); }
.as-k-prenota__cal b { position: relative; z-index: 1; font-size: calc(17 * var(--u)); font-weight: 500; line-height: 1.15; }
.as-k-prenota__cal small { position: relative; z-index: 1; font-size: calc(10.5 * var(--u)); color: var(--grigio); font-variant-numeric: tabular-nums; }
.as-k-prenota__cal .is-passato b { color: rgba(60, 60, 67, .28); }
.as-k-prenota__cal .is-oggi b { color: var(--viola); font-weight: 700; }
.as-k-prenota__cal .is-oggi::after { content: ""; position: absolute; left: 50%; bottom: calc(3 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-2 * var(--u)); border-radius: 50%; background: var(--viola); }
.as-k-prenota__cal .is-esaurito b { color: rgba(60, 60, 67, .28); text-decoration: line-through; text-decoration-thickness: calc(1 * var(--u)); }
.as-k-prenota__cal :is(.is-da, .is-in, .is-a)::before { content: ""; position: absolute; inset: calc(2 * var(--u)) 0; background: var(--lilla); }
.as-k-prenota__cal :is(.is-da, .is-a)::before { background: var(--viola); }
.as-k-prenota__cal .is-da::before { border-radius: calc(12 * var(--u)) 0 0 calc(12 * var(--u)); }
.as-k-prenota__cal .is-a::before { border-radius: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.as-k-prenota__cal :is(.is-da, .is-a) b { color: #fff; }
.as-k-prenota__cal :is(.is-da, .is-a) small { color: rgba(255, 255, 255, .78); }
.as-k-prenota__piede { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(90 * var(--u)); background: rgba(255, 255, 255, .97); box-shadow: 0 calc(-1 * var(--u)) 0 var(--filo), 0 calc(-10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .05); }
.as-k-prenota__piede p { display: grid; }
.as-k-prenota__piede p b { display: grid; font-size: calc(17 * var(--u)); }
.as-k-prenota__piede p b span { grid-area: 1 / 1; }
.as-k-prenota__piede p b .is-vuoto { opacity: 0; color: var(--grigio); font-weight: 500; }
.as-k-prenota__piede p small { font-size: calc(13 * var(--u)); color: var(--grigio); }

/* ── 2 · La camera ── */
.as-k-prenota__ricerca { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #F2F2F7; font-size: calc(14 * var(--u)); }
.as-k-prenota__ricerca .as-k-prenota__ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--viola); }
.as-k-prenota__ricerca span { flex: 1; }
.as-k-prenota__ricerca em { font-style: normal; font-weight: 600; color: var(--viola); }
.as-k-prenota__app .as-k-prenota__ricerca + .as-k-prenota__passi { margin-top: calc(6 * var(--u)); }
.as-k-prenota__trovate { margin-top: calc(2 * var(--u)) !important; font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__camera { display: grid; margin-top: calc(10 * var(--u)); }
.as-k-prenota__foto { position: relative; display: block; height: calc(198 * var(--u)); border-radius: calc(14 * var(--u)); background: #ddd center / cover no-repeat; }
.as-k-prenota__foto em { position: absolute; left: calc(10 * var(--u)); top: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; font-style: normal; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--viola); }
.as-k-prenota__foto small { position: absolute; left: 0; right: 0; bottom: calc(10 * var(--u)); display: flex; justify-content: center; gap: calc(5 * var(--u)); }
.as-k-prenota__foto small i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .55); }
.as-k-prenota__foto small i.is-on { background: #fff; }
.as-k-prenota__nome-c { margin-top: calc(10 * var(--u)) !important; font: 500 calc(25 * var(--u)) / 1.1 var(--serif); color: var(--viola); }
.as-k-prenota__dotaz { display: flex; gap: calc(14 * var(--u)); margin-top: calc(6 * var(--u)) !important; font-size: calc(13 * var(--u)); color: #3C3C43; }
.as-k-prenota__dotaz span { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.as-k-prenota__dotaz .as-k-prenota__ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: var(--viola-2); }
.as-k-prenota__tariffe { display: grid; margin-top: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--filo); }
.as-k-prenota__tariffe p { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.as-k-prenota__tariffe p + p { box-shadow: 0 calc(-1 * var(--u)) 0 var(--filo); }
.as-k-prenota__tariffe p.is-scelta { border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; background: #FAF6F9; box-shadow: inset 0 0 0 calc(1.6 * var(--u)) var(--viola); }
.as-k-prenota__tariffe span { display: grid; gap: calc(2 * var(--u)); min-width: 0; }
.as-k-prenota__tariffe span b { font-size: calc(14 * var(--u)); }
.as-k-prenota__tariffe span small { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: var(--grigio); }
.as-k-prenota__tariffe .is-verde { color: var(--verde); }
.as-k-prenota__tariffe .is-verde .as-k-prenota__ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 2.4; }
.as-k-prenota__tariffe strong { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.as-k-prenota__radio { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.6 * var(--u)) var(--grigio-2); }
.as-k-prenota__tariffe .is-scelta .as-k-prenota__radio { box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--viola); }
.as-k-prenota__camera.is-dopo { margin-top: calc(18 * var(--u)); }
.as-k-prenota__piede.is-fisso p b { display: block; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -.02em; }

/* ── 3 · I dati e il pagamento ── */
.as-k-prenota__riep { display: flex; gap: calc(12 * var(--u)); align-items: center; margin-top: calc(8 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: #F6F3F6; }
.as-k-prenota__mini { flex: none; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(10 * var(--u)); background: #ddd center / cover no-repeat; }
.as-k-prenota__riep p { display: grid; flex: 1; gap: calc(1 * var(--u)); }
.as-k-prenota__riep p b { font: 500 calc(18 * var(--u)) / 1.1 var(--serif); color: var(--viola); }
.as-k-prenota__riep p span { font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__riep strong { font-size: calc(16 * var(--u)); font-weight: 700; }
.as-k-prenota__campi { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.as-k-prenota__campi p { grid-column: 1 / -1; position: relative; display: grid; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(60, 60, 67, .22); }
.as-k-prenota__campi p.is-mezzo { grid-column: auto; }
.as-k-prenota__campi small { font-size: calc(11.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__campi span { font-size: calc(15.5 * var(--u)); }
.as-k-prenota__campi .is-scelta .as-k-prenota__ic { position: absolute; right: calc(12 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u)); color: var(--grigio); }
.as-k-prenota__consenso { display: flex; gap: calc(9 * var(--u)); margin-top: calc(12 * var(--u)) !important; font-size: calc(12.5 * var(--u)); color: #3C3C43; }
.as-k-prenota__consenso i { display: grid; place-items: center; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--viola); color: #fff; }
.as-k-prenota__consenso i .as-k-prenota__ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2.6; }
.as-k-prenota__consenso u { text-decoration-thickness: calc(1 * var(--u)); text-underline-offset: calc(2 * var(--u)); }
.as-k-prenota__k { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)) !important; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--grigio); }
.as-k-prenota__metodi { display: grid; grid-template-columns: 1fr 1fr; padding: calc(3 * var(--u)); border-radius: calc(11 * var(--u)); background: rgba(118, 118, 128, .12); }
.as-k-prenota__metodi span { display: grid; place-items: center; height: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; color: #3C3C43; }
.as-k-prenota__metodi .is-on { background: #fff; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .1); color: #000; font-weight: 600; }
.as-k-prenota__applepay { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); height: calc(50 * var(--u)); margin-top: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #000; color: #fff; font-size: calc(17 * var(--u)); letter-spacing: -.01em; }
.as-k-prenota__sicuro { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u)) !important; font-size: calc(11.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__sicuro .as-k-prenota__ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* Il velo e il foglio di Apple Pay, sopra la pagina e sopra la barra di Safari (nascosti da fermo: alla fine c'è la conferma). */
.as-k-prenota__velo { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .26); opacity: 0; }
.as-k-prenota__ap { position: absolute; z-index: 21; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(38 * var(--u)) calc(38 * var(--u)) calc(54 * var(--u)) calc(54 * var(--u)); background: #F2F2F7; box-shadow: 0 calc(-2 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .18); transform: translateY(112%); }
.as-k-prenota__ap-testa { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(4 * var(--u)); }
.as-k-prenota__ap-testa b { font-size: calc(21 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.as-k-prenota__ap-testa .is-x { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(118, 118, 128, .14); color: rgba(60, 60, 67, .6); }
.as-k-prenota__ap-testa .is-x .as-k-prenota__ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 2.4; }
.as-k-prenota__ap-gruppo { margin-top: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; }
.as-k-prenota__ap-riga { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); }
.as-k-prenota__ap-riga + .as-k-prenota__ap-riga { box-shadow: 0 calc(-1 * var(--u)) 0 rgba(60, 60, 67, .12); }
.as-k-prenota__ap-riga > span:not(.as-k-prenota__carta) { display: grid; flex: 1; min-width: 0; }
.as-k-prenota__ap-riga b { font-size: calc(15 * var(--u)); }
.as-k-prenota__ap-riga small { font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__ap-riga > small { flex: none; width: calc(62 * var(--u)); }
.as-k-prenota__ap-riga > span:last-of-type:not(.as-k-prenota__carta) { font-size: calc(15 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-k-prenota__ap-riga .as-k-prenota__ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: rgba(60, 60, 67, .3); stroke-width: 2.2; }
.as-k-prenota__carta { position: relative; flex: none; width: calc(46 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(4.5 * var(--u)); background: linear-gradient(135deg, #2C3E78 0%, #4B3A86 55%, #7A4A8C 100%); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .25); }
.as-k-prenota__carta i { position: absolute; left: calc(6 * var(--u)); top: calc(10 * var(--u)); width: calc(9 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(1.5 * var(--u)); background: linear-gradient(135deg, #D7DBE0, #9AA1AA); }
.as-k-prenota__ap-tot { display: grid; margin-top: calc(16 * var(--u)) !important; padding: 0 calc(4 * var(--u)); }
.as-k-prenota__ap-tot small { font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__ap-tot b { font-size: calc(34 * var(--u)); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.as-k-prenota__ap-fondo { display: grid; place-items: center; height: calc(96 * var(--u)); margin-top: calc(6 * var(--u)); }
.as-k-prenota__ap-fondo > p { grid-area: 1 / 1; display: grid; justify-items: center; gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: #000; opacity: 0; }
.as-k-prenota__ap-fondo > p.is-clic { opacity: 1; }
.as-k-prenota__laterale { position: relative; width: calc(26 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(7 * var(--u)); box-shadow: inset 0 0 0 calc(2 * var(--u)) #000; }
.as-k-prenota__laterale::after { content: ""; position: absolute; right: calc(-5 * var(--u)); top: calc(10 * var(--u)); width: calc(3.5 * var(--u)); height: calc(15 * var(--u)); border-radius: 999px; background: #007AFF; }
.as-k-prenota__laterale i { position: absolute; left: calc(36 * var(--u)); top: calc(13 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border: solid #007AFF; border-width: calc(2 * var(--u)) 0 0 calc(2 * var(--u)); transform: rotate(-45deg); }
.as-k-prenota__laterale i::after { content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); width: 100%; height: 100%; border: solid #007AFF; border-width: calc(2 * var(--u)) 0 0 calc(2 * var(--u)); }
.as-k-prenota__faceid { position: relative; display: block; width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.as-k-prenota__faceid i { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: 0 solid #000; }
.as-k-prenota__faceid i:nth-child(1) { left: 0; top: 0; border-width: calc(2.4 * var(--u)) 0 0 calc(2.4 * var(--u)); border-radius: calc(6 * var(--u)) 0 0 0; }
.as-k-prenota__faceid i:nth-child(2) { right: 0; top: 0; border-width: calc(2.4 * var(--u)) calc(2.4 * var(--u)) 0 0; border-radius: 0 calc(6 * var(--u)) 0 0; }
.as-k-prenota__faceid i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 calc(2.4 * var(--u)) calc(2.4 * var(--u)); border-radius: 0 0 0 calc(6 * var(--u)); }
.as-k-prenota__faceid i:nth-child(4) { right: 0; bottom: 0; border-width: 0 calc(2.4 * var(--u)) calc(2.4 * var(--u)) 0; border-radius: 0 0 calc(6 * var(--u)) 0; }
.as-k-prenota__faceid em { position: absolute; inset: calc(13 * var(--u)); border-radius: 50%; border: calc(2.4 * var(--u)) dashed #000; }
.as-k-prenota__ok { display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2.6 * var(--u)) #007AFF; color: #007AFF; }
.as-k-prenota__ok .as-k-prenota__ic { width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke-width: 2.6; }
.as-k-prenota__ap-fondo > p.is-fatto { font-weight: 600; }
.as-k-prenota__suggerimento { position: absolute; z-index: 22; right: calc(-4 * var(--u)); top: calc(258 * var(--u)); width: calc(10 * var(--u)); height: calc(118 * var(--u)); border-radius: 999px; background: #007AFF; box-shadow: 0 0 calc(14 * var(--u)) rgba(0, 122, 255, .7); opacity: 0; }

/* ── 4 · La conferma ── */
.as-k-prenota__cerchio { display: grid; place-items: center; width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: calc(8 * var(--u)) auto 0; border-radius: 50%; background: var(--lilla); color: var(--viola); }
.as-k-prenota__cerchio .as-k-prenota__ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); stroke-width: 2.4; }
.as-k-prenota__grazie { max-width: calc(300 * var(--u)); margin: calc(6 * var(--u)) auto 0 !important; font-size: calc(15 * var(--u)); text-align: center; color: var(--grigio); }
.as-k-prenota__bigl { margin-top: calc(16 * var(--u)); overflow: hidden; border-radius: calc(16 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--filo); }
.as-k-prenota__bigl-foto { position: relative; display: block; height: calc(118 * var(--u)); background: #ccc center 40% / cover no-repeat; }
.as-k-prenota__bigl-foto small { position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, .92); font-size: calc(12.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__bigl-foto small b { margin-left: calc(3 * var(--u)); color: #000; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.as-k-prenota__bigl > p { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.as-k-prenota__bigl > p + p { box-shadow: 0 calc(-1 * var(--u)) 0 var(--filo); }
.as-k-prenota__bigl > p span { color: var(--grigio); }
.as-k-prenota__bigl > p b { font-weight: 500; text-align: right; }
.as-k-prenota__bigl > p.is-pagato b { color: var(--verde); font-weight: 600; }
.as-k-prenota__mail { margin-top: calc(10 * var(--u)) !important; font-size: calc(12.5 * var(--u)); text-align: center; color: var(--grigio); }
.as-k-prenota__link { display: flex; justify-content: center; gap: calc(22 * var(--u)); margin-top: calc(12 * var(--u)) !important; }
.as-k-prenota__link span { display: flex; align-items: center; gap: calc(6 * var(--u)); padding-bottom: calc(3 * var(--u)); border-bottom: calc(1.2 * var(--u)) solid currentColor; font-size: calc(14.5 * var(--u)); font-weight: 600; color: var(--viola); }
.as-k-prenota__link i, .as-k-prenota__checkin em i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border: solid currentColor; border-width: calc(1.6 * var(--u)) calc(1.6 * var(--u)) 0 0; transform: rotate(45deg); }
.as-k-prenota__checkin { display: flex; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #F6F3F6; }
.as-k-prenota__checkin > .as-k-prenota__ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--viola); }
.as-k-prenota__checkin p { display: grid; gap: calc(2 * var(--u)); }
.as-k-prenota__checkin b { font-size: calc(15 * var(--u)); }
.as-k-prenota__checkin span { font-size: calc(13 * var(--u)); color: var(--grigio); }
.as-k-prenota__checkin em { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); font-style: normal; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--viola); }

/* ── Il telefono del podere: il planning (vetro chiaro su luce colorata, squircle, un vetro scuro per la cifra) ── */
.as-k-prenota__app.is-podere { background: #F3F1F4; }
.as-k-prenota__luce { position: absolute; inset: 0; background:
	radial-gradient(60% 34% at 8% 6%, rgba(169, 140, 255, .42) 0, rgba(169, 140, 255, 0) 70%),
	radial-gradient(52% 30% at 96% 14%, rgba(255, 146, 200, .34) 0, rgba(255, 146, 200, 0) 70%),
	radial-gradient(70% 34% at 70% 62%, rgba(141, 180, 255, .3) 0, rgba(141, 180, 255, 0) 70%),
	radial-gradient(60% 30% at 0% 92%, rgba(134, 224, 189, .3) 0, rgba(134, 224, 189, 0) 70%); }
.as-k-prenota__app.is-podere > :is(header, p, div):not(.as-k-prenota__luce):not(.as-k-prenota__banner):not(.as-k-prenota__stato) { position: relative; }
.as-k-prenota__vetro { background: rgba(255, 255, 255, .64); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .85), 0 calc(8 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(60, 40, 90, .25); }
.as-k-prenota__pt { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(62 * var(--u)); padding: 0 calc(16 * var(--u)); }
.as-k-prenota__avatar { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #ccc center / cover no-repeat; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.as-k-prenota__pt p { display: grid; flex: 1; }
.as-k-prenota__pt p b { font-size: calc(16 * var(--u)); }
.as-k-prenota__pt p small { font-size: calc(12.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__pt .is-tondo { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; color: var(--viola); }
.as-k-prenota__pt-h { display: grid; margin-top: calc(14 * var(--u)) !important; padding: 0 calc(16 * var(--u)); }
.as-k-prenota__pt-h b { font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.as-k-prenota__pt-h span { font-size: calc(15 * var(--u)); color: var(--grigio); }
.as-k-prenota__kpi { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); padding: 0 calc(16 * var(--u)); }
.as-k-prenota__kpi > p { position: relative; display: grid; align-content: start; gap: calc(2 * var(--u)); min-height: calc(92 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)); overflow: hidden; }
@supports (corner-shape: squircle) { .as-k-prenota__kpi > p, .as-k-prenota__plan, .as-k-prenota__ultime { corner-shape: squircle; border-radius: calc(34 * var(--u)) !important; } }
.as-k-prenota__kpi small { font-size: calc(12.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__kpi b { display: grid; font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; font-variant-numeric: tabular-nums; }
.as-k-prenota__kpi b span { grid-area: 1 / 1; }
.as-k-prenota__kpi .is-prima { opacity: 0; }
.as-k-prenota__kpi em { font-style: normal; font-size: calc(11.5 * var(--u)); }
.as-k-prenota__kpi .is-scuro { background: radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, .7) 0, rgba(139, 92, 246, 0) 70%), radial-gradient(70% 60% at 0% 100%, rgba(238, 69, 150, .45) 0, rgba(238, 69, 150, 0) 70%), radial-gradient(60% 50% at 100% 100%, rgba(47, 123, 255, .42) 0, rgba(47, 123, 255, 0) 70%), #1B1630; color: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .12), 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(27, 22, 48, .7); }
.as-k-prenota__kpi .is-scuro small, .as-k-prenota__kpi .is-scuro em { color: rgba(255, 255, 255, .7); }
.as-k-prenota__occ { position: relative; display: block; height: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: 999px; background: rgba(91, 42, 78, .12); overflow: hidden; }
.as-k-prenota__occ i { position: absolute; left: 0; top: 0; bottom: 0; width: 83%; border-radius: inherit; background: linear-gradient(90deg, #A98CFF, #7A4A8C); }
.as-k-prenota__plan { margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(24 * var(--u)); }
.as-k-prenota__plan-g, .as-k-prenota__plan-r { display: grid; grid-template-columns: calc(78 * var(--u)) minmax(0, 1fr); }
.as-k-prenota__plan-g { grid-template-columns: calc(78 * var(--u)) repeat(7, minmax(0, 1fr)); margin-bottom: calc(4 * var(--u)) !important; text-align: center; }
.as-k-prenota__plan-g span { display: grid; }
.as-k-prenota__plan-g small { font-size: calc(10.5 * var(--u)); font-weight: 600; color: rgba(60, 60, 67, .45); }
.as-k-prenota__plan-g b { font-size: calc(14 * var(--u)); }
.as-k-prenota__plan-r { height: calc(38 * var(--u)); align-items: center; }
.as-k-prenota__plan-r + .as-k-prenota__plan-r { box-shadow: 0 calc(-1 * var(--u)) 0 rgba(60, 60, 67, .08); }
.as-k-prenota__plan-c { padding-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.as-k-prenota__plan-l { position: relative; height: 100%; background: repeating-linear-gradient(90deg, rgba(60, 60, 67, .07) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(100% / 7)); }
.as-k-prenota__plan-l > i { position: absolute; top: calc(6 * var(--u)); height: calc(26 * var(--u)); left: calc(var(--da) / 7 * 100% + 1 * var(--u)); width: calc((var(--a) - var(--da)) / 7 * 100% - 2 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(8 * var(--u)); font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.as-k-prenota__plan-l > i.is-prima { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.as-k-prenota__plan-l > i.is-oltre { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.as-k-prenota__plan-l > i.is-sito, .as-k-prenota__legenda .is-sito::before { background: #7A4A8C; }
.as-k-prenota__plan-l > i.is-telefono, .as-k-prenota__legenda .is-telefono::before { background: #4E8B6E; }
.as-k-prenota__plan-l > i.is-portali, .as-k-prenota__legenda .is-portali::before { background: #4D78C2; }
.as-k-prenota__plan-l > i.is-nuova { box-shadow: 0 0 0 calc(2 * var(--u)) #fff, 0 0 0 calc(4 * var(--u)) rgba(122, 74, 140, .35); }
.as-k-prenota__plan-l > i em { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-left: auto; margin-right: calc(-3 * var(--u)); padding: calc(2 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .24); font-style: normal; font-size: calc(9.5 * var(--u)); }
.as-k-prenota__plan-l > i em .as-k-prenota__ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 3; }
.as-k-prenota__legenda { display: flex; gap: calc(14 * var(--u)); margin-top: calc(8 * var(--u)) !important; padding-left: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--grigio); }
.as-k-prenota__legenda span { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.as-k-prenota__legenda span::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.as-k-prenota__ultime { margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)); border-radius: calc(24 * var(--u)); }
.as-k-prenota__ultime-t { display: flex; align-items: baseline; justify-content: space-between; }
.as-k-prenota__ultime-t b { font-size: calc(15 * var(--u)); }
.as-k-prenota__ultime-t span { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--viola); }
.as-k-prenota__ultime-l { height: calc(104 * var(--u)); margin-top: calc(4 * var(--u)); overflow: hidden; }
.as-k-prenota__ultime-in > p { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); }
.as-k-prenota__ultime-in > p + p { box-shadow: 0 calc(-1 * var(--u)) 0 rgba(60, 60, 67, .1); }
.as-k-prenota__volto { flex: none; width: calc(34 * var(--u)) !important; height: calc(34 * var(--u)) !important; border-radius: 50%; object-fit: cover; }
.as-k-prenota__ultime-in > p > span { display: grid; flex: 1; min-width: 0; }
.as-k-prenota__ultime-in > p > span.is-dx { flex: none; justify-items: end; }
.as-k-prenota__ultime-in b { font-size: calc(14 * var(--u)); }
.as-k-prenota__ultime-in small { font-size: calc(12 * var(--u)); color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-k-prenota__ultime-in .is-nuova .is-dx small { color: var(--viola); font-weight: 600; }
/* La barra delle schede di iOS 26: una capsula di vetro sospesa. */
.as-k-prenota__tab { position: absolute !important; z-index: 6; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(22 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); height: calc(64 * var(--u)); padding: calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .9), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(40, 20, 60, .18); }
.as-k-prenota__tab span { display: grid; justify-items: center; align-content: center; gap: calc(2 * var(--u)); border-radius: 999px; font-size: calc(10.5 * var(--u)); font-weight: 600; color: #3C3C43; }
.as-k-prenota__tab .as-k-prenota__ic { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.as-k-prenota__tab .is-on { background: rgba(91, 42, 78, .1); color: var(--viola); }
/* La notifica che scende mentre l'app è aperta (alla fine resta). */
.as-k-prenota__banner { position: absolute; z-index: 28; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(56 * var(--u)); display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr) auto; align-items: start; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border-radius: calc(26 * var(--u)); background: rgba(252, 252, 253, .95); box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(30, 10, 40, .26), 0 0 0 calc(.6 * var(--u)) rgba(0, 0, 0, .06); }
.as-k-prenota__icona { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(160deg, #7A4A8C, #4B2342); color: #fff; }
.as-k-prenota__icona-segno { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.as-k-prenota__banner p { display: grid; }
.as-k-prenota__banner p b { font-size: calc(15 * var(--u)); }
.as-k-prenota__banner p span { font-size: calc(14.5 * var(--u)); line-height: 1.3; }
.as-k-prenota__banner small { font-size: calc(13 * var(--u)); color: var(--grigio); }

/* ══ LA SCENA, UNA VOLTA (33 s), solo sotto .as-demo-vivo; si ferma sull'ultimo fotogramma ══════════════════════
   Terzo giro (Rami, 03/11: «l'animazione è troppo veloce»): stessa sequenza, tempi da persona vera. In secondi:
   date 0-5,6 (tocca il 15 a 1,4, il 18 a 2,8, «Conferma» a 4,6) · camera 5,6-10,4 («Prenota» a 9,2) · dati 10,4-13,4
   («Paga con Apple Pay» a 13) · Apple Pay 13,4-19,6 (doppio clic 14-16, Face ID 16,1-17,6, Fatto 17,7, giù 19-19,6) ·
   conferma 19,6-24 · Chiara esce 24-25,4, il podere entra 25,2-26,8 · notifica 27,8 · barra 29-30 · nuova riga 30,4-31,2 ·
   numeri 31,4-32,2 · fermo da 33. Le percentuali qui sotto sono secondi / 33. */
.as-demo-vivo .as-k-prenota :is(.as-k-prenota__fig, .as-k-prenota__dida, .as-k-prenota__sch, .as-k-prenota__quando b, .as-k-prenota__quando p, .as-k-prenota__cal b, .as-k-prenota__cal small, .as-k-prenota__piede span, .as-k-prenota__btn, .as-k-prenota__tocco, .as-k-prenota__velo, .as-k-prenota__ap, .as-k-prenota__ap-fondo > p, .as-k-prenota__faceid em, .as-k-prenota__suggerimento, .as-iphone__tasto, .as-k-prenota__cerchio, .as-k-prenota__banner, .as-k-prenota__plan-l > i, .as-k-prenota__kpi span, .as-k-prenota__occ i, .as-k-prenota__ultime-in) { animation-duration: var(--t); animation-iteration-count: 1; animation-fill-mode: both; }
.as-demo-vivo .as-k-prenota__cal span::before { animation-duration: var(--t); animation-iteration-count: 1; animation-fill-mode: both; }

/* i due telefoni: prima Chiara da sola, poi esce a sinistra ed entra il podere; le didascalie si danno il cambio */
.as-demo-vivo .as-k-prenota__fig.is-cliente { animation-name: as-k-prenota-esce; }
.as-demo-vivo .as-k-prenota__fig.is-podere { animation-name: as-k-prenota-entra; }
@keyframes as-k-prenota-esce { 0%, 72.727% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, .25); } 75.758% { opacity: .9; } 76.97%, 100% { opacity: 0; transform: translateX(-125%); } }
@keyframes as-k-prenota-entra { 0%, 76.364% { opacity: 0; transform: translateX(110%); animation-timing-function: cubic-bezier(.15, .8, .25, 1); } 77.273% { opacity: 1; } 81.212%, 100% { opacity: 1; transform: none; } }
.as-demo-vivo .as-k-prenota__fig.is-cliente .as-k-prenota__dida { animation-name: as-k-prenota-dida-via; }
.as-demo-vivo .as-k-prenota__fig.is-podere .as-k-prenota__dida { animation-name: as-k-prenota-dida-su; }
@keyframes as-k-prenota-dida-via { 0%, 72.727% { opacity: 1; } 74.242%, 100% { opacity: 0; } }
@keyframes as-k-prenota-dida-su { 0%, 81.212% { opacity: 0; } 83.03%, 100% { opacity: 1; } }

/* le schermate di Chiara */
.as-demo-vivo .as-k-prenota__sch.is-date { animation-name: as-k-prenota-s1; }
.as-demo-vivo .as-k-prenota__sch.is-camere { animation-name: as-k-prenota-s2; }
.as-demo-vivo .as-k-prenota__sch.is-paga { animation-name: as-k-prenota-s3; }
.as-demo-vivo .as-k-prenota__sch.is-ok { animation-name: as-k-prenota-s4; }
@keyframes as-k-prenota-s1 { 0%, 15.152% { opacity: 1; transform: none; } 16.97%, 100% { opacity: 0; transform: translateX(-7%); } }
@keyframes as-k-prenota-s2 { 0%, 15.152% { opacity: 0; transform: translateX(9%); } 16.97%, 29.697% { opacity: 1; transform: none; } 31.515%, 100% { opacity: 0; transform: translateX(-7%); } }
@keyframes as-k-prenota-s3 { 0%, 29.697% { opacity: 0; transform: translateX(9%); } 31.515%, 59.394% { opacity: 1; transform: none; } 61.212%, 100% { opacity: 0; transform: translateX(-7%); } }
@keyframes as-k-prenota-s4 { 0%, 59.394% { opacity: 0; transform: translateX(9%); } 61.212%, 100% { opacity: 1; transform: none; } }

/* il calendario: arrivo a 1,6 s, partenza a 3 s */
.as-demo-vivo .as-k-prenota .is-arrivo .is-vuoto { animation-name: as-k-prenota-via-a; }
.as-demo-vivo .as-k-prenota .is-arrivo .is-pieno { animation-name: as-k-prenota-su-a; }
.as-demo-vivo .as-k-prenota .is-partenza .is-vuoto { animation-name: as-k-prenota-via-b; }
.as-demo-vivo .as-k-prenota .is-partenza .is-pieno { animation-name: as-k-prenota-su-b; }
.as-demo-vivo .as-k-prenota__quando p.is-arrivo { animation-name: as-k-prenota-fuoco-a; }
.as-demo-vivo .as-k-prenota__quando p.is-partenza { animation-name: as-k-prenota-fuoco-b; }
@keyframes as-k-prenota-via-a { 0%, 4.848% { opacity: 1; } 5.303%, 100% { opacity: 0; } }
@keyframes as-k-prenota-su-a { 0%, 4.848% { opacity: 0; } 5.303%, 100% { opacity: 1; } }
@keyframes as-k-prenota-via-b { 0%, 9.091% { opacity: 1; } 9.545%, 100% { opacity: 0; } }
@keyframes as-k-prenota-su-b { 0%, 9.091% { opacity: 0; } 9.545%, 100% { opacity: 1; } }
@keyframes as-k-prenota-fuoco-a { 0%, 4.848% { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--viola); } 5.303%, 100% { box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(60, 60, 67, .24); } }
@keyframes as-k-prenota-fuoco-b { 0%, 4.848% { box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(60, 60, 67, .24); } 5.303%, 100% { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--viola); } }
.as-demo-vivo .as-k-prenota__cal .is-da::before { animation-name: as-k-prenota-sel-a; }
.as-demo-vivo .as-k-prenota__cal :is(.is-in, .is-a)::before { animation-name: as-k-prenota-sel-b; }
.as-demo-vivo .as-k-prenota__cal .is-da b { animation-name: as-k-prenota-num-a; }
.as-demo-vivo .as-k-prenota__cal .is-da small { animation-name: as-k-prenota-pr-a; }
.as-demo-vivo .as-k-prenota__cal .is-a b { animation-name: as-k-prenota-num-b; }
.as-demo-vivo .as-k-prenota__cal .is-a small { animation-name: as-k-prenota-pr-b; }
@keyframes as-k-prenota-sel-a { 0%, 4.848% { opacity: 0; } 5.303%, 100% { opacity: 1; } }
@keyframes as-k-prenota-sel-b { 0%, 9.091% { opacity: 0; } 9.545%, 100% { opacity: 1; } }
@keyframes as-k-prenota-num-a { 0%, 4.848% { color: #000; } 5.303%, 100% { color: #fff; } }
@keyframes as-k-prenota-pr-a { 0%, 4.848% { color: rgba(60, 60, 67, .6); } 5.303%, 100% { color: rgba(255, 255, 255, .78); } }
@keyframes as-k-prenota-num-b { 0%, 9.091% { color: #000; } 9.545%, 100% { color: #fff; } }
@keyframes as-k-prenota-pr-b { 0%, 9.091% { color: rgba(60, 60, 67, .6); } 9.545%, 100% { color: rgba(255, 255, 255, .78); } }
.as-demo-vivo .as-k-prenota__sch.is-date .as-k-prenota__piede .is-vuoto { animation-name: as-k-prenota-via-b; }
.as-demo-vivo .as-k-prenota__sch.is-date .as-k-prenota__piede .is-pieno { animation-name: as-k-prenota-su-b; }
.as-demo-vivo .as-k-prenota__sch.is-date .as-k-prenota__btn { animation-name: as-k-prenota-attivo; }
@keyframes as-k-prenota-attivo { 0%, 9.091% { background-color: #D9D3D8; } 10%, 100% { background-color: #5B2A4E; } }

/* i tocchi: lo stesso disco, ognuno al suo momento (ritardo = secondo del tocco / 33). Il disco dura circa 1,2 s: morbido. */
.as-demo-vivo .as-k-prenota__tocco { animation-name: as-k-prenota-tocco; }
.as-demo-vivo .as-k-prenota__tocco.is-t1 { animation-delay: calc(var(--t) * 0.0424); }
.as-demo-vivo .as-k-prenota__tocco.is-t2 { animation-delay: calc(var(--t) * 0.0848); }
.as-demo-vivo .as-k-prenota__tocco.is-t3 { animation-delay: calc(var(--t) * 0.1394); }
.as-demo-vivo .as-k-prenota__tocco.is-t4 { animation-delay: calc(var(--t) * 0.2788); }
.as-demo-vivo .as-k-prenota__tocco.is-t5 { animation-delay: calc(var(--t) * 0.3939); }
@keyframes as-k-prenota-tocco { 0% { opacity: 0; transform: scale(.6); } 1% { opacity: 1; transform: scale(1); } 2% { opacity: .95; transform: scale(.88); } 3.6% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.3); } }

/* Apple Pay: sale a 13,4 s; «Fai doppio clic» con la luce accanto al tasto fino a 16; Face ID 16,1-17,6; Fatto 17,7; giù a 19 */
.as-demo-vivo .as-k-prenota__ap { animation-name: as-k-prenota-ap; }
.as-demo-vivo .as-k-prenota__velo { animation-name: as-k-prenota-velo; }
@keyframes as-k-prenota-ap { 0%, 40.606% { transform: translateY(112%); animation-timing-function: cubic-bezier(.2, .9, .25, 1); } 42.424%, 57.576% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, .2); } 59.394%, 100% { transform: translateY(112%); } }
@keyframes as-k-prenota-velo { 0%, 40.606% { opacity: 0; } 42.121%, 57.576% { opacity: 1; } 59.394%, 100% { opacity: 0; } }
.as-demo-vivo .as-k-prenota__ap-fondo .is-clic { animation-name: as-k-prenota-clic; }
.as-demo-vivo .as-k-prenota__ap-fondo .is-faceid { animation-name: as-k-prenota-faceid; }
.as-demo-vivo .as-k-prenota__ap-fondo .is-fatto { animation-name: as-k-prenota-fatto; }
.as-demo-vivo .as-k-prenota__faceid em { animation-name: as-k-prenota-gira; animation-timing-function: linear; }
.as-demo-vivo .as-k-prenota__suggerimento { animation-name: as-k-prenota-sugg; }
@keyframes as-k-prenota-clic { 0%, 48.485% { opacity: 1; } 49.091%, 100% { opacity: 0; } }
@keyframes as-k-prenota-faceid { 0%, 48.485% { opacity: 0; transform: scale(.9); } 49.394%, 53.333% { opacity: 1; transform: none; } 53.939%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes as-k-prenota-fatto { 0%, 53.636% { opacity: 0; transform: scale(.82); } 54.848%, 100% { opacity: 1; transform: none; } }
@keyframes as-k-prenota-gira { 0%, 49.394% { transform: rotate(0); } 53.333%, 100% { transform: rotate(320deg); } }
@keyframes as-k-prenota-sugg { 0%, 43.636% { opacity: 0; } 44.848% { opacity: .9; } 46.364% { opacity: .35; } 47.576% { opacity: .9; } 48.485%, 100% { opacity: 0; } }
/* il doppio clic sul tasto laterale vero (solo col telefono disegnato: quello fotografico ha il tasto nella foto) */
.as-demo-vivo .as-k-prenota__fig.is-cliente .as-iphone__tasto.is-laterale { animation-name: as-k-prenota-premi; }
@keyframes as-k-prenota-premi { 0%, 46.667% { transform: none; } 46.97% { transform: translateX(calc(-1.8 * var(--u))); } 47.333% { transform: none; } 47.727% { transform: translateX(calc(-1.8 * var(--u))); } 48.091%, 100% { transform: none; } }

/* la conferma */
.as-demo-vivo .as-k-prenota__cerchio { animation-name: as-k-prenota-pop; }
@keyframes as-k-prenota-pop { 0%, 60.606% { transform: scale(.4); opacity: 0; } 62.121% { transform: scale(1.08); opacity: 1; } 63.03%, 100% { transform: none; opacity: 1; } }

/* al podere, uno dopo l'altro: la notifica (resta), la barra di Chiara, la riga nuova, i numeri */
.as-demo-vivo .as-k-prenota__banner { animation-name: as-k-prenota-banner; }
@keyframes as-k-prenota-banner { 0%, 84.242% { transform: translateY(-150%); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .25, 1); } 86.061%, 100% { transform: none; opacity: 1; } }
.as-demo-vivo .as-k-prenota__plan-l > i.is-nuova { animation-name: as-k-prenota-nuova; }
@keyframes as-k-prenota-nuova { 0%, 87.879% { clip-path: inset(0 100% 0 0); opacity: 0; } 88.333% { opacity: 1; } 90.909%, 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
.as-demo-vivo .as-k-prenota__ultime-in { animation-name: as-k-prenota-ultime; }
@keyframes as-k-prenota-ultime { 0%, 92.121% { transform: translateY(calc(-52 * var(--u))); animation-timing-function: cubic-bezier(.2, .9, .25, 1); } 94.545%, 100% { transform: none; } }
.as-demo-vivo .as-k-prenota__kpi .is-prima { animation-name: as-k-prenota-prima; }
.as-demo-vivo .as-k-prenota__kpi .is-dopo { animation-name: as-k-prenota-dopo; }
@keyframes as-k-prenota-prima { 0%, 95.152% { opacity: 1; transform: none; } 96.97%, 100% { opacity: 0; transform: translateY(-30%); } }
@keyframes as-k-prenota-dopo { 0%, 95.152% { opacity: 0; transform: translateY(30%); } 96.97%, 100% { opacity: 1; transform: none; } }
.as-demo-vivo .as-k-prenota__occ i { animation-name: as-k-prenota-occ; }
@keyframes as-k-prenota-occ { 0%, 95.152% { width: 76%; } 97.576%, 100% { width: 83%; } }

/* v0.99 (Rami, 04/11): via la composizione da telefono di questo caso («mockup giganteschi»): da telefono la scena
   è quella da computer, rimpicciolita come una foto nella card della fila (soluzioni.css, motion.js «fila»). */