/* ==========================================================================
   Quasar · video explicativo (escenario 1920 × 1080, animado por tiempo)
   ========================================================================== */
#quasar-presentacion .vplayer { position: relative; }
#quasar-presentacion .vstage { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #070a1c; border: 1px solid rgb(160 170 255 / 0.18);
  box-shadow: 0 60px 120px -50px rgb(4 6 20 / 0.95), 0 0 90px -30px rgb(110 92 245 / 0.4); }
#quasar-presentacion .vx { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--s, 0.5)); overflow: hidden;
  font: 500 26px/1.4 var(--font); color: #eceeff; letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased; }
#quasar-presentacion .vx,#quasar-presentacion  .vx * { pointer-events: none; }
#quasar-presentacion .vx .ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#quasar-presentacion .vx-bg { position: absolute; inset: 0; background: radial-gradient(1300px 800px at 82% -10%, rgb(110 92 245 / 0.34), transparent 62%), radial-gradient(1000px 700px at -5% 110%, rgb(46 230 201 / 0.16), transparent 60%), #070a1c; }
#quasar-presentacion .vx-bg .grid { position: absolute; inset: 0; background-image: radial-gradient(rgb(170 178 255 / 0.12) 1.2px, transparent 1.6px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(1200px 800px at 50% 40%, #000, transparent); mask-image: radial-gradient(1200px 800px at 50% 40%, #000, transparent); }
#quasar-presentacion .vx-bg .o1,#quasar-presentacion  .vx-bg .o2 { position: absolute; border-radius: 50%; border: 1.5px solid rgb(160 170 255 / 0.1); }
#quasar-presentacion .vx-bg .o1 { width: 2200px; height: 2200px; right: -900px; top: -1400px; }
#quasar-presentacion .vx-bg .o2 { width: 1400px; height: 1400px; right: -480px; top: -900px; border-style: dashed; }
#quasar-presentacion .vx-cam { position: absolute; inset: 0; transform-origin: 0 0; }
#quasar-presentacion .vs { position: absolute; inset: 0; padding: 120px 140px 0; opacity: var(--p, 0); }
#quasar-presentacion .vx-brand { position: absolute; left: 60px; top: 46px; display: flex; align-items: center; gap: 14px; font: 700 22px/1 var(--display); letter-spacing: 0.24em; color: #fff; }
#quasar-presentacion .vx-brand img { width: 40px; height: 40px; }
#quasar-presentacion .vx-brand i { width: 1.5px; height: 26px; margin: 0 6px; background: rgb(160 170 255 / 0.3); }
#quasar-presentacion .vx-brand .sur { width: 150px; height: auto; }
#quasar-presentacion .vx-cap { position: absolute; left: 50%; bottom: 52px; transform: translate(-50%, calc((1 - var(--p, 0)) * 14px)); max-width: 1500px; padding: 18px 34px; border-radius: 18px; text-align: center;
  background: rgb(7 10 28 / 0.78); border: 1px solid rgb(160 170 255 / 0.18); font: 600 32px/1.35 var(--font); color: #fff; opacity: var(--p, 0); white-space: nowrap; }
#quasar-presentacion .vx-kick,#quasar-presentacion  .vx-step { display: inline-flex; align-items: center; gap: 14px; font: 600 22px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #2ee6c9; }
#quasar-presentacion .vx-kick::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid currentColor; background: radial-gradient(circle, currentColor 0 3.5px, transparent 4.2px); }
#quasar-presentacion .vx-kick.bad { color: #ff7d95; }
#quasar-presentacion .vx-step b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #2ee6c9, #8577ff); color: #07102a; font: 700 24px/1 var(--display); letter-spacing: 0; }
#quasar-presentacion .vx-t { margin: 26px 0 0; font: 600 76px/1.04 var(--display); letter-spacing: -0.04em; color: #fff; max-width: 1640px; }
#quasar-presentacion .vx .g { background: linear-gradient(95deg, #46f0d4 0%, #7fb4ff 45%, #a493ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#quasar-presentacion .vx .bad { color: #ff8aa0; }
#quasar-presentacion .vx .ti { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; flex: none; font-size: 32px; }
#quasar-presentacion .vx .ti.p { background: rgb(133 119 255 / 0.2); color: #a59bff; } #quasar-presentacion .vx .ti.v { background: rgb(18 168 143 / 0.22); color: #38d6bb; } #quasar-presentacion .vx .ti.e { background: rgb(204 120 30 / 0.24); color: #f0a252; }
#quasar-presentacion .vx .ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; flex: none; font-size: 28px; background: rgb(133 119 255 / 0.2); color: #b9b1ff; }
#quasar-presentacion .vx .ico.ok { background: rgb(47 213 139 / 0.2); color: #4be3a0; } #quasar-presentacion .vx .ico.bad { background: rgb(255 85 116 / 0.2); color: #ff7d95; }
#quasar-presentacion .vx .av { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #b8862b, #8d6418); color: #fff; font: 800 22px/1 var(--font); flex: none; }
#quasar-presentacion .vx .pdf { display: grid; place-items: center; width: 56px; height: 68px; border-radius: 10px; background: #ff5574; color: #fff; font: 800 16px/1 var(--font); flex: none; }

