/* ============================================================================
   Writenox Studio — Premium Design System v2 (capa aditiva sobre styles.css)
   Cargado DESPUÉS de styles.css. Namespace --wx-*.
   Paleta oficial del brief 2026:
     bg #09090B · bg-2 #111113 · card #18181B · line rgba(255,255,255,.08)
     texto #FFFFFF / #A1A1AA · primario #7C3AED · secundario #8B5CF6 · acento #A855F7
   Tipografía: Inter (cuerpo) · Geist (titulares) · Plus Jakarta Sans (labels)
   ========================================================================== */

:root {
  /* ── Superficies ── */
  --wx-bg: #09090b;
  --wx-bg-2: #111113;
  --wx-card: #18181b;
  --wx-card-2: #1e1e22;
  --wx-line: rgba(255, 255, 255, 0.08);
  --wx-line-strong: rgba(255, 255, 255, 0.14);

  /* ── Texto ── */
  --wx-text: #ffffff;
  --wx-text-2: #a1a1aa;
  --wx-text-3: #71717a;

  /* ── Acento violeta ── */
  --wx-violet-50: #f1edff;
  --wx-violet-200: #c9bcff;
  --wx-violet-400: #a78bfa;
  --wx-violet-500: #8b5cf6;
  --wx-violet-600: #7c3aed;
  --wx-violet-700: #6d28d9;
  --wx-pink-500: #ec4899;
  --wx-accent: #a855f7;
  --wx-primary: #7c3aed;
  --wx-secondary: #8b5cf6;
  --wx-accent-ink: #ffffff;

  /* ── Gradientes de marca ── */
  --wx-grad: linear-gradient(135deg, #7c3aed, #a855f7);
  --wx-grad-2: linear-gradient(135deg, #8b5cf6, #ec4899);
  --wx-grad-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(168, 85, 247, 0.05));
  --wx-grad-text: linear-gradient(105deg, #a78bfa 0%, #8b5cf6 50%, #c084fc 100%);

  /* ── Glow ── */
  --wx-glow-sm: 0 0 0 1px rgba(139, 92, 246, 0.20), 0 6px 22px -8px rgba(124, 58, 237, 0.45);
  --wx-glow-md: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 14px 50px -12px rgba(124, 58, 237, 0.55);
  --wx-glow-lg: 0 0 60px -10px rgba(139, 92, 246, 0.5), 0 30px 90px -30px rgba(109, 40, 217, 0.6);

  /* ── Glass ── */
  --wx-glass: rgba(24, 24, 27, 0.6);
  --wx-glass-2: rgba(30, 30, 34, 0.74);
  --wx-glass-line: rgba(255, 255, 255, 0.08);
  --wx-glass-blur: 16px;
  --wx-glass-edge: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

  /* ── Elevación ── */
  --wx-shadow-1: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --wx-shadow-2: 0 12px 36px -12px rgba(0, 0, 0, 0.55);
  --wx-shadow-3: 0 30px 80px -28px rgba(0, 0, 0, 0.7);

  /* ── Espaciado (4/8) ── */
  --wx-space-1: 4px;  --wx-space-2: 8px;  --wx-space-3: 12px; --wx-space-4: 16px;
  --wx-space-5: 24px; --wx-space-6: 32px; --wx-space-7: 48px; --wx-space-8: 64px;
  --wx-space-9: 96px; --wx-space-10: 128px;

  /* ── Radios ── */
  --wx-radius-sm: 10px; --wx-radius: 14px; --wx-radius-lg: 20px;
  --wx-radius-xl: 28px; --wx-radius-pill: 999px;

  /* ── Motion ── */
  --wx-dur-1: 140ms; --wx-dur-2: 220ms; --wx-dur-3: 380ms; --wx-dur-4: 650ms;
  --wx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wx-ease-in: cubic-bezier(0.55, 0, 0.45, 1);
  --wx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Tipografía ── */
  --wx-font-display: "Geist", "Inter", system-ui, sans-serif;
  --wx-font-body: "Inter", system-ui, sans-serif;
  --wx-font-label: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --wx-fs-hero: clamp(42px, 6.2vw, 72px);
  --wx-fs-h2: clamp(32px, 4.2vw, 48px);
  --wx-fs-h3: clamp(22px, 2.6vw, 30px);
  --wx-fs-body: 16.5px;
  --wx-fs-lg: 18px;

  --wx-muted: var(--wx-text-2);
}

/* ── Tema oscuro de la app: alinear tokens base de styles.css a la paleta ── */
body:not([data-theme="light"]) {
  --bg: var(--wx-bg);
  --bg-2: var(--wx-bg-2);
  --panel: rgba(24, 24, 27, 0.86);
  --panel-2: rgba(30, 30, 34, 0.94);
  --line: var(--wx-line);
  --line-strong: rgba(255, 255, 255, 0.16);
  --muted: var(--wx-text-2);
  --violet: var(--wx-violet-500);
  --radius: 14px;
}

body[data-theme="light"]:not(.auth-locked) {
  --wx-glass: rgba(255, 255, 255, 0.66);
  --wx-glass-2: rgba(255, 255, 255, 0.82);
  --wx-glass-line: rgba(0, 0, 0, 0.08);
  --wx-line: rgba(0, 0, 0, 0.08);
  --wx-text: #09090b;
  --wx-text-2: #52525b;
  --wx-text-3: #71717a;
  --wx-card: #ffffff;
  --wx-card-2: #f4f4f5;
  --wx-glass-edge: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  --wx-muted: #52525b;
}

/* ============================================================================
   Fondo global premium: base #09090B + dot grid + glows ambientales + noise.
   Reemplaza al fondo monocromo (y silencia las capas más caras del backdrop).
   ========================================================================== */
body:not([data-theme="light"]) {
  background:
    radial-gradient(110% 70% at 50% -10%, rgba(124, 58, 237, 0.13), transparent 62%),
    radial-gradient(70% 50% at 90% 105%, rgba(168, 85, 247, 0.07), transparent 65%),
    linear-gradient(180deg, var(--wx-bg), var(--wx-bg-2) 58%, var(--wx-bg));
}

/* Dot grid futurista + noise (barato: estático, sin repaints) */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-theme="light"]:not(.auth-locked) .backdrop::before {
  background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);
}

