/* Demo animada de la portada: estudio de Spectra (grande) + OBS en directo (pequeña).
   Se diseña a 1000×600 y se escala entera para que se vea igual en cualquier ancho. */
.live-demo { margin: 56px auto 0; max-width: 1040px; }
.ld-frame { position: relative; width: 100%; aspect-ratio: 1000 / 600; overflow: hidden; container-type: inline-size;
  /* Es una ilustración: ni se selecciona texto ni se puede hacer clic dentro. */
  user-select: none; -webkit-user-select: none; pointer-events: none; cursor: default; }
/* tan(atan2()) convierte 100cqw/1000px en un número: escala solo con CSS; el script la ajusta en navegadores antiguos. */
.ld-stage { --s-css: tan(atan2(100cqw, 1000px)); position: absolute; left: 0; top: 0; width: 1000px; height: 600px; transform-origin: 0 0; transform: scale(var(--s, var(--s-css, 1))); text-align: left; }

/* Ventana del estudio, imitando la herramienta real */
.ld-studio { position: absolute; left: 0; top: 0; z-index: 1; width: 800px; height: 520px; display: flex; flex-direction: column; background: #101116; border-color: #2b2c37; }
.ld-top { height: 44px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #17181f; border-bottom: 1px solid #2b2c37; font-size: 11.5px; font-weight: 600; color: #b0b3c1; white-space: nowrap; }
.ld-brand { display: inline-flex; align-items: center; gap: 6px; font-family: 'Quicksand', 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #b9a2ff; margin-right: 4px; }
.ld-brand img { width: 22px; height: 22px; object-fit: contain; }
.ld-chan { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; background: #1e1f28; border: 1px solid #2b2c37; color: #f4f4f7; }
.ld-chan em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: #3ddc97; }
.ld-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: #1e1f28; border: 1px solid #2b2c37; }
.ld-pill i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 6px #3ddc97; }
.ld-sp { flex: 1; }
.ld-tb { height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 7px; border: 1px solid #3b3c4a; }
.ld-tb.red { border-color: rgba(255,77,109,.4); color: #ff8fa3; background: rgba(255,77,109,.12); }
.ld-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(155,92,255,.2); color: #b98bff; font-weight: 800; font-size: 11px; }
.ld-body { flex: 1; display: grid; grid-template-columns: 58px 196px 1fr; min-height: 0; }
.ld-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 5px; background: #17181f; border-right: 1px solid #2b2c37; }
.ld-rail span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 8px; font-size: 8.5px; font-weight: 600; color: #8d90a2; transition: background .2s, color .2s; }
.ld-rail .i { width: 16px; height: 16px; }
.ld-rail span.on { background: rgba(155,92,255,.16); color: #b98bff; }
.ld-panel { position: relative; background: #17181f; border-right: 1px solid #2b2c37; overflow: hidden; }
.ld-view { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: opacity .25s, transform .25s; }
.ld-view.snd { opacity: 0; transform: translateX(10px); }
.ld-panel.sounds .ld-view.lib { opacity: 0; transform: translateX(-10px); }
.ld-panel.sounds .ld-view.snd { opacity: 1; transform: none; }
.ld-ph { font-size: 13px; color: #f4f4f7; }
.ld-usage { display: flex; justify-content: space-between; font-size: 10px; color: #8d90a2; }
.ld-bar { height: 5px; border-radius: 4px; background: #272833; overflow: hidden; }
.ld-bar i { display: block; width: 18%; height: 100%; background: #9b5cff; }
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 2px; }
.ld-tile { border-radius: 9px; background: #1e1f28; border: 1px solid #2b2c37; padding: 5px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, box-shadow .2s; }
.ld-tile small { font-size: 9px; color: #8d90a2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-tile .t-img { aspect-ratio: 4 / 3; border-radius: 6px; display: grid; place-items: center; font-size: 22px; color: #fff; }
.t-img.t2 { background: linear-gradient(135deg, #6ee7ff, #7c4dff); }
.t-img.t3 { background: linear-gradient(135deg, #ffd27a, #e8a33a); }
.t-img.t4 { background: linear-gradient(135deg, #ff9fc4, #9b5cff); }
.ld-tile.grab { border-color: #9b5cff; box-shadow: 0 0 0 3px rgba(155,92,255,.25); }
.meme-tile .meme { border-radius: 6px; }
.ld-stop { padding: 7px; border-radius: 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: #ff8fa3; border: 1px solid rgba(255,77,109,.4); background: rgba(255,77,109,.1); }
.ld-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-pads .pad { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 9px; background: #1e1f28; border: 1px solid #2b2c37; font-size: 16px; transition: all .15s; }
.ld-pads .pad b { font-size: 10.5px; font-weight: 600; color: #b0b3c1; }
.ld-pads .pad.on { border-color: #9b5cff; background: rgba(155,92,255,.16); box-shadow: 0 0 0 3px rgba(155,92,255,.18); }
.ld-pads .pad.on b { color: #b98bff; }

.ld-canvas { position: relative; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; background: repeating-conic-gradient(#121119 0 25%, #0f0e15 0 50%) 0 0 / 20px 20px; }
.ld-views { align-self: center; display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #17181f; border: 1px solid #2b2c37; font-size: 10.5px; font-weight: 600; color: #8d90a2; }
.ld-views span { padding: 4px 10px; border-radius: 7px; }
.ld-views span.on { background: #272833; color: #f4f4f7; }
.ld-canvas-label { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; color: #ff8fa3; background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.35); }
.ld-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: ldblink 1.4s infinite; }
@keyframes ldblink { 50% { opacity: .3; } }
#ld-big { border-radius: 4px; outline: 1.5px solid rgba(255,77,109,.6); }

/* Ventana de OBS */
.ld-obs { position: absolute; z-index: 5; left: 610px; top: 318px; width: 390px; box-shadow: 0 30px 70px rgba(0,0,0,.75); border-color: #4a4660; }
#ld-small .hud-hp b { font-size: 7px; }
#ld-small .hud-hp i { height: 4px; }

/* El meme: formato clásico de texto arriba y abajo */
.meme { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(circle at 50% 55%, #ffd36b 0 30%, #ff9a4d 60%, #e0459b 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4% 3%; }
.meme .me { font-size: 34cqw; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.meme .mt, .meme .mb { font-family: 'Anton', 'Impact', 'Arial Black', sans-serif; font-size: 11.5cqw; line-height: 1; color: #fff; letter-spacing: .3px; text-align: center;
  -webkit-text-stroke: .9cqw #000; paint-order: stroke fill; text-shadow: 0 .5cqw 0 #000; }

.ld-item { position: absolute; left: 30%; top: 22%; width: 34%; z-index: 3;
  opacity: 0; transform: scale(.85); transition: left 1s cubic-bezier(.4,0,.2,1), top 1s cubic-bezier(.4,0,.2,1), opacity .25s, transform .3s cubic-bezier(.3,1.4,.5,1); }
.ld-item .meme { box-shadow: 0 14px 34px rgba(0,0,0,.45); border: 2px solid #fff; }
.ld-item.show { opacity: 1; transform: none; }
.ld-sel { position: absolute; inset: -6px; border: 1.5px solid #9b5cff; border-radius: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ld-sel::before, .ld-sel::after { content: ''; position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid #9b5cff; border-radius: 2px; }
.ld-sel::before { left: -5px; top: -5px; }
.ld-sel::after { right: -5px; bottom: -5px; }
.ld-item.selected .ld-sel { opacity: 1; }
#ld-small .ld-item .meme { border-width: 1px; border-radius: 5px; }

.ld-sound { position: absolute; left: 50%; top: 80%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(14,11,24,.9); border: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 600; opacity: 0; transform: translateX(-50%) scale(.85); transition: opacity .25s, transform .3s; }
.ld-sound .i { width: 15px; height: 15px; color: #6ee7ff; }
.ld-sound em { width: 3px; height: 11px; border-radius: 2px; background: #6ee7ff; animation: ldeq .6s infinite alternate; }
.ld-sound em:nth-of-type(2) { animation-delay: .2s; }
.ld-sound em:nth-of-type(3) { animation-delay: .4s; }
@keyframes ldeq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ld-sound.show { opacity: 1; transform: translateX(-50%); }
#ld-small .ld-sound { font-size: 8px; padding: 3px 7px; gap: 3px; }
#ld-small .ld-sound .i { width: 9px; height: 9px; }
#ld-small .ld-sound em { height: 7px; width: 2px; }

.ld-ghost { position: absolute; left: 0; top: 0; width: 80px; z-index: 20; opacity: 0; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.ld-ghost .meme { border: 2px solid #9b5cff; }
.ld-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 30; transition: transform var(--d, .8s) cubic-bezier(.45,0,.2,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.ld-cursor path { transition: fill .1s; }
.ld-cursor.down path { fill: #d9c6ff; }
.ld-toast { position: absolute; left: 610px; top: 272px; z-index: 25; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #1b1a25; border: 1px solid rgba(52,211,153,.45); color: #f5f4f8; font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.ld-toast::before { content: '✓'; color: #34d399; font-weight: 900; }
.ld-toast.show { opacity: 1; transform: none; }

.ld-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 0; }
.ld-steps span { display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px 7px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; font-weight: 500; transition: all .3s; }
.ld-steps em { font-style: normal; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); font-size: 11px; font-weight: 700; color: var(--text-2); transition: all .3s; }
.ld-steps span.on { color: var(--text); border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.1); }
.ld-steps span.on em { background: var(--violet); color: #fff; }
.btn { white-space: nowrap; }
@media (max-width: 420px) {
  .nav-cta .btn-primary { padding: 0 12px; font-size: 13px; }
  .brand { font-size: 19px; }
}
@media (max-width: 640px) {
  .live-demo { margin-top: 40px; }
  .ld-steps span:not(.on) { display: none; }
}