/* Piezas del sistema, con prefijo vj-. Implementación de referencia: _ds-vista y el panel admin las usan.
   Reglas comunes: radios grandes, borde de 2px, sin blur decorativo, texto en tokens, movimiento en tokens. */
.vj-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font-body);padding:13px 26px;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;
  background:var(--accent-primary);color:var(--color-ink);cursor:pointer;text-decoration:none;
  transition:translate var(--duration-hover) var(--ease-bounce),scale var(--duration-hover) var(--ease-bounce),box-shadow var(--duration-base),background var(--duration-base),border-color var(--duration-base),color var(--duration-base)}
.vj-btn::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;z-index:-1;opacity:0}
.vj-btn:hover{translate:0 var(--lift-btn);scale:var(--grow-btn);box-shadow:var(--shadow-hover-btn)}
.vj-btn:hover::after{opacity:1;animation:vj-shine .7s ease}
.vj-btn:active{translate:0 0;scale:var(--press-scale)}
.vj-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.vj-btn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vj-btn--mint{background:var(--color-mint)}.vj-btn--yellow{background:var(--color-yellow)}.vj-btn--lilac{background:var(--color-lilac)}
.vj-btn--ghost{background:transparent;border-color:var(--ghost-line);color:var(--text-primary)}
.vj-btn--whatsapp{background:var(--color-mint);color:var(--color-ink)}          /* menta con ícono tinta, nunca verde WhatsApp */
.vj-btn--danger{background:transparent;border-color:var(--state-error-solid);color:var(--state-error-text)}
.vj-btn--danger:hover{background:var(--state-error-solid);color:#fff}
.vj-btn--sm{padding:8px 16px;font-size:13px}
.vj-btn[disabled]{opacity:.5;pointer-events:none}

.vj-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);
  transition:translate var(--duration-card) var(--ease-bounce),rotate var(--duration-card) var(--ease-bounce),box-shadow var(--duration-base),border-color var(--duration-base)}
.vj-card--lift:hover{translate:0 var(--lift-card);rotate:var(--tilt-card);box-shadow:var(--shadow-lg)}

.vj-eyebrow{font:600 13px/1.2 var(--font-detail);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-accent);margin:0 0 12px}

.vj-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-body);padding:5px 12px;border-radius:var(--radius-pill);background:var(--color-mint);color:var(--color-ink)}
.vj-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vj-badge--yellow{background:var(--color-yellow)}.vj-badge--lilac{background:var(--color-lilac)}.vj-badge--pink{background:var(--color-pink)}.vj-badge--coral{background:var(--color-coral)}
.vj-badge--ok{background:var(--state-success-bg);color:var(--state-success-text)}
.vj-badge--warn{background:var(--state-warning-bg);color:var(--state-warning-text)}
.vj-badge--err{background:var(--state-error-bg);color:var(--state-error-text)}
.vj-badge--info{background:var(--state-info-bg);color:var(--state-info-text)}

.vj-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--radius-md);border:var(--border-width) solid;font-size:14px;line-height:1.5}
.vj-alert svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vj-alert--ok{background:var(--state-success-bg);border-color:var(--state-success-line);color:var(--state-success-text)}
.vj-alert--warn{background:var(--state-warning-bg);border-color:var(--state-warning-line);color:var(--state-warning-text)}
.vj-alert--err{background:var(--state-error-bg);border-color:var(--state-error-line);color:var(--state-error-text)}
.vj-alert--info{background:var(--state-info-bg);border-color:var(--state-info-line);color:var(--state-info-text)}

.vj-field{display:block;font-size:13px;font-weight:600;color:var(--text-secondary)}
.vj-input{display:block;width:100%;margin-top:6px;font:400 15px var(--font-body);color:var(--text-primary);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 16px;transition:border-color var(--duration-fast)}
.vj-input:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-ring) 30%,transparent)}