/* Silenciar las capas animadas caras del backdrop original (scan, grain, mesh,
   rails): la estética 2026 la ponen el dot grid, el noise y las auras. */
.backdrop .scan-field,
.backdrop .grain,
.backdrop .mesh,
.backdrop .rail {
  display: none;
}

/* Auras ambientales fijas (estáticas en landing y app: cero repaints) */
.wx-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.wx-aura::before,
.wx-aura::after {
  content: "";
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 680px; max-height: 680px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
}
.wx-aura::before {
  top: -14%; left: -8%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 70%);
}
.wx-aura::after {
  bottom: -18%; right: -6%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 70%);
}
.wx-aura--fixed {
  position: fixed;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(124, 58, 237, 0.14), transparent 60%),
    radial-gradient(80% 60% at 85% 110%, rgba(168, 85, 247, 0.08), transparent 65%);
}
.wx-aura--fixed::before, .wx-aura--fixed::after { opacity: 0.28; }
body.auth-locked .wx-aura--fixed::before,
body.auth-locked .wx-aura--fixed::after { opacity: 0.42; }
body[data-theme="light"]:not(.auth-locked) .wx-aura--fixed {
  background: radial-gradient(120% 90% at 50% -20%, rgba(139, 92, 246, 0.10), transparent 60%);
}
body[data-theme="light"]:not(.auth-locked) .wx-aura--fixed::before,
body[data-theme="light"]:not(.auth-locked) .wx-aura--fixed::after { opacity: 0.16; }

/* Scrollbar premium */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border: 2px solid var(--wx-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.45); }

::selection { background: rgba(139, 92, 246, 0.4); color: #fff; }

/* ============================================================================
   Utilidades de marca
   ========================================================================== */
.wx-gradient-text {
  background: var(--wx-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.wx-glass {
  background: var(--wx-glass);
  -webkit-backdrop-filter: blur(var(--wx-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--wx-glass-blur)) saturate(140%);
  border: 1px solid var(--wx-glass-line);
  border-radius: var(--wx-radius-lg);
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-1);
}

.wx-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wx-accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22);
  animation: wx-pulse 2.4s var(--wx-ease) infinite;
}
@keyframes wx-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.08); }
}

/* ============================================================================
   Botones premium
   ========================================================================== */
.wx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wx-space-2);
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--wx-radius-pill);
  font-family: var(--wx-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--wx-dur-1) var(--wx-ease),
              box-shadow var(--wx-dur-2) var(--wx-ease),
              background var(--wx-dur-2) var(--wx-ease),
              border-color var(--wx-dur-2) var(--wx-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.wx-btn:active { transform: translateY(1px) scale(0.985); }
.wx-btn:focus-visible { outline: 2px solid var(--wx-violet-400); outline-offset: 2px; }

.wx-btn--primary {
  color: var(--wx-accent-ink);
  background: var(--wx-grad);
  box-shadow: var(--wx-glow-sm);
}
.wx-btn--primary:hover { box-shadow: var(--wx-glow-md); transform: translateY(-1px); }

.wx-btn--ghost {
  color: var(--wx-text);
  background: var(--wx-glass);
  border-color: var(--wx-glass-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wx-btn--ghost:hover { border-color: rgba(139, 92, 246, 0.45); transform: translateY(-1px); }

.wx-btn--sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.wx-btn--lg { min-height: 54px; padding: 0 32px; font-size: 16px; }

a.wx-btn { text-decoration: none; }

.wx-btn .wx-ripple {
  position: absolute;
  left: var(--wx-rx, 50%);
  top: var(--wx-ry, 50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.6;
  pointer-events: none;
  animation: wx-ripple var(--wx-dur-3) var(--wx-ease) forwards;
}
@keyframes wx-ripple {
  to { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}

/* ============================================================================
   Cards premium
   ========================================================================== */
.wx-card {
  position: relative;
  background: var(--wx-glass);
  -webkit-backdrop-filter: blur(var(--wx-glass-blur));
  backdrop-filter: blur(var(--wx-glass-blur));
  border: 1px solid var(--wx-glass-line);
  border-radius: var(--wx-radius-lg);
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-1);
  transition: transform var(--wx-dur-2) var(--wx-spring),
              box-shadow var(--wx-dur-2) var(--wx-ease),
              border-color var(--wx-dur-2) var(--wx-ease);
}
.wx-card--interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: var(--wx-shadow-2), var(--wx-glow-sm);
}

/* ============================================================================
   Barras de score
   ========================================================================== */
.wx-score { display: grid; gap: 6px; }
.wx-score__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.wx-score__label { color: var(--wx-text-2); font-weight: 500; }
.wx-score__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-score__track {
  height: 8px;
  border-radius: var(--wx-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wx-score__fill {
  display: block;
  height: 100%;
  width: var(--wx-pct, 0%);
  border-radius: inherit;
  background: var(--wx-grad);
  box-shadow: 0 0 16px -2px rgba(139, 92, 246, 0.6);
  transition: width var(--wx-dur-4) var(--wx-ease);
}

/* ============================================================================
   Scroll reveal (premium.js + IntersectionObserver)
   ========================================================================== */
html.wx-anim .wx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--wx-dur-4) var(--wx-ease),
              transform var(--wx-dur-4) var(--wx-ease);
  transition-delay: calc(var(--wx-i, 0) * 70ms);
}
html.wx-anim .wx-reveal.is-in { opacity: 1; transform: none; }
html.wx-anim .wx-reveal--scale { transform: translateY(14px) scale(0.97); }
html.wx-anim .wx-reveal--scale.is-in { transform: none; }

@keyframes wx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.wx-float { animation: wx-float 7s ease-in-out infinite; }

/* ============================================================================
   LANDING (body.auth-locked) — experiencia 2026
   ========================================================================== */
body.auth-locked { background: var(--wx-bg); }

/* La landing ocupa el ancho completo y respira */
body.auth-locked .auth-panel {
  margin-top: 0;
  min-height: 100vh;
}

/* Topbar de la app oculta en landing: la landing trae su propia nav */
body.auth-locked .topbar { display: none; }

/* ── Nav de landing: sticky glass ── */
body.auth-locked .auth-brand-row {
  position: sticky;
  top: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--wx-space-5);
  max-width: 1120px;
  margin: 0 auto var(--wx-space-7);
  padding: 10px 12px 10px 18px;
  border-radius: var(--wx-radius-pill);
  background: rgba(13, 13, 16, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wx-line);
  box-shadow: var(--wx-glass-edge), 0 12px 40px -16px rgba(0, 0, 0, 0.6);
}
body.auth-locked .auth-brand-row .auth-brand-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wx-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--wx-text);
  text-decoration: none;
}
body.auth-locked .auth-brand-row > a:not(.auth-brand-home) {
  color: var(--wx-text-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--wx-dur-2) var(--wx-ease);
}
body.auth-locked .auth-brand-row > a:not(.auth-brand-home):hover { color: var(--wx-text); }
body.auth-locked .auth-brand-row .wx-lnav-spacer { flex: 1; }
body.auth-locked .auth-nav-login {
  margin-left: 0;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--wx-radius-pill);
  background: var(--wx-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--wx-glow-sm);
  transition: transform var(--wx-dur-1) var(--wx-ease), box-shadow var(--wx-dur-2) var(--wx-ease);
}
body.auth-locked .auth-nav-login:hover { box-shadow: var(--wx-glow-md); transform: translateY(-1px); }
body.auth-locked .auth-nav-login:focus-visible { outline: 2px solid var(--wx-violet-400); outline-offset: 2px; }