/* animaciones genéricas leídas desde --p */
#quasar-presentacion .vx .a-up { opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 40px)); }
#quasar-presentacion .vx .a-left { opacity: var(--p, 0); transform: translateX(calc((1 - var(--p, 0)) * -70px)); }
#quasar-presentacion .vx .a-right { opacity: var(--p, 0); transform: translateX(calc((1 - var(--p, 0)) * 50px)); }
#quasar-presentacion .vx .a-pop { opacity: min(1, calc(var(--p, 0) * 2)); transform: scale(calc(0.7 + var(--p, 0) * 0.3)); }
#quasar-presentacion .vx .a-draw { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
#quasar-presentacion .vx .a-grow { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
#quasar-presentacion .vx .a-stamp { opacity: min(1, calc(var(--p, 0) * 3)); transform: rotate(-12deg) scale(calc(2.2 - var(--p, 0) * 1.2)); }
#quasar-presentacion .vx .a-drift { opacity: min(1, calc(var(--p, 0) * 2.4)); transform: translate(calc(var(--x) * (1 - var(--p, 0))), calc(var(--y) * (1 - var(--p, 0)) + var(--p, 0) * -14px)) rotate(var(--r)); }

/* 1 · intro */
#quasar-presentacion .vx .plant { position: absolute; left: 140px; right: 140px; top: 470px; height: 420px; }
#quasar-presentacion .vx .pl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#quasar-presentacion .vx .pl-svg .road { fill: none; stroke: rgb(160 170 255 / 0.35); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; }
#quasar-presentacion .vx .pl-svg .fac path:first-child,#quasar-presentacion  .vx .pl-svg .fac rect { fill: rgb(133 119 255 / 0.16); stroke: rgb(160 170 255 / 0.45); stroke-width: 3; stroke-linejoin: round; }
#quasar-presentacion .vx .pl-svg .fac .win { fill: none; stroke: #2ee6c9; stroke-width: 6; stroke-linecap: round; opacity: 0.7; }
#quasar-presentacion .vx .pl-svg .gate rect { fill: #262c6a; stroke: rgb(160 170 255 / 0.5); stroke-width: 2; }
#quasar-presentacion .vx .pl-svg .gate .arm { fill: #f5c13d; stroke: none; }
#quasar-presentacion .vx .pl-svg .gate .led { fill: #2ee6c9; filter: drop-shadow(0 0 8px #2ee6c9); }
#quasar-presentacion .vx .walker { position: absolute; top: 236px; left: 0; display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 22px 0 8px; border-radius: 99px; background: rgb(22 27 76 / 0.92); border: 1.5px solid rgb(160 170 255 / 0.3);
  font: 700 24px/1 var(--font); white-space: nowrap; opacity: min(1, calc(var(--p, 0) * 6), calc((1 - var(--p, 0)) * 6)); transform: translateX(calc(var(--p, 0) * 1080px - 120px)); }
#quasar-presentacion .vx .walker i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; }
#quasar-presentacion .vx .walker.p i { background: rgb(133 119 255 / 0.25); color: #b3aaff; } #quasar-presentacion .walker.v i { background: rgb(18 168 143 / 0.28); color: #46e2c6; } #quasar-presentacion .walker.e i { background: rgb(204 120 30 / 0.3); color: #f6ad62; }
#quasar-presentacion .vx-q { position: absolute; left: 140px; right: 140px; bottom: 170px; text-align: center; font: 600 64px/1.1 var(--display); letter-spacing: -0.035em; color: #fff; transform-origin: 50% 50%; }

