<!doctype html>
<html lang="es" data-theme="dark">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Wiskil — AI Video Studio</title>
<meta name="description" content="Crea videos con IA en Wiskil.">
<link rel="icon" type="image/png" href="assets/images/wiskil-icon.png"><link rel="apple-touch-icon" href="assets/images/wiskil-icon.png">
<script>try{const t=localStorage.getItem('wiskil_theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark')}catch(e){}</script>
<style>
:root{--bg:#020704;--surface:#07110a;--surface2:#0a1710;--surface3:#0e2015;--line:rgba(126,211,137,.16);--line2:rgba(126,211,137,.28);--text:#f4faf4;--muted:#96aa9a;--green:#65d66f;--green2:#35bd68;--green3:#b7f39a;--danger:#ff7979;--shadow:0 22px 70px rgba(0,0,0,.28);--input:#020805;--stage:#020604}
html[data-theme="light"]{--bg:#f4faf5;--surface:#ffffff;--surface2:#f7fcf8;--surface3:#ecf7ef;--line:#d5e7d9;--line2:#b8d9c0;--text:#142018;--muted:#617467;--green:#28ad5f;--green2:#128d4b;--green3:#0d7a40;--danger:#c83d45;--shadow:0 18px 55px rgba(30,80,46,.09);--input:#f8fcf9;--stage:#eaf5ed}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 12% 0,rgba(39,174,88,.16),transparent 28%),radial-gradient(circle at 88% 8%,rgba(80,221,126,.08),transparent 28%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;transition:background .22s,color .22s}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.shell{width:min(1480px,calc(100% - 28px));margin:auto}.topbar{height:66px;position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}.nav{height:100%;display:flex;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:9px}.brand-icon-img{width:39px;height:39px;object-fit:contain}.brand-name-img{height:36px;max-width:175px;object-fit:contain}.workgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:10px;align-items:start}.side-recent{border:1px solid var(--line);border-radius:17px;background:var(--surface);padding:10px;box-shadow:var(--shadow)}.brand-fallback{display:none;font-size:22px;font-weight:950;letter-spacing:-1px}.brand-fallback span{color:var(--green2)}.navlinks{display:flex;gap:4px}.navlinks button{border:0;background:transparent;color:var(--muted);padding:9px 10px;border-radius:10px;font-weight:800}.navlinks button:hover{background:var(--surface3);color:var(--text)}.spacer{flex:1}.lang-switch{display:flex;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--surface)}.lang-btn{border:0;background:transparent;color:var(--muted);padding:5px 7px;border-radius:7px;font-size:10px;font-weight:950}.lang-btn.active{background:var(--surface3);color:var(--green3)}.theme-toggle{width:58px;height:31px;border:1px solid var(--line2);border-radius:999px;background:var(--surface3);padding:3px;position:relative}.theme-knob{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green2));color:#061008;font-size:13px;transition:.2s;box-shadow:0 5px 12px rgba(0,0,0,.18)}html[data-theme="light"] .theme-knob{transform:translateX(26px);background:white;color:#e38a1c;box-shadow:0 4px 12px rgba(20,80,40,.14)}.coin-inline{width:16px;height:16px;object-fit:contain;vertical-align:-3px}.balance-inline{display:inline-flex;align-items:center;gap:6px}.credits{border:1px solid var(--line2);background:var(--surface);color:var(--green3);padding:8px 11px;border-radius:11px;font-weight:950;min-width:62px}.btn{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:11px;padding:9px 12px;font-weight:900}.btn-primary{border:0;background:linear-gradient(100deg,var(--green),var(--green2));color:#061008}.user-chip{display:none;position:relative}.user-chip.show{display:block}.user-trigger{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 9px 4px 4px}.user-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--green),var(--green2));color:#071008;font-weight:950}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-copy strong{display:block;max-width:132px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.user-caret{font-size:8px;color:var(--muted)}.user-menu{display:none;position:absolute;right:0;top:48px;width:245px;padding:8px;border:1px solid var(--line);background:var(--surface);border-radius:16px;box-shadow:var(--shadow)}.user-menu.show{display:block}.user-menu-head{padding:10px;border-bottom:1px solid var(--line);margin-bottom:5px}.user-menu-head strong,.user-menu-head small{display:block}.user-menu-head small{color:var(--muted);font-size:10px;margin-top:4px}.user-menu button{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:10px;border-radius:9px;font-weight:800}.user-menu button:hover{background:var(--surface3)}.user-menu .danger{color:var(--danger)}
.app{padding:14px 0 48px}.studio-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.studio-intro h1{margin:0;font-size:clamp(23px,3vw,36px);letter-spacing:-1.6px}.studio-intro p{margin:4px 0 0;color:var(--muted);font-size:12px}.pro-nudge{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);background:var(--surface);padding:9px 11px;border-radius:13px}.pro-nudge span{font-size:11px;color:var(--muted)}.studio-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:12px}.prompt-row{display:grid;grid-template-columns:minmax(340px,1.75fr) minmax(260px,.8fr);gap:10px}.promptbox{width:100%;height:76px;resize:none;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:14px;padding:11px 12px;outline:0;line-height:1.42}.promptbox:focus,.field:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}.prompt-side{border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:9px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.mini-label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:950;margin-bottom:5px}.field{width:100%;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:10px;padding:8px 9px;outline:0;font-weight:750;font-size:12px}.magic{height:35px;border:1px solid var(--line2);background:var(--surface3);color:var(--green3);border-radius:10px;padding:0 10px;font-size:11px;font-weight:950}.count{grid-column:1/-1;color:var(--muted);font-size:9px}.toolbar{display:grid;grid-template-columns:1.05fr .72fr .85fr 1.05fr .9fr 1.05fr minmax(145px,1.15fr);gap:8px;margin-top:9px;align-items:end}.control{min-width:0}.generate{height:37px;border:0;border-radius:10px;background:linear-gradient(100deg,var(--green),var(--green2));color:#061008;font-weight:950;padding:0 12px;display:flex;justify-content:center;align-items:center;gap:7px}.generate small{font-size:9px;font-weight:850;opacity:.7}.audio-extra{display:none;margin-top:8px;border:1px solid var(--line);background:var(--surface2);border-radius:12px;padding:9px;grid-template-columns:1fr .75fr;gap:8px}.audio-extra.show{display:grid}.audio-help{grid-column:1/-1;color:var(--muted);font-size:10px}.quality-note{margin-top:4px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{margin-top:10px;border:1px solid var(--line);border-radius:17px;background:var(--stage);overflow:hidden}.stage-head{height:45px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface2)}.stage-head h2{margin:0;font-size:15px}.stage-status{color:var(--muted);font-size:10px}.stage-spacer{flex:1}.status-pill{padding:5px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--green3);font-size:9px;font-weight:950}.cancel-btn{display:none;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));background:transparent;color:var(--danger);border-radius:9px;padding:6px 9px;font-size:9px;font-weight:900}.cancel-btn.show{display:inline-flex}.stage-view{height:clamp(320px,43vh,500px);position:relative;display:grid;place-items:center;overflow:hidden;padding:10px}.float-btn{display:none;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:9px;padding:6px 9px;font-size:9px;font-weight:900}.float-btn.show{display:inline-flex}.main-video-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#000;overflow:hidden}.empty-state{display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted)}.empty-orb{width:58px;height:58px;border-radius:18px;margin:auto auto 10px;display:grid;place-items:center;background:var(--surface3);color:var(--green3);font-size:25px}.empty-state h3{margin:0 0 5px;color:var(--text)}.empty-state p{margin:0;font-size:11px}.progress-wrap{
  display:none;
  width:min(620px,88%);
  min-height:235px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:19px;
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  backdrop-filter:blur(12px);
  place-items:center;
  text-align:center
}
.progress-wrap.show{display:grid}
.generation-loading{display:grid;place-items:center;text-align:center}
.generation-loading strong{font-size:20px;margin-top:18px}
.progress-sub{color:var(--muted);font-size:11px;margin-top:8px;max-width:430px;line-height:1.5}
.gen-spinner{
  width:84px;
  height:84px;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from -6deg,
      var(--green3) 0deg 12deg,
      transparent 12deg 28deg
    );
  -webkit-mask:radial-gradient(circle,transparent 0 49%,#000 51% 100%);
  mask:radial-gradient(circle,transparent 0 49%,#000 51% 100%);
  animation:wiskilGenSpin 1s linear infinite;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--green) 25%,transparent))
}
@keyframes wiskilGenSpin{to{transform:rotate(360deg)}}
.generation-error{display:grid;place-items:center;max-width:480px}
.generation-error-icon{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--danger) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 38%,transparent);
  color:var(--danger);font-size:28px;font-weight:950
}
.generation-error strong{font-size:19px}
.generation-error p{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.gen-spinner{animation-duration:2.2s}}.main-video-wrap{display:none;width:100%;height:100%}.main-video-wrap.show{display:flex;align-items:center;justify-content:center}.main-video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#000}.recent{margin-top:0}.recent-head{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 8px;gap:8px}.recent-head h3{font-size:12px;margin:0}.recent-head p{display:block;margin:4px 0 0;color:var(--muted);font-size:9px;line-height:1.4}.recent-link{font-size:9px;color:var(--green3);font-weight:900;white-space:nowrap}.recent-row{display:grid;grid-template-columns:1fr;gap:8px}.recent-card{height:82px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);overflow:hidden;display:grid;grid-template-columns:92px 1fr;cursor:pointer}.recent-thumb{position:relative;background:linear-gradient(135deg,#15572f,#07170e);overflow:hidden}.recent-thumb:before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;background:#8ce276;right:7px;top:8px}.recent-thumb:after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:#061008;clip-path:polygon(0 100%,38% 22%,58% 70%,80% 15%,100% 100%)}.recent-state{position:absolute;z-index:2;left:5px;top:5px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.65);color:white;font-size:7px;font-weight:950}.recent-body{padding:8px;min-width:0;display:flex;flex-direction:column;justify-content:center}.recent-title{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-meta{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.35}.recent-cost{display:flex;align-items:center;gap:6px}.recent-empty{grid-column:1/-1;height:110px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-size:10px}.below{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.teaser,.showcase{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:18px}.teaser h2,.showcase h2{margin:6px 0 7px;font-size:21px}.teaser p,.showcase p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.eyebrow{display:inline-flex;border:1px solid var(--line2);background:var(--surface3);color:var(--green3);border-radius:999px;padding:5px 8px;font-size:8px;font-weight:950;letter-spacing:.6px}.teaser-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.teaser-list div{border:1px solid var(--line);border-radius:11px;padding:9px;font-size:10px}.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.show-mini{height:88px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(135deg,var(--surface3),color-mix(in srgb,var(--green) 17%,var(--surface)));display:flex;align-items:end;padding:8px;font-size:9px;font-weight:900}.footer{padding:25px 0;text-align:center;color:var(--muted);font-size:9px}
/* Auth */.auth-overlay{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.68);backdrop-filter:blur(10px)}.auth-overlay.show{display:flex}.auth-modal{width:min(445px,96vw);position:relative;border:1px solid var(--line2);background:var(--surface);border-radius:22px;padding:24px;box-shadow:var(--shadow)}.auth-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text)}.auth-brand{display:flex;gap:9px;align-items:center;margin-bottom:15px}.auth-brand img:first-child{width:48px;height:48px;object-fit:contain}.auth-brand img:last-child{height:29px;max-width:145px;object-fit:contain}html[data-theme="light"] .auth-brand img:last-child{filter:brightness(0)}.auth-title{margin:0 0 5px}.auth-sub{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:11px;padding:3px;margin:17px 0 11px}.auth-tab{border:0;background:transparent;color:var(--muted);padding:8px;border-radius:8px;font-weight:900}.auth-tab.active{background:var(--surface3);color:var(--green3)}.google-btn{width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;background:white;color:#111;font-weight:900}.google-g{color:#4285f4;margin-right:8px}.auth-divider{text-align:center;color:var(--muted);font-size:9px;margin:13px}.auth-field{margin-bottom:9px}.auth-field label{display:block;font-size:9px;font-weight:900;margin-bottom:4px}.auth-field input{width:100%;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:10px;padding:10px}.auth-modal:not(.register-mode) #authNameField{display:none}.auth-submit{width:100%;border:0;border-radius:10px;background:linear-gradient(90deg,var(--green),var(--green2));padding:11px;color:#061008;font-weight:950}.auth-options{display:flex;justify-content:space-between;margin-top:9px}.auth-link{border:0;background:transparent;color:var(--green3);font-size:9px;font-weight:900}.auth-error{display:none;margin-top:9px;border:1px solid rgba(255,90,90,.3);color:var(--danger);padding:9px;border-radius:9px;font-size:9px}.auth-error.show{display:block}.auth-loading{display:none;color:var(--muted);font-size:9px;margin-top:8px}.auth-loading.show{display:block}.auth-notice{margin-top:11px;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--muted);font-size:9px}.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,18px);opacity:0;z-index:10010;border:1px solid var(--line2);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 12px;font-size:10px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1180px){.toolbar{grid-template-columns:repeat(4,1fr)}.prompt-row{grid-template-columns:1fr}.workgrid{grid-template-columns:1fr}.stage-view{height:360px}}
@media(max-width:760px){.navlinks,.lang-switch{display:none}.user-copy{display:none}.studio-intro{align-items:flex-start}.pro-nudge span{display:none}.toolbar{display:flex;overflow-x:auto;padding-bottom:3px}.control{min-width:145px}.generate{min-width:150px}.workgrid{grid-template-columns:1fr}.below{grid-template-columns:1fr}.showcase-grid{grid-template-columns:1fr}.stage-view{height:300px}}

/* ---------- Wiskil V10 workspace ---------- */
.workgrid{
  margin-top:10px;
  align-items:stretch;
}
.stage,.side-recent{
  height:clamp(440px,52vh,565px);
  min-height:440px;
  margin-top:0;
}
.stage{
  display:flex;
  flex-direction:column;
}
.stage-view{
  flex:1;
  height:auto;
  min-height:0;
  background:
    radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--green) 9%,transparent),transparent 47%),
    var(--stage);
}
.side-recent{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.side-recent .recent{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
.side-recent .recent-head{
  min-height:45px;
  margin:-2px -2px 8px;
  padding:0 2px 9px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.side-recent .recent-row{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:3px;
  align-content:start;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
}
.main-video-frame{
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--green) 16%,var(--surface3)),var(--surface3));
  padding:12px;
}
.main-video{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center;
  background:transparent;
}
.recent-thumb{
  background:linear-gradient(135deg,#124d2b,#06150d);
}
.recent-thumb:before,.recent-thumb:after{display:none}
.recent-thumb-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
  transition:opacity .18s ease;
}
.recent-thumb-img.loaded{opacity:1}
.recent-thumb:after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.30),transparent 55%);
  pointer-events:none;
}
.recent-state{z-index:2}

