/* vendeia · sistema de diseño del SaaS (vp- = vendeia panel/producto)
   minimalismo + animaciones · marca naranja #ff5c2a + grafito.
   Namespaced para no chocar con el landing ni el editor compartido. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  /* marca */
  --vp-brand: #ff5c2a;
  --vp-brand-ink: #e8420c;      /* naranja legible sobre claro */
  --vp-brand-soft: #fff1ea;     /* tinte de fondo */
  --vp-brand-glow: rgba(255, 92, 42, .30);
  /* grafito + neutros cálidos */
  --vp-ink: #17120e;
  --vp-ink-soft: #6c6358;
  --vp-ink-muted: #a39a8d;
  --vp-bg: #faf7f3;
  --vp-surface: #ffffff;
  --vp-surface-2: #f6f1ea;
  --vp-line: #ece5db;
  --vp-line-strong: #ddd3c6;
  /* estados */
  --vp-ok: #1f9d63;
  --vp-ok-soft: #e9f6ef;
  --vp-warn: #c97a09;
  --vp-warn-soft: #fdf2dd;
  /* forma */
  --vp-r: 14px;
  --vp-r-lg: 22px;
  --vp-r-xl: 30px;
  --vp-pill: 999px;
  /* profundidad */
  --vp-sh1: 0 1px 2px rgba(23, 18, 14, .04), 0 3px 10px rgba(23, 18, 14, .045);
  --vp-sh2: 0 6px 18px rgba(23, 18, 14, .07), 0 18px 40px rgba(23, 18, 14, .08);
  --vp-sh-brand: 0 10px 26px var(--vp-brand-glow);
  /* motion */
  --vp-ease: cubic-bezier(.22, .61, .36, 1);
  --vp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vp-disp: 'Sora', system-ui, sans-serif;
  --vp-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--vp-body);
  background: var(--vp-bg);
  color: var(--vp-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv05';
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* tipografía */
h1, h2, h3, .vp-disp { font-family: var(--vp-disp); letter-spacing: -.02em; line-height: 1.08; }
.vp-h1 { font-size: clamp(1.45rem, 3.6vw, 2.05rem); font-weight: 700; line-height: 1.12; }
.vp-h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 700; }
.vp-lead { font-size: clamp(.92rem, 1.7vw, 1.02rem); color: var(--vp-ink-soft); line-height: 1.5; }
.vp-eyebrow { font-family: var(--vp-disp); font-weight: 600; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vp-brand-ink); }
.vp-muted { color: var(--vp-ink-muted); }
.vp-grad-text { background: linear-gradient(105deg, var(--vp-ink) 30%, var(--vp-brand-ink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* layout */
.vp-app { min-height: 100dvh; display: flex; flex-direction: column; }
.vp-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.vp-narrow { max-width: 540px; }

/* botones */
.vp-btn { --b: var(--vp-brand); display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--vp-disp); font-weight: 600; font-size: .98rem; padding: .85em 1.5em; border-radius: var(--vp-pill);
  border: 0; cursor: pointer; transition: transform .25s var(--vp-ease-out), box-shadow .25s var(--vp-ease-out), background .2s; }
.vp-btn--primary { background: var(--b); color: #fff; box-shadow: var(--vp-sh-brand); }
.vp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--vp-brand-glow); }
.vp-btn--primary:active { transform: translateY(0); }
.vp-btn--ghost { background: transparent; color: var(--vp-ink); border: 1.5px solid var(--vp-line-strong); }
.vp-btn--ghost:hover { border-color: var(--vp-ink); transform: translateY(-1px); }
.vp-btn--soft { background: var(--vp-surface); color: var(--vp-ink); box-shadow: var(--vp-sh1); }
.vp-btn--soft:hover { transform: translateY(-1px); box-shadow: var(--vp-sh2); }
.vp-btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.vp-btn--block { width: 100%; }
.vp-btn[disabled] { opacity: .45; pointer-events: none; }

/* tarjetas / superficies */
.vp-card { background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-r-lg);
  box-shadow: var(--vp-sh1); }
.vp-card--pad { padding: clamp(20px, 5vw, 34px); }
.vp-elevated { box-shadow: var(--vp-sh2); }

/* campos */
.vp-field { display: block; margin-bottom: 14px; }
.vp-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; }
.vp-input, .vp-textarea, .vp-select { width: 100%; background: var(--vp-surface); border: 1.5px solid var(--vp-line-strong);
  border-radius: var(--vp-r); padding: .85em 1em; font-size: 1rem; transition: border-color .18s, box-shadow .18s; }