/* 2 · problema */
#quasar-presentacion .vx .chaos { position: absolute; inset: 0; }
#quasar-presentacion .vx .cx { position: absolute; padding: 22px 24px; border-radius: 20px; background: #f4f5fb; color: #1b1f45; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.85); font-size: 22px; }
#quasar-presentacion .vx .cxh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 21px/1.2 var(--font); color: #30365f; }
#quasar-presentacion .vx .cxh i { width: 18px; height: 18px; border-radius: 5px; }
#quasar-presentacion .vx .cx.sheet table { border-collapse: collapse; }
#quasar-presentacion .vx .cx.sheet td { width: 82px; height: 34px; border: 1.5px solid #d4d7e6; background: #fff; }
#quasar-presentacion .vx .cx.sheet td.red { background: #ffd2da; } #quasar-presentacion .cx.sheet td.yel { background: #fff0bf; }
#quasar-presentacion .vx .cx.mail { width: 460px; }
#quasar-presentacion .vx .cx.mail p { margin: 0 0 16px; color: #4a4f78; }
#quasar-presentacion .vx .cx.mail .att { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #e9ebf6; font-weight: 700; font-size: 19px; }
#quasar-presentacion .vx .cx.chat { width: 420px; display: flex; flex-direction: column; gap: 12px; background: #0f2a26; color: #e3efec; }
#quasar-presentacion .vx .cx.chat .bub { align-self: flex-start; padding: 12px 18px; border-radius: 18px 18px 18px 6px; background: #1c3c37; font-size: 21px; }
#quasar-presentacion .vx .cx.chat .bub.me { align-self: flex-end; background: #0f6b59; border-radius: 18px 18px 6px 18px; }
#quasar-presentacion .vx .cx.paper { width: 420px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
#quasar-presentacion .vx .cx.paper b { font: 700 24px/1.2 var(--display); letter-spacing: 0.06em; }
#quasar-presentacion .vx .cx.paper span { color: #5a5f7d; font-size: 19px; }
#quasar-presentacion .vx .cx.paper i { height: 10px; border-radius: 5px; background: #dcdde6; }
#quasar-presentacion .vx .stamp { position: absolute; right: 26px; bottom: 30px; padding: 8px 20px; border: 5px solid #e2335a; border-radius: 14px; color: #e2335a; font: 800 44px/1 var(--display); letter-spacing: 0.08em; background: rgb(255 255 255 / 0.65); }
#quasar-presentacion .vx .stamp.ok { border-color: #12985f; color: #12985f; }
#quasar-presentacion .vx .cx.folder { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; width: 430px; font-size: 22px; }
#quasar-presentacion .vx .cx.folder .ic { grid-row: span 2; width: 64px; height: 64px; color: #5a49e6; }
#quasar-presentacion .vx .cx.folder b { font-size: 24px; }
#quasar-presentacion .vx .cx.folder span { color: #db2f55; font-weight: 700; }

/* 3 · matriz */
#quasar-presentacion .vx .cols { position: absolute; left: 140px; right: 140px; top: 400px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
#quasar-presentacion .vx .col { padding: 28px; border-radius: 28px; border: 1.5px solid rgb(160 170 255 / 0.18); background: linear-gradient(180deg, rgb(26 31 76 / 0.8), rgb(17 21 56 / 0.75)); }
#quasar-presentacion .vx .colh { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; font: 600 34px/1 var(--display); }
#quasar-presentacion .vx .chip { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px; margin-top: 10px; border-radius: 18px; background: rgb(255 255 255 / 0.05); border: 1.5px solid rgb(160 170 255 / 0.14); font-weight: 700; font-size: 23px; white-space: nowrap; }
#quasar-presentacion .vx .chip > i { flex: none; display: grid; place-items: center; font-size: 26px; color: #a59bff; }
#quasar-presentacion .vx .col.v .chip > i { color: #38d6bb; } #quasar-presentacion .col.e .chip > i { color: #f0a252; }
#quasar-presentacion .vx .chip .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px; background: rgb(255 85 116 / 0.18); color: #ff9db0; font: 800 18px/1 var(--font); font-style: normal; }

