/* ============================================================
   whatsventa — demo pública del editor
   ============================================================ */

.demo-area {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.demo-panel {
  padding: 22px;
  border-radius: var(--wv-r-xl);
  background: var(--wv-surface);
  border: 1px solid var(--wv-border-soft);
  box-shadow: var(--wv-sh-card);
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.demo-lienzo {
  position: relative;
  display: grid;
  place-items: center;
  padding: 44px 24px 30px;
  border-radius: var(--wv-r-2xl);
  background: radial-gradient(circle at 50% 0%, #E7EAFF 0%, #F1F5F9 60%);
  min-height: 720px;
}
.demo-lienzo .ed__pista { top: 18px; }

@media (max-width: 980px) {
  .demo-area { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { position: static; max-height: none; order: 2; }
  .demo-lienzo { order: 1; min-height: 0; padding: 40px 14px 24px; }
}