/* Schermo cliente e TV: 16:9 pieno schermo, rem scalati (1920px → 16px, 3840px → 32px).
   Stile «premium AI showroom» (addendum §32): scuro, tipografia grande, pochissimo testo, luce viola/ambra.
   Regola di costo (docs/animazioni.md): le animazioni toccano SOLO transform, opacity e filter; durate 300-900 ms
   (gli ambienti lenti a parte); con prefers-reduced-motion tutto diventa dissolvenza. */
html.schermo { font-size: clamp(10px, 0.8333vw, 40px); height: 100%; overflow: hidden; }
html.schermo body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at 18% 0%, #1a1230 0%, var(--fondo) 55%), var(--fondo); }
.palco { flex: 1; position: relative; padding: 4rem 6rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.palco-testata { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; color: var(--grigio); position: relative; z-index: 3; }
.palco-testata .marchio { font-size: 1.4rem; gap: .7rem; }
.palco-testata #ora { font-variant-numeric: tabular-nums; }

/* ---------- scene: dissolvenza + leggero scorrimento ---------- */
.scena { position: absolute; inset: 0; padding: 7rem 6rem 3rem; display: none; flex-direction: column; overflow: hidden; }
.scena.attiva { display: flex; animation: entra 700ms cubic-bezier(.2, .7, .2, 1) both; }
.scena.esce { display: flex; pointer-events: none; animation: esce 380ms ease-in both; z-index: 2; }
@keyframes entra { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@keyframes esce { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-1.2rem); } }
.occhiello { font-size: 1.25rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ambra); font-weight: 700; margin-bottom: 1.2rem; }
.titolone { font-size: 6rem; font-weight: var(--peso-titolo); letter-spacing: -.035em; line-height: .98; margin: 0 0 1.5rem; }
.titolone.medio { font-size: 4.2rem; }
.sottotitolo { font-size: 2rem; color: var(--grigio); max-width: 60rem; line-height: 1.3; }
.centro { justify-content: center; align-items: flex-start; }
.due-colonne { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; flex: 1; min-height: 0; align-items: start; }
.con-mascotte { display: grid; grid-template-columns: 1fr auto; gap: 6rem; align-items: center; width: 100%; }
.con-mascotte .mascotte-grande { filter: drop-shadow(0 0 2.4rem rgba(139, 92, 246, .35)); }
.carta { background: rgba(27, 22, 38, .72); border: 1px solid var(--bordo); border-radius: 1.6rem; padding: 2.2rem 2.6rem; backdrop-filter: blur(10px); }
.bottoni { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.5rem; }
.bottoni button { font-size: 1.6rem; padding: 1.1rem 2.4rem; border-radius: 1rem; }
.lingue { display: inline-flex; gap: .4rem; border: 1px solid var(--bordo); border-radius: 999px; padding: .25rem; }
.lingue { flex: none; }  /* tre lingue (it, en, de): il selettore non si spezza, le lettere restano in riga */
.lingue button { font-size: 1rem; padding: .35rem 1rem; background: transparent; color: var(--grigio); border-radius: 999px; white-space: nowrap; }
.lingue button.scelta { background: var(--pannello); color: var(--testo); }