.vp-input:focus, .vp-textarea:focus, .vp-select:focus { outline: 0; border-color: var(--vp-brand);
  box-shadow: 0 0 0 4px var(--vp-brand-soft); }
.vp-textarea { resize: vertical; min-height: 84px; }
.vp-hint { font-size: .82rem; color: var(--vp-ink-muted); margin-top: 6px; }

/* chips (selección de sector, categorías) */
.vp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.vp-chip { display: inline-flex; align-items: center; gap: .45em; padding: .6em 1em; border-radius: var(--vp-pill);
  background: var(--vp-surface); border: 1.5px solid var(--vp-line-strong); font-weight: 500; font-size: .92rem;
  cursor: pointer; transition: all .18s var(--vp-ease-out); user-select: none; }
.vp-chip:hover { border-color: var(--vp-ink); transform: translateY(-1px); }
.vp-chip[aria-pressed="true"] { background: var(--vp-ink); color: #fff; border-color: var(--vp-ink); }
.vp-chip .e { font-size: 1.1em; }

/* segmented (rápido / completo) */
.vp-seg { display: inline-flex; background: var(--vp-surface-2); border-radius: var(--vp-pill); padding: 4px; gap: 2px; }
.vp-seg button { border: 0; background: transparent; padding: .55em 1.1em; border-radius: var(--vp-pill);
  font-family: var(--vp-disp); font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--vp-ink-soft);
  transition: all .2s var(--vp-ease-out); }
.vp-seg button[aria-pressed="true"] { background: var(--vp-surface); color: var(--vp-ink); box-shadow: var(--vp-sh1); }

/* progreso del wizard */
.vp-steps { display: flex; align-items: center; gap: 6px; }
.vp-steps i { height: 4px; flex: 1; border-radius: var(--vp-pill); background: var(--vp-line-strong);
  overflow: hidden; position: relative; }
.vp-steps i::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--vp-brand);
  transition: width .5s var(--vp-ease); }
.vp-steps i.done::after { width: 100%; }
.vp-steps i.active::after { width: 100%; animation: vp-fill 1.2s var(--vp-ease) forwards; }
@keyframes vp-fill { from { width: 0 } to { width: 100% } }

/* grilla de productos / tiles procedurales (WOW barato, $0) */
.vp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vp-prod { background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-r-lg);
  overflow: hidden; box-shadow: var(--vp-sh1); transition: transform .25s var(--vp-ease-out), box-shadow .25s; }
.vp-prod:hover { transform: translateY(-3px); box-shadow: var(--vp-sh2); }
.vp-prod__media { aspect-ratio: 4/3; display: grid; place-items: center; position: relative; }
.vp-prod__media img { width: 100%; height: 100%; object-fit: cover; }
.vp-prod__body { padding: 12px 13px 14px; }
.vp-prod__name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.vp-prod__cat { font-size: .76rem; color: var(--vp-ink-muted); margin-top: 2px; }
.vp-prod__price { font-family: var(--vp-disp); font-weight: 700; margin-top: 7px; }