/* ---------- Horizontal Pro banner ---------- */
.below{
  display:block;
  margin-top:14px;
}
.pro-banner{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(105deg,
      color-mix(in srgb,var(--green) 8%,var(--surface)),
      var(--surface) 62%);
  padding:15px 18px;
  display:grid;
  grid-template-columns:minmax(260px,1.15fr) minmax(360px,1fr) auto;
  align-items:center;
  gap:18px;
}
.pro-banner-copy h2{
  margin:5px 0 5px;
  font-size:20px;
}
.pro-banner-copy p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}
.pro-banner-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.pro-banner-points span{
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface2) 92%,transparent);
  border-radius:10px;
  padding:8px 9px;
  font-size:9px;
  font-weight:850;
}

/* ---------- Sample videos ---------- */
.sample-section{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:18px;
}
.sample-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  margin-bottom:12px;
}
.sample-head h2{
  margin:5px 0 3px;
  font-size:21px;
}
.sample-head p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}
.sample-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.sample-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface2);
}
.sample-media{
  aspect-ratio:16/10;
  position:relative;
  background:
    radial-gradient(circle at 72% 26%,color-mix(in srgb,var(--green3) 65%,transparent) 0 13%,transparent 14%),
    linear-gradient(145deg,color-mix(in srgb,var(--green) 27%,var(--surface3)),var(--stage));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sample-media video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--stage);
}
.sample-placeholder{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:10px;
}
.sample-placeholder img{
  width:42px;
  height:42px;
  object-fit:contain;
  opacity:.82;
}
.sample-card.missing .sample-media video{display:none}
.sample-card.missing .sample-placeholder{display:flex}
.sample-caption{
  padding:10px 11px;
  font-size:10px;
  font-weight:900;
}