/* parola per parola */
.parole .parola { display: inline-block; opacity: 0; animation: parola 520ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes parola { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* onda sobria (CSS puro) */
.onda { display: flex; align-items: center; gap: .55rem; height: 6rem; margin: 1.5rem 0 1rem; }
.onda span { display: block; width: .55rem; height: 6rem; border-radius: .3rem; background: linear-gradient(180deg, var(--ambra), var(--viola)); animation: onda 1.8s ease-in-out infinite; opacity: .85; transform: scaleY(.2); }
.onda span:nth-child(2n) { animation-duration: 2.3s; } .onda span:nth-child(3n) { animation-duration: 1.5s; } .onda span:nth-child(5n) { animation-duration: 2.7s; }
@keyframes onda { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.onda.ferma span { animation-play-state: paused; transform: scaleY(.13); opacity: .35; }
.domanda { font-size: 2.6rem; font-weight: 600; line-height: 1.25; max-width: 62rem; min-height: 6.5rem; }
.proposte { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.proposte span { font-size: 1.3rem; color: var(--grigio); border: 1px solid var(--bordo); border-radius: 999px; padding: .4rem 1.1rem; animation: entra 500ms both; }
.testo-grande { margin-top: 2rem; display: flex; gap: 1rem; align-items: stretch; }
.testo-grande textarea { font-size: 1.8rem; min-height: 9rem; border-radius: 1rem; padding: 1.2rem 1.4rem; background: rgba(27, 22, 38, .8); resize: none; }
.testo-grande button { font-size: 1.6rem; padding: 0 2.4rem; border-radius: 1rem; }

/* liste che vivono: i nodi nuovi entrano, quelli tolti si dissolvono (Colpi.sincronizza) */
.lista-fatti { list-style: none; margin: 0; padding: 0; font-size: 2.1rem; line-height: 1.35; }
.lista-fatti li { padding: .55rem 0; border-top: 1px solid var(--bordo); display: flex; justify-content: space-between; gap: 2rem; }
.lista-fatti li.nuova { animation: entra 600ms both; }
.lista-fatti li:first-child { border-top: 0; }
.lista-fatti .chiave { color: var(--grigio); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .12em; }
.via { animation: esce 320ms both !important; pointer-events: none; }
.lavagna { list-style: none; margin: 0; padding: 0; font-size: 2.3rem; }
.lavagna.fitta { font-size: 1.8rem; }
.lavagna li { display: flex; gap: 1.4rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--bordo); }
.lavagna li.nuova { animation: entra 700ms both; }
.lavagna.fitta li { padding: .5rem 0; }
.lavagna.fitta .segno { width: 2rem; height: 2rem; font-size: 1.2rem; }
.lavagna li:first-child { border-top: 0; }
.lavagna .segno { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: .15rem solid var(--grigio); color: var(--grigio); font-size: 1.5rem; flex: none; transition: background 400ms ease, border-color 400ms ease, color 400ms ease; }
.lavagna li.confermata .segno { border-color: var(--ambra); color: #2a1a00; background: var(--ambra); }
.lavagna .segno.pulsa { animation: pulsa-segno 700ms cubic-bezier(.2, .7, .2, 1); }
@keyframes pulsa-segno { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
.lavagna .impatto { margin-left: auto; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); }
.lavagna .impatto.ALTO { color: var(--ambra); }

/* ---------- colpo di scena 1: OPPORTUNITÀ TROVATA ---------- */
.carta-opportunita { position: absolute; right: 6rem; bottom: 5rem; width: 36rem; z-index: 4; background: #1B1626; backdrop-filter: none; border-color: rgba(245, 165, 36, .45); will-change: transform, opacity, filter; }
.carta-opportunita::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 4rem rgba(245, 165, 36, .45), 0 0 1.5rem rgba(245, 165, 36, .3); opacity: 0; pointer-events: none; }
.carta-opportunita.appare { animation: sfoca-nitida 900ms cubic-bezier(.2, .7, .2, 1) both; }
.carta-opportunita.appare::before { animation: bagliore-carta 2600ms ease-out both; }
@keyframes sfoca-nitida { from { opacity: 0; transform: translateY(1.5rem) scale(.94); filter: blur(16px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bagliore-carta { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .35; } }
.carta-opportunita.vola { transition: transform 700ms cubic-bezier(.4, 0, .2, 1), opacity 600ms ease 100ms; opacity: 0; }
.carta-opportunita.sparisce { transition: opacity 300ms ease; opacity: 0; }
.carta-opportunita .intesta { display: flex; align-items: center; gap: 1.2rem; }
.carta-opportunita .valore { font-size: 2.3rem; font-weight: 700; line-height: 1.15; margin-top: .6rem; }
.carta-opportunita .dettagli { display: flex; gap: 2.4rem; margin-top: 1.2rem; font-size: 1.4rem; }
.carta-opportunita .dettagli .chiave { color: var(--grigio); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .14em; display: block; }
.spunta { position: relative; display: inline-block; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--ambra); flex: none; opacity: 0; transform: scale(.5); transition: opacity 300ms ease, transform 400ms cubic-bezier(.2, .9, .3, 1.3); }
.spunta i { position: absolute; display: block; height: .32rem; border-radius: .16rem; background: #2a1a00; transform-origin: left center; }
.spunta .corto { width: .85rem; left: .62rem; top: 1.38rem; transform: rotate(45deg) scaleX(0); }
.spunta .lungo { width: 1.5rem; left: 1.2rem; top: 1.95rem; transform: rotate(-52deg) scaleX(0); }
.spunta.disegnata { opacity: 1; transform: scale(1); }
.spunta.disegnata .corto { transform: rotate(45deg) scaleX(1); transition: transform 180ms ease-out 350ms; }
.spunta.disegnata .lungo { transform: rotate(-52deg) scaleX(1); transition: transform 260ms ease-out 520ms; }

/* ---------- colpo di scena 2: il punteggio (anello a due metà, solo transform) ---------- */
.punteggio { font-size: 9rem; font-weight: var(--peso-titolo); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.punteggio small { font-size: 2.6rem; color: var(--grigio); font-weight: 600; letter-spacing: 0; }
.anello { position: relative; width: 22rem; height: 22rem; flex: none; }
.anello .traccia { position: absolute; inset: 0; border-radius: 50%; border: 1.1rem solid var(--bordo); }
.anello .meta { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.anello .meta.dx { right: 0; } .anello .meta.sx { left: 0; width: calc(50% + 1px); }  /* 1px di sovrapposizione: copre la cucitura */
.anello .meta i { position: absolute; top: 0; display: block; width: 200%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 1.1rem solid var(--ambra); border-color: var(--ambra) var(--ambra) transparent transparent; will-change: transform; }
.anello .meta.dx i { left: -100%; transform: rotate(-135deg); }
.anello .meta.sx i { left: 0; transform: rotate(45deg); }
.anello .dentro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anello::after { content: ""; position: absolute; inset: -2rem; border-radius: 50%; box-shadow: 0 0 5rem rgba(245, 165, 36, .18) inset; pointer-events: none; }
.punteggio-blocco { display: flex; align-items: center; gap: 3rem; }

/* ---------- colpo di scena 3: la roadmap a cascata con la linea che si disegna ---------- */
.fasi-blocco { position: relative; margin-top: 1rem; }
.fasi-linea { position: absolute; left: 0; right: 0; top: 0; height: .2rem; background: linear-gradient(90deg, var(--ambra), var(--viola)); transform: scaleX(0); transform-origin: left center; }
.scena.attiva .fasi-linea { animation: disegna-linea 1100ms cubic-bezier(.2, .7, .2, 1) 200ms both; }
@keyframes disegna-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fasi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.fase { border-top: .2rem solid transparent; padding-top: 1.2rem; animation: fase-entra 700ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fase-entra { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
.fase .codice { font-size: 1.1rem; letter-spacing: .2em; color: var(--ambra); text-transform: uppercase; }
.fase:not(.piena) .codice { color: var(--grigio); }
.fase h3 { font-size: 1.9rem; font-weight: 700; margin: .4rem 0 .8rem; color: var(--testo); text-transform: none; letter-spacing: -.01em; }
.fase:not(.piena) h3 { color: var(--grigio); }
.fase ul { margin: 0; padding: 0; list-style: none; font-size: 1.35rem; color: var(--grigio); line-height: 1.5; }
.fase .piena-voce { color: var(--testo-2); }

/* ---------- colpo di scena 4: il prezzo a rullo e l'offerta che si accende ---------- */
.sistema { list-style: none; margin: 0; padding: 0; font-size: 2rem; }
.sistema li { display: flex; justify-content: space-between; gap: 2rem; padding: .8rem 0; border-top: 1px solid var(--bordo); }
.sistema li.nuova { animation: entra 600ms both; }
.sistema li:first-child { border-top: 0; }
.sistema .componenti { color: var(--grigio); font-size: 1.3rem; display: block; }
.sistema .prezzo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totale { margin-top: 1.6rem; padding-top: 1.4rem; border-top: .2rem solid var(--ambra); display: flex; justify-content: space-between; align-items: baseline; font-size: 2rem; }
.totale strong { font-size: 4rem; font-weight: var(--peso-titolo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.odometro { display: inline-flex; align-items: baseline; line-height: 1; }
.odometro .rullo { display: inline-block; height: 1em; overflow: hidden; vertical-align: baseline; }
.odometro .cifre { display: block; transition: transform 1000ms cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.odometro .cifre span { display: block; height: 1em; line-height: 1; }
.odometro .sep { display: inline-block; height: 1em; line-height: 1; }
.mensile { color: var(--grigio); font-size: 1.6rem; display: flex; justify-content: space-between; margin-top: .6rem; }
.offerta { display: inline-block; font-size: 1.1rem; letter-spacing: .22em; text-transform: uppercase; color: #2a1a00; background: var(--ambra); border-radius: 999px; padding: .4rem 1.2rem; font-weight: 800; margin-bottom: 1rem; position: relative; opacity: .25; transform: translateY(.4rem); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.offerta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 2.4rem rgba(245, 165, 36, .7); opacity: 0; }
.offerta.accesa { opacity: 1; transform: none; }
.offerta.accesa::after { animation: accendi 1400ms ease-out both; }
@keyframes accendi { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .25; } }
.avvertenza { color: var(--grigio); font-size: 1.1rem; margin-top: 1.5rem; }

/* ---------- colpi di scena 5 e 6: il buio e il bagliore che si espande ---------- */
#buio { position: fixed; inset: 0; background: #06040a; opacity: 0; pointer-events: none; z-index: 60; transition: opacity 260ms ease; }
#buio.visibile { opacity: 1; pointer-events: auto; }
.bagliore-espanso { position: absolute; left: 30%; top: 50%; width: 60rem; height: 60rem; margin: -30rem 0 0 -30rem; border-radius: 50%; background: radial-gradient(circle, rgba(245, 165, 36, .35) 0%, rgba(139, 92, 246, .22) 35%, rgba(139, 92, 246, 0) 70%); pointer-events: none; z-index: 0; transform: scale(.2); opacity: 0; }
.scena.attiva .bagliore-espanso { animation: espandi 2200ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes espandi { 0% { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.7); opacity: .55; } }
.scena > .con-mascotte, .scena > .due-colonne, .scena > .intesta-scena { position: relative; z-index: 1; }

/* ---------- Prima → Dopo (addendum §36) ---------- */
.pd { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pd-testa { position: relative; height: 3rem; }
.pd-testa .occhiello { position: absolute; left: 0; top: 0; transition: opacity 600ms ease, transform 600ms ease; }
.pd-con-ai { opacity: 0; transform: translateY(.6rem); color: var(--viola); }
.pd.trasforma .pd-oggi { opacity: 0; transform: translateY(-.6rem); }
.pd.trasforma .pd-con-ai { opacity: 1; transform: none; }
.pd-palco { position: relative; flex: 1; min-height: 0; }
.pd-flusso { position: absolute; inset: 0; display: flex; align-items: center; gap: 0; transition: opacity 700ms ease, filter 700ms ease; }
.pd-flusso.dopo { opacity: 0; pointer-events: none; justify-content: center; gap: 0; }
.pd.trasforma .pd-flusso.prima { opacity: 0; filter: blur(10px); }
.pd.trasforma .pd-flusso.dopo { opacity: 1; }
.pd-nodo { background: rgba(27, 22, 38, .72); border: 1px solid var(--bordo); border-radius: 1.4rem; padding: 1.6rem 2.2rem; min-width: 14rem; text-align: center; opacity: 0; transform: translateY(1rem) scale(.96); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); flex: none; }
.pd-nodo.visibile { opacity: 1; transform: none; }
.pd-nodo b { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.01em; }
.pd-nodo small { display: block; font-size: 1.15rem; color: var(--grigio); margin-top: .4rem; }
.pd-nodo.manca { border-style: dashed; }
.pd-nodo.manca small { color: var(--ambra); }
.pd-nodo.persona { border-color: rgba(201, 195, 214, .35); }
.pd.trasforma .pd-nodo.persona { transform: scale(.6); opacity: 0; }
.pd-linea { display: block; flex: 1 1 4rem; height: .2rem; min-width: 3rem; background: linear-gradient(90deg, rgba(201, 195, 214, .6), rgba(201, 195, 214, .25)); transform: scaleX(0); transform-origin: left center; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
.pd-linea.visibile { transform: scaleX(1); }
.pd-linea.corta { flex: 0 0 4rem; }
.pd-flusso.dopo .pd-linea { background: linear-gradient(90deg, var(--viola), rgba(139, 92, 246, .35)); flex: 0 0 9rem; }
.pd-ai { width: 17rem; flex: none; opacity: 0; transform: scale(.35); transition: opacity 600ms ease, transform 800ms cubic-bezier(.2, .9, .3, 1.15); filter: drop-shadow(0 0 2.6rem rgba(139, 92, 246, .55)); }
.pd-ai.visibile { opacity: 1; transform: none; }
.pd-rami { display: flex; flex-direction: column; gap: 1.1rem; border-left: .2rem solid var(--viola); padding-left: 0; }
.pd-ramo { display: flex; align-items: center; opacity: 0; transform: translateX(-1.5rem); transition: opacity 450ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.pd-ramo.visibile { opacity: 1; transform: none; }
.pd-gomito { display: block; width: 3.2rem; height: .2rem; background: var(--viola); margin-right: 1.4rem; flex: none; }
.pd-ramo b { display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -.01em; }
.pd-ramo small { display: block; font-size: 1.2rem; color: var(--grigio); margin-top: .2rem; }
.pd-avvertenza { margin-top: 0; }

/* ---------- avvisi, velo, piede ---------- */
.banner { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 6rem; display: flex; gap: 1.5rem; align-items: center; font-size: 1.5rem; background: rgba(27, 22, 38, .95); border-top: 1px solid var(--bordo); z-index: 10; transform: translateY(100%); visibility: hidden; transition: transform var(--transizione), visibility 0s var(--transizione); }
.banner.visibile { transform: none; visibility: visible; transition: transform var(--transizione); }
.banner.pausa { background: rgba(139, 92, 246, .18); }
.banner.errore { background: rgba(248, 113, 113, .14); }
.banner .punto { width: 1rem; height: 1rem; border-radius: 50%; background: var(--attenzione); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.velo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14, 11, 20, .84); z-index: 20; text-align: center; padding: 4rem; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s 600ms; }
.velo.visibile { opacity: 1; visibility: visible; transition: opacity 600ms ease; }
.velo .titolone { font-size: 5rem; }
.velo .mascotte-media { margin: 0 auto 2rem; }
.piede { padding: 0 6rem 2.5rem; color: var(--grigio); font-size: 1.1rem; display: flex; justify-content: space-between; position: relative; z-index: 3; }
.piede .filo { font-size: 1rem; }
/* apertura (16/10/2026): l'attesa onesta. Una riga sotto l'onda quando il cervello ci mette più di 8 s; nel piede «Sto preparando la tua analisi completa…» con un punto
   che pulsa finché l'analisi del modello gira in sottofondo (solo opacity). */
.attesa-nota { margin: .2rem 0 .4rem; font-size: 1.35rem; color: var(--grigio); animation: dissolvi 400ms ease both; }
.attesa-nota[hidden] { display: none; }
#piede-testo.in-preparazione { color: var(--testo-2, var(--testo)); }
#piede-testo.in-preparazione::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem; border-radius: 50%; background: var(--ambra); vertical-align: middle; animation: pulsa 1.6s ease-in-out infinite; }

/* ---------- TV a muro ---------- */
html.tv .scena { padding: 6rem 7rem 4rem; }
html.tv .lavagna { font-size: 2.8rem; }
html.tv .carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
html.tv .carte .carta { animation: entra 700ms both; }
html.tv .carte .carta h3 { font-size: 2rem; margin: .4rem 0 .6rem; text-transform: none; color: var(--testo); letter-spacing: -.01em; }
html.tv .carte .carta p { font-size: 1.35rem; color: var(--grigio); line-height: 1.4; }
.ambiente { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ambiente .titolone { font-size: 6.5rem; }
.ambiente .sottotitolo { margin: 0 auto; }
/* --- telefono e tablet (05/10): lo schermo cliente si legge anche in verticale --- */
@media (max-width: 1000px) {
  .palco { padding: 1.5rem 1.25rem; }
  .due-colonne { grid-template-columns: 1fr; gap: 1.5rem; }
  .fasi { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .domanda { font-size: 1.6rem; min-height: 0; }
  .sottotitolo { font-size: 1.15rem; }
  .titolone, .scena h1 { font-size: 2.4rem; }
  html.tv .carte { grid-template-columns: 1fr; }
  .scena { padding: 4.75rem 1.25rem 2.5rem; overflow: auto; }
  .scena.centro { justify-content: flex-start; }
  .palco-testata { position: relative; z-index: 2; }
}

.ambiente .mascotte { margin: 0 auto 2.5rem; }
.ora-grande { font-size: 2.2rem; color: var(--grigio); letter-spacing: .08em; font-variant-numeric: tabular-nums; margin-top: 3rem; }
/* aurora: tre macchie sfocate (filtro fisso) mosse solo con transform → compositor, costo basso */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); will-change: transform; opacity: .55; }
.aurora .a1 { width: 70rem; height: 50rem; left: -15rem; top: -10rem; background: radial-gradient(circle, rgba(139, 92, 246, .55), rgba(139, 92, 246, 0) 70%); animation: aurora1 28s ease-in-out infinite alternate; }
.aurora .a2 { width: 60rem; height: 44rem; right: -12rem; bottom: -14rem; background: radial-gradient(circle, rgba(245, 165, 36, .38), rgba(245, 165, 36, 0) 70%); animation: aurora2 34s ease-in-out infinite alternate; }
.aurora .a3 { width: 48rem; height: 40rem; left: 35%; bottom: -20rem; background: radial-gradient(circle, rgba(109, 59, 224, .45), rgba(109, 59, 224, 0) 70%); animation: aurora3 40s ease-in-out infinite alternate; }
@keyframes aurora1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18rem, 10rem) scale(1.15); } }
@keyframes aurora2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-16rem, -12rem) scale(1.2); } }
@keyframes aurora3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-10rem, -14rem) scale(1.1); } }
html.tv .scena, html.schermo .scena { z-index: 1; }

/* ---------- movimento ridotto: resta la dissolvenza ---------- */
@media (prefers-reduced-motion: reduce) {
  .scena.attiva { animation: dissolvi 300ms ease both; }
  .scena.esce { animation: dissolvi-via 200ms ease both; }
  @keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dissolvi-via { from { opacity: 1; } to { opacity: 0; } }
  .lavagna li, .fase, .lista-fatti li, .onda span, .banner .punto, .proposte span, html.tv .carte .carta, .sistema li, .aurora i, .lavagna .segno.pulsa { animation: none !important; }
  .onda span { transform: scaleY(.5); }
  .parole .parola { animation: dissolvi 300ms ease both; }
  .carta-opportunita.appare { animation: dissolvi 300ms ease both; }
  .carta-opportunita.appare::before { animation: none; opacity: .5; }
  .scena.attiva .fasi-linea { animation: none; transform: none; }
  .scena.attiva .bagliore-espanso { animation: none; transform: scale(1.4); opacity: .4; }
  .odometro .cifre { transition: none; }
  .pd-nodo, .pd-linea, .pd-ai, .pd-ramo, .pd-flusso, .pd-testa .occhiello { transition-duration: 200ms; transform: none !important; }
  .spunta, .spunta i { transition: opacity 200ms ease; transform: none !important; }
  .spunta .corto { transform: rotate(45deg) !important; } .spunta .lungo { transform: rotate(-52deg) !important; }
  .spunta:not(.disegnata) .corto, .spunta:not(.disegnata) .lungo { opacity: 0; }
  .offerta { transition: opacity 200ms ease; transform: none; }
  #buio { transition-duration: 120ms; }
}

/* --- Tedesco (cantiere tedesco, 05/10/2026): le parole composte sono lunghe, i titoli delle quattro colonne un po' più piccoli ---------------------------- */
html[lang="de"] .fase h3 { font-size: 1.55rem; hyphens: auto; overflow-wrap: break-word; }
html[lang="de"] .fase ul { font-size: 1.2rem; hyphens: auto; overflow-wrap: break-word; }
html[lang="de"] .titolone, html[lang="de"] .titolone.medio { hyphens: manual; overflow-wrap: break-word; }

/* ======================================================================================================================================================
   --- Schermo v2 (cantiere schermo, 06/10/2026, docs/schermi.md «Lo schermo cliente») -------------------------------------------------------------------------
   La conversazione come esperienza: barra delle cinque tappe, una domanda alla volta, risposte suggerite, la Testa di vetro che vive, bolle di vetro, la striscia
   «Quello che ho capito». Consenso, risultati, pausa e proposta pronta nello stesso linguaggio: vetro, luce viola e ambra, movimento con senso.
   Regola di costo (docs/animazioni.md): si animano SOLO transform, opacity e filter; i bagliori sono pseudo-elementi con box-shadow FISSO e opacity animata.
   Con prefers-reduced-motion tutto diventa dissolvenza (blocco in fondo a questa sezione). Il vecchio blocco sopra resta per la TV e per le scene non toccate. */
html.schermo .palco-testata { z-index: 5; }
html.schermo .palco-testata #ora { font-size: 1.2rem; letter-spacing: .08em; }
.ico { display: inline-flex; width: 1.5em; height: 1.5em; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
:root { --vetro-chiaro: linear-gradient(160deg, rgba(40, 32, 58, .66), rgba(21, 17, 32, .5)); --bordo-luce: linear-gradient(135deg, rgba(139, 92, 246, .7), rgba(139, 92, 246, .12) 34%, rgba(245, 165, 36, .1) 62%, rgba(245, 165, 36, .55)); }
/* un bordo di luce che si disegna con maschera: pseudo-elemento, nessuna animazione */
.bordo-luce { position: relative; }
.bordo-luce::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--bordo-luce); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* ---------- la scena della conversazione ---------- */
.scena[data-scena="ascolto"] { padding: 6rem 6rem 2.2rem; }
.stage { position: relative; display: flex; flex-direction: column; gap: 1.5rem; flex: 1; min-height: 0; }
.stage-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.colonna-dialogo { display: flex; flex-direction: column; gap: 1.15rem; min-height: 0; justify-content: safe center; }
.colonna-testa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; min-height: 0; }

/* barra delle cinque tappe: i nomi in parole semplici, una luce che viaggia da una tappa all'altra */
.tappe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding-top: .2rem; }
.tappe .filo-sfondo, .tappe .filo-pieno { position: absolute; left: 10%; right: 10%; top: 1.15rem; height: .22rem; border-radius: .2rem; display: block; }
.tappe .filo-sfondo { background: rgba(255, 255, 255, .09); }
.tappe .filo-pieno { background: linear-gradient(90deg, var(--ambra), var(--viola)); transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--curva); }
.tappe .luce { position: absolute; left: 0; top: 1.26rem; width: 2rem; height: 2rem; margin-left: -1rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .95), rgba(245, 165, 36, .5) 40%, rgba(245, 165, 36, 0) 70%); opacity: 0; pointer-events: none; will-change: transform, opacity; z-index: 2; }
.tappa { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; z-index: 1; }
.tappa .punto { position: relative; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); border: .16rem solid rgba(255, 255, 255, .2); color: var(--grigio); font-size: 1rem; transition: border-color 500ms ease, background 500ms ease, color 500ms ease; }
.tappa .punto b { font-weight: 800; font-size: 1.05rem; line-height: 1; }
.tappa .punto .ok { position: absolute; inset: .35rem; width: auto; height: auto; opacity: 0; transform: scale(.5); transition: opacity 400ms ease, transform 500ms var(--curva-scatto); }
.tappa .punto::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; box-shadow: 0 0 1.6rem rgba(245, 165, 36, .65); opacity: 0; pointer-events: none; }
.tappa .nome { font-size: 1.12rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(154, 148, 171, .75); transition: color 500ms ease; text-align: center; }
.tappa.fatta .punto { background: var(--ambra); border-color: var(--ambra); color: #2a1a00; }
.tappa.fatta .punto b { opacity: 0; }
.tappa.fatta .punto .ok { opacity: 1; transform: scale(1); }
.tappa.fatta .nome { color: var(--testo-2); }
.tappa.corrente .punto { border-color: var(--ambra); color: #fff; background: rgba(245, 165, 36, .16); }
.tappa.corrente .punto::after { opacity: .85; animation: tappa-respira 2.4s ease-in-out infinite; }
.tappa.corrente .nome { color: #fff; }
.tappa.acceso .punto { animation: tappa-acceso 1300ms var(--curva-scatto) both; }
@keyframes tappa-respira { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes tappa-acceso { 0% { transform: scale(.7); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* il titolo della nuova tappa entra al centro, poi si ritira */
.tappa-lampo { position: absolute; left: 0; right: 0; top: 7.5rem; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; animation: lampo-tappa 2000ms var(--curva) both; will-change: transform, opacity, filter; }
.tappa-lampo .n { font-size: 1.3rem; letter-spacing: .5em; color: var(--ambra); font-weight: 800; }
.tappa-lampo .titolo { font-size: 6.4rem; font-weight: var(--peso-titolo); letter-spacing: -.04em; line-height: 1; text-shadow: 0 0 4rem rgba(139, 92, 246, .8), 0 0 1.4rem rgba(245, 165, 36, .5); }
@keyframes lampo-tappa { 0% { opacity: 0; transform: translateY(2rem) scale(.92); filter: blur(14px); } 22% { opacity: 1; transform: none; filter: none; } 70% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-1.4rem) scale(1.04); filter: blur(10px); } }

/* le bolle di vetro: le ultime battute in evidenza, le precedenti si ritirano in alto e sfumano */
.bolle { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; max-height: 8.2rem; overflow: hidden; flex: 0 1 auto; min-height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%); }
.bolla { max-width: 72%; display: flex; align-items: baseline; gap: .8rem; padding: .62rem 1.3rem .68rem; border-radius: 1.4rem; font-size: 1.28rem; line-height: 1.28; border: 1px solid transparent; animation: bolla-entra 650ms var(--curva) both; will-change: transform, opacity, filter; transition: opacity 700ms ease, transform 700ms var(--curva); }
.bolla .chi { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; flex: none; opacity: .75; }
.bolla.ai { align-self: flex-start; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .42); border-bottom-left-radius: .4rem; color: #e7defd; }
.bolla.ai .chi { color: #b79bff; }
.bolla.cliente { align-self: flex-end; background: rgba(245, 165, 36, .12); border-color: rgba(245, 165, 36, .4); border-bottom-right-radius: .4rem; color: #ffe8c2; }
.bolla.cliente .chi { color: var(--ambra); }
.bolla[data-eta="1"] { opacity: .78; transform: scale(.985); }
.bolla[data-eta="2"] { opacity: .5; transform: scale(.965); }
.bolla[data-eta="3"] { opacity: .26; transform: scale(.94); }
@keyframes bolla-entra { from { opacity: 0; transform: translateY(1.2rem) scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* la domanda: grande, parola per parola; sotto, le risposte suggerite */
.occhiello-tappa { display: none; }  /* la tappa la dice già la barra in alto: l'etichetta ripetuta toglieva spazio alla domanda */
.stage .domanda { font-size: var(--dom, 3.6rem); font-weight: var(--peso-titolo); letter-spacing: -.022em; word-spacing: .09em; line-height: 1.1; max-width: none; min-height: 0; margin: 0; text-wrap: balance; transition: opacity 500ms ease, filter 500ms ease; }
.stage .domanda.vuota { color: var(--testo-2); font-weight: 700; }
.stage.attesa .domanda { opacity: .38; filter: blur(1.5px); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: .5rem; }
.chips.pochi { grid-template-columns: minmax(0, 1fr); max-width: 56%; }
button.chip { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 1.1rem; min-height: 4.5rem; padding: .8rem 1.5rem; border-radius: 1.3rem; cursor: pointer; font: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--testo);
  background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 .9rem 2rem -1.2rem rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); animation: chip-entra 700ms var(--curva) both;
  transition: transform 180ms var(--curva), border-color 220ms ease, background 220ms ease, opacity 300ms ease; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
button.chip::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 2.4rem rgba(245, 165, 36, .55), 0 0 .8rem rgba(245, 165, 36, .5); transition: opacity 240ms ease; z-index: 0; }
button.chip .segno { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; display: grid; place-items: center; border: .14rem solid rgba(255, 255, 255, .3); color: transparent; transition: background 220ms ease, border-color 220ms ease, color 220ms ease; }
button.chip .segno .ico { width: 1.2rem; height: 1.2rem; }
button.chip .chip-testo { min-width: 0; text-wrap: balance; }
button.chip:hover:not(:disabled) { transform: translateY(-.15rem); border-color: rgba(245, 165, 36, .6); background: linear-gradient(160deg, rgba(60, 44, 90, .7), rgba(31, 24, 48, .6)); }
button.chip:hover:not(:disabled)::after { opacity: .55; }
button.chip:active:not(:disabled) { transform: scale(.985); }
button.chip:focus-visible { box-shadow: var(--anello-focus); }
.chips.multipla button.chip .segno { border-radius: .55rem; }
button.chip.scelto { border-color: var(--ambra); background: linear-gradient(160deg, rgba(245, 165, 36, .2), rgba(245, 165, 36, .08)); }
button.chip.scelto::after { opacity: .75; }
button.chip.scelto .segno, button.chip.premuto .segno { background: var(--ambra); border-color: var(--ambra); color: #2a1a00; }
button.chip.premuto { border-color: var(--ambra); background: linear-gradient(160deg, rgba(245, 165, 36, .26), rgba(245, 165, 36, .1)); animation: chip-premuto 600ms var(--curva-scatto) both; }
button.chip.premuto::after { opacity: 1; }
button.chip:disabled:not(.premuto) { opacity: .42; cursor: default; }
@keyframes chip-entra { from { opacity: 0; transform: translateY(1.1rem) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chip-premuto { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
.riga-conferma { display: flex; align-items: center; gap: 1.4rem; min-height: 0; }
.riga-conferma[hidden], .suggerimento[hidden], .conferma[hidden] { display: none; }
.suggerimento { margin: 0; font-size: 1.2rem; color: var(--grigio); }
button.conferma { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; font-weight: 800; padding: .9rem 2rem; border-radius: 1.1rem; margin-left: auto; white-space: nowrap; flex: none; }
button.conferma .ico { width: 1.4rem; height: 1.4rem; }
button.conferma.ciano:disabled { background: rgba(255, 255, 255, .05); color: var(--grigio); border: 1px solid rgba(255, 255, 255, .14); opacity: 1; cursor: default; }

/* l'ingresso: «Rispondo a voce» con l'onda viva, «Scrivo» con il campo grande */
.ingresso { display: flex; flex-direction: column; gap: .8rem; margin-top: .4rem; }
.riga-ingresso { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mic { position: relative; display: flex; align-items: center; gap: 1.2rem; padding: .7rem 1.6rem .7rem .8rem; border-radius: 999px; background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .4); min-width: 0; }
.mic-cerchio { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--viola), var(--viola-scuro)); color: #fff; flex: none; }
.mic-cerchio::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; box-shadow: 0 0 1.8rem rgba(139, 92, 246, .8); opacity: 0; animation: mic-respira 2.2s ease-in-out infinite; pointer-events: none; }
.mic-cerchio .ico { width: 1.7rem; height: 1.7rem; }
.mic-testo { display: flex; flex-direction: column; gap: .1rem; line-height: 1.1; }
.mic-testo b { font-size: 1.4rem; font-weight: 700; }
.mic-testo small { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ambra); font-weight: 700; }
.mic.in-pausa { opacity: .5; }
.mic.in-pausa .mic-cerchio::after { animation: none; }
@keyframes mic-respira { 0%, 100% { opacity: .15; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } }
.onda-viva { display: flex; align-items: center; gap: .26rem; height: 2.6rem; }
.onda-viva span { display: block; width: .26rem; height: 2.6rem; border-radius: .2rem; background: linear-gradient(180deg, var(--ambra), var(--viola)); transform: scaleY(.18); opacity: .8; animation: onda-viva 1.7s ease-in-out infinite; will-change: transform; }
.onda-viva span:nth-child(2n) { animation-duration: 2.2s; } .onda-viva span:nth-child(3n) { animation-duration: 1.4s; } .onda-viva span:nth-child(5n) { animation-duration: 2.6s; }
.onda-viva.sente span { animation-duration: .55s !important; opacity: 1; }
.onda-viva.ferma span { animation-play-state: paused; transform: scaleY(.12); opacity: .3; }
@keyframes onda-viva { 0%, 100% { transform: scaleY(.16); } 50% { transform: scaleY(var(--m, .8)); } }
.mic[data-voce="pensa"] .onda-viva span { animation-duration: 1.1s; opacity: .45; }
.mic[data-voce="parla"] .onda-viva span { opacity: .35; }
button.scrivo, button.torna-voce { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .8rem; padding: .85rem 1.5rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 1.3rem; font-weight: 700; color: var(--testo-2); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); transition: border-color 200ms ease, background 200ms ease, color 200ms ease, transform 160ms var(--curva); }
button.scrivo:hover, button.torna-voce:hover { color: #fff; border-color: rgba(245, 165, 36, .6); background: rgba(245, 165, 36, .08); transform: translateY(-1px); }
button.scrivo:focus-visible, button.torna-voce:focus-visible { box-shadow: var(--anello-focus); }
button.scrivo .ico, button.torna-voce .ico { width: 1.6rem; height: 1.6rem; }
button.torna-voce[hidden] { display: none; }
.stage.scrive button.scrivo { color: #fff; border-color: var(--ambra); background: rgba(245, 165, 36, .12); }
.caption { min-height: 1.7rem; font-size: 1.35rem; font-style: italic; color: var(--testo-2); opacity: 0; transition: opacity 400ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caption.visibile { opacity: .95; }
.campo-scrittura { display: none; gap: 1rem; align-items: stretch; }
.stage.scrive .campo-scrittura, .stage.in-testo .campo-scrittura { display: flex; animation: chip-entra 500ms var(--curva) both; }
.campo-scrittura textarea { flex: 1; font-size: 1.6rem; min-height: 5.6rem; max-height: 9rem; border-radius: 1.1rem; padding: 1rem 1.3rem; background: rgba(14, 11, 20, .7); resize: none; font-family: inherit; }
button.invia { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; font-weight: 800; padding: 0 2rem; border-radius: 1.1rem; }
button.invia .ico { width: 1.4rem; height: 1.4rem; }
.stage.in-testo .mic { display: none; }
.stage.in-testo .caption { display: none; }

/* la Testa di vetro: aureola viva, occhi che seguono l'onda della voce */
.testa { position: relative; width: 24rem; aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.testa .mascotte, .testa .mascotte-stage { width: 74%; position: relative; z-index: 2; filter: drop-shadow(0 0 2.2rem rgba(139, 92, 246, .45)); }
.mascotte-stage { width: 100%; }
.alone { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(139, 92, 246, .35); pointer-events: none; opacity: 0; }
.alone.a2 { inset: -2%; border-color: rgba(245, 165, 36, .26); }
.alone.a3 { inset: -10%; border-color: rgba(139, 92, 246, .18); }
.testa[data-stato="ascolta"] .alone { animation: anello-onda 3.4s ease-out infinite; }
.testa[data-stato="ascolta"] .a2 { animation-delay: 1.1s; } .testa[data-stato="ascolta"] .a3 { animation-delay: 2.2s; }
.testa[data-stato="pensa"] .alone { animation: anello-pensa 2.2s ease-in-out infinite; opacity: .5; }
.testa[data-stato="pensa"] .a2 { animation-delay: .5s; } .testa[data-stato="pensa"] .a3 { animation-delay: 1s; }
.testa[data-stato="parla"] .alone { animation: anello-parla .9s ease-in-out infinite alternate; opacity: .7; }
.testa[data-stato="parla"] .a2 { animation-delay: .2s; } .testa[data-stato="parla"] .a3 { animation-delay: .4s; }
.testa[data-stato="felice"] .alone { animation: anello-festa 1.4s ease-out infinite; }
.testa[data-stato="pausa"] .alone { opacity: .15; }
@keyframes anello-onda { 0% { opacity: .75; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes anello-pensa { 0%, 100% { transform: scale(.94); opacity: .2; } 50% { transform: scale(1.04); opacity: .6; } }
@keyframes anello-parla { from { transform: scale(.97); opacity: .35; } to { transform: scale(1.05); opacity: .85; } }
@keyframes anello-festa { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
.palco .mascotte .m-occhio { translate: var(--sguardo, 0px) 0; transition: translate 380ms var(--curva), transform 110ms ease-in; }
.stage[data-modo="lavagna"] .testa { width: 17rem; }

/* la bocca di luce: una linea sotto il vetro che pulsa quando la Testa parla */
.testa .bocca { position: absolute; left: 50%; bottom: 9%; width: 30%; height: .42rem; margin-left: -15%; border-radius: .3rem; background: linear-gradient(90deg, rgba(139, 92, 246, 0), var(--ambra) 30%, var(--viola) 70%, rgba(139, 92, 246, 0)); box-shadow: 0 0 1.4rem rgba(245, 165, 36, .6); opacity: 0; transform: scaleX(.3); transition: opacity 300ms ease; will-change: transform, opacity; z-index: 3; }
.testa[data-stato="parla"] .bocca { opacity: 1; animation: bocca-parla 420ms ease-in-out infinite alternate; }
.testa[data-stato="parla"] .mascotte .m-suono { opacity: 0; }
@keyframes bocca-parla { 0% { transform: scaleX(.35) scaleY(.7); } 35% { transform: scaleX(1) scaleY(1.4); } 70% { transform: scaleX(.55) scaleY(.9); } 100% { transform: scaleX(.9) scaleY(1.2); } }
/* «Quello che ho capito»: la striscia che si riempie dal vivo */
.capito { display: flex; align-items: center; gap: 1.8rem; padding: 1rem 1.7rem; border-radius: 1.6rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .07); box-shadow: var(--ombra-profonda); min-height: 5.6rem; }
.capito::before { content: ""; position: absolute; }
.capito-titolo { display: flex; align-items: center; gap: .9rem; font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--ambra); white-space: nowrap; flex: none; }
.punto-vivo { display: block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ambra); animation: pulsa 1.8s ease-in-out infinite; }
.capito-corpo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-width: 0; flex: 1; max-height: 8.2rem; overflow: hidden; }
.token-lista { display: contents; }
.token { position: relative; display: inline-flex; align-items: center; gap: .65rem; padding: .5rem 1.15rem .5rem .8rem; border-radius: 999px; font-size: 1.22rem; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .4); max-width: 100%; white-space: nowrap; }
.token .ico { width: 1.45rem; height: 1.45rem; color: var(--ambra); }
.token .k { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); font-weight: 700; }
.token .v { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.token.dolore { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .38); }
.token.dolore .ico { color: #fca5a5; }
.token.obiettivo { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .38); }
.token.obiettivo .ico { color: #6ee7b7; }
.token.assente .v { color: var(--grigio); font-weight: 600; }
.token.nuova { animation: token-accende 900ms var(--curva-scatto) both; }
.token.nuova::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 2rem rgba(245, 165, 36, .85); opacity: 0; animation: token-bagliore 1500ms ease-out both; animation-delay: inherit; }
.token.via { animation: esce 320ms both !important; }
.token.fantasma { background: transparent; border: 1px dashed rgba(255, 255, 255, .2); color: rgba(154, 148, 171, .75); }
.token.fantasma .ico { color: rgba(154, 148, 171, .55); }
.token.fantasma .k { color: rgba(154, 148, 171, .8); letter-spacing: .1em; }
.piu { font-size: 1.2rem; font-weight: 800; color: var(--grigio); }
@keyframes token-accende { 0% { opacity: 0; transform: scale(.55); filter: blur(8px); } 55% { opacity: 1; transform: scale(1.08); filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes token-bagliore { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* le opportunità (la lavagna): una carta di vetro sotto la Testa; la carta «trovata» vola nella sua riga */
.opportunita-carta { width: 100%; max-width: 40rem; padding: 1.5rem 1.8rem; border-radius: 1.6rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .07); box-shadow: var(--ombra-profonda); animation: chip-entra 700ms var(--curva) both; }
.opportunita-carta[hidden] { display: none; }
.opportunita-carta .occhiello { margin-bottom: .7rem; font-size: 1.05rem; }
.stage .lavagna { font-size: 1.5rem; }
.stage .lavagna li { padding: .6rem 0; gap: 1rem; }
.stage .lavagna .nome-opp { font-weight: 600; min-width: 0; }
.stage .lavagna .segno { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
.stage .lavagna .impatto { font-size: .95rem; white-space: nowrap; }
.stage .lavagna.fitta { font-size: 1.25rem; }

/* ---------- telefono e tablet in verticale ---------- */
@media (max-width: 1000px) {
  .scena[data-scena="ascolto"] { padding: 4.6rem 1.25rem 1.6rem; overflow-y: auto; }
  .stage { gap: 1.2rem; }
  .stage-corpo { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  .colonna-testa { order: -1; flex-direction: row; justify-content: flex-end; position: absolute; top: 4.6rem; right: 0; z-index: 1; }
  .testa { width: 7.2rem; }
  .stage[data-modo="lavagna"] .testa { width: 7.2rem; }
  .opportunita-carta { display: none; }
  .tappe .nome { display: none; }
  .tappa.corrente .nome { display: block; position: absolute; top: 2.9rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 1.1rem; }
  .tappe { padding-bottom: 1.6rem; }
  .bolle { max-height: 7.4rem; }
  .bolla { font-size: 1.15rem; max-width: 92%; }
  .stage .domanda { font-size: 2.3rem !important; line-height: 1.12; padding-right: 8rem; }  /* la Testa sta in alto a destra: il testo non ci passa sotto */
  .chips, .chips.pochi { grid-template-columns: 1fr; max-width: none; }
  button.chip { font-size: 1.4rem; min-height: 3.9rem; padding: .6rem 1.1rem; }
  .riga-conferma { flex-wrap: wrap; gap: .6rem; } button.conferma { font-size: 1.3rem; padding: .7rem 1.4rem; }
  .riga-ingresso { gap: .7rem; }
  .mic { padding: .5rem 1rem .5rem .6rem; gap: .8rem; }
  .mic-cerchio { width: 2.8rem; height: 2.8rem; }
  .onda-viva { display: none; }
  .capito { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .capito-corpo { flex-wrap: nowrap; overflow-x: auto; max-height: none; width: 100%; padding-bottom: .3rem; scrollbar-width: none; }
  .token { font-size: 1.1rem; flex: none; }
  .tappa-lampo { top: 9rem; } .tappa-lampo .titolo { font-size: 3.4rem; text-align: center; padding: 0 1rem; }
}

/* ---------- pausa: il velo di vetro con la Testa che dorme; se il consulente sceglie una domanda, resta solo un cartiglio ---------- */
.velo { background: radial-gradient(60% 60% at 50% 45%, rgba(46, 34, 78, .55), rgba(10, 8, 16, .9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.velo-corpo { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.velo-testa { position: relative; width: 17rem; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1.2rem; }
.velo-testa .mascotte { width: 76%; position: relative; z-index: 2; }
.velo-testa .alone { opacity: .5; animation: anello-pensa 5.5s ease-in-out infinite; }
.velo-testa .a2 { animation-delay: 1.8s; }
.velo .titolone { font-size: 5.2rem; margin-bottom: .5rem; }
.velo .sottotitolo { margin: 0 auto; max-width: 44rem; }
.cartiglio-pausa { position: absolute; left: 50%; top: 3.15rem; z-index: 19; display: inline-flex; align-items: center; gap: .9rem; padding: .7rem 1.6rem; border-radius: 999px; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; color: #e7defd; background: rgba(139, 92, 246, .22); border: 1px solid rgba(139, 92, 246, .55); box-shadow: 0 0 2.4rem rgba(139, 92, 246, .35); opacity: 0; visibility: hidden; transform: translate(-50%, -1rem); transition: opacity 500ms ease, transform 500ms var(--curva), visibility 0s 500ms; pointer-events: none; }
.cartiglio-pausa.visibile { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 500ms ease, transform 500ms var(--curva); }
.cartiglio-pausa i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--viola); animation: pulsa 1.8s ease-in-out infinite; }

/* ---------- consenso: pagina chiara, tre punti brevi, il testo legale dietro «Leggi tutto» ---------- */
.scena[data-scena="consenso"] { padding: 6rem 6rem 3rem; }
.consenso { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 5rem; align-items: center; flex: 1; min-height: 0; width: 100%; }
.consenso-testata { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: .2rem; }
.consenso .titolone.medio { font-size: 4.8rem; margin-bottom: 1.4rem; }
.punti { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; max-width: 62rem; }
.punti li { display: flex; align-items: center; gap: 1.5rem; padding: 1.05rem 1.6rem; border-radius: 1.4rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .08); animation: chip-entra 700ms var(--curva) both; }
.punto-icona { width: 3.8rem; height: 3.8rem; border-radius: 1.05rem; display: grid; place-items: center; background: rgba(139, 92, 246, .2); color: var(--ambra); flex: none; }
.punto-icona .ico { width: 1.9rem; height: 1.9rem; }
.punti li b { display: block; font-size: 1.62rem; font-weight: 800; margin-bottom: .15rem; }
.punti li span { display: block; color: var(--testo-2); font-size: 1.22rem; line-height: 1.38; }
.consenso .bottoni { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 0; }
button.grande { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.9rem; font-weight: 800; padding: 1.15rem 2.5rem; border-radius: 1.2rem; }
button.grande .ico { width: 1.8rem; height: 1.8rem; }
.consenso .bottoni button.secondario { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; padding: 1.05rem 1.9rem; border-radius: 1.2rem; }
.consenso .bottoni button.secondario .ico { width: 1.7rem; height: 1.7rem; }
button.discreto { all: unset; cursor: pointer; font: inherit; font-size: 1.35rem; color: var(--grigio); padding: .8rem 1rem; border-radius: .8rem; transition: color 200ms ease; }
button.discreto:hover { color: #fff; }
button.discreto:focus-visible, button.leggi-tutto:focus-visible { box-shadow: var(--anello-focus); }
button.leggi-tutto { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.7rem; font: inherit; font-size: 1.25rem; color: var(--grigio); border-bottom: 1px dotted rgba(154, 148, 171, .6); padding-bottom: .15rem; transition: color 200ms ease, border-color 200ms ease; }
button.leggi-tutto:hover { color: #fff; border-color: var(--ambra); }
button.leggi-tutto .ico { width: 1.4rem; height: 1.4rem; }
.consenso-testa { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 36rem; justify-self: center; width: 100%; }
.consenso-testa .mascotte-grande { width: 72%; position: relative; z-index: 2; filter: drop-shadow(0 0 3rem rgba(139, 92, 246, .45)); }
.consenso-testa .alone { opacity: .5; animation: anello-onda 5s ease-out infinite; }
.consenso-testa .a2 { animation-delay: 1.6s; } .consenso-testa .a3 { animation-delay: 3.2s; }
.legale { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 4rem; background: rgba(8, 6, 12, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: dissolvi 260ms ease both; }
.legale.esce { animation: dissolvi-via 240ms ease both; }
.legale-carta { max-width: 64rem; padding: 3rem 3.4rem; border-radius: 2rem; background: linear-gradient(160deg, rgba(40, 32, 58, .96), rgba(21, 17, 32, .96)); border: 1px solid rgba(139, 92, 246, .45); box-shadow: 0 3rem 8rem -2rem rgba(0, 0, 0, .8), 0 0 4rem rgba(139, 92, 246, .2); animation: chip-entra 500ms var(--curva) both; }
.legale-carta p { font-size: 1.55rem; line-height: 1.55; color: var(--testo-2); margin: 0 0 2rem; }
.legale-piede { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.legale-piede small { color: var(--grigio); font-size: 1.05rem; letter-spacing: .08em; }
.legale-piede button { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.3rem; padding: .8rem 1.5rem; }
.legale-piede button .ico { width: 1.3rem; height: 1.3rem; }
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes dissolvi-via { from { opacity: 1; } to { opacity: 0; } }

/* ---------- benvenuto, proposta pronta: la Testa con le sue onde ---------- */
.testa-grande { position: relative; display: grid; place-items: center; width: 34rem; aspect-ratio: 1; }
.testa-grande .mascotte-grande { width: 76%; position: relative; z-index: 2; }
.testa-grande .alone { opacity: .5; animation: anello-onda 4.6s ease-out infinite; }
.testa-grande .a2 { animation-delay: 1.5s; }
.cominciamo { display: flex; align-items: center; gap: .6rem; margin-top: 2.6rem; color: var(--grigio); font-size: 1.4rem; letter-spacing: .08em; opacity: 0; animation: dissolvi 700ms ease 2400ms both; }
.cominciamo i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ambra); animation: pulsa 1.4s ease-in-out infinite; }
.cominciamo i:nth-child(2) { animation-delay: .25s; } .cominciamo i:nth-child(3) { animation-delay: .5s; }
.cominciamo span { margin-left: .8rem; }
.pronta-spunte { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.6rem; position: relative; z-index: 1; }
.pronta-voce { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.7rem; border-radius: 999px; font-size: 1.5rem; font-weight: 700; background: rgba(245, 165, 36, .1); border: 1px solid rgba(245, 165, 36, .42); animation: chip-entra 700ms var(--curva) both; }
.pronta-voce .ico { width: 1.6rem; height: 1.6rem; color: var(--ambra); }
.scena.centro > .pronta-spunte { align-self: flex-start; }

/* ---------- risultati: numeri che contano, carte che entrano a scalare, il prezzo quando il consulente lo mostra ---------- */
.scena[data-scena="risultati"] { padding: 6rem 6rem 2.4rem; }
.risultati { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 3.4rem; flex: 1; min-height: 0; align-items: start; width: 100%; padding-top: .6rem; }
.ris-sinistra { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.kpi-riga { display: flex; align-items: center; gap: 2.6rem; }
.risultati .punteggio-blocco { gap: 1.4rem; flex: none; }
.risultati .anello { width: 13rem; height: 13rem; }
.risultati .anello::after { inset: -.5rem; }
.risultati .anello .traccia { border-width: .9rem; }
.risultati .anello .meta i { border-width: .9rem; }
.risultati .punteggio { font-size: 5.2rem; }
.risultati .punteggio small { font-size: 1.6rem; }
.kpi-punteggio .occhiello { font-size: .95rem; margin-bottom: .3rem; max-width: 11rem; line-height: 1.35; }
.risultati .mascotte-media { width: 7.6rem; margin-top: .4rem; }
.kpi-colonne { display: flex; gap: 1.2rem; flex: 1; min-width: 0; }
.kpi { flex: 1; min-width: 0; padding: 1.15rem 1.4rem 1.2rem; border-radius: 1.5rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--ombra-profonda); animation: chip-entra 800ms var(--curva) both; }
.kpi-valore { display: flex; align-items: baseline; gap: .3rem; font-size: 4.4rem; font-weight: var(--peso-titolo); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-valore small { order: -1; font-size: 2rem; color: var(--grigio); font-weight: 700; letter-spacing: 0; }
.kpi .cifra { background: linear-gradient(180deg, #fff 30%, #ffd9a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi .cifra.fatto { animation: cifra-lampo 900ms ease-out both; }
@keyframes cifra-lampo { 0% { filter: drop-shadow(0 0 0 rgba(245, 165, 36, 0)); } 35% { filter: drop-shadow(0 0 1.1rem rgba(245, 165, 36, .9)); } 100% { filter: none; } }
.kpi-etichetta { margin-top: .55rem; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); font-weight: 700; line-height: 1.3; }
.occhiello-sez { margin: .6rem 0 0; font-size: 1.05rem; }
.carte-opp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.carta-opp { position: relative; padding: .95rem 1.2rem 1rem; border-radius: 1.3rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .07); animation: carta-opp-entra 800ms var(--curva) both; will-change: transform, opacity, filter; }
.carta-opp.alto { border-color: rgba(245, 165, 36, .38); }
.carta-opp.alto::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 1.8rem rgba(245, 165, 36, .35); opacity: .6; }
.carta-opp h3 { font-size: 1.42rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: #fff; margin: .55rem 0 .3rem; line-height: 1.15; }
.carta-opp p { margin: 0; font-size: 1.02rem; line-height: 1.34; color: var(--grigio); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.riga-badge { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.badge { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; }
.badge.impatto-ALTO { background: rgba(245, 165, 36, .2); color: #ffd28a; border: 1px solid rgba(245, 165, 36, .5); }
.badge.impatto-MEDIO { background: rgba(139, 92, 246, .2); color: #cbb6ff; border: 1px solid rgba(139, 92, 246, .5); }
.badge.impatto-BASSO { background: rgba(255, 255, 255, .06); color: var(--testo-2); border: 1px solid rgba(255, 255, 255, .18); }
.badge.neutro { background: transparent; color: var(--grigio); border: 1px solid rgba(255, 255, 255, .14); }
.giorni { margin-left: auto; font-size: .95rem; color: var(--grigio); font-variant-numeric: tabular-nums; }
.carte-opp-piu { font-size: 1.1rem; color: var(--grigio); margin-top: -.2rem; }
@keyframes carta-opp-entra { from { opacity: 0; transform: translateY(1.6rem) scale(.95); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.risultati .fasi-blocco { margin-top: .2rem; }
.risultati .fasi { gap: 1.2rem; }
.risultati .fase { padding-top: .9rem; }
.risultati .fase h3 { font-size: 1.4rem; margin: .25rem 0 .45rem; }
.risultati .fase ul { font-size: 1.1rem; line-height: 1.35; }
.risultati .fase .didascalia { margin-top: .45rem !important; font-size: 1rem !important; }
.carta-sistema { padding: 2rem 2.2rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--ombra-profonda); position: relative; }
.carta-sistema.con-prezzo { border-color: rgba(245, 165, 36, .35); box-shadow: var(--ombra-profonda), 0 0 4rem rgba(245, 165, 36, .12); }
.carta-sistema .sistema { font-size: 1.55rem; }
.carta-sistema .sistema li { padding: .7rem 0; }
.carta-sistema .totale strong { font-size: 4.6rem; }
.carta-sistema .totale { margin-top: 1.2rem; padding-top: 1.1rem; font-size: 1.5rem; }
.carta-sistema .mensile { font-size: 1.35rem; }

/* ---------- telefono: consenso, risultati, pausa, proposta pronta ---------- */
@media (max-width: 1000px) {
  .scena[data-scena="consenso"], .scena[data-scena="risultati"] { padding: 4.6rem 1.25rem 2rem; overflow-y: auto; }
  .consenso { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  .consenso-testa { order: -1; max-width: 12rem; justify-self: start; margin-bottom: -.6rem; }
  .consenso .titolone.medio, .scena h1.titolone.medio { font-size: 3rem; }
  .punti li { padding: .8rem 1rem; gap: 1rem; }
  .punto-icona { width: 3rem; height: 3rem; } .punti li b { font-size: 1.4rem; } .punti li span { font-size: 1.15rem; }
  .consenso .bottoni { flex-direction: column; align-items: stretch; }
  button.grande, .consenso .bottoni button.secondario { justify-content: center; font-size: 1.5rem; }
  .legale { padding: 1.2rem; } .legale-carta { padding: 1.6rem; } .legale-carta p { font-size: 1.25rem; }
  .risultati { grid-template-columns: 1fr; gap: 1.4rem; flex: none; }
  .ris-sinistra { min-height: auto; }
  .kpi-riga { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .risultati .punteggio-blocco { justify-content: center; }
  .risultati .anello { width: 12rem; height: 12rem; }
  .kpi-colonne { gap: .6rem; }
  .kpi { padding: .8rem .8rem; } .kpi-valore { font-size: 2.8rem; } .kpi-etichetta { font-size: .8rem; }
  .carte-opp { grid-template-columns: 1fr; }
  .risultati .fasi { grid-template-columns: repeat(2, 1fr); }
  .carta-sistema { padding: 1.2rem 1.3rem; } .carta-sistema .sistema { font-size: 1.25rem; } .carta-sistema .totale strong { font-size: 3.4rem; }
  .velo .titolone { font-size: 3.2rem; } .velo-testa { width: 11rem; }
  .cartiglio-pausa { top: .75rem; font-size: 1rem; padding: .45rem 1rem; }
  .testa-grande { width: 18rem; }
  .con-mascotte { grid-template-columns: 1fr; gap: 1rem; } .con-mascotte .testa-grande { order: -1; }
  .pronta-voce { font-size: 1.2rem; }
  .carte-testata { margin: .4rem 0 1.4rem; gap: 1.2rem; } .carte-numero .cifra { font-size: 5.4rem; } .carte-testata .sottotitolo { font-size: 1.3rem; }
  html.tv .carte { grid-template-columns: 1fr; }
}
/* ---------- movimento ridotto: resta la dissolvenza ---------- */
@media (prefers-reduced-motion: reduce) {
  .bolla, button.chip, .token.nuova, .carta-opp, .kpi, .pronta-voce, .punti li, .opportunita-carta, .legale-carta, .campo-scrittura { animation: dissolvi 300ms ease both !important; }
  .token.nuova::after, .tappa.corrente .punto::after, .mic-cerchio::after, .alone, .punto-vivo, .cominciamo i, .velo-testa .alone, .cartiglio-pausa i { animation: none !important; }
  .alone { opacity: .25; }
  .onda-viva span { animation: none !important; transform: scaleY(.45); }
  .testa[data-stato="parla"] .bocca { animation: none; transform: scaleX(.8); }
  .tappa-lampo { animation: dissolvi-lampo 1400ms ease both !important; }
  @keyframes dissolvi-lampo { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
  .tappe .filo-pieno { transition: none; }
  .tappa.acceso .punto { animation: none; }
  .kpi .cifra.fatto { animation: none; }
  .cominciamo { animation: dissolvi 300ms ease both; }
  button.chip.premuto { animation: none !important; }
  .bolla[data-eta] { transform: none; transition: opacity 300ms ease; }
}

/* ---------- TV a muro: lo stesso vestito (vetro, luce, tappe) letto da lontano ---------- */
html.tv .scena { padding: 7.4rem 7rem 3.4rem; }
html.tv .aurora { position: fixed; z-index: 0; }  /* l'aurora copre tutto lo schermo, senza la riga di taglio sopra il piede */
html.tv .palco-testata { z-index: 5; }
.stage.tv { gap: 2rem; }
.stage.tv .bolle, .stage.tv .chips, .stage.tv .riga-conferma, .stage.tv .ingresso, .stage.tv .opportunita-carta, .stage.tv .suggerimento { display: none; }
.stage.tv .domanda { font-size: calc(var(--dom, 3.6rem) * 1.2); }
.stage.tv .occhiello-tappa { font-size: 1.5rem; }
.stage.tv .testa { width: 30rem; }
.stage.tv .tappa .nome { font-size: 1.3rem; }
.stage.tv .tappa .punto { width: 2.7rem; height: 2.7rem; }
.stage.tv .capito { min-height: 6.4rem; }
.carte-testata { display: flex; align-items: center; gap: 2.6rem; margin: 1.4rem 0 2.6rem; }
.carte-numero .cifra { display: block; font-size: 10rem; font-weight: var(--peso-titolo); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #ffc977); -webkit-background-clip: text; background-clip: text; color: transparent; }
.carte-testata .sottotitolo { font-size: 2.2rem; margin: 0; }
html.tv .carte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
html.tv .carte .carta { position: relative; padding: 2rem 2.3rem 2.2rem; background: var(--vetro-chiaro); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--ombra-profonda); animation: carta-opp-entra 800ms var(--curva) both; }
html.tv .carte .carta.alta { border-color: rgba(245, 165, 36, .42); box-shadow: var(--ombra-profonda), 0 0 3rem rgba(245, 165, 36, .18); }
html.tv .carte .carta h3 { font-size: 2.3rem; margin: 1rem 0 .8rem; }
html.tv .carte .carta p { font-size: 1.45rem; }
.carta-riga { display: flex; justify-content: space-between; align-items: center; }
.carta-n { font-size: 3.2rem; font-weight: var(--peso-titolo); color: rgba(255, 255, 255, .13); letter-spacing: -.03em; }
.carta-giorni { margin-top: 1.2rem; color: var(--grigio); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
/* --- fine Schermo v2 ------------------------------------------------------------------------------------------------------------------------------ */
.carta-sistema .totale { flex-direction: column; align-items: flex-start; gap: .3rem; }
.carta-sistema .totale > span { font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); font-weight: 700; }