/* 4 · carga */
#quasar-presentacion .vx .upw { position: absolute; left: 140px; right: 140px; top: 360px; height: 600px; }
#quasar-presentacion .vx .vphone { position: absolute; left: 0; top: 0; width: 360px; height: 560px; border-radius: 48px; padding: 14px; background: linear-gradient(160deg, #2a2f68, #10143a); border: 2px solid rgb(160 170 255 / 0.3); box-shadow: 0 50px 90px -30px rgb(0 0 0 / 0.95); }
#quasar-presentacion .vx .vphone .notch { position: absolute; left: 50%; top: 22px; width: 110px; height: 26px; margin-left: -55px; border-radius: 99px; background: #05071a; z-index: 2; }
#quasar-presentacion .vx .vps { height: 100%; padding: 62px 20px 20px; border-radius: 36px; background: #0b0e2b; display: flex; flex-direction: column; gap: 16px; }
#quasar-presentacion .vx .vph { display: flex; align-items: center; gap: 14px; }
#quasar-presentacion .vx .vph b { display: block; font-size: 19px; line-height: 1.2; white-space: nowrap; }
#quasar-presentacion .vx .vph small,#quasar-presentacion  .vx .vtask small,#quasar-presentacion  .vx .vfile small { display: block; font-size: 16px; color: #9a9fd2; white-space: nowrap; }
#quasar-presentacion .vx .vtask,#quasar-presentacion  .vx .vfile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / 0.04); border: 1.5px solid rgb(160 170 255 / 0.14); }
#quasar-presentacion .vx .vtask b,#quasar-presentacion  .vx .vfile b { display: block; font-size: 19px; white-space: nowrap; }
#quasar-presentacion .vx .vtask small.ser { color: #ffb183; font-weight: 800; }
#quasar-presentacion .vx .vfile > div { flex: 1; min-width: 0; }
#quasar-presentacion .vx .vfile .bar { display: block; height: 10px; margin-top: 10px; border-radius: 99px; background: rgb(160 170 255 / 0.15); overflow: hidden; }
#quasar-presentacion .vx .vfile .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8577ff, #2ee6c9); border-radius: inherit; }
#quasar-presentacion .vx .vbtn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; margin-top: auto; border-radius: 18px; background: rgb(47 213 139 / 0.2); color: #7ff0b8; font: 800 23px/1 var(--font); font-size: 23px; }
#quasar-presentacion .vx .vbtn .ic { font-size: 28px; }
#quasar-presentacion .vx .beam { position: absolute; left: 380px; top: 200px; width: 520px; height: 200px; overflow: visible; }
#quasar-presentacion .vx .beam path { fill: none; stroke: url(#vxg1); stroke: #2ee6c9; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 10px rgb(46 230 201 / 0.7)); }
#quasar-presentacion .vx .vdoc { position: absolute; left: calc(300px + var(--p, 0) * 600px); top: calc(270px - sin(var(--p, 0) * 3.1416) * 90px); opacity: min(1, calc(var(--p, 0) * 8), calc((1 - var(--p, 0)) * 8)); transform: scale(calc(1 - var(--p, 0) * 0.3)) rotate(calc(var(--p, 0) * 18deg)); }
#quasar-presentacion .vx .core { position: absolute; left: 820px; top: 140px; width: 320px; height: 320px; display: grid; place-items: center; }
#quasar-presentacion .vx .core .ring { position: absolute; border-radius: 50%; border: 2px solid rgb(46 230 201 / 0.4); }
#quasar-presentacion .vx .core .r1 { inset: 0; } #quasar-presentacion .core .r2 { inset: 30px; border-color: rgb(133 119 255 / 0.5); border-style: dashed; } #quasar-presentacion .core .r3 { inset: 60px; border-color: rgb(46 230 201 / 0.25); }
#quasar-presentacion .vx .core img { width: 150px; height: 150px; filter: drop-shadow(0 0 30px rgb(46 230 201 / 0.5)); }
#quasar-presentacion .vx .core .scan { position: absolute; left: 40px; right: 40px; height: 4px; top: calc(40px + var(--p, 0) * 240px); background: #2ee6c9; box-shadow: 0 0 22px 5px rgb(46 230 201 / 0.7); border-radius: 4px; opacity: min(1, calc(var(--p, 0) * 10), calc((1 - var(--p, 0)) * 10)); }
#quasar-presentacion .vx .fields { position: absolute; right: 0; top: 70px; width: 520px; display: grid; gap: 16px; }
#quasar-presentacion .vx .fh { display: flex; align-items: center; gap: 12px; font: 700 26px/1 var(--font); color: #2ee6c9; }
#quasar-presentacion .vx .fld { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 20px; background: rgb(255 255 255 / 0.05); border: 1.5px solid rgb(46 230 201 / 0.35); }
#quasar-presentacion .vx .fld span { color: #9a9fd2; font-size: 21px; }
#quasar-presentacion .vx .fld b { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .vx .fld i { font-size: 28px; color: #2ee6c9; }