/* ── Hero ── */
body.auth-locked .auth-landing-logo { display: none; }

body.auth-locked .auth-copy .eyebrow {
  letter-spacing: 0.08em;
}
body.auth-locked .auth-copy h2 {
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-hero);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 21ch;
  margin-inline: auto;
}
body.auth-locked .auth-copy h2 span {
  color: transparent;
  background: var(--wx-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
body.auth-locked .auth-copy > p:not(.eyebrow) {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--wx-text-2);
  max-width: 58ch;
  margin-inline: auto;
}
body.auth-locked .auth-trust { color: var(--wx-text-3); }

.wx-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wx-space-3);
  margin-top: var(--wx-space-6);
}

/* Stats del hero */
.wx-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wx-space-4) clamp(24px, 4vw, 64px);
  max-width: 880px;
  margin: var(--wx-space-7) auto 0;
  padding: var(--wx-space-5) var(--wx-space-4);
  border-top: 1px solid var(--wx-line);
  border-bottom: 1px solid var(--wx-line);
  font-size: 13.5px;
  color: var(--wx-text-2);
}
.wx-stats span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wx-stats strong {
  font-family: var(--wx-font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wx-text);
}

/* Ritmo vertical de secciones de la landing */
body.auth-locked .auth-copy > section,
body.auth-locked .auth-copy .wx-section {
  margin-top: clamp(88px, 10vw, 150px);
}

/* Títulos de sección */
.wx-h {
  margin: 0 0 var(--wx-space-3);
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
.wx-sub {
  max-width: 62ch;
  margin: 0 auto var(--wx-space-6);
  color: var(--wx-text-2);
  font-size: var(--wx-fs-body);
  line-height: 1.6;
}
.wx-kicker {
  display: block;
  margin-bottom: var(--wx-space-3);
  font-family: var(--wx-font-label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-violet-400);
}

/* ── Bento de beneficios ── */
.wx-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--wx-space-4);
  margin-top: var(--wx-space-6);
  text-align: left;
}
.wx-bento__card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--wx-space-3);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--wx-dur-2) var(--wx-spring),
              border-color var(--wx-dur-2) var(--wx-ease),
              box-shadow var(--wx-dur-2) var(--wx-ease);
}
.wx-bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 200px at var(--wx-mx, 50%) var(--wx-my, 0%), rgba(139, 92, 246, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity var(--wx-dur-2) var(--wx-ease);
  pointer-events: none;
}
.wx-bento__card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: var(--wx-shadow-2), var(--wx-glow-sm);
}
.wx-bento__card:hover::after { opacity: 1; }
.wx-bento__card--wide { grid-column: span 3; }
.wx-bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--wx-grad-soft);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--wx-violet-400);
  font-size: 19px;
}
.wx-bento__card strong {
  font-family: var(--wx-font-display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wx-text);
}
.wx-bento__card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wx-text-2); }
.wx-bento__tag {
  position: absolute;
  top: 18px; right: 18px;
  padding: 3px 10px;
  border-radius: var(--wx-radius-pill);
  font-family: var(--wx-font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wx-violet-200);
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ── Demo / historias generadas ── */
.wx-demo__panel {
  margin-top: var(--wx-space-5);
  padding: clamp(18px, 3vw, 32px);
  text-align: left;
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-2), var(--wx-glow-sm);
}
.wx-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wx-space-3);
  margin-bottom: var(--wx-space-4);
}
.wx-demo__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--wx-space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--wx-violet-200);
}
.wx-demo__engine {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--wx-text-2);
}
.wx-demo__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.wx-demo__beats { display: grid; gap: var(--wx-space-3); align-content: start; }
.wx-beat {
  padding: 14px 16px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
.wx-beat header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}
.wx-beat__stage { font-weight: 700; color: var(--wx-violet-400); }
.wx-beat__time { color: var(--wx-text-2); font-variant-numeric: tabular-nums; }
.wx-beat p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.wx-demo__scores { display: grid; gap: var(--wx-space-4); align-content: center; }
.wx-demo__scorenote {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wx-text-2);
}

/* ── Cómo funciona ── */
.wx-steps {
  counter-reset: wx-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--wx-space-5);
  margin: var(--wx-space-6) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.wx-steps li {
  counter-increment: wx-step;
  position: relative;
  padding: var(--wx-space-5);
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease), transform var(--wx-dur-2) var(--wx-spring);
}
.wx-steps li:hover { border-color: rgba(139, 92, 246, 0.35); transform: translateY(-3px); }
.wx-steps li::before {
  content: counter(wx-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--wx-space-3);
  padding: 4px 12px;
  border-radius: var(--wx-radius-pill);
  font-family: var(--wx-font-display);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--wx-violet-200);
  background: var(--wx-grad-soft);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.wx-steps strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--wx-font-display);
  font-size: 16.5px;
}
.wx-steps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wx-text-2); }