/* ---------- More complete light mode ---------- */
html[data-theme="light"] .studio-intro h1,
html[data-theme="light"] .stage-head h2,
html[data-theme="light"] .recent-head h3,
html[data-theme="light"] .pro-banner-copy h2,
html[data-theme="light"] .sample-head h2{
  color:#102419;
}
html[data-theme="light"] .navlinks button{
  color:#52685a;
}
html[data-theme="light"] .navlinks button:hover{
  color:#102419;
  background:#e8f5eb;
}
html[data-theme="light"] .status-pill{
  color:#0b6335;
  background:#eef9f1;
}
html[data-theme="light"] .pro-banner,
html[data-theme="light"] .sample-section,
html[data-theme="light"] .side-recent,
html[data-theme="light"] .stage{
  color:#102419;
  background:#fff;
  border-color:#d2e5d7;
}
html[data-theme="light"] .pro-banner-points span{
  color:#183322;
  background:#f6fbf7;
  border-color:#d8e9dc;
}
html[data-theme="light"] .sample-card{
  color:#15281c;
  background:#f8fcf9;
  border-color:#d8e9dc;
}

@media(max-width:1180px){
  .stage,.side-recent{height:auto;min-height:360px}
  .side-recent .recent-row{max-height:360px}
  .pro-banner{grid-template-columns:1fr}
  .pro-banner-points{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .stage,.side-recent{min-height:320px}
  .pro-banner-points,.sample-grid{grid-template-columns:1fr}
}


/* ---------- Wiskil V11 true contain player ---------- */
.stage-view{
  position:relative;
  min-width:0;
  min-height:0;
}
.main-video-wrap{
  position:absolute !important;
  inset:10px !important;
  width:auto !important;
  height:auto !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
.main-video-wrap.show{
  display:block !important;
}
.main-video-frame{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:block !important;
  padding:0 !important;
  background:
    radial-gradient(circle at center,
      color-mix(in srgb,var(--green) 18%,var(--surface3)),
      var(--stage)) !important;
}
.main-video-frame > video.main-video,
#mainVideo{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* thumbnails never stretch */
.recent-thumb-img,.thumb-img{
  object-fit:cover !important;
  object-position:center center !important;
}


.wiskil-welcome-bubble{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:500;
  width:min(330px,calc(100vw - 32px));
  padding:15px;
  border:1px solid var(--line2);
  border-radius:17px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  color:var(--text);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  animation:wiskilBubbleIn .28s ease-out both
}
.wiskil-welcome-bubble button{
  width:100%;margin-top:11px;
  border:0;border-radius:10px;padding:10px 12px;
  background:linear-gradient(100deg,var(--green),var(--green2));
  color:#061008;font-weight:950
}
.wiskil-welcome-title{display:flex;gap:9px;align-items:center;font-weight:950;font-size:13px}
.wiskil-welcome-title img{width:24px;height:24px;object-fit:contain}
.wiskil-welcome-bubble p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.wiskil-welcome-hint{margin-top:8px!important;font-size:8px!important;opacity:.75}
@keyframes wiskilBubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

</style>
<script defer src="assets/js/theme.js?v=12.1"></script>
</head>
<body>
<header class="topbar"><div class="shell nav">
<a class="brand" href="index.html"><img class="brand-icon-img" src="assets/images/wiskil-icon.png" alt="Wiskil"><img class="brand-name-img" src="assets/images/wiskil-name.png" data-theme-src-dark="assets/images/wiskil-name.png" data-theme-src-light="img/wiskil-logo2.png" alt="Wiskil"></a>
<div class="navlinks"><button onclick="document.getElementById('studio').scrollIntoView({behavior:'smooth'})" data-i18n="studio">Studio</button><button onclick="location.href='pricing.html'" data-i18n="pricing">Precios</button></div><div class="spacer"></div>
<div class="lang-switch"><button class="lang-btn" id="langES" type="button">ES</button><button class="lang-btn" id="langEN" type="button">EN</button></div>
<button class="theme-toggle" type="button" data-theme-toggle><span class="theme-knob" data-theme-icon>☾</span></button>
<button class="credits" type="button" onclick="location.href='pricing.html#credits'"><b><span class="balance-inline"><img class="coin-inline" src="img/moneda.png" alt="coin">—</span></b></button>
<button class="btn auth-login-btn" id="loginButton"><span data-i18n="login">Entrar</span></button>
<div class="user-chip" id="userChip"><button class="user-trigger" id="userTrigger"><span class="user-avatar" id="userAvatar">W</span><span class="user-copy"><strong id="userDisplayName">Wiskil User</strong></span><span class="user-caret">▼</span></button><div class="user-menu" id="userMenu"><div class="user-menu-head"><strong id="menuUserName">Wiskil User</strong><small id="menuUserEmail"></small></div><button id="menuAccount" data-auth-i18n="account">⚙ Mi cuenta</button><button class="danger" id="logoutButton" data-auth-i18n="logout">↪ Cerrar sesión</button></div></div>
</div></header>
<main class="shell app">
<section class="studio-intro"><div><span class="eyebrow" style="margin-bottom:8px">SEEDANCE 1.5 PRO</span><h1 data-i18n="headline">Crea, revisa y vuelve a generar sin salir del Studio.</h1><p data-i18n="intro">Configura la escena, genera y revisa tus últimos videos desde el mismo Studio.</p></div><div class="pro-nudge"><span data-i18n="proNudge">Desbloquea más valor por crédito y 720p con un plan.</span><button class="btn" onclick="location.href='pricing.html'" data-i18n="seePlans">Ver planes</button></div></section>
<section class="studio-card" id="studio">
<div class="prompt-row"><textarea id="prompt" class="promptbox" maxlength="1000" placeholder="Describe tu video..."></textarea><div class="prompt-side"><div><div class="mini-label" data-i18n="style">Estilo</div><select id="styleSelect" class="field"><option>Cinematic</option><option>Realistic</option><option>Anime</option><option>Commercial</option><option>3D</option></select></div><button class="magic" id="enhanceButton" type="button" data-i18n="enhance">✦ Mejorar con IA</button><div class="count"><span id="count">0</span>/1000 <span data-i18n="chars">caracteres</span></div></div></div>
<div class="toolbar">
<div class="control"><div class="mini-label" data-i18n="duration">Duración</div><select id="duration" class="field" disabled><option value="5">5 segundos</option></select></div>
<div class="control"><div class="mini-label" data-i18n="format">Formato</div><select id="ratio" class="field"><option value="16:9">16:9</option><option value="9:16" selected>9:16</option><option value="1:1">1:1</option></select></div>
<div class="control"><div class="mini-label" data-i18n="quality">Calidad</div><select id="quality" class="field"><option value="480p">480p</option><option value="720p">720p</option></select></div>
<div class="control"><div class="mini-label" data-i18n="motion">Movimiento</div><select id="motion" class="field"><option value="Automatic">Automático</option><option value="Smooth">Suave</option><option value="Dynamic">Dinámico</option></select></div>
<div class="control"><div class="mini-label" data-i18n="audio">Audio</div><select id="audioMode" class="field"><option value="silent">Solo video</option><option value="cinematic">Audio nativo</option><option value="lipsync">Diálogo + LipSync</option></select></div>
<div class="control"><div class="mini-label" data-i18n="creditsCost">Costo</div><div class="field" style="pointer-events:none"><span id="costText"><span class="balance-inline"><img class="coin-inline" src="img/moneda.png" alt="coin">10</span></span></div></div>
<button class="generate" type="button" onclick="generateVideo()"><span data-i18n="generate">GENERAR</span></button>
</div>
<div class="audio-extra" id="lipSyncFields"><div><div class="mini-label" data-i18n="dialogue">Texto para Diálogo + LipSync</div><input id="dialogueText" class="field" maxlength="120" placeholder="Hola, bienvenido a Wiskil."></div><div><div class="mini-label" data-i18n="voice">Estilo de voz</div><select id="voicePreset" class="field"><option value="female" data-i18n="female">Femenina</option><option value="male" data-i18n="male">Masculina</option></select></div><div class="audio-help" data-i18n="lipHelp">El diálogo y la sincronización labial se generan de forma nativa en 720p. El audio no cambia el costo de esa resolución.</div></div>
<div class="workgrid"><section class="stage"><div class="stage-head"><h2 data-i18n="current">Generación actual</h2><span class="stage-status" id="stageStatusText" data-i18n="readyStatus">Lista para crear</span><div class="stage-spacer"></div><button class="float-btn" id="floatViewButton" type="button" data-i18n="floatView">Ver flotante</button><span class="status-pill" id="statusBadge">READY</span><button class="cancel-btn" id="cancelJobButton" type="button" data-i18n="cancel">Cancelar</button></div><div class="stage-view"><div id="emptyState" class="empty-state"><div><div class="empty-orb">✦</div><h3 data-i18n="ready">Tu video aparecerá aquí</h3><p data-i18n="readyText">Configura el video arriba y presiona Generar.</p></div></div><div id="progressWrap" class="progress-wrap">
  <div class="generation-loading" id="generationLoading">
    <div class="gen-spinner" aria-hidden="true"></div>
    <strong id="statusTitle">Generando video…</strong>
    <div class="progress-sub" id="statusSub"></div>
  </div>
  <div class="generation-error" id="generationError" hidden>
    <div class="generation-error-icon">!</div>
    <strong id="generationErrorTitle">La generación falló</strong>
    <p id="generationErrorText"></p>
  </div>
  <span id="innerBadge" hidden></span>
  <span id="progressPct" hidden></span>
  <span id="eta" hidden></span>
  <span id="progressBar" hidden></span>
  <strong id="jobName" hidden>Video AI</strong>
  <p id="jobDetails" hidden></p>
</div><div id="mainVideoWrap" class="main-video-wrap"><div class="main-video-frame"><video id="mainVideo" class="main-video" controls playsinline></video></div></div></div></section><aside class="side-recent"><section class="recent"><div class="recent-head"><div><h3 data-i18n="recent">Tus 6 videos recientes</h3><p data-i18n="recentSub">Tus generaciones más recientes.</p></div><a class="recent-link" href="profile.html#videos" data-i18n="viewAll">Ver todos →</a></div><div class="recent-row" id="gallery"><div class="recent-empty" data-i18n="loginRecent">Inicia sesión para ver tus videos.</div></div></section></aside></div>
<div class="below">
<section class="pro-banner">
  <div class="pro-banner-copy">
    <span class="eyebrow">WISKIL PRO</span>
    <h2 data-i18n="upgradeTitle">Más calidad cuando la necesites.</h2>
    <p data-i18n="upgradeText">Sube a Pro para obtener 720p, diálogo sincronizado y mejor valor por generación.</p>
  </div>
  <div class="pro-banner-points">
    <span data-i18n="u1">720p y diálogo sincronizado</span>
    <span data-i18n="u2">Más saldo mensual</span>
    <span data-i18n="u3">Mejor valor por generación</span>
    <span data-i18n="u4">Audio nativo</span>
  </div>
  <button class="btn btn-primary" onclick="location.href='pricing.html'" data-i18n="seePlans">Ver planes</button>
</section>

<section class="sample-section" id="showcase">
  <div class="sample-head">
    <div>
      <span class="eyebrow" data-i18n="featured">VIDEOS DESTACADOS</span>
      <h2 data-i18n="featuredTitle">Creado con Wiskil.</h2>
      <p data-i18n="featuredText">Ejemplos de estilos, formatos y escenas generadas con IA.</p>
    </div>
  </div>
  <div class="sample-grid">
    <article class="sample-card" data-sample-card>
      <div class="sample-media">
        <video class="sample-video" controls muted playsinline preload="metadata" src="samples/sample-1.mp4"></video>
        <div class="sample-placeholder"><img src="assets/images/wiskil-icon.png" alt=""><span>Wiskil Sample 01</span></div>
      </div>
      <div class="sample-caption">Cinematic · 16:9</div>
    </article>
    <article class="sample-card" data-sample-card>
      <div class="sample-media">
        <video class="sample-video" controls muted playsinline preload="metadata" src="samples/sample-2.mp4"></video>
        <div class="sample-placeholder"><img src="assets/images/wiskil-icon.png" alt=""><span>Wiskil Sample 02</span></div>
      </div>
      <div class="sample-caption">Vertical · 9:16</div>
    </article>
    <article class="sample-card" data-sample-card>
      <div class="sample-media">
        <video class="sample-video" controls muted playsinline preload="metadata" src="samples/sample-3.mp4"></video>
        <div class="sample-placeholder"><img src="assets/images/wiskil-icon.png" alt=""><span>Wiskil Sample 03</span></div>
      </div>
      <div class="sample-caption">Native Audio · 16:9</div>
    </article>
  </div>
</section>
</div>
</main><footer class="footer">© 2026 Wiskil · AI Video Studio</footer>
<div class="auth-overlay" id="authOverlay" aria-hidden="true"><section class="auth-modal" id="authModal"><button class="auth-close" id="authClose">×</button><div class="auth-brand"><img src="assets/images/wiskil-icon.png" alt=""><img src="assets/images/wiskil-name.png" data-theme-src-dark="assets/images/wiskil-name.png" data-theme-src-light="img/wiskil-logo2.png" alt="Wiskil"></div><h2 class="auth-title" id="authTitle" data-auth-i18n="welcome">Bienvenido a Wiskil</h2><p class="auth-sub" id="authSubtitle" data-auth-i18n="subtitle">Inicia sesión para guardar tus videos, saldo y generaciones.</p><div class="auth-tabs"><button class="auth-tab active" id="tabLogin" data-auth-i18n="loginTab">Iniciar sesión</button><button class="auth-tab" id="tabRegister" data-auth-i18n="registerTab">Crear cuenta</button></div><button class="google-btn" id="googleLoginButton"><span class="google-g">G</span><span data-auth-i18n="google">Continuar con Google</span></button><div class="auth-divider" data-auth-i18n="or">o continúa con tu correo</div><form id="authForm"><div class="auth-field" id="authNameField"><label data-auth-i18n="name">Nombre</label><input id="authName" maxlength="80"></div><div class="auth-field"><label data-auth-i18n="email">Correo electrónico</label><input id="authEmail" type="email"></div><div class="auth-field"><label data-auth-i18n="password">Contraseña</label><input id="authPassword" type="password"></div><button class="auth-submit" id="authSubmit" type="submit" data-auth-i18n="loginSubmit">Iniciar sesión</button></form><div class="auth-options"><button class="auth-link" id="forgotPassword" type="button" data-auth-i18n="forgot">¿Olvidaste tu contraseña?</button><button class="auth-link" id="switchAuthMode" type="button" data-auth-i18n="createInstead">Crear una cuenta</button></div><div class="auth-error" id="authError"></div><div class="auth-loading" id="authLoading" data-auth-i18n="working">Procesando...</div><div class="auth-notice" data-auth-i18n="notice">Tus videos estarán asociados a esta cuenta.</div></section></div><div class="toast" id="toast"></div>
<script>
const P={es:{studio:'Studio',pricing:'Precios',login:'Entrar',headline:'Crea, revisa y vuelve a generar sin salir del Studio.',intro:'Configura la escena, genera y revisa tus últimos videos desde el mismo Studio.',proNudge:'Desbloquea mejor valor por generación y 720p con un plan.',seePlans:'Ver planes',style:'Estilo',enhance:'✦ Mejorar con IA',chars:'caracteres',duration:'Duración',format:'Formato',quality:'Calidad',motion:'Movimiento',audio:'Audio',creditsCost:'Costo',generate:'GENERAR',floatView:'Ver flotante',dialogue:'Texto del diálogo',voice:'Estilo de voz',female:'Femenina',male:'Masculina',lipHelp:'El diálogo y la sincronización labial se generan de forma nativa en 720p. El audio no cambia el costo de esa resolución.',current:'Generación actual',readyStatus:'Lista para crear',cancel:'Cancelar',ready:'Tu video aparecerá aquí',readyText:'Configura el video arriba y presiona Generar.',recent:'Tus 6 videos recientes',recentSub:'Tus generaciones más recientes.',viewAll:'Ver todos →',loginRecent:'Inicia sesión para ver tus videos.',upgradeTitle:'Más calidad cuando la necesites.',upgradeText:'Sube a Pro para obtener 720p, diálogo sincronizado y mejor valor por generación.',u1:'720p y diálogo sincronizado',u2:'Más saldo mensual',u3:'Mejor valor por generación',u4:'Audio nativo y diálogo'},en:{studio:'Studio',pricing:'Pricing',login:'Login',headline:'Create, review and generate again without leaving Studio.',intro:'Configure the scene, generate and review your latest videos from the same Studio.',proNudge:'Unlock better value per generation and 720p with a plan.',seePlans:'See plans',style:'Style',enhance:'✦ Enhance with AI',chars:'characters',duration:'Duration',format:'Format',quality:'Quality',motion:'Motion',audio:'Audio',creditsCost:'Cost',generate:'GENERATE',floatView:'Floating view',dialogue:'Dialogue text',voice:'Voice style',female:'Female',male:'Male',lipHelp:'Dialogue and lip synchronization are generated natively in 720p. Audio does not change the cost of that resolution.',current:'Current generation',readyStatus:'Ready to create',cancel:'Cancel',ready:'Your video will appear here',readyText:'Configure the video above and press Generate.',recent:'Your 6 recent videos',recentSub:'Your most recent generations.',viewAll:'View all →',loginRecent:'Sign in to see your videos.',upgradeTitle:'More quality when you need it.',upgradeText:'Upgrade to Pro for 720p, synchronized dialogue and better generation value.',u1:'720p and synchronized dialogue',u2:'More monthly balance',u3:'Better generation value',u4:'Native audio and dialogue'}};
function pageLang(l){if(!P[l])l='en';localStorage.setItem('wiskil_language',l);document.documentElement.lang=l;document.querySelectorAll('[data-i18n]').forEach(e=>{const k=e.dataset.i18n;if(P[l][k]!==undefined)e.textContent=P[l][k]});document.getElementById('langES')?.classList.toggle('active',l==='es');document.getElementById('langEN')?.classList.toggle('active',l==='en');window.translateAuth?.(l);window.updateStudioLanguage?.();window.updateCost?.()}
document.getElementById('langES').onclick=()=>pageLang('es');document.getElementById('langEN').onclick=()=>pageLang('en');window.toast=function(m){const e=document.getElementById('toast');e.textContent=m;e.classList.add('show');clearTimeout(window.__toast);window.__toast=setTimeout(()=>e.classList.remove('show'),2500)};
const pe=document.getElementById('prompt'),ce=document.getElementById('count');function count(){ce.textContent=pe.value.length}count();pe.addEventListener('input',count);document.getElementById('enhanceButton').onclick=()=>{const s=pe.value.trim();if(!s)return toast(document.documentElement.lang==='es'?'Escribe primero una idea.':'Write an idea first.');pe.value=s+' Cinematic lighting, coherent anatomy, realistic proportions, consistent subject identity, polished composition and natural motion.';count();toast(document.documentElement.lang==='es'?'Prompt mejorado.':'Prompt enhanced.')};
const saved=localStorage.getItem('wiskil_language');pageLang(saved==='es'||saved==='en'?saved:((navigator.language||'en').toLowerCase().startsWith('es')?'es':'en'));
</script><script type="module" src="assets/js/auth.js?v=12.3"></script><script type="module" src="assets/js/video-ai.js?v=12.3"></script>
<script src="assets/js/analytics-track.js?v=12.7"></script><script type="module" src="assets/js/welcome-invite.js?v=12.2"></script></body></html>