/* 5 · validación */
#quasar-presentacion .vx .revw { position: absolute; left: 140px; right: 140px; top: 356px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; }
#quasar-presentacion .vx .rdoc { position: relative; height: 520px; padding: 38px 42px; border-radius: 22px; background: #f6f6f1; color: #1e2240; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.85); overflow: hidden; }
#quasar-presentacion .vx .rdh { padding-bottom: 18px; margin-bottom: 14px; border-bottom: 3px solid #1e2240; }
#quasar-presentacion .vx .rdh b { display: block; font: 700 27px/1.2 var(--display); letter-spacing: 0.05em; }
#quasar-presentacion .vx .rdh small { color: #5a5f7d; font-size: 18px; }
#quasar-presentacion .vx .rl { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1.5px dashed #cfd0dc; font-size: 21px; }
#quasar-presentacion .vx .rl span { color: #6a6f8c; }
#quasar-presentacion .vx .rl b { justify-self: start; padding: 0 8px; border-radius: 6px; font: 600 22px/1.35 var(--mono); background: rgb(46 230 201 / calc(var(--p, 0) * 0.38)); box-shadow: 0 0 0 calc(var(--p, 0) * 2px) rgb(11 155 136 / calc(var(--p, 0) * 0.8)); }
#quasar-presentacion .vx .rdoc .ln { display: block; height: 11px; margin-top: 16px; border-radius: 6px; background: #dcdde6; }
#quasar-presentacion .vx .rdoc .stamp { right: 40px; bottom: 44px; font-size: 52px; }
#quasar-presentacion .vx .rchk { display: flex; flex-direction: column; gap: 12px; }
#quasar-presentacion .vx .rvw { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 22px; background: rgb(255 255 255 / 0.04); border: 1.5px solid rgb(160 170 255 / 0.14); }
#quasar-presentacion .vx .rvw .av { background: linear-gradient(135deg, #3b6fd8, #6a4fe0); }
#quasar-presentacion .vx .rvw b { display: block; font-size: 25px; }
#quasar-presentacion .vx .rvw small { font-size: 19px; color: #9a9fd2; }
#quasar-presentacion .vx .rvw .clock { position: relative; margin-left: auto; width: 80px; height: 80px; display: grid; place-items: center; }
#quasar-presentacion .vx .rvw .clock svg { position: absolute; inset: 0; }
#quasar-presentacion .vx .rvw .clock .t { fill: none; stroke: rgb(160 170 255 / 0.18); stroke-width: 8; }
#quasar-presentacion .vx .rvw .clock .a { fill: none; stroke: #2ee6c9; stroke-width: 8; stroke-linecap: round; }
#quasar-presentacion .vx .rvw .clock b { font: 700 22px/1 var(--display); }
#quasar-presentacion .vx .ck { display: flex; align-items: center; gap: 18px; padding: 13px 22px; border-radius: 20px; background: rgb(255 255 255 / 0.04); border: 1.5px solid rgb(160 170 255 / 0.14); font-size: 24px; font-weight: 600; }
#quasar-presentacion .vx .ck .bx { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 2.5px solid rgb(160 170 255 / 0.4); color: transparent; font-size: 24px; flex: none; }
#quasar-presentacion .vx .ck .bx.f-on { border-color: #2fd58b; background: color-mix(in srgb, #2fd58b calc(var(--p, 0) * 100%), transparent); color: rgb(5 37 22 / var(--p, 0)); }
#quasar-presentacion .vx .ck .bx .ic { stroke-width: 3; }
#quasar-presentacion .vx .res { display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-radius: 22px; background: linear-gradient(100deg, rgb(47 213 139 / 0.24), rgb(46 230 201 / 0.08)); border: 1.5px solid rgb(47 213 139 / 0.45); color: #7ff0b8; font-size: 40px; transform-origin: 0 50%; }
#quasar-presentacion .vx .res b { display: block; font-size: 26px; color: #effff6; }
#quasar-presentacion .vx .res small { font-size: 20px; color: #a6e9cb; }

/* 6 · alertas */
#quasar-presentacion .vx .tlw { position: absolute; left: 140px; right: 140px; top: 380px; height: 560px; }
#quasar-presentacion .vx .tlx { position: absolute; left: 380px; right: 40px; top: 0; height: 40px; }
#quasar-presentacion .vx .tlx .mk { position: absolute; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font: 700 22px/1 var(--font); color: #c3c6ee; white-space: nowrap; }
#quasar-presentacion .vx .tlx .mk i { width: 2px; height: 440px; order: 2; background: repeating-linear-gradient(180deg, rgb(160 170 255 / 0.3) 0 8px, transparent 8px 16px); }
#quasar-presentacion .vx .tlx .m0 { left: 0%; } #quasar-presentacion .tlx .m1 { left: 33%; } #quasar-presentacion .tlx .m2 { left: 66%; } #quasar-presentacion .tlx .m3 { left: 100%; color: #ff9db0; }
#quasar-presentacion .vx .lane { position: absolute; left: 0; right: 40px; height: 110px; display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: center; }
#quasar-presentacion .vx .lane.l1 { top: 146px; } #quasar-presentacion .lane.l2 { top: 336px; }
#quasar-presentacion .vx .lh { display: flex; align-items: center; gap: 18px; }
#quasar-presentacion .vx .lh b { display: block; font-size: 27px; }
#quasar-presentacion .vx .lh small { font-size: 20px; color: #9a9fd2; }
#quasar-presentacion .vx .track { position: relative; height: 14px; border-radius: 99px; background: rgb(160 170 255 / 0.14); }
#quasar-presentacion .vx .track .fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #2fd58b, #f5c13d 55%, #ff8b4a 80%, #ff5574); }
#quasar-presentacion .vx .l1 .track .fill { background: linear-gradient(90deg, #2fd58b, #f5c13d 55%, #2fd58b 70%); }
#quasar-presentacion .vx .track .dot { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; border: 6px solid #2ee6c9; box-shadow: 0 0 20px rgb(46 230 201 / 0.8); }
#quasar-presentacion .vx .l2 .track .dot { border-color: #ff8b4a; box-shadow: 0 0 20px rgb(255 139 74 / 0.8); }
#quasar-presentacion .vx .nt,#quasar-presentacion  .vx .ok1,#quasar-presentacion  .vx .bad1 { position: absolute; display: flex; align-items: center; gap: 16px; width: 390px; padding: 16px 20px; border-radius: 20px; background: #171c50; border: 1.5px solid rgb(160 170 255 / 0.25); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.85); }
#quasar-presentacion .vx .nt b,#quasar-presentacion  .vx .ok1 b,#quasar-presentacion  .vx .bad1 b { display: block; font-size: 22px; line-height: 1.25; }
#quasar-presentacion .vx .nt small,#quasar-presentacion  .vx .ok1 small,#quasar-presentacion  .vx .bad1 small { font-size: 18px; color: #9a9fd2; }
#quasar-presentacion .vx .nt.n1 { left: 185px; top: 46px; } #quasar-presentacion .nt.n2 { left: 588px; top: 46px; } #quasar-presentacion .nt.n3 { left: 990px; top: 46px; }
#quasar-presentacion .vx .nt { transform-origin: 50% 0; }
#quasar-presentacion .vx .ok1 { left: 1190px; top: 240px; width: 430px; border-color: rgb(47 213 139 / 0.5); transform-origin: 0 50%; }
#quasar-presentacion .vx .bad1 { left: 1190px; top: 430px; width: 430px; border-color: rgb(255 85 116 / 0.55); background: #2a1638; }