/* ── Showcases (editor, personajes, timeline, publicador, colaboración) ── */
.wx-show {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  text-align: left;
}
.wx-show--flip .wx-show__copy { order: 2; }
.wx-show--flip .wx-show__media { order: 1; }
.wx-show__copy h3 {
  margin: 0 0 var(--wx-space-3);
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.wx-show__copy > p { margin: 0 0 var(--wx-space-4); font-size: 15.5px; line-height: 1.65; color: var(--wx-text-2); }
.wx-show__list {
  display: grid;
  gap: var(--wx-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wx-show__list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wx-text-2);
}
/* Check de lista compartido (showcases y pricing): una sola máscara SVG */
.wx-show__list li::before,
.wx-price li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  background: var(--wx-grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 78% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.wx-price li::before { width: 16px; height: 16px; margin-top: 2px; }
.wx-show__list strong { color: var(--wx-text); font-weight: 600; }

/* Ventana mock del producto */
.wx-window {
  position: relative;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  background: linear-gradient(180deg, var(--wx-card), var(--wx-bg-2));
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-3);
  overflow: hidden;
}
.wx-window::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), transparent 40%, transparent 70%, rgba(236, 72, 153, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.wx-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wx-line);
  background: rgba(255, 255, 255, 0.02);
}
.wx-window__bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.wx-window__bar i:first-child { background: rgba(236, 72, 153, 0.55); }
.wx-window__bar i:nth-child(2) { background: rgba(168, 85, 247, 0.55); }
.wx-window__bar i:nth-child(3) { background: rgba(139, 92, 246, 0.55); }
.wx-window__bar span {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wx-text-3);
}
.wx-window__body { padding: clamp(16px, 2.4vw, 26px); display: grid; gap: var(--wx-space-3); }

/* Mock: personajes */
.wx-chargrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wx-space-3); }
.wx-char {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-sm);
  background: rgba(255, 255, 255, 0.025);
}
.wx-char i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--wx-grad);
}
.wx-char i.alt { background: var(--wx-grad-2); }
.wx-char strong { display: block; font-size: 13.5px; }
.wx-char small { display: block; font-size: 11.5px; color: var(--wx-text-3); }
.wx-rel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(139, 92, 246, 0.35);
  border-radius: var(--wx-radius-sm);
  font-size: 12.5px;
  color: var(--wx-violet-200);
  background: rgba(124, 58, 237, 0.07);
}

/* Mock: timeline */
.wx-tl { display: grid; gap: 10px; }
.wx-tl__track {
  position: relative;
  height: 6px;
  border-radius: var(--wx-radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.wx-tl__track i {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: inherit;
  background: var(--wx-grad);
  opacity: 0.85;
}
.wx-tl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-sm);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
}
.wx-tl__row strong { font-size: 13px; color: var(--wx-text); }
.wx-tl__row small { color: var(--wx-text-3); font-variant-numeric: tabular-nums; }
.wx-tl__chip {
  padding: 2px 10px;
  border-radius: var(--wx-radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--wx-violet-200);
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Mock: publicador */
.wx-pub { display: grid; gap: var(--wx-space-3); }
.wx-pub__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-sm);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13.5px;
}
.wx-pub__row i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-style: normal;
  font-size: 15px;
  background: var(--wx-grad-soft);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.wx-pub__row .wx-pub__when { margin-left: auto; font-size: 12px; color: var(--wx-text-3); font-variant-numeric: tabular-nums; }
.wx-pub__state {
  padding: 2px 10px;
  border-radius: var(--wx-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wx-pub__state--ok { color: #86efac; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); }
.wx-pub__state--wait { color: var(--wx-violet-200); background: rgba(124, 58, 237, 0.14); border: 1px solid rgba(139, 92, 246, 0.3); }

/* Mock: colaboración */
.wx-collab__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wx-collab__bar .wx-avatars { display: inline-flex; }
.wx-avatars i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--wx-card);
  margin-left: -8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--wx-grad);
}
.wx-avatars i:first-child { margin-left: 0; }
.wx-avatars i.alt { background: var(--wx-grad-2); }
.wx-avatars i.dim { background: #3f3f46; }
.wx-collab__line {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-sm);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wx-text-2);
}
.wx-collab__line mark {
  background: rgba(139, 92, 246, 0.25);
  color: var(--wx-text);
  border-radius: 3px;
  padding: 0 2px;
}
.wx-cursor {
  position: relative;
  display: inline-block;
  width: 2px; height: 14px;
  vertical-align: middle;
  background: var(--wx-pink-500);
}
.wx-cursor::after {
  content: attr(data-name);
  position: absolute;
  top: -18px; left: 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--wx-pink-500);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Hooks ── */
.wx-hooklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--wx-space-3);
  margin: var(--wx-space-5) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.wx-hooklist li {
  padding: 18px 20px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease), box-shadow var(--wx-dur-2) var(--wx-ease), transform var(--wx-dur-2) var(--wx-spring);
}
.wx-hooklist li:hover { border-color: rgba(139, 92, 246, 0.4); box-shadow: var(--wx-glow-sm); transform: translateY(-3px); }
.wx-hooklist__genre {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--wx-font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wx-violet-400);
}
.wx-hooklist p {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--wx-text);
}

/* ── Casos de uso ── */
.wx-uselist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wx-space-4);
  margin-top: var(--wx-space-6);
  text-align: left;
}
.wx-uselist article {
  padding: var(--wx-space-5);
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease), transform var(--wx-dur-2) var(--wx-spring);
}
.wx-uselist article:hover { border-color: rgba(139, 92, 246, 0.35); transform: translateY(-3px); }
.wx-uselist strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--wx-font-display);
  font-size: 16.5px;
}
.wx-uselist p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wx-text-2); }

