/* Corso dimostrativo del portfolio: il layout e la pulsantiera del Generatore SCORM, come la vetrina di Progettazione
   Corsi (progettazione-online\sito\vetrina\vetrina.css, da cui viene la parte comune), con Andrea scontornato che cambia
   inquadratura. La tela e' fissa a 1280x720 e si ridimensiona con transform: identica a qualsiasi misura. */
@font-face{font-family:"Public Sans";src:url(public-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --plum:#B91C4A; --plum2:#7C1D3A; --plum3:#3B0E1D; --plum-chiaro:#FBE4EA;
  --ambra:#FBBF24; --ambra-chiaro:#FEF3E2; --arancio-testo:#9A3412;
  --testo:#0F172A; --soft:#475569; --tenue:#64748B; --bordo:#E7EAF2;
  --sfondo-tela:#F8FAFC; --notte:#0B1020; --ok:#16A34A; --ok-chiaro:#DCFCE7;
  --accento:var(--plum); --accento-scuro:var(--plum2);
  /* colonna e fondo blu notte del brand, cornice plum: stacca dalla landing prugna (Andrea 23/10, variante C) */
  --barra:#0B1020; --sfondo:#0F172A; --chiaro:#F8FAFC;
  --superficie:rgba(248,250,252,.07); --superficie-bordo:rgba(248,250,252,.18); --superficie-forte:rgba(248,250,252,.13);
  --raggio:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%}
body{height:100%;margin:0;overflow:hidden;font:15px/1.5 'Public Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--chiaro);background:var(--sfondo);display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
h1,h2{margin:0}

/* ------------------------------------------------------------ colonna delle lezioni */
.lato{background:var(--barra);display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid rgba(248,227,234,.08)}
.lato .testa{padding:24px 22px 16px}
.logo-arena{display:block;width:230px;height:auto;margin:-10px 0 10px -6px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ambra)}
.lato h1{font-size:19px;line-height:1.3;margin-top:4px;font-weight:800;letter-spacing:-.3px;color:#fff}
.avanzamento{margin:0 22px 16px;padding:14px 16px;border-radius:12px;background:var(--superficie)}
.avanzamento .riga{display:flex;align-items:baseline;gap:8px}
.quanto{font-size:26px;font-weight:800;line-height:1;color:#fff}
.su{font-size:12.5px;opacity:.7}
.barretta{height:6px;border-radius:99px;background:var(--superficie-forte);margin-top:10px;overflow:hidden}
.barretta i{display:block;height:100%;width:0;border-radius:99px;background:var(--ambra);transition:width .35s ease}
.menu{list-style:none;margin:0;padding:2px 12px 16px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin}
.menu li{display:flex;gap:12px;align-items:center;padding:11px 12px;margin-bottom:3px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;line-height:1.3;transition:background .15s}
.menu li:hover{background:var(--superficie)}
.menu li.attiva{background:var(--superficie-forte);color:#fff}
.menu .num{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;border:1px solid var(--superficie-bordo)}
.menu .num svg{width:15px;height:15px}
.menu li.vista .num{background:var(--ok);border-color:var(--ok);color:#fff}
.menu li.attiva .num{background:var(--accento);border-color:var(--accento);color:#fff}
.menu .durata{margin-left:auto;font-size:12px;opacity:.55;font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ palco */
.palco{min-width:0;min-height:0;padding:0 24px 18px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;container-type:inline-size}
.intestazione{padding:16px 2px 0;min-width:0}
.titolo-capitolo{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ambra)}
.palco h2{font-size:20px;font-weight:800;letter-spacing:-.3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zona-video{position:relative;min-height:0;min-width:0;overflow:hidden;margin-top:12px}
.cornice{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:7px;border-radius:calc(var(--raggio) + 6px);
  background:var(--accento);box-shadow:0 0 10px rgba(185,28,74,.35),0 0 0 1px rgba(185,28,74,.5)}
.schermo{position:relative;width:100%;height:100%;background:var(--sfondo-tela);border-radius:var(--raggio);overflow:hidden;isolation:isolate;cursor:pointer;user-select:none}

.pausa{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(11,16,32,.58);color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}
.schermo.in-pausa .pausa,.schermo.inizio .pausa{opacity:1}
.schermo.inizio .pausa{background:rgba(59,14,29,.55)}
.pausa .tasto{width:92px;height:92px;border-radius:50%;background:var(--ambra);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.pausa .tasto::after{content:"";border:17px solid transparent;border-left:28px solid var(--plum3);margin-left:14px}
.pausa b{font-size:26px;font-weight:900}
.pausa small{font-size:15px;color:#E2E8F0;font-weight:600}
.fine{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(11,16,32,.6);cursor:default}
.fine[hidden]{display:none}
.fine-riquadro{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--barra);color:var(--chiaro);
  padding:22px 30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);border:1px solid var(--superficie-bordo)}
.fine-riquadro>b{font-size:24px;font-weight:900;color:#fff}
.fine-riquadro>span{font-size:16px;font-weight:600}
.fine-bottoni{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.fine-bottoni a{text-decoration:none;color:inherit}
.fine-riquadro{max-width:min(680px,100%)}
@media (max-width:560px){
  .fine-riquadro{padding:20px 18px;width:100%}
  .fine-bottoni{flex-direction:column;align-items:stretch;width:100%}
  .fine-bottoni>*{justify-content:center;text-align:center}
}

/* ------------------------------------------------------------ pulsantiera */
/* 25/10/2026 (Andrea): tutti i comandi sempre su UNA riga. Quando il palco si stringe spariscono, in quest'ordine,
   la barra del volume, le scritte Indietro/Avanti (restano le frecce), il tempo, i salti di 10 secondi. */
.comandi{display:flex;align-items:center;gap:10px;padding:14px 2px 0;flex-wrap:nowrap;min-height:66px}
.comandi>*{flex:0 0 auto}
.seek{flex:1 1 160px;min-width:60px;height:24px;position:relative;cursor:pointer;touch-action:none}
.tondo.cc{font-size:12.5px;font-weight:900;letter-spacing:.02em}
.tondo.cc[aria-pressed=false]{opacity:.5;text-decoration:line-through}
.schermo.senza-cc .sottotitolo{display:none}
.seek .pista,.seek .fatto{position:absolute;top:9px;height:6px;border-radius:99px}
.seek .pista{left:0;right:0;background:var(--superficie-bordo)}
.seek .fatto{left:0;width:0;background:var(--ambra)}
.seek .pallino{position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--ambra);left:0;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tempo{font-variant-numeric:tabular-nums;font-size:13px;opacity:.8;min-width:86px}
.tondo,.testo{border:1px solid var(--superficie-bordo);background:var(--superficie);cursor:pointer;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.35);transition:background .15s,transform .12s}
.tondo{width:42px;height:42px;border-radius:50%;font-size:14px}
.tondo:hover,.testo:hover:not(:disabled){background:var(--superficie-forte);transform:translateY(-1px)}
.tondo.grosso{width:50px;height:50px;font-size:17px;background:var(--accento);border-color:var(--accento);color:#fff;box-shadow:0 6px 18px rgba(185,28,74,.45)}
.tondo.grosso:not(.suona){padding-left:4px}
.tondo.grosso:hover{background:var(--accento-scuro)}
.testo{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:10px 16px;font-size:14px}
.principale{background:var(--accento);border-color:var(--accento);color:#fff;box-shadow:0 6px 18px rgba(185,28,74,.45)}
.principale:hover:not(:disabled){background:var(--accento-scuro);border-color:var(--accento-scuro)}
button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
button[hidden]{display:none}
.vol{display:flex;align-items:center;gap:8px}
.vol input{width:80px;accent-color:var(--ambra)}
/* dopo le regole base, se no non vincono: misure del palco, non dello schermo (container-type su .palco) */
@container (max-width:900px){ .vol input{display:none} }
@container (max-width:800px){ .etichetta{display:none} .testo{padding:10px 14px} }
@container (max-width:620px){ .tempo{display:none} }
@container (max-width:500px){
  .salto{display:none}
  .comandi{gap:6px}
  .tondo{width:36px;height:36px}
  .tondo.grosso{width:42px;height:42px;font-size:15px}
  .testo{padding:8px 11px}
}
/* telefono in verticale: il volume si regola coi tasti del telefono */
@container (max-width:360px){ .vol{display:none} }
:fullscreen .palco{padding:0 0 12px}

@media (max-width:860px){
  body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .lato{order:2;border-right:0;border-top:1px solid rgba(248,227,234,.08)}
  .lato .testa,.avanzamento{display:none}
  .menu{display:flex;gap:6px;overflow-x:auto;padding:8px 10px}
  .menu li{flex:none;margin:0;padding:7px 10px;font-size:13px}
  .menu .durata{display:none}
  .palco{padding:0 10px 10px}
  .intestazione{padding-top:10px}
  .palco h2{font-size:17px}
  .zona-video{margin-top:8px}
  .cornice{padding:4px;border-radius:12px}
  .schermo{border-radius:8px}
  .comandi{padding-top:10px;min-height:0}
  .pausa .tasto{width:64px;height:64px}
  .pausa .tasto::after{border-width:12px;border-left-width:20px;margin-left:10px}
  .pausa b{font-size:20px}
}
/* .compatto (corso.js): telefono in orizzontale (max-height:500px, landscape) oppure schermo intero "finto" (iPhone) */
.compatto .lato,.compatto .intestazione{display:none}
/* una colonna sola: senza, oltre gli 860 px (schermo intero in orizzontale) il video finiva nella colonna da 300 px delle lezioni */
.compatto body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.compatto .comandi{padding-top:6px}
.compatto .palco{padding:0 10px 6px;grid-template-rows:minmax(0,1fr) auto}
/* schermo intero su iPhone col telefono in verticale: la lezione si gira da sola in orizzontale */
@media (orientation:portrait){
  .finto-intero body{position:fixed;left:0;top:0;width:100vh;height:100vw;transform:rotate(90deg) translateY(-100%);transform-origin:0 0}
}

/* ============================================================ la tela: 1280x720 fissi */
.tela{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;color:var(--testo);
  background:radial-gradient(circle at 50% 0%,#fff,var(--sfondo-tela) 70%);font-size:18px}
.spento{visibility:hidden}
.ico{width:1em;height:1em;flex:none}
.entra{animation:entra .5s ease both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.T{--t:.85s cubic-bezier(.65,0,.25,1)}

/* ---- le inquadrature: la persona (#pbox) e l'area delle slide (#area) cambiano posto insieme (data-lay sulla tela) */
#pbox,#area,.ombra{position:absolute;transition:left var(--t),top var(--t),width var(--t),height var(--t),border-radius var(--t),opacity .5s,transform var(--t),box-shadow var(--t),border-color var(--t)}
#pbox{z-index:4;overflow:visible}
#pbox .vid{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#5B1730;border:6px solid var(--plum);transition:border-color var(--t),border-width var(--t)}
#pbox video{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block;transition:object-position var(--t),transform var(--t),opacity .15s}
/* figura nel riquadro (Andrea 23/10): cornice plum spessa e ombra sotto, cosi' stacca dallo sfondo; poca aria sopra la testa */
.tela:is([data-lay=pieno],[data-lay=rett]) #pbox .vid{border-width:9px;box-shadow:0 26px 44px -12px rgba(59,14,29,.55),0 6px 14px rgba(59,14,29,.18)}
#area{z-index:2;overflow:hidden;background:#fff;border:6px solid var(--plum);border-radius:26px}
.ombra{z-index:1;border-radius:26px;background:linear-gradient(160deg,var(--ambra),var(--plum) 70%);opacity:.9}
/* senza cornice: niente bordo ne' ombra colorata */
.tela.nuda #pbox .vid,.tela.nuda #area{border-width:0}
.tela.nuda .ombra{opacity:0}

/* A = il "cavallo di battaglia" di Andrea: lui in verticale a sinistra, slide grandi a destra, nome sotto */
.tela[data-lay=a] #pbox{left:70px;top:44px;width:310px;height:466px;border-radius:26px}
.tela[data-lay=a] #area{left:420px;top:44px;width:800px;height:466px}
.tela[data-lay=a] .o1{left:92px;top:66px;width:310px;height:466px}
.tela[data-lay=a] .o2{left:442px;top:66px;width:800px;height:466px}
.tela[data-lay=a] .nome-sotto{opacity:1;transform:none}
/* cerchio: slide a tutto schermo, lui nel tondo in basso a destra (come Giulia nella vetrina) */
.tela[data-lay=cerchio] #pbox{left:960px;top:368px;width:272px;height:272px;border-radius:50%}
.tela[data-lay=cerchio] #pbox .vid{border-color:var(--ambra);box-shadow:0 0 0 5px var(--plum),0 14px 30px rgba(15,23,42,.38)}
/* nel tondo: testa in alto e spalle dentro, la figura riempie lo spazio (Andrea 23/10). Giulia resta com'era. */
.tela[data-lay=cerchio] #pbox video{object-position:50% 40%;transform:scale(1.06);transform-origin:50% 15%}
.tela.e-giulia[data-lay=cerchio] #pbox video{object-position:50% 22%;transform:none;transition:none}
.tela[data-lay=cerchio] #area{left:0;top:0;width:1280px;height:720px;border-radius:0;border-width:0}
.tela[data-lay=cerchio] .ombra,.tela[data-lay=pieno] .ombra,.tela[data-lay=solo] .ombra{opacity:0}
/* rettangolo: lui a sinistra in un riquadro alto, slide a destra senza cornice */
.tela[data-lay=rett] #pbox{left:48px;top:48px;width:400px;height:600px;border-radius:22px}
.tela[data-lay=rett] #area{left:480px;top:48px;width:752px;height:600px;border-radius:22px;border-width:0;background:transparent}
.tela[data-lay=rett] .o1,.tela[data-lay=rett] .o2{opacity:0}
/* pieno: lui da solo, al centro, nel riquadro con cornice e ombra (prima era a tutto schermo e si vedevano i tagli ai lati) */
.tela[data-lay=pieno] #pbox{left:450px;top:34px;width:380px;height:600px;border-radius:24px}
.tela[data-lay=pieno] #area{left:640px;top:360px;width:0;height:0;opacity:0}
/* solo slide: lui esce, resta la voce */
.tela[data-lay=solo] #pbox{left:1100px;top:540px;width:120px;height:120px;border-radius:50%;opacity:0;transform:scale(.5)}
.tela[data-lay=solo] #area{left:0;top:0;width:1280px;height:720px;border-radius:0;border-width:0}

/* passaggio Andrea <-> Giulia: un cerchio prugna si apre dal centro, copre il cambio con il nome di chi entra, poi si richiude */
.velo{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;text-align:center;
  background:radial-gradient(circle at 50% 38%,var(--plum),var(--plum2) 55%,var(--plum3));clip-path:circle(0 at 50% 50%);pointer-events:none}
.velo svg{width:32%;max-width:84px;fill:var(--ambra)}
.velo b{font-size:26px;font-weight:900;letter-spacing:-.4px;line-height:1.1}
.velo small{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ambra)}
.velo svg,.velo b,.velo small{transform:scale(var(--k,1));opacity:var(--k,1)}

/* nome sotto (inquadratura A) e targhetta sul riquadro */
.nome-sotto{position:absolute;z-index:3;left:0;right:0;top:548px;text-align:center;font-size:40px;font-weight:900;letter-spacing:-.8px;color:var(--plum);
  opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.nome-sotto small{display:block;font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.targhetta{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:var(--plum);color:#fff;border:2px solid var(--ambra);
  border-radius:999px;padding:3px 16px;font-size:17px;font-weight:800;white-space:nowrap;box-shadow:0 6px 14px rgba(15,23,42,.3);transition:opacity .4s}
.tela[data-lay=a] .targhetta,.tela[data-lay=rett] .targhetta,.tela[data-lay=pieno] .targhetta,.tela[data-lay=solo] .targhetta{opacity:0}
.ai{position:absolute;right:2%;top:2%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--plum3);border:2px solid var(--ambra);display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(15,23,42,.35);opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s}
.ai svg{width:62%;height:62%;fill:var(--ambra)}
.tela.e-giulia .ai{opacity:1;transform:none}

/* sottopancia del primo piano */
.sottopancia{position:absolute;z-index:5;left:60px;bottom:110px;display:flex;flex-direction:column;gap:6px;color:#fff}
.sottopancia b{background:var(--plum);padding:8px 22px;border-radius:12px 12px 12px 0;font-size:34px;font-weight:900;letter-spacing:-.5px;width:max-content;
  animation:sp-in .6s cubic-bezier(.2,.9,.3,1.1) both}
.sottopancia span{background:var(--ambra);color:var(--plum3);padding:5px 18px;border-radius:0 10px 10px 10px;font-size:19px;font-weight:800;width:max-content;
  animation:sp-in .6s .25s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes sp-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* sottotitoli */
.sottotitolo{position:absolute;z-index:6;left:4%;right:27%;bottom:3.5%;display:flex;align-items:flex-end;pointer-events:none}
.sottotitolo span{background:rgba(11,16,32,.84);color:#fff;font-weight:600;line-height:1.35;padding:.32em .7em;border-radius:.45em;font-size:var(--sotto,18px);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sottotitolo span:empty{display:none}
.firma{position:absolute;z-index:7;right:1.2%;bottom:.9%;font-size:max(8px,calc(var(--sotto,16px) * .42));font-weight:600;color:rgba(100,116,139,.8);pointer-events:none;white-space:nowrap}

/* ============================================================ le scene (dentro #area, che cambia misura: tutto in flex) */
.scena{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px 40px;text-align:center}
.tela[data-lay=cerchio] .scena,.tela[data-lay=solo] .scena{padding:40px 340px 90px 60px}
.tela[data-lay=solo] .scena{padding:40px 80px 90px}
.kick{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.kick::before{content:"";width:36px;height:4px;border-radius:4px;background:var(--ambra)}
.titolone{font-size:54px;font-weight:900;letter-spacing:-1.6px;line-height:1.05;color:var(--testo)}
.titolone em{font-style:normal;color:var(--plum)}
.sotto-t{font-size:22px;font-weight:600;color:var(--soft);max-width:640px;line-height:1.35}
.scura{background:linear-gradient(150deg,var(--plum3),#5B1730 60%,var(--plum2));color:#fff}
.scura .titolone{color:#fff}
.scura .titolone em{color:var(--ambra)}
.scura .sotto-t{color:#F8E3EA}
.scura .kick{color:var(--ambra)}
.chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.chip{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--bordo);border-radius:999px;padding:10px 20px;font-size:20px;font-weight:800;color:var(--testo);box-shadow:0 8px 20px rgba(15,23,42,.06)}
.chip .ico{width:24px;height:24px;color:var(--plum)}
.chip.forte{background:var(--plum);border-color:var(--plum);color:#fff}
.chip.forte .ico{color:var(--ambra)}
.scura .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.scura .chip .ico{color:var(--ambra)}
/* numero grande che conta */
.numero{font-size:150px;font-weight:900;letter-spacing:-6px;line-height:.9;color:var(--plum);font-variant-numeric:tabular-nums}
.scura .numero{color:var(--ambra)}
.numero small{font-size:44px;letter-spacing:-1px;margin-left:8px}
.coppia{display:flex;gap:40px;align-items:flex-end;justify-content:center}
.coppia>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.coppia .et{font-size:20px;font-weight:800;color:var(--soft)}
.scura .coppia .et{color:#F8E3EA}
/* tessere (corsi accreditati) */
.tessere{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px;width:100%}
.tessera{background:#fff;border:2px solid var(--bordo);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;box-shadow:0 12px 26px rgba(15,23,42,.06)}
.tessera .n{width:52px;height:52px;border-radius:16px;background:var(--plum-chiaro);color:var(--plum);display:grid;place-items:center}
.tessera .n .ico{width:28px;height:28px}
.tessera b{font-size:24px;font-weight:900;letter-spacing:-.4px;line-height:1.15}
.tessera small{font-size:16px;font-weight:600;color:var(--soft);line-height:1.35}
.tessera.accesa{border-color:var(--plum);box-shadow:0 0 0 7px rgba(185,28,74,.13)}
.tessera.accesa .n{background:var(--plum);color:#fff}
/* barra delle durate */
.durate{width:100%;display:flex;flex-direction:column;gap:22px}
.dur{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:16px}
.dur b{font-size:30px;font-weight:900;color:var(--plum);text-align:right}
.dur i{display:block;height:34px;border-radius:12px;background:linear-gradient(90deg,var(--ambra),var(--plum));transform-origin:0 50%;animation:cresce 1.1s cubic-bezier(.2,.8,.2,1) both;width:var(--w)}
@keyframes cresce{from{transform:scaleX(0)}to{transform:none}}
/* personalizzazione: mini player in tre colori */
.mini{width:220px;border-radius:16px;overflow:hidden;box-shadow:0 18px 36px rgba(15,23,42,.18);background:#fff;border:1px solid var(--bordo)}
.mini .mt{height:26px;background:var(--c1);display:flex;align-items:center;gap:6px;padding:0 10px}
.mini .mt i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
.mini .mc{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:10px;height:110px}
.mini .ml{background:var(--c2);border-radius:8px}
.mini .mv{border-radius:8px;background:linear-gradient(140deg,var(--c1),var(--c2));display:grid;place-items:center}
.mini .mv::after{content:"";border:13px solid transparent;border-left:20px solid #fff;margin-left:12px}
.mini .mb{height:12px;margin:0 12px 12px;border-radius:99px;background:#E2E8F0;overflow:hidden}
.mini .mb::after{content:"";display:block;width:60%;height:100%;background:var(--c3)}
.minis{display:flex;gap:24px}
/* brand kit */
.kit{display:flex;gap:30px;align-items:center}
.colori{display:flex;gap:14px}
.colori i{width:84px;height:84px;border-radius:50%;box-shadow:0 10px 22px rgba(15,23,42,.18);background:var(--c)}
.font{font-size:110px;font-weight:900;line-height:1;color:var(--plum3)}
.font small{display:block;font-size:18px;font-weight:700;color:var(--soft);letter-spacing:.06em}
.freccia-giu{width:64px;height:64px;color:var(--ambra);animation:salta 1.2s ease-in-out infinite}
@keyframes salta{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
/* banner del Tariffario (26/10/2026): nel finale indica i prezzi sotto il video; cliccandolo la pagina scende li' */
.banner-tariffario{position:absolute;z-index:6;right:36px;bottom:34px;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 24px;
  border:0;border-left:6px solid var(--ambra);border-radius:18px;background:linear-gradient(135deg,var(--plum),var(--plum3));color:#fff;font:inherit;
  text-align:left;cursor:pointer;box-shadow:0 18px 36px -10px rgba(59,14,29,.6),0 0 0 4px rgba(251,191,36,.18);
  animation:banner-su .6s cubic-bezier(.2,.9,.3,1.15) both}
.banner-tariffario span{display:flex;flex-direction:column;gap:2px;font-size:28px;font-weight:900;letter-spacing:-.5px;line-height:1.1}
.banner-tariffario small{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ambra)}
.banner-tariffario .ico{width:54px;height:54px;padding:12px;border-radius:50%;background:var(--ambra);color:var(--plum3);animation:salta 1.2s .6s ease-in-out infinite}
.banner-tariffario:hover{filter:brightness(1.08)}
@keyframes banner-su{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
.fine-bottoni .ico{width:16px;height:16px;vertical-align:-3px}
/* cambio scena: i testi della scena che finisce salgono e svaniscono (--esce da corso.js, 1 = fermi, 0 = spariti) */
.scena>*{filter:opacity(var(--esce,1));translate:0 calc((1 - var(--esce,1)) * -16px)}