/* tile procedural: gradiente teñido al sector + glifo + grano */
.vp-tile { font-size: clamp(2.6rem, 9vw, 3.6rem); color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.18);
  background: linear-gradient(140deg, #ff8a5c, #ff5c2a); }
.vp-tile::before { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.vp-tile[data-sector="comida"]   { background: linear-gradient(140deg, #ff8a5c, #e8420c); }
.vp-tile[data-sector="cafe"]     { background: linear-gradient(140deg, #b07a5b, #6b4326); }
.vp-tile[data-sector="ropa"]     { background: linear-gradient(140deg, #8a7fd6, #4b3fa0); }
.vp-tile[data-sector="belleza"]  { background: linear-gradient(140deg, #ff9ec7, #d65d96); }
.vp-tile[data-sector="barberia"] { background: linear-gradient(140deg, #5b6b80, #2b3a4f); }
.vp-tile[data-sector="fitness"]  { background: linear-gradient(140deg, #34d6b0, #0f8f74); }

/* badges de confianza (revisar / ok) */
.vp-badge { display: inline-flex; align-items: center; gap: .35em; font-size: .72rem; font-weight: 600;
  padding: .28em .7em; border-radius: var(--vp-pill); }
.vp-badge--ok { background: var(--vp-ok-soft); color: var(--vp-ok); }
.vp-badge--warn { background: var(--vp-warn-soft); color: var(--vp-warn); }

/* marco de teléfono (simula la tienda en vivo) */
.vp-phone { width: 280px; max-width: 78vw; aspect-ratio: 9/19; background: #0d0b09; border-radius: 38px;
  padding: 9px; box-shadow: var(--vp-sh2); position: relative; }
.vp-phone__scr { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--vp-bg);
  overflow-y: auto; }
.vp-phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.25); z-index: 2; }

/* uploader */
.vp-drop { border: 2px dashed var(--vp-line-strong); border-radius: var(--vp-r-lg); padding: clamp(26px, 7vw, 44px);
  text-align: center; background: var(--vp-surface); cursor: pointer; transition: all .2s var(--vp-ease-out); }
.vp-drop:hover { border-color: var(--vp-brand); background: var(--vp-brand-soft); }
.vp-drop .ic { font-size: 2.2rem; }

/* escáner de IA (animación del momento mágico) */
.vp-scan { position: relative; border-radius: var(--vp-r-lg); overflow: hidden; }
.vp-scan__bar { position: absolute; left: 0; right: 0; height: 38%; top: -38%;
  background: linear-gradient(180deg, rgba(255,92,42,0), rgba(255,92,42,.22) 70%, rgba(255,92,42,.9));
  border-bottom: 2px solid var(--vp-brand); animation: vp-scan 1.9s var(--vp-ease) infinite; }
@keyframes vp-scan { 0% { top: -38% } 100% { top: 100% } }
.vp-dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vp-brand);
  margin: 0 2px; animation: vp-bounce 1s infinite; }
.vp-dots span:nth-child(2) { animation-delay: .15s } .vp-dots span:nth-child(3) { animation-delay: .3s }
@keyframes vp-bounce { 0%,100% { transform: translateY(0); opacity: .4 } 50% { transform: translateY(-6px); opacity: 1 } }

/* reveals + stagger */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--vp-ease-out), transform .6s var(--vp-ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.vp-stagger > * { opacity: 0; transform: translateY(14px); }
.vp-stagger.in > * { animation: vp-rise .55s var(--vp-ease-out) forwards; }
.vp-stagger.in > *:nth-child(2) { animation-delay: .05s } .vp-stagger.in > *:nth-child(3) { animation-delay: .1s }
.vp-stagger.in > *:nth-child(4) { animation-delay: .15s } .vp-stagger.in > *:nth-child(5) { animation-delay: .2s }
.vp-stagger.in > *:nth-child(6) { animation-delay: .25s } .vp-stagger.in > *:nth-child(7) { animation-delay: .3s }
.vp-stagger.in > *:nth-child(8) { animation-delay: .35s } .vp-stagger.in > *:nth-child(n+9) { animation-delay: .4s }
@keyframes vp-rise { to { opacity: 1; transform: none } }

/* transición entre pasos del wizard */
.vp-step { display: none; }
.vp-step.is-active { display: block; animation: vp-step-in .5s var(--vp-ease-out); }
@keyframes vp-step-in { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

/* util */
.vp-row { display: flex; gap: 12px; flex-wrap: wrap; }
.vp-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp-center { text-align: center; }
.vp-mt-s { margin-top: 10px } .vp-mt { margin-top: 20px } .vp-mt-l { margin-top: 34px }
.vp-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.vp-confetti i { position: absolute; width: 9px; height: 14px; top: -20px; border-radius: 2px;
  animation: vp-fall 2.6s linear forwards; }
@keyframes vp-fall { to { transform: translateY(108vh) rotate(540deg); opacity: .9 } }

/* ░░ split desktop: formulario izquierda + preview en vivo derecha ░░ */
.vp-split { display: flex; flex-direction: column; min-height: 100dvh; }
.vp-pane-form { flex: 1; display: flex; flex-direction: column; }
.vp-pane-preview { display: none; }

@media (min-width: 940px) {
  .vp-split { flex-direction: row; align-items: stretch; }
  .vp-pane-form { flex: 1 1 52%; max-width: 660px; max-height: 100dvh; overflow-y: auto; }
  .vp-pane-preview { display: flex; flex-direction: column; flex: 1 1 48%; position: sticky; top: 0; height: 100dvh;
    align-items: center; justify-content: center; gap: 14px; padding: clamp(20px, 3vw, 40px); overflow: hidden;
    background: radial-gradient(130% 110% at 72% -10%, #2a1d15, #17120e 60%); }
  .vp-pane-form .vp-narrow { max-width: 560px; margin-inline: 0; }
}

/* marco de navegador del preview (tu sitio real) */
.vp-browser { width: 100%; max-width: 390px; background: var(--vp-bg); border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.09);
  animation: vp-floatin .7s var(--vp-ease-out); }
@keyframes vp-floatin { from { opacity: 0; transform: translateY(22px) scale(.97) } to { opacity: 1; transform: none } }
.vp-browser__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--vp-line); }
.vp-browser__bar .d { width: 9px; height: 9px; border-radius: 50%; background: #e6ddd0; }
.vp-browser__url { flex: 1; margin-left: 6px; font-size: 11px; color: var(--vp-ink-muted); background: var(--vp-surface-2);
  padding: 5px 11px; border-radius: 99px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-browser__scr { max-height: min(620px, 74dvh); overflow-y: auto; scrollbar-width: thin; }
.vp-preview-tag { color: rgba(255,255,255,.62); font-size: .8rem; font-weight: 500; flex: 0 0 auto;
  display: flex; align-items: center; gap: .4em; text-align: center; }

/* skeleton del preview vacío (antes de tener productos) */
.vp-skel { background: linear-gradient(100deg, var(--vp-surface-2) 30%, #fff 50%, var(--vp-surface-2) 70%);
  background-size: 220% 100%; animation: vp-shim 1.4s linear infinite; border-radius: 8px; }
@keyframes vp-shim { to { background-position: -220% 0 } }

/* paleta extraída del logo */
.vp-logo-up { display: flex; gap: 14px; align-items: center; }
.vp-logo-up .vp-drop { flex: 0 0 92px; width: 92px; height: 92px; padding: 0; display: grid; place-items: center; }
.vp-logo-up .vp-drop img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.vp-pal { flex: 1; }
.vp-swatches { display: flex; gap: 8px; margin-top: 8px; }
.vp-swatch { width: 30px; height: 30px; border-radius: 9px; box-shadow: var(--vp-sh1); transform: scale(0);
  animation: vp-pop .42s var(--vp-ease-out) forwards; }
.vp-swatch:nth-child(2) { animation-delay: .06s } .vp-swatch:nth-child(3) { animation-delay: .12s }
.vp-swatch:nth-child(4) { animation-delay: .18s } .vp-swatch:nth-child(5) { animation-delay: .24s }
@keyframes vp-pop { to { transform: scale(1) } }

/* ── celular del preview (reemplaza el marco de navegador, ratio real 9:19.3) ── */
.vp-dev { height: min(560px, 70vh); width: auto; max-width: 88%; aspect-ratio: 9 / 19.3; flex: 0 1 auto;
  background: #0c0a08; border-radius: 42px; padding: 10px; position: relative; transform-style: preserve-3d;
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 rgba(255,255,255,.12) inset;
  animation: vp-dev-in 1s var(--vp-ease-out) both, vp-dev-float 6.5s ease-in-out 1.2s infinite; }
.vp-dev::after { content: ''; position: absolute; inset: -28px -22px; z-index: -1; border-radius: 60px;
  background: radial-gradient(58% 46% at 50% 32%, rgba(255,92,42,.22), transparent 72%); }
.vp-dev__island { position: absolute; top: 21px; left: 50%; transform: translateX(-50%); width: 88px; height: 25px;
  background: #000; border-radius: 99px; z-index: 4; }
.vp-dev__scr { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; overflow-y: auto;
  background: var(--vp-bg); scrollbar-width: none; }
.vp-dev__scr::-webkit-scrollbar { display: none; }
@keyframes vp-dev-in { from { opacity: 0; transform: translateY(46px) rotateX(10deg) scale(.93) } to { opacity: 1; transform: none } }
@keyframes vp-dev-float { 0%, 100% { transform: translateY(0) rotateX(0) } 50% { transform: translateY(-8px) rotateX(1.2deg) } }
.vp-preview-url { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.08); padding: 6px 14px; border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .05ms !important; }
  .vp-scan__bar, .vp-skel { animation: none !important; }
  .vp-dev { animation: vp-dev-in .4s ease both !important; }
}