/* ── Testimonios ── */
.wx-testi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--wx-space-4);
  margin-top: var(--wx-space-6);
  text-align: left;
}
.wx-testi figure {
  display: flex;
  flex-direction: column;
  gap: var(--wx-space-4);
  margin: 0;
  padding: var(--wx-space-5);
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease), transform var(--wx-dur-2) var(--wx-spring), box-shadow var(--wx-dur-2) var(--wx-ease);
}
.wx-testi figure:hover { border-color: rgba(139, 92, 246, 0.35); transform: translateY(-3px); box-shadow: var(--wx-glow-sm); }
.wx-testi blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--wx-text);
}
.wx-testi figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.wx-testi figcaption i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--wx-grad);
}
.wx-testi figcaption i.alt { background: var(--wx-grad-2); }
.wx-testi figcaption strong { display: block; font-size: 14px; }
.wx-testi figcaption small { display: block; font-size: 12px; color: var(--wx-text-3); }
.wx-testi__stars { color: var(--wx-violet-400); font-size: 13px; letter-spacing: 2px; }

/* ── Pricing ── */
.wx-pricegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  gap: var(--wx-space-4);
  max-width: 1040px;
  margin: var(--wx-space-6) auto 0;
  text-align: left;
}
.wx-price {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--wx-space-4);
  padding: clamp(22px, 3vw, 32px);
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius-lg);
  transition: transform var(--wx-dur-2) var(--wx-spring), border-color var(--wx-dur-2) var(--wx-ease), box-shadow var(--wx-dur-2) var(--wx-ease);
}
.wx-price:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.3); }
.wx-price--featured {
  border-color: rgba(139, 92, 246, 0.5);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.10), var(--wx-card) 55%);
  box-shadow: var(--wx-glow-md);
}
.wx-price__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--wx-radius-pill);
  background: var(--wx-grad);
  color: #fff;
  font-family: var(--wx-font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--wx-glow-sm);
}
.wx-price header { display: grid; gap: 6px; }
.wx-price header strong { font-family: var(--wx-font-display); font-size: 17px; }
.wx-price__amount {
  font-family: var(--wx-font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wx-text);
}
.wx-price__amount small { font-size: 14px; font-weight: 500; color: var(--wx-text-3); letter-spacing: 0; }
.wx-price__amount s { font-size: 17px; font-weight: 600; color: var(--wx-text-3); margin-right: 8px; }
.wx-price__note { font-size: 12.5px; color: var(--wx-violet-200); }
.wx-price ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wx-price li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wx-text-2);
}
.wx-price .wx-btn { justify-self: stretch; }

/* ── FAQ ── */
.wx-faq { max-width: 720px; margin-inline: auto; text-align: left; }
.wx-faq .wx-h, .wx-faq .wx-kicker { text-align: center; }
.wx-faq details {
  margin-bottom: var(--wx-space-3);
  padding: 4px 22px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease);
}
.wx-faq details[open] { border-color: rgba(139, 92, 246, 0.35); }
.wx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wx-space-3);
  padding: 14px 0;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.wx-faq summary::-webkit-details-marker { display: none; }
.wx-faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 300;
  color: var(--wx-violet-400);
  transition: transform var(--wx-dur-2) var(--wx-ease);
}
.wx-faq details[open] summary::after { transform: rotate(45deg); }
.wx-faq details p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--wx-text-2);
}

/* ── CTA final ── */
.wx-final {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: var(--wx-radius-xl);
  border: 1px solid rgba(139, 92, 246, 0.3);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 70%),
    var(--wx-card);
  box-shadow: var(--wx-glass-edge), var(--wx-glow-md);
  overflow: hidden;
}
.wx-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 80% at 50% 20%, black, transparent);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 20%, black, transparent);
  pointer-events: none;
}
.wx-final h3 {
  position: relative;
  margin: 0 0 var(--wx-space-3);
  font-family: var(--wx-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.wx-final p {
  position: relative;
  max-width: 52ch;
  margin: 0 auto var(--wx-space-5);
  font-size: 16px;
  line-height: 1.6;
  color: var(--wx-text-2);
}
.wx-final .wx-hero-ctas { margin-top: 0; position: relative; }

/* ── Footer premium (landing) ── */
.wx-footer {
  margin-top: clamp(88px, 10vw, 150px);
  padding: clamp(36px, 5vw, 56px) 0 28px;
  border-top: 1px solid var(--wx-line);
  text-align: left;
}
.wx-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--wx-space-6);
  margin-bottom: var(--wx-space-7);
}
.wx-footer__brand { display: grid; gap: var(--wx-space-3); align-content: start; justify-items: start; }
.wx-footer__brand .wx-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wx-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wx-text);
  text-decoration: none;
}
.wx-footer__brand p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--wx-text-2); max-width: 30ch; }
.wx-footer h4 {
  margin: 0 0 var(--wx-space-3);
  font-family: var(--wx-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wx-text-3);
}
.wx-footer__col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.wx-footer__col a,
.wx-footer__col button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--wx-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--wx-dur-2) var(--wx-ease);
}
.wx-footer__col a:hover,
.wx-footer__col button:hover { color: var(--wx-accent); }
.wx-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wx-space-3);
  padding-top: var(--wx-space-5);
  border-top: 1px solid var(--wx-line);
  font-size: 12.5px;
  color: var(--wx-text-3);
}
.wx-footer__base a { color: var(--wx-text-3); text-decoration: none; }
.wx-footer__base a:hover { color: var(--wx-accent); }

/* Ocultar bloques legacy de la landing que reemplaza el nuevo flujo */
body.auth-locked .auth-metrics,
body.auth-locked .auth-section-title,
body.auth-locked #auth-integration-list { display: none; }

/* ============================================================================
   APP SHELL (sesión iniciada) — mismo sistema de diseño
   ========================================================================== */
