/* =====================================================================
   La videochiamata (check-up, /checkup/ e /en/checkup/), versione 10. Si aggiunge a site.css, che ha il sistema (caratteri, bottoni,
   chip, campi, tasti rotondi .cbtn/.ic e .tbtn, il toast «Copiato», le tre durate e le due curve).
   Lume, l'assistente, è una presenza di luce (avatar.js): un solo SVG vivo che in arrivo riempie la cornice, in chiamata sta grande
   nella metà alta con i sottotitoli in Fraunces Text sotto, e quando entra la scena scivola nel riquadro piccolo in alto a destra
   con una FLIP (call.js misura prima e dopo e anima solo la trasformazione).
   Telefono prima di tutto (390×844): la chiamata riempie lo schermo. Su schermi larghi sta in una cornice alta al centro.
   Le posizioni sono in unità del contenitore (cqw/cqh della cornice .phone), così telefono e cornice desktop si comportano uguali.
   In più nella v10: il progresso (1/3, 2/3, 3/3), Indietro e Salta sempre nello stesso posto, i campi con l'etichetta che galleggia e la
   convalida in linea, la schermata di conferma con il riepilogo prima dell'invio, «Copia il messaggio» se WhatsApp o la mail non si aprono.
   ===================================================================== */
.call-page{background:var(--night)}
/* overflow:clip (non hidden): la cornice non può mai scorrere, nemmeno quando il browser mette a fuoco una risposta in fondo */
.call{--gut:18px;--top:calc(env(safe-area-inset-top,0px) + 64px);position:relative;display:grid;place-items:center;min-height:100svh;background:var(--night);color:#f4f1ec;overflow:clip}
.call-bg{display:none}
.phone{position:relative;width:100%;height:100svh;height:100dvh;min-height:600px;overflow:clip;isolation:isolate;container-type:size;
  background:radial-gradient(120% 70% at 50% 42%,#2b2219 0%,#17140f 46%,#0b0b0c 100%)}
.call :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.call [hidden],.works-overlay [hidden]{display:none!important}

/* la scena illustrativa: entra dietro in dissolvenza incrociata (720 ms), scura e un po' sfocata */
.stage,.scene,.shade{position:absolute;inset:0}
.scene{opacity:0;transition:opacity var(--d3) var(--ease-io)}
.scene.on{opacity:1}
.scene img{width:100%;height:100%;object-fit:cover;filter:brightness(.56) saturate(.9) blur(2px);transform:scale(1.04)}
.shade{opacity:0;transition:opacity var(--d3) var(--ease-io);background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,.1) 40%,rgba(10,10,11,.82) 64%,rgba(10,10,11,.96) 100%)}
.has-scene .shade{opacity:1}
@keyframes push{from{transform:scale(1.04)}to{transform:scale(1.1) translateY(-1%)}}
.motion .scene.on img{animation:push 22s var(--ease-out) infinite alternate}

/* l'assistente: un solo SVG vivo; le tre posizioni sono misure, lo spostamento lo anima call.js (FLIP: solo transform) */
.av{position:absolute;z-index:2;left:4cqw;top:calc(46cqh - 46cqw);width:92cqw;aspect-ratio:1;pointer-events:none;transform-origin:50% 50%}
.av svg{display:block;width:100%;height:100%;overflow:visible}
.call[data-state="talk"] .av,.call[data-state="q"] .av,.call[data-state="offer"] .av,.call[data-state="confirm"] .av,.call[data-state="case"] .av{width:70cqw;left:15cqw;top:calc(25cqh - 35cqw)}
.call.has-scene .av{width:33cqw;left:calc(100% - 64px - 16.5cqw);top:calc(var(--top) + 64px - 16.5cqw)}
.pip{position:absolute;z-index:1;right:14px;top:var(--top);width:100px;height:128px;border-radius:20px;border:1px solid rgba(244,241,236,.22);
  background:radial-gradient(90% 70% at 50% 48%,rgba(52,40,27,.92),rgba(14,13,12,.9));box-shadow:0 14px 30px rgba(0,0,0,.45);
  opacity:0;transform:scale(.92);transform-origin:top right;transition:opacity var(--d3) var(--ease-out),transform var(--d3) var(--ease-out)}
.has-scene .pip{opacity:1;transform:none}

/* la riga in alto */
.top{position:absolute;z-index:4;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 0;font:600 12px/1 var(--sans)}
/* l'etichetta in chiamata: il nome sopra, il ruolo sotto, così «Assistente AI di Marco TRM» non viene mai tagliato */
.ai{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;padding:5px 12px 5px 10px;min-height:36px;border-radius:999px;background:rgba(10,10,11,.55);border:1px solid rgba(244,241,236,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:0;line-height:1.15;transition:opacity var(--d2) var(--ease-out)}
.ai>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai i{grid-row:1/3;width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(230,196,142,.28)}
.ai b{font:600 12px/1.15 var(--sans)}
.ai span{font:500 10.5px/1.15 var(--sans);color:rgba(244,241,236,.72);letter-spacing:.02em}
.call[data-state="incoming"] .ai{opacity:0;visibility:hidden}
.timer{flex:none;color:rgba(244,241,236,.78);font:500 12px/1 var(--mono);letter-spacing:.02em}
.top-r{margin-left:auto;display:flex;gap:8px;flex:none}
.voice[aria-pressed="true"]{background:#f4f1ec;color:var(--ink)}
.voice[aria-pressed="true"]:hover{background:#fff}
.hang{background:rgba(196,64,52,.88);border-color:transparent}
.hang:hover{background:rgba(211,73,60,.95)}
.call:not([data-state="incoming"]) .lang{display:none}
.call[data-state="incoming"] .timer{display:none}
.voice-note,.illu{position:absolute;z-index:4;left:16px;font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,236,.82);text-shadow:0 1px 8px rgba(0,0,0,.6);max-width:calc(100% - 150px)}
.illu{top:calc(var(--top) + 4px)}
.voice-note{top:calc(var(--top) + 24px);color:var(--brass)}

/* 1. in arrivo: l'assistente riempie la cornice e squilla (la luce pulsa al ritmo dello squillo, avatar.js) */
.incoming{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;padding:var(--top) var(--gut) calc(24px + env(safe-area-inset-bottom,0px))}
.callee{display:grid;gap:16px;text-align:center}
.callee h1{display:grid;gap:12px;font:400 clamp(40px,11.5cqw,48px)/1 var(--display);letter-spacing:-.035em;text-wrap:balance}
.callee h1 small{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.callee h1 .role{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.68)}
.callee p{font:400 16px/1.45 var(--sans);color:rgba(244,241,236,.84);max-width:28ch;margin:0 auto;text-wrap:balance}
.static{display:grid;gap:16px;margin-top:auto;padding:16px;border-radius:24px;background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:15px}
.js .static{display:none}
.static-row{display:flex;gap:8px}
.sbtn{flex:1;display:grid;place-items:center;min-height:var(--ctl-h);border-radius:16px;background:#f4f1ec;color:var(--ink);font-weight:600;text-decoration:none}
.answer{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:auto;padding-top:16px}
/* senza JavaScript: l'assistente più piccolo in alto, l'offerta scritta e i contatti sotto */
html:not(.js) .answer{margin-top:16px;grid-template-columns:1fr}
html:not(.js) .av{width:52cqw;left:24cqw;top:calc(30cqh - 26cqw)}
.legal{margin:16px auto 0;text-align:center;font:400 12.5px/1.5 var(--sans);color:rgba(244,241,236,.7);max-width:38ch;text-wrap:pretty}

/* 2. in chiamata: l'assistente grande in alto, il progresso e il sottotitolo sotto, le risposte in fondo */
.talk{position:absolute;z-index:3;left:0;right:0;top:50cqh;bottom:0;display:flex;flex-direction:column;gap:14px;padding:0 var(--gut) calc(20px + env(safe-area-inset-bottom,0px))}
.has-scene .talk{top:var(--top);justify-content:flex-start;padding-top:150px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.has-scene .talk::-webkit-scrollbar{display:none}
.has-scene .talk .prog{margin-top:auto;flex:none}
.has-scene .talk>*{flex:none}
.prog{order:-2;display:flex;align-items:center;gap:6px;min-height:16px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:rgba(244,241,236,.66);opacity:0;transition:opacity var(--d2) var(--ease-out)}
.prog.in{opacity:1}
.prog i{display:block;width:22px;height:2px;border-radius:1px;background:rgba(244,241,236,.2);overflow:hidden;position:relative}
.prog i::before{content:"";position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--ease-out)}
.prog i.on::before{transform:scaleX(1)}
.prog span{margin-left:4px}
.call:not(.has-scene) .prog{justify-content:center}
.who{order:-1;font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.7);min-height:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call:not(.has-scene) .who{display:none}
.say{font:400 clamp(23px,6.6cqw,28px)/1.3 var(--serif-text);letter-spacing:-.012em;color:#f8f5f0;text-wrap:pretty;cursor:default;opacity:0;transition:opacity var(--d2) var(--ease-out);text-shadow:0 1px 18px rgba(0,0,0,.4)}
.call:not(.has-scene) .say{text-align:center;text-wrap:balance}
.say.in{opacity:1}
.say .w{opacity:0;transition:opacity var(--d2) var(--ease-out)}
.say .w.on{opacity:1}
/* la frase chiave: la sottolineatura ottone si disegna quando la battuta è finita */
.say em{font-family:inherit;font-style:normal;background:linear-gradient(transparent 70%,rgba(230,196,142,.5) 70%,rgba(230,196,142,.5) 92%,transparent 92%) no-repeat 0 0/0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em;transition:background-size var(--d3) var(--ease-out)}
.say.done em{background-size:100% 100%}
.answers{margin-top:auto;opacity:0;transform:translateY(12px);transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out)}
.has-scene .answers{margin-top:0}
.answers.in{opacity:1;transform:none}
.answers:empty{display:none}
/* le risposte entrano a cascata (40 ms l'una) */
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.motion .answers.in .chips .chip{animation:chipIn var(--d2) var(--ease-out) both;animation-delay:calc(var(--i,0) * var(--stagger))}
.motion .answers.in .chips .chip.on{animation:pop var(--d2) var(--ease-out) both}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips.biz .chip:last-child{grid-column:1/-1}
@media (hover:hover) and (pointer:fine){.chip.on:not(:disabled):hover{background:#efd3a3}}
/* Indietro e Salta: sempre nello stesso posto, sotto le risposte */
.nav-row{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.nav-row .chip{min-height:40px;padding:4px 12px;font-size:13.5px;border-radius:999px;gap:6px}
.nav-row .chip svg{width:14px;height:14px}
.nav-row .sp{flex:1}
.fields{display:grid;gap:10px}
.fields .row,.similar .row{display:flex;gap:8px;align-items:center}
.fields .row .chip{flex:1}
/* l'offerta, la conferma e il lavoro simile: un foglio che sale */
.offer,.confirm,.similar{display:grid;gap:12px}
@keyframes sheetUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.motion .answers.in>.offer,.motion .answers.in>.confirm,.motion .answers.in>.similar{animation:sheetUp var(--d3) var(--ease-out) both}
.recap{display:grid;gap:0;border-radius:16px;background:rgba(10,10,11,.55);border:1px solid rgba(244,241,236,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.recap div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 14px;border-bottom:1px solid rgba(244,241,236,.08)}
.recap div:last-child{border-bottom:0}
.recap dt{grid-column:1;font:600 10.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,236,.6)}
.recap dd{grid-column:1;font:500 15px/1.3 var(--sans);overflow-wrap:anywhere}
.recap dd.none{color:rgba(244,241,236,.5)}
.recap button{grid-column:2;grid-row:1/3;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(244,241,236,.2);background:none;color:#f4f1ec;font:600 12px/1 var(--sans);cursor:pointer;transition:background-color var(--d1) var(--ease-out),transform var(--d1) var(--ease-out)}
.recap button:hover{background:rgba(244,241,236,.1)}
.recap button:active{transform:scale(.96);transition-duration:80ms}
.send{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 22px;border-radius:16px;background:var(--brass);color:var(--ink);font:600 17px/1.2 var(--sans);letter-spacing:-.005em;text-decoration:none;border:0;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -14px rgba(230,196,142,.6);transition:transform var(--d1) var(--ease-out),background-color var(--d1) var(--ease-out),box-shadow var(--d1) var(--ease-out)}
.send:hover{background:#efd3a3;transform:translateY(-1px)}
.send:active{transform:scale(.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px -4px rgba(0,0,0,.5);transition-duration:80ms}
.send svg{transition:transform var(--d1) var(--ease-out)}
.send:hover svg{transform:translateX(3px)}
.send-note,.price-line{font:400 13px/1.45 var(--sans);color:rgba(244,241,236,.8);text-align:center;text-wrap:balance}
.price-line{padding-top:12px;border-top:1px solid rgba(244,241,236,.14);color:rgba(244,241,236,.66);font-size:12.5px}
.alt-row{display:flex;gap:8px}
.alt-row .chip{flex:1;min-height:44px;font-size:14px}
.case{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:16px;background:rgba(244,241,236,.97);color:var(--ink);text-decoration:none;transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out)}
.case:hover{transform:translateY(-1px);box-shadow:0 16px 40px -20px rgba(0,0,0,.6)}
.case:active{transform:scale(.98);transition-duration:80ms}
.case .thumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#d9d4cb}
.case .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--d3) var(--ease-out)}
.case:hover .thumb img{transform:scale(1.03)}
.case .txt{display:grid;gap:3px;font-size:13px;line-height:1.35}
.case small{font:600 10px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-ink)}
.case b{font-size:15px;font-weight:600}
.case .txt>span{color:#4b4943}
.case em{font:600 13px/1.3 var(--sans);font-style:normal;margin-top:2px}
.similar .row .chip{flex:1}
.reopen{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:var(--ctl-h);padding:0 10px;border-radius:16px;color:rgba(244,241,236,.88);font:600 14px/1.2 var(--sans);text-align:center}

/* schermi bassi: un po' meno aria */
@media (max-height:720px){
  .call{--top:calc(env(safe-area-inset-top,0px) + 60px)}
  .callee h1{font-size:36px;gap:8px}.callee{gap:8px}
  .call[data-state="talk"] .av,.call[data-state="q"] .av,.call[data-state="offer"] .av,.call[data-state="confirm"] .av,.call[data-state="case"] .av{width:60cqw;left:20cqw;top:calc(22cqh - 30cqw)}
  .talk{top:46cqh}
  .say{font-size:21px}.chip{min-height:48px}.cbtn .ic{width:64px;height:64px}.legal{margin-top:12px}
}

/* schermi larghi: la chiamata in una cornice alta, sopra la scena sfocata; la testata in trasparenza */
@media (min-width:960px){
  .bar[data-call]{position:absolute;left:0;right:0;top:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#f4f1ec;border:0}
  .bar[data-call] .lang{border-color:var(--line-d)}
  .call{padding:76px 0 32px;--top:64px}
  .call-bg{display:block;position:absolute;inset:-80px;z-index:0;background:radial-gradient(40% 50% at 50% 46%,rgba(230,176,108,.16),transparent 70%)}
  .call-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(44px) brightness(.4) saturate(1.1);opacity:0;transition:opacity var(--d3) var(--ease-io)}
  .bg-scene .call-bg .bg-b{opacity:1}
  .phone{width:auto;height:min(860px,calc(100svh - 108px));min-height:640px;aspect-ratio:390/844;border-radius:42px;box-shadow:0 0 0 8px #141518,0 0 0 9px rgba(244,241,236,.06),0 60px 120px -40px rgba(0,0,0,.85)}
  .say{font-size:25px}
}
@media (max-width:959px){.bar[data-call]{display:none}}

/* la galleria dei lavori: a tutto schermo quando la apri dalla chiamata; senza JavaScript è una sezione normale */
.works-overlay{padding:clamp(72px,12svh,128px) 0}
.js .works-overlay:not(.open){display:none}
.works-overlay.open{position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;padding:calc(28px + env(safe-area-inset-top,0px)) 0 calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:center}
.motion .works-overlay.open{animation:settle var(--d3) var(--ease-out) both}
.works-open,.works-open body{overflow:hidden}
.wo-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(14px,3svh,32px)}
.wo-head h2{font-size:clamp(1.6rem,1.1rem + 2vw,3rem)}
.wo-close{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line-d);background:rgba(255,255,255,.06);color:#f4f1ec;font:600 var(--fs-6)/1 var(--sans);cursor:pointer;transition:transform var(--d1) var(--ease-out),background-color var(--d1) var(--ease-out)}
.wo-close:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}.wo-close:active{transform:scale(.98);transition-duration:80ms}
@media (max-width:959px){.works-overlay .slide-media .clip-m{height:min(56svh,520px)}.wo-close span{display:none}.wo-close{width:48px;padding:0;justify-content:center}}