/* 7 · portería */
#quasar-presentacion .vx .gw { position: absolute; left: 140px; right: 140px; top: 360px; height: 640px; }
#quasar-presentacion .vx .gsvg { position: absolute; left: 0; top: 60px; width: 1100px; height: 420px; overflow: visible; }
#quasar-presentacion .vx .gsvg .road { fill: none; stroke: rgb(160 170 255 / 0.25); stroke-width: 70; }
#quasar-presentacion .vx .gsvg .lane-d { fill: none; stroke: rgb(255 255 255 / 0.25); stroke-width: 4; stroke-dasharray: 30 26; }
#quasar-presentacion .vx .gsvg .post { fill: #262c6a; stroke: rgb(160 170 255 / 0.5); stroke-width: 2; }
#quasar-presentacion .vx .gsvg .arm { transform: rotate(calc(var(--p, 0) * -78deg)); }
#quasar-presentacion .vx .gsvg .arm rect { fill: #f4f5fb; }
#quasar-presentacion .vx .gsvg .arm .stripes { stroke: #ff5574; stroke-width: 12; }
#quasar-presentacion .vx .gsvg .led { fill: #8f94c8; }
#quasar-presentacion .vx .gsvg .led[data-s="ok"] { fill: #2fd58b; filter: drop-shadow(0 0 12px #2fd58b); }
#quasar-presentacion .vx .gsvg .led[data-s="bad"] { fill: #ff5574; filter: drop-shadow(0 0 12px #ff5574); }
#quasar-presentacion .vx .veh { position: absolute; top: 300px; display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 26px 0 16px; border-radius: 24px; background: #171c50; border: 2px solid rgb(160 170 255 / 0.3); box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.8); white-space: nowrap; }
#quasar-presentacion .vx .veh b { font: 700 28px/1 var(--display); }
#quasar-presentacion .vx .veh small { font-size: 19px; color: #9a9fd2; }
#quasar-presentacion .vx .veh.v1 { left: calc(-380px + var(--p, 0) * 1500px); opacity: min(1, calc(var(--p, 0) * 8)); }
#quasar-presentacion .vx .veh.v2 { left: calc(-420px + var(--p, 0) * 560px); opacity: min(1, calc(var(--p, 0) * 8)); }
#quasar-presentacion .vx .gtab { position: absolute; right: 0; top: 0; width: 520px; padding: 22px; border-radius: 34px; background: linear-gradient(160deg, #262b64, #10143a); border: 2px solid rgb(160 170 255 / 0.3); box-shadow: 0 50px 90px -30px rgb(0 0 0 / 0.95); }
#quasar-presentacion .vx .gts { position: relative; height: 250px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgb(46 230 201 / 0.16), transparent 60%), #05071a; overflow: hidden; }
#quasar-presentacion .vx .gts .qrbox { width: 170px; height: 170px; padding: 12px; border-radius: 16px; background: #fff; }
#quasar-presentacion .vx .gts .qrbox svg { width: 100%; height: 100%; }
#quasar-presentacion .vx .gts .las { position: absolute; left: 40px; right: 40px; height: 4px; top: calc(20px + var(--p, 0) * 200px); background: #2ee6c9; box-shadow: 0 0 20px 4px rgb(46 230 201 / 0.75); border-radius: 4px; }
#quasar-presentacion .vx .gtr { position: relative; height: 120px; margin-top: 16px; }
#quasar-presentacion .vx .gv { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-radius: 22px; font: 600 26px/1.15 var(--display); opacity: var(--p, 0); }
#quasar-presentacion .vx .gv .ic { font-size: 50px; stroke-width: 2.2; }
#quasar-presentacion .vx .gv b { display: block; font: 600 30px/1.1 var(--display); }
#quasar-presentacion .vx .gv small { font: 500 19px/1.3 var(--font); }
#quasar-presentacion .vx .gv.idle { background: rgb(255 255 255 / 0.05); color: #9a9fd2; }
#quasar-presentacion .vx .gv.ok { background: rgb(47 213 139 / 0.2); color: #7ff0b8; }
#quasar-presentacion .vx .gv.ok small { color: #b5f1d3; }
#quasar-presentacion .vx .gv.bad { background: rgb(255 85 116 / 0.2); color: #ff9db0; }
#quasar-presentacion .vx .gv.bad small { color: #ffc4cf; }
#quasar-presentacion .vx .gnote { position: absolute; right: 0; top: 460px; display: flex; align-items: center; gap: 16px; width: 520px; padding: 18px 22px; border-radius: 22px; background: #171c50; border: 1.5px solid rgb(160 170 255 / 0.25); }
#quasar-presentacion .vx .gnote b { display: block; font-size: 23px; }
#quasar-presentacion .vx .gnote small { font-size: 19px; color: #9a9fd2; }