/* Topbar sticky con blur dinámico */
body:not(.auth-locked) .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background var(--wx-dur-2) var(--wx-ease),
              box-shadow var(--wx-dur-2) var(--wx-ease),
              border-color var(--wx-dur-2) var(--wx-ease);
}
body:not(.auth-locked) .topbar.wx-nav--scrolled {
  background: rgba(9, 9, 11, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: rgba(139, 92, 246, 0.18);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
body[data-theme="light"]:not(.auth-locked) .topbar.wx-nav--scrolled {
  background: rgba(255, 255, 255, 0.78);
}

/* Acciones primarias: gradiente violeta consistente en toda la app */
.generate-btn,
body[data-theme="light"] .generate-btn,
body[data-theme="light"] .primary-action,
.action-btn.primary-action,
.auth-cta {
  background: var(--wx-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--wx-glow-sm);
  transition: transform var(--wx-dur-1) var(--wx-ease),
              box-shadow var(--wx-dur-2) var(--wx-ease);
}
.generate-btn:hover,
body[data-theme="light"] .generate-btn:hover,
body[data-theme="light"] .primary-action:hover,
.action-btn.primary-action:hover,
.auth-cta:hover {
  box-shadow: var(--wx-glow-md);
  transform: translateY(-1px);
}
.action-btn.primary-action:active,
.auth-cta:active { transform: translateY(1px) scale(0.99); }
.action-btn.primary-action:focus-visible,
.auth-cta:focus-visible {
  outline: 2px solid var(--wx-violet-400);
  outline-offset: 2px;
}

/* Controles seleccionables: estado activo violeta en toda la app */
body:not([data-theme="light"]) .chip.is-active,
body:not([data-theme="light"]) .template.is-active,
body:not([data-theme="light"]) .choice.is-active,
body:not([data-theme="light"]) .mini.is-active,
body:not([data-theme="light"]) .library-filter.is-active {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(124, 58, 237, 0.14);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 4px 18px -6px rgba(124, 58, 237, 0.4);
}
body:not([data-theme="light"]) .chip:hover:not(.is-active),
body:not([data-theme="light"]) .template:hover:not(.is-active),
body:not([data-theme="light"]) .choice:hover:not(.is-active),
body:not([data-theme="light"]) .mini:hover:not(.is-active) {
  border-color: rgba(139, 92, 246, 0.3);
}

/* Inputs y selects: focus ring violeta accesible */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.65);
  outline-offset: 1px;
  border-color: rgba(139, 92, 246, 0.5);
}

/* Stage cards del centro de control */
.stage-card {
  transition: transform var(--wx-dur-2) var(--wx-spring),
              border-color var(--wx-dur-2) var(--wx-ease),
              box-shadow var(--wx-dur-2) var(--wx-ease);
}
.stage-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: var(--wx-shadow-2), var(--wx-glow-sm);
}
.stage-card:focus-visible {
  outline: 2px solid var(--wx-violet-400);
  outline-offset: 2px;
}
.stage-card.is-active,
body:not([data-theme="light"]) .stage-card.is-active {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: var(--wx-glow-sm);
}

/* Workflow nav: subrayado violeta */
.workflow-nav a { transition: color var(--wx-dur-2) var(--wx-ease), border-color var(--wx-dur-2) var(--wx-ease); }
body:not([data-theme="light"]) .workflow-nav a.is-active,
body:not([data-theme="light"]) .workflow-nav a:hover {
  color: var(--wx-violet-200);
  border-color: rgba(139, 92, 246, 0.5);
}

/* Paneles y modales */
body:not([data-theme="light"]) .profile-modal,
body:not([data-theme="light"]) .auth-card {
  background: rgba(17, 17, 19, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-color: var(--wx-line);
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-3), 0 0 80px -30px rgba(124, 58, 237, 0.4);
}

/* Resultado del motor: scores */
.wx-result-scores {
  margin-top: var(--wx-space-4);
  padding: 16px 18px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius);
  background: rgba(255, 255, 255, 0.03);
}
body[data-theme="light"]:not(.auth-locked) .wx-result-scores { background: rgba(0, 0, 0, 0.03); }
.wx-result-scores__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wx-space-3);
  margin-bottom: var(--wx-space-3);
}
.wx-result-scores__head span { font-size: 13px; font-weight: 600; color: var(--wx-muted); }
.wx-result-scores__head strong {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--wx-violet-400);
}
body[data-theme="light"]:not(.auth-locked) .wx-result-scores__head strong { color: var(--wx-violet-600); }
.wx-result-scores__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wx-space-3) var(--wx-space-5);
}

/* Toasts con acento violeta */
body:not([data-theme="light"]) .toast {
  border-radius: var(--wx-radius-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--wx-shadow-2);
}

/* Footer de la app */
body:not(.auth-locked) .footer {
  align-items: center;
  font-size: 12.5px;
  color: var(--wx-text-3);
}

/* ── Floating Action Menu ── */
.wx-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 44;
  display: grid;
  justify-items: end;
  gap: var(--wx-space-3);
}
body.auth-locked .wx-fab { display: none; }
.wx-fab__main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--wx-grad);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--wx-glow-md);
  transition: transform var(--wx-dur-2) var(--wx-spring), box-shadow var(--wx-dur-2) var(--wx-ease);
}
.wx-fab__main:hover { box-shadow: var(--wx-glow-lg); transform: translateY(-2px); }
.wx-fab__main:active { transform: scale(0.95); }
.wx-fab__main:focus-visible { outline: 2px solid var(--wx-violet-400); outline-offset: 3px; }
.wx-fab__main svg { transition: transform var(--wx-dur-2) var(--wx-ease); }
.wx-fab.is-open .wx-fab__main svg { transform: rotate(45deg); }
.wx-fab__menu {
  display: grid;
  justify-items: stretch;
  gap: var(--wx-space-2);
}
.wx-fab__menu[hidden] { display: none; }
.wx-fab__item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wx-space-2);
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--wx-glass-line);
  border-radius: var(--wx-radius-pill);
  background: var(--wx-glass-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--wx-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--wx-shadow-1);
  opacity: 0;
  transform: translateY(8px);
  animation: wx-fab-in var(--wx-dur-2) var(--wx-ease) forwards;
  animation-delay: calc(var(--wx-i, 0) * 40ms);
  transition: border-color var(--wx-dur-1) var(--wx-ease), box-shadow var(--wx-dur-2) var(--wx-ease);
}
.wx-fab__item:hover { border-color: rgba(139, 92, 246, 0.45); box-shadow: var(--wx-shadow-1), var(--wx-glow-sm); }
.wx-fab__item:focus-visible { outline: 2px solid var(--wx-violet-400); outline-offset: 2px; }
@keyframes wx-fab-in { to { opacity: 1; transform: none; } }