/* Tarjeta de cifra: número en Tonus Contrast sobre un pastel */
.vj-stat{border-radius:var(--radius-lg);padding:20px 22px;color:var(--color-ink);transition:translate var(--duration-card) var(--ease-bounce)}
.vj-stat:hover{translate:0 var(--lift-stat)}
.vj-stat .n{font:400 clamp(2rem,3vw,2.6rem)/1 var(--font-display);display:block}
.vj-stat .l{font-size:13px;font-weight:500;margin-top:6px;display:block}

/* Tabla */
.vj-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.vj-table th{text-align:left;font:600 12px var(--font-detail);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);padding:12px 16px;background:var(--surface-sunken)}
.vj-table td{padding:14px 16px;border-top:1px solid var(--border-subtle);vertical-align:middle}
.vj-table tbody tr:hover td{background:var(--hover-tint)}

/* Tarjeta de plan (Básico, Plus, Integral) */
.vj-plan{position:relative;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-xl);padding:28px;
  transition:translate var(--duration-card) var(--ease-bounce),rotate var(--duration-card) var(--ease-bounce),scale var(--duration-card) var(--ease-bounce),box-shadow var(--duration-base)}
.vj-plan:hover{translate:0 var(--lift-card);rotate:var(--tilt-card);scale:var(--grow-media);box-shadow:var(--shadow-lg)}
.vj-plan--featured{border-color:var(--accent-primary)}
.vj-plan .flag{position:absolute;top:-13px;left:50%;translate:-50% 0;white-space:nowrap}
.vj-plan .price{font:400 3rem/1 var(--font-display);margin:10px 0 4px}
.vj-plan .feat{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:8px 0}
.vj-plan .feat svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--color-mint-dark);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Tarjeta de video (reel vertical). La etiqueta es sólida: nada de vidrio. */
.vj-video{position:relative;aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-deep);color:#fff;
  transition:translate var(--duration-card) var(--ease-bounce),rotate var(--duration-card) var(--ease-bounce),box-shadow var(--duration-base)}
.vj-video:hover{translate:0 var(--lift-media);rotate:var(--tilt-media);box-shadow:0 22px 44px rgba(0,0,0,.28)}
.vj-video .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(to top,rgba(23,24,26,.85),transparent)}
.vj-video .tag{display:inline-block;font:600 11px var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;background:var(--color-ink);color:#fff;border-radius:var(--radius-pill);padding:3px 10px;margin-bottom:8px}

/* Candado: lo bloqueado se desenfoca (único blur permitido junto al velo del modal) y la tarjeta se queda nítida encima */
.vj-locked{filter:blur(7px);opacity:.75;pointer-events:none;user-select:none}
.vj-lock{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:28px;text-align:center}
.vj-lock .ic{width:52px;height:52px;border-radius:50%;background:var(--color-lilac);color:var(--color-ink);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.vj-lock .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Mini formulario: opción con ícono Lucide en círculo pastel (reemplaza al emoji) */
.vj-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:500 15px var(--font-body);color:var(--text-primary);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 16px;cursor:pointer;
  transition:translate var(--duration-hover) var(--ease-bounce),box-shadow var(--duration-base),border-color var(--duration-base)}
.vj-opt:hover{translate:0 var(--lift-btn);box-shadow:var(--shadow-md);border-color:var(--accent-primary)}
.vj-opt:active{translate:0 0;scale:var(--press-scale)}
.vj-opt .ic{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--color-mint);color:var(--color-ink)}
.vj-opt .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vj-opt small{display:block;font-weight:400;font-size:12.5px;color:var(--text-secondary)}
.vj-progress{height:8px;border-radius:var(--radius-pill);background:var(--border-subtle);overflow:hidden}
.vj-progress>i{display:block;height:100%;border-radius:inherit;background:var(--accent-primary);transition:width var(--duration-card) var(--ease-soft)}

/* Velo de modal: el otro blur permitido */
.vj-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px)}
.vj-float{animation:vj-float var(--float-time) ease-in-out infinite}