/* 8 · tablero */
#quasar-presentacion .vx .dw { position: absolute; left: 140px; right: 140px; top: 366px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 24px; height: 540px; }
#quasar-presentacion .vx .vk { padding: 20px 28px; border-radius: 26px; border: 1.5px solid rgb(160 170 255 / 0.16); background: linear-gradient(180deg, rgb(26 31 76 / 0.8), rgb(17 21 56 / 0.75)); }
#quasar-presentacion .vx .vk span { display: flex; align-items: center; gap: 12px; font-size: 22px; color: #a6abdd; }
#quasar-presentacion .vx .vk b { display: block; margin-top: 8px; font: 600 62px/1 var(--display); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
#quasar-presentacion .vx .vk b i { font-style: normal; }
#quasar-presentacion .vx .vk em { display: block; margin-top: 6px; font-size: 19px; font-style: normal; color: #8f94c8; }
#quasar-presentacion .vx .dchart,#quasar-presentacion  .vx .daud { min-height: 0; overflow: hidden; padding: 22px 28px; border-radius: 26px; border: 1.5px solid rgb(160 170 255 / 0.16); background: linear-gradient(180deg, rgb(26 31 76 / 0.8), rgb(17 21 56 / 0.75)); }
#quasar-presentacion .vx .dchart { grid-column: span 2; display: flex; flex-direction: column; }
#quasar-presentacion .vx .dch b { display: block; font-size: 26px; }
#quasar-presentacion .vx .dch small { font-size: 19px; color: #9a9fd2; }
#quasar-presentacion .vx .dchart svg { flex: 1; width: 100%; margin-top: 14px; overflow: visible; }
#quasar-presentacion .vx .dchart .meta { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 2.5; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
#quasar-presentacion .vx .dchart .line { fill: none; stroke: #8577ff; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#quasar-presentacion .vx .dchart .area { fill: rgb(133 119 255 / 0.18); opacity: var(--p, 0); }
#quasar-presentacion .vx .daud .al { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; padding: 7px 0; border-top: 1.5px solid rgb(160 170 255 / 0.1); }
#quasar-presentacion .vx .daud .al:first-of-type { margin-top: 12px; }
#quasar-presentacion .vx .daud .al i { grid-row: span 2; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: #2ee6c9; }
#quasar-presentacion .vx .daud .al b { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .vx .daud .al small { font: 500 17px/1.3 var(--mono); color: #8f94c8; }

/* 9 · cierre */
#quasar-presentacion .vx .endw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 60px; }
#quasar-presentacion .vx .endw .elogo { width: 560px; height: auto; transform-origin: 50% 50%; }
#quasar-presentacion .vx .endw .vx-t { margin-top: 40px; font-size: 92px; }
#quasar-presentacion .vx .echips { display: flex; gap: 16px; margin-top: 44px; }
#quasar-presentacion .vx .echips span { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px; border-radius: 99px; border: 1.5px solid rgb(160 170 255 / 0.25); background: rgb(255 255 255 / 0.04); font: 700 25px/1 var(--font); }
#quasar-presentacion .vx .echips .ic { font-size: 28px; color: #2ee6c9; }
#quasar-presentacion .vx .ecta { display: flex; align-items: center; gap: 24px; margin-top: 50px; padding: 18px 20px 18px 34px; border-radius: 22px; background: linear-gradient(120deg, rgb(46 230 201 / 0.16), rgb(133 119 255 / 0.18)); border: 1.5px solid rgb(46 230 201 / 0.45); }
#quasar-presentacion .vx .ecta b { font: 700 32px/1 var(--display); }
#quasar-presentacion .vx .ecta span { padding: 14px 22px; border-radius: 14px; background: rgb(7 10 28 / 0.6); font-size: 24px; font-weight: 600; color: #cfd3ff; }
#quasar-presentacion .vx .esur { display: flex; align-items: center; gap: 18px; margin-top: 46px; font-size: 24px; color: #a6abdd; }
#quasar-presentacion .vx .esur img { width: 260px; height: auto; }
#quasar-presentacion .vx-brand { opacity: calc(var(--p, 0) * 0.85); }