/* Paneles de la app: neutralizar los tintes cálidos del tema anterior */
body:not([data-theme="light"]) .step-section {
  background: rgba(17, 17, 19, 0.82);
  border-color: var(--wx-line);
}
body:not([data-theme="light"]) .result-panel {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.06), transparent 220px),
    var(--panel);
  border-color: var(--wx-line);
}
body:not([data-theme="light"]) .growth-card {
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.05), transparent 46%),
    var(--wx-card);
  border-color: var(--wx-line);
}
body:not([data-theme="light"]) .growth-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: var(--wx-shadow-2), var(--wx-glow-sm);
}
body:not([data-theme="light"]) .security-strip {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(139, 92, 246, 0.18);
}

/* ── Editor de video: grupos colapsables (keep it simple) ─────────────────
   Los ajustes se agrupan en <details class="wx-group">: solo lo esencial a la
   vista, todo lo demás a un clic. Cero cambios de IDs ni de lógica. */
.editor-controls > .wx-group { grid-column: 1 / -1; }
/* Las cards colapsadas del growth studio no se estiran a la fila más alta */
.growth-grid { align-items: start; }
details.wx-group {
  /* display block: un <details> con display grid/flex puede revelar su
     contenido cerrado en Safari viejos (los paneles legacy usan grid). */
  display: block;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--wx-line);
  border-radius: var(--wx-radius);
  background: var(--wx-card);
  transition: border-color var(--wx-dur-2) var(--wx-ease);
}
.wx-group[open] { border-color: rgba(139, 92, 246, 0.32); }
.wx-group:hover { border-color: rgba(139, 92, 246, 0.22); }
.wx-group > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wx-group > summary::-webkit-details-marker { display: none; }
.wx-group > summary > div:first-child { margin-right: auto; }
.wx-group > summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--wx-violet-400);
  transition: transform var(--wx-dur-2) var(--wx-ease);
}
.wx-group[open] > summary::after { transform: rotate(45deg); }
.wx-group > summary .eyebrow { margin: 0 0 2px; }
.wx-group > summary h3 { margin: 0; font-size: 15.5px; }
.wx-group > :not(summary) { margin-bottom: 14px; }
.wx-group > :last-child:not(summary) { margin-bottom: 16px; }

/* Barra de render: glass zinc/violeta en lugar del warm anterior */
body:not([data-theme="light"]) .quick-render-bar {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10), transparent 52%),
    rgba(17, 17, 19, 0.92);
  border-color: rgba(139, 92, 246, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--wx-glass-edge), var(--wx-shadow-2);
}
.quick-render-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
body:not([data-theme="light"]) .render-duration-hint {
  border-color: var(--wx-line);
  background: rgba(255, 255, 255, 0.04);
}