/* reproductor */
#quasar-presentacion .vbig { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; height: 72px; padding: 0 30px 0 12px; border-radius: 99px; border: 0;
  background: linear-gradient(120deg, #4ff3d8, #1fc9ae); color: #04221d; font: 800 17px/1 var(--font); cursor: pointer; box-shadow: 0 24px 60px -18px rgb(46 230 201 / 0.8); transition: transform 0.2s var(--ease), opacity 0.3s; }
#quasar-presentacion .vbig .ic { display: grid; place-items: center; width: 50px; height: 50px; padding: 14px; border-radius: 50%; background: #04221d; color: #4ff3d8; box-sizing: border-box; }
#quasar-presentacion .vbig:hover { transform: translate(-50%, -50%) scale(1.04); }
#quasar-presentacion .vplayer.started .vbig { opacity: 0; pointer-events: none; }
#quasar-presentacion .vplayer:not(.started) .vstage::after { content: ""; position: absolute; inset: 0; background: rgb(7 10 28 / 0.35); pointer-events: none; }
#quasar-presentacion .vctl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
#quasar-presentacion .vctl button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; flex: none; }
#quasar-presentacion .dark .vctl button { background: rgb(255 255 255 / 0.05); border-color: rgb(160 170 255 / 0.2); color: #fff; }
#quasar-presentacion .vctl button .ic { width: 18px; height: 18px; }
#quasar-presentacion .vctl .vpp .pa,#quasar-presentacion  .vplayer.playing .vctl .vpp .pl { display: none; }
#quasar-presentacion .vplayer.playing .vctl .vpp .pa { display: inline; }
#quasar-presentacion .vtime { font: 600 13px/1 var(--mono); color: var(--muted); min-width: 40px; font-variant-numeric: tabular-nums; }
#quasar-presentacion .vbar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: rgb(30 34 90 / 0.12); cursor: pointer; touch-action: none; }
#quasar-presentacion .dark .vbar { background: rgb(160 170 255 / 0.16); }
#quasar-presentacion .vbar .cur { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, #2ee6c9, #8577ff); }
#quasar-presentacion .vbar .cur::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3), 0 0 0 3px #5a49e6; }
#quasar-presentacion .vbar .ticks i { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; background: rgb(90 73 230 / 0.35); }
#quasar-presentacion .vchaps { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
#quasar-presentacion .vchaps button { display: grid; gap: 4px; padding: 10px 10px 9px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; font: 700 12.5px/1.2 var(--font); color: var(--ink-2); transition: border-color 0.2s, background 0.2s; }
#quasar-presentacion .vchaps button small { font: 600 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; }
#quasar-presentacion .vchaps button.on { border-color: rgb(90 73 230 / 0.5); background: rgb(90 73 230 / 0.07); color: var(--ink); }
#quasar-presentacion .vplayer:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 24px; background: #070a1c; }
#quasar-presentacion .vplayer:fullscreen .vstage { max-height: calc(100vh - 140px); aspect-ratio: 16 / 9; margin: 0 auto; width: min(100%, calc((100vh - 140px) * 16 / 9)); }
@media (max-width: 900px) { #quasar-presentacion .vchaps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #quasar-presentacion .vstage { border-radius: 14px; }
  #quasar-presentacion .vbig { height: 54px; padding: 0 20px 0 8px; font-size: 14px; }
  #quasar-presentacion .vbig .ic { width: 38px; height: 38px; padding: 10px; }
  #quasar-presentacion .vchaps { display: none; }
  #quasar-presentacion .vctl { gap: 10px; }
}

/* exportación de video */
#quasar-presentacion.capture-video { overflow: hidden; }
#quasar-presentacion.capture-video .qh,#quasar-presentacion.capture-video .band,#quasar-presentacion.capture-video #top > section:not(#como),#quasar-presentacion.capture-video footer,#quasar-presentacion.capture-video #como .sec-head,#quasar-presentacion.capture-video #como .steps,#quasar-presentacion.capture-video .vctl,#quasar-presentacion.capture-video .vchaps,#quasar-presentacion.capture-video .vbig { display: none !important; }
#quasar-presentacion.capture-video #como { padding: 0; background: #070a1c; }
#quasar-presentacion.capture-video #como .wrap { max-width: none; padding: 0; }
#quasar-presentacion.capture-video .vstage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
#quasar-presentacion.capture-video .vplayer:not(.started) .vstage::after { display: none; }
#quasar-presentacion #como .sec-head { max-width: 900px; }
#quasar-presentacion #como .vplayer { margin-top: 48px; }

#quasar-presentacion .vsub { display: none; }
@media (max-width: 640px) {
  #quasar-presentacion .vx-cap { display: none; }
  #quasar-presentacion .vsub { display: block; min-height: 3.1em; margin: 12px 4px 0; text-align: center; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
}