/* Preview 9:16: anillo violeta y profundidad */
body:not([data-theme="light"]) .editor-preview {
  border-color: rgba(139, 92, 246, 0.28);
  border-radius: var(--wx-radius-lg);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), transparent 42%),
    #070708;
  box-shadow: var(--wx-shadow-3), 0 0 70px -24px rgba(124, 58, 237, 0.45);
}
body:not([data-theme="light"]) .preview-timeline-control {
  border-color: var(--wx-line-strong);
  border-radius: var(--wx-radius-pill);
  background: rgba(9, 9, 11, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body:not([data-theme="light"]) .preview-play-toggle {
  border: none;
  border-radius: var(--wx-radius-pill);
  background: var(--wx-grad);
  color: #fff;
  box-shadow: var(--wx-glow-sm);
}

/* El preview sticky se dimensiona para caber entero en el viewport:
   si es más alto que la pantalla, "seguir el scroll" no sirve de nada. */
@media (min-width: 1121px) {
  .editor-preview {
    width: min(100%, calc((100vh - 130px) * 9 / 16));
    justify-self: center;
  }
}

/* Sliders: acento violeta en toda la app */
input[type="range"] { accent-color: var(--wx-violet-500); }
body:not([data-theme="light"]) .preview-timeline-control input { accent-color: var(--wx-violet-400); }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .wx-bento { grid-template-columns: repeat(2, 1fr); }
  .wx-bento__card, .wx-bento__card--wide { grid-column: span 1; }
  .wx-show { grid-template-columns: 1fr; gap: var(--wx-space-5); }
  .wx-show--flip .wx-show__copy { order: 1; }
  .wx-show--flip .wx-show__media { order: 2; }
  .wx-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .wx-demo__body { grid-template-columns: 1fr; }
  .wx-hero-ctas .wx-btn { width: 100%; }
  .wx-chargrid { grid-template-columns: 1fr; }
  body.auth-locked .auth-brand-row {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: var(--wx-space-3);
    padding: 8px 10px 8px 14px;
    margin: 0 0 var(--wx-space-6);
  }
  body.auth-locked .auth-brand-row > a:not(.auth-brand-home) { display: none; }
  .wx-stats { gap: var(--wx-space-4) var(--wx-space-5); }
  /* Contenedor principal de la landing */
  body.auth-locked .auth-copy {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
  }
  /* Asegurar que las secciones internas no desborden */
  body.auth-locked .auth-copy > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  body.auth-locked .auth-copy h2 {
    font-size: clamp(32px, 8.5vw, 48px);
    word-break: break-word;
    overflow-wrap: break-word;
  }
  body.auth-locked .auth-copy > p:not(.eyebrow) {
    font-size: clamp(15px, 4vw, 17px);
  }
  .wx-hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  /* Elementos de grid internos */
  .wx-bento, .wx-steps, .wx-show, .wx-footer__grid,
  .wx-uselist, .wx-hooklist, .wx-testi, .wx-chargrid {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  .wx-bento { grid-template-columns: 1fr; }
  .wx-footer__grid { grid-template-columns: 1fr; }
  .wx-price .wx-btn { width: 100%; }
}

@media (max-width: 480px) {
  /* Panel de landing: menos padding horizontal en pantallas muy pequeñas */
  body.auth-locked .auth-panel {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.auth-locked .auth-brand-row {
    padding: 7px 8px 7px 12px;
    gap: var(--wx-space-2);
  }
  body.auth-locked .auth-copy h2 {
    font-size: clamp(28px, 9vw, 40px);
  }
  /* Asegurar que el pricing no desborde en móviles pequeños */
  .wx-price {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Bento cards sin padding excesivo */
  .wx-bento__card {
    padding: var(--wx-space-4);
  }
}

/* ============================================================================
   Accesibilidad — prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wx-dot { animation: none; }
  .wx-faq details { transition: none; }
  .wx-faq summary::after { transition: none; }
  .wx-float { animation: none; }
  .wx-btn .wx-ripple { animation: none; display: none; }
  .wx-card, .wx-btn, .wx-score__fill, .wx-bento__card, .wx-steps li,
  .wx-testi figure, .wx-price, .wx-hooklist li, .wx-uselist article { transition-duration: 1ms; }
  .wx-fab__item { animation: none; opacity: 1; transform: none; }
  .wx-fab__main, .stage-card, .action-btn.primary-action, .auth-cta { transition-duration: 1ms; }
  .wx-group, .wx-group > summary::after { transition-duration: 1ms; }
}

/* ============================================================================
   v1.7.0 — Correccion movil + consistencia UX (capa aditiva)
   ========================================================================== */

/* Nota: el guard global contra overflow horizontal ya vive en styles.css
   (`overflow-x: clip` en html y body; nunca `hidden`, que rompe sticky). */

/* Medios fluidos: nada se sale de su contenedor en pantallas chicas */
img, video {
  max-width: 100%;
}
.editor-preview canvas {
  max-width: 100%;
  height: auto;
}

/* ── Alturas de viewport con dvh (barras dinamicas de Safari/Chrome movil) ── */
@supports (height: 100dvh) {
  body.auth-locked .auth-card { max-height: calc(100dvh - 34px); }
  body:not(.auth-locked) .auth-panel.is-visible .auth-card { max-height: calc(100dvh - 32px); }
}

/* ── Modal de perfil: nunca mas alto que el viewport ── */
.profile-modal {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

/* ── Carruseles horizontales: inercia tactil y scroll contenido ── */
.workflow-nav,
.command-center {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Experiencia tactil: sin highlight gris ni zoom por doble tap ── */
button, a, label, summary {
  -webkit-tap-highlight-color: transparent;
}
button, .action-btn, .ghost-btn, select, summary, .stage-card, .workflow-nav a {
  touch-action: manipulation;
}

/* ── Safe areas iOS (notch y home indicator) ── */
@supports (padding: max(0px)) {
  .app-shell {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .toast {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  }
}

/* ── En dispositivos sin hover real, no dejar estados hover pegados ── */
@media (hover: none) {
  .action-btn:hover,
  .ghost-btn:hover,
  .ext-tool-card:hover,
  .stage-card:hover {
    transform: none;
  }
}

/* ── Tablets (761–1120px): grillas intermedias ── */
@media (min-width: 761px) and (max-width: 1120px) {
  .external-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Movil (≤760px) ── */
@media (max-width: 760px) {
  /* Inputs a 16px: evita el auto-zoom de iOS al enfocar, que rompe el layout */
  input:not([type="checkbox"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* Targets tactiles minimos de 44px (Apple HIG / Material) */
  .action-btn,
  .ghost-btn,
  .library-filter,
  .quick-segment-buttons button {
    min-height: 44px;
  }

  .workflow-nav a {
    min-height: 38px;
  }

  /* Filas de acciones: botones a mitad de ancho, sin cortes de texto */
  .actions {
    display: flex;
    flex-wrap: wrap;
  }
  .actions .action-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Herramientas externas en una columna comoda */
  .external-tools-grid {
    grid-template-columns: 1fr;
  }

  /* Pipeline automatizado apilado en vertical, sin scroll lateral */
  .ext-pipeline-track {
    flex-direction: column;
    overflow-x: visible;
  }
  .ext-pipeline-arrow {
    align-self: flex-start;
    margin-left: 14px;
    transform: rotate(90deg);
  }
  .ext-pipeline-step {
    min-width: 0;
  }
  .ext-tool-modal {
    max-height: calc(100dvh - 24px);
  }

  /* Modal de perfil con padding contenido */
  .profile-overlay {
    padding: 12px;
  }
  .profile-modal {
    padding: 24px 18px 18px;
  }

  /* Titulares que no desbordan en pantallas angostas (iPhone SE: 375px) */
  .lead h1 {
    font-size: clamp(34px, 10.5vw, 48px);
    overflow-wrap: break-word;
  }
  .brief-preview h2 {
    font-size: clamp(26px, 8vw, 36px);
  }

  /* Buscador de biblioteca a ancho completo */
  .library-search-box {
    max-width: none;
  }

  /* Toolbar de biblioteca apilada y comoda */
  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Sticky del preview compite con el teclado virtual: estatico en movil */
  .quick-render-bar {
    position: static;
  }
}

/* ── Pantallas muy chicas (≤400px: iPhone SE y similares) ── */
@media (max-width: 400px) {
  .app-shell {
    width: calc(100% - 16px);
  }
  .step-section,
  .video-studio,
  .composer,
  .result-panel {
    padding: 12px;
  }
  .stage-card {
    flex-basis: 152px;
  }
  .actions .action-btn {
    flex-basis: 100%;
  }
  .ext-tool-actions {
    flex-direction: column;
  }
}

/* ============================================================================
   Consistencia UX general (botones, inputs, micro-animaciones)
   ========================================================================== */

/* Botones: misma altura y transicion en toda la app */
.action-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

/* El display de arriba no debe pisar el atributo hidden de la UA */
.action-btn[hidden],
.ghost-btn[hidden] {
  display: none !important;
}

.action-btn:active,
.ghost-btn:active,
.library-filter:active {
  transform: translateY(0) scale(0.98);
}

/* Selectores e inputs: altura uniforme tambien fuera del editor */
.resource-bulk-tools input,
.custom-template-panel input,
.custom-template-panel select {
  min-height: 44px;
}

/* Entrada suave de tarjetas renderizadas dinamicamente */
@media (prefers-reduced-motion: no-preference) {
  .ext-tool-card,
  .library-card {
    animation: wx-card-in 280ms var(--wx-ease, ease) both;
  }
  @keyframes wx-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}