/* ═══════════════════════════════════════════════════════════════════════════
   JegoDigital Studio — wizard chrome (css/studio.css)
   Phase 1 · Build contract v1 · WIZARD agent
   House brand only: #0b0d10 · gold #C5A059/#E5C893 · Playfair/Inter/Space Mono.
   Demo styling lives inside the iframe (engine render) — never here.
   Prefix: st-  ·  Overlay z-index: 200  ·  Ease: cubic-bezier(.16,1,.3,1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FUNNEL MODE takeover ───────────────────────────────────────────────── */
body.studio-active{overflow:hidden !important;height:100%}
body.studio-active nav,
body.studio-active footer,
body.studio-active #pc-fab,
body.studio-active .pc-fab,
body.studio-active #jd-chat-fab,
body.studio-active #jd-chat-panel,
body.studio-active #jd-wa-fab,
body.studio-active .wa-fab,
body.studio-active [id^="premium-chat"]{display:none !important}

/* ── overlay shell ──────────────────────────────────────────────────────── */
#studio-app{
  --st-bg:#0b0d10;
  --st-bg2:#0d0f13;
  --st-ink:#ffffff;
  --st-mut:rgba(255,255,255,.64);
  --st-gold:#C5A059;
  --st-gold2:#E5C893;
  --st-line:rgba(197,160,89,.22);
  --st-line2:rgba(255,255,255,.10);
  --st-glass:rgba(15,17,22,.78);
  --st-ease:cubic-bezier(.16,1,.3,1);
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:
    radial-gradient(ellipse 900px 480px at 20% -6%, rgba(197,160,89,.13), transparent 62%),
    radial-gradient(ellipse 700px 520px at 108% 88%, rgba(197,160,89,.08), transparent 62%),
    var(--st-bg);
  color:var(--st-ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .4s var(--st-ease);
}
#studio-app.st-open{
  display:grid;
  opacity:1;
  height:100vh;
  height:100dvh;
  grid-template-areas:"top" "ribbon" "stage" "controls";
  grid-template-rows:auto auto minmax(0,45%) minmax(0,1fr);
}
@media (min-width:900px){
  #studio-app.st-open{
    grid-template-areas:"stage top" "stage ribbon" "stage controls";
    grid-template-columns:55% minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
  }
}

#studio-app [hidden]{display:none !important}

#studio-app .st-grain{
  position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── top bar ────────────────────────────────────────────────────────────── */
.st-top{
  grid-area:top;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  border-bottom:1px solid rgba(197,160,89,.14);
  background:rgba(11,13,16,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative;z-index:20;
}
.st-back{
  width:44px;height:44px;flex:0 0 44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--st-line2);border-radius:50%;
  background:rgba(255,255,255,.035);color:var(--st-mut);
  cursor:pointer;transition:all .25s var(--st-ease);
}
.st-back:hover{color:#fff;border-color:rgba(197,160,89,.5)}
.st-dots{display:flex;align-items:center;gap:9px;flex:1;justify-content:center}
.st-dots i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:all .35s var(--st-ease);
}
.st-dots i.done{background:var(--st-gold)}
.st-dots i.now{
  background:var(--st-gold2);
  box-shadow:0 0 0 4px rgba(197,160,89,.18),0 0 14px rgba(197,160,89,.55);
  transform:scale(1.25);
}
.st-logo{
  font-family:'Playfair Display',serif;font-size:17px;font-weight:600;
  white-space:nowrap;color:#fff;
}
.st-logo b{color:var(--st-gold);font-weight:600}
.st-logo span{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--st-gold2);display:block;margin-top:-2px;text-align:right;
}

/* ── promo ribbon (no numbers before step 7) ────────────────────────────── */
.st-ribbon{
  grid-area:ribbon;
  text-align:center;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--st-gold2);
  background:linear-gradient(90deg,transparent,rgba(197,160,89,.14),transparent);
  border-bottom:1px solid rgba(197,160,89,.16);
  padding:7px 10px;position:relative;z-index:20;
}

/* ── stage · phone-frame preview theater ────────────────────────────────── */
.st-stage{
  grid-area:stage;
  position:relative;
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  z-index:5;
}
.st-frame{
  position:relative;
  height:100%;
  max-height:100%;
  aspect-ratio:390/844;
  max-width:100%;
  border-radius:26px;
  border:1px solid rgba(197,160,89,.35);
  background:#08090c;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 44px rgba(197,160,89,.10),
    inset 0 0 0 3px #101216;
  overflow:hidden;
  transition:border-radius .5s var(--st-ease),border-color .5s var(--st-ease);
}
.st-frame-notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:86px;height:7px;border-radius:999px;background:rgba(255,255,255,.08);
  z-index:8;pointer-events:none;
  transition:opacity .3s;
}
.st-frame-inner{
  position:absolute;left:0;top:0;
  width:390px;height:844px;
  transform-origin:top left;
}
.st-if{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  opacity:0;
  transition:opacity .45s var(--st-ease);
  pointer-events:none; /* steps: the only scrollable surface is the revealed demo */
}
.st-if-on{opacity:1}

/* skeleton shimmer (pre first render) */
.st-skel{
  position:absolute;inset:0;background:#0c0e12;padding:56px 22px;z-index:6;
  transition:opacity .55s var(--st-ease);
}
.st-skel i{
  display:block;border-radius:8px;margin-bottom:18px;
  background:linear-gradient(100deg,rgba(255,255,255,.045) 30%,rgba(197,160,89,.14) 50%,rgba(255,255,255,.045) 70%);
  background-size:220% 100%;
  animation:st-shimmer 1.6s linear infinite;
}
.st-skel .s1{height:34px;width:46%}
.st-skel .s2{height:220px;width:100%;margin-top:28px}
.st-skel .s3{height:20px;width:78%}
.st-skel .s4{height:20px;width:62%}
.st-skel .s5{height:120px;width:100%;margin-top:26px}
@keyframes st-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.st-skel-out{opacity:0}

/* de-blur beat */
.st-stage .st-frame{filter:blur(0);transition:filter 1.2s var(--st-ease)}
.st-stage.st-blur .st-frame{filter:blur(24px)}

/* shine sweep */
.st-shine{
  position:absolute;inset:0;pointer-events:none;z-index:30;
  background:linear-gradient(105deg,transparent 42%,rgba(229,200,147,.22) 50%,transparent 58%);
  transform:translateX(-130%) skewX(-6deg);
  opacity:0;
}
.st-shine-run{
  opacity:1;
  animation:st-sweep 1s var(--st-ease) forwards;
}
@keyframes st-sweep{from{transform:translateX(-130%) skewX(-6deg)}to{transform:translateX(130%) skewX(-6deg)}}

/* «Esto es {NOMBRE}.» */
.st-reveal-line{
  position:absolute;left:50%;top:14%;transform:translate(-50%,14px) scale(.98);
  z-index:32;pointer-events:none;
  font-family:'Playfair Display',serif;font-size:clamp(1.5rem,4.5vw,2.6rem);
  color:#fff;text-align:center;white-space:nowrap;
  text-shadow:0 4px 30px rgba(0,0,0,.75);
  opacity:0;
  transition:opacity .5s var(--st-ease),transform .5s var(--st-ease);
}
.st-reveal-line b{color:var(--st-gold2);font-weight:600;font-style:italic}
.st-line-on{opacity:1;transform:translate(-50%,0) scale(1)}

/* ── reveal / free-scroll modes ─────────────────────────────────────────── */
#studio-app.st-mode-reveal{display:block}
.st-mode-reveal .st-top,
.st-mode-reveal .st-ribbon,
.st-mode-reveal .st-controls{display:none}
/* browser chrome bar — hidden during building (phone look), shown at reveal */
.st-chrome{display:none}
.st-chrome-dots{display:flex;gap:7px}
.st-chrome-dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
.st-chrome-dots i:nth-child(1){background:#ff5f57}
.st-chrome-dots i:nth-child(2){background:#febc2e}
.st-chrome-dots i:nth-child(3){background:#28c840}
.st-chrome-url{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;max-width:340px;margin:0 auto;height:24px;padding:0 14px;border-radius:100px;background:rgba(255,255,255,.06);color:#8a93a3;font-size:12px;overflow:hidden;white-space:nowrap}
.st-chrome-url b{font-weight:600;color:#c9cfd8}

/* REVEAL — the demo lives inside a bounded browser mockup (not an edge-to-edge
   live page): reads as a premium concept preview, scrolls inside the frame. */
.st-mode-reveal .st-stage{position:absolute;inset:0;padding:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 0%,#14171d 0%,#0b0d11 62%)}
.st-mode-reveal .st-frame{
  position:relative;inset:auto;
  width:min(1080px,94vw);
  height:min(78vh,860px);
  max-width:none;aspect-ratio:auto;
  border-radius:16px;border:1px solid rgba(197,160,89,.42);
  background:#0b0d10;
  box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 60px rgba(197,160,89,.08);
  overflow:hidden;padding-top:40px;
}
.st-mode-reveal .st-chrome{
  display:flex;align-items:center;gap:12px;
  position:absolute;top:0;left:0;right:0;height:40px;z-index:9;
  padding:0 16px;background:#161a20;border-bottom:1px solid rgba(197,160,89,.22);
}
.st-mode-reveal .st-frame-notch{display:none}
.st-mode-reveal .st-frame-inner{position:absolute;left:0;top:40px;right:0;bottom:0;width:100%;height:auto;transform:none !important}
.st-mode-reveal .st-if{height:100%}
.st-mode-free .st-if-on{pointer-events:auto;-webkit-user-select:none;user-select:none}

/* ── controls (thumb zone) ──────────────────────────────────────────────── */
.st-controls{
  grid-area:controls;
  position:relative;z-index:15;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 22px calc(30px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(197,160,89,.14);
  background:linear-gradient(180deg,rgba(13,15,19,.85),rgba(11,13,16,.97));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
@media (min-width:900px){
  .st-controls{border-top:0;border-left:1px solid rgba(197,160,89,.14);padding:30px 36px 40px}
}
.st-step{animation:st-rise .5s var(--st-ease)}
@keyframes st-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.st-kicker{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--st-gold);margin-bottom:10px;
}
.st-h{
  font-family:'Playfair Display',serif;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.55rem,5.4vw,2.15rem);line-height:1.12;margin-bottom:8px;
}
.st-h em{color:var(--st-gold2);font-style:italic}
.st-sub{color:var(--st-mut);font-size:14px;font-weight:300;line-height:1.55;margin-bottom:16px}
.st-micro{color:rgba(255,255,255,.42);font-size:12.5px;font-weight:300;margin-top:14px}
.st-label{
  display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--st-mut);margin:14px 0 7px;
}

/* choice cards — giro (2×2, imagery + scrim) */
.st-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.st-card{
  position:relative;
  display:flex;align-items:center;gap:12px;
  min-height:52px;
  border:1px solid var(--st-line2);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  color:#fff;text-align:left;cursor:pointer;
  padding:16px;
  transition:transform .3s var(--st-ease),border-color .3s var(--st-ease),box-shadow .3s var(--st-ease);
  overflow:hidden;
}
.st-card:hover{transform:translateY(-3px);border-color:rgba(197,160,89,.55);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 26px rgba(197,160,89,.12)}
.st-card:active{transform:translateY(-1px) scale(.99)}
.st-card.is-on{
  border-color:var(--st-gold);
  box-shadow:0 0 0 1px var(--st-gold),0 14px 44px rgba(0,0,0,.5),0 0 30px rgba(197,160,89,.22);
}
.st-card-giro{
  flex-direction:column;align-items:flex-start;justify-content:flex-end;
  min-height:108px;
  background-size:cover;background-position:center;
}
.st-card-scrim{position:absolute;inset:0;background:linear-gradient(200deg,rgba(11,13,16,.28),rgba(11,13,16,.88) 78%);pointer-events:none}
.st-card-emoji{position:relative;z-index:2;font-size:22px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.st-card-label{position:relative;z-index:2;font-weight:700;font-size:14px;line-height:1.25;margin-top:6px;text-shadow:0 2px 10px rgba(0,0,0,.7)}

.st-other-link{
  display:inline-flex;align-items:center;min-height:44px;margin-top:12px;
  background:none;border:0;cursor:pointer;
  color:var(--st-mut);font-size:13px;font-weight:400;
  border-bottom:1px solid transparent;transition:color .25s;
  padding:0 2px;
}
.st-other-link:hover{color:var(--st-gold2)}
.st-other-form{margin-top:10px}
.st-row{display:flex;gap:10px;align-items:stretch}
.st-row .st-input{flex:1;min-width:0}

/* choice cards — estilo (stacked rows + type chip) */
.st-stack{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.st-card-style{min-height:76px}
.st-style-chip{
  flex:0 0 52px;width:52px;height:52px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:22px;
  border:1px solid rgba(197,160,89,.4);
}
.st-style-chip.is-dark{background:#101114;color:#E5C893}
.st-style-chip.is-light{background:#f4f1ea;color:#17150f}
.st-card-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.st-card-txt b{font-size:15px;font-weight:700}
.st-card-txt small{font-size:12.5px;color:var(--st-mut);font-weight:300;line-height:1.35}
.st-card-arrow{color:var(--st-gold2);font-size:16px;opacity:0;transform:translateX(-6px);transition:all .3s var(--st-ease)}
.st-card:hover .st-card-arrow,.st-card.is-on .st-card-arrow{opacity:1;transform:none}

/* palette pills */
.st-pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.st-pill{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:10px 18px 10px 12px;
  border-radius:999px;border:1px solid var(--st-line2);
  background:rgba(255,255,255,.035);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:transform .3s var(--st-ease),border-color .3s var(--st-ease),box-shadow .3s var(--st-ease);
}
.st-pill:hover{transform:translateY(-2px);border-color:rgba(197,160,89,.55)}
.st-pill.is-on{border-color:var(--st-gold);box-shadow:0 0 0 1px var(--st-gold),0 0 22px rgba(197,160,89,.25)}
.st-sw{display:inline-flex;gap:4px}
.st-sw i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.st-sw-rnd{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--st-gold2),var(--st-gold));color:#141005;font-size:15px;
}

/* inputs */
.st-input{
  width:100%;
  min-height:54px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:500;
  padding:14px 16px;
  outline:none;
  transition:border-color .25s var(--st-ease),box-shadow .25s var(--st-ease);
  -webkit-appearance:none;
  appearance:none;
}
.st-input::placeholder{color:rgba(255,255,255,.32);font-weight:300}
.st-input:focus{border-color:var(--st-gold);box-shadow:0 0 0 3px rgba(197,160,89,.16)}
.st-wa-field{display:flex;align-items:stretch;gap:9px}
.st-wa-field>span{
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(255,255,255,.04);color:var(--st-mut);
  font-family:'Space Mono',monospace;font-size:14px;padding:0 14px;
}
.st-wa-field .st-input{flex:1;min-width:0}

/* buttons */
.st-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#C5A059,#E5C893 50%,#C5A059);
  background-size:200% 100%;
  color:#141005;font-family:'Inter',sans-serif;font-weight:800;font-size:15.5px;
  padding:15px 28px;
  box-shadow:0 12px 38px rgba(197,160,89,.4);
  transition:transform .3s var(--st-ease),box-shadow .3s var(--st-ease),opacity .3s;
  animation:st-btnshine 4.5s linear infinite;
}
@keyframes st-btnshine{0%{background-position:0 50%}100%{background-position:200% 50%}}
.st-btn:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(197,160,89,.55)}
.st-btn:active{transform:translateY(0)}
.st-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 8px 26px rgba(197,160,89,.2);animation:none}
.st-btn-wide{width:100%;margin-top:18px}
.st-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:13px 22px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(197,160,89,.5);background:rgba(197,160,89,.08);
  color:var(--st-gold2);font-weight:700;font-size:14px;
  transition:all .3s var(--st-ease);
}
.st-btn-ghost:hover{background:rgba(197,160,89,.16);color:#fff}

/* gate extras */
.st-gate-err{color:#f2a3a3;font-size:13px;margin-top:12px;font-weight:400}
.st-trust{margin-top:22px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.st-trust p{font-size:12.5px;color:var(--st-mut);font-weight:300;margin-bottom:12px}
.st-trust-row{display:flex;align-items:center;gap:6px}
.st-av{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(197,160,89,.5),rgba(197,160,89,.2));
  border:1px solid rgba(197,160,89,.5);
  font-size:12px;font-weight:700;color:#fff;
  margin-right:-8px;
}
.st-trust-names{font-size:12px;color:var(--st-mut);margin-left:16px}
.st-trust-names i{color:var(--st-gold2);font-style:normal;letter-spacing:.12em;margin-left:6px;font-size:10px}

/* in-wizard resume banner */
.st-resume{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(197,160,89,.4);border-radius:14px;
  background:rgba(197,160,89,.08);
  padding:13px 16px;margin-bottom:18px;
  font-size:13.5px;
}
.st-resume-go{
  background:none;border:0;cursor:pointer;
  color:var(--st-gold2);font-weight:700;font-size:13.5px;
  min-height:44px;padding:0 6px;white-space:nowrap;
}

/* ── curtain (reveal choreography) ──────────────────────────────────────── */
.st-curtain{
  position:absolute;inset:0;z-index:50;
  background:
    radial-gradient(ellipse 640px 420px at 50% 42%, rgba(197,160,89,.13), transparent 65%),
    #0b0d10;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .6s var(--st-ease);
  pointer-events:none;
}
.st-curtain-on{opacity:1;pointer-events:auto}
.st-curtain-dust{position:absolute;inset:0;width:100%;height:100%}
.st-curtain-in{position:relative;text-align:center;padding:0 30px}
.st-curtain-mark{
  font-size:30px;color:var(--st-gold2);margin-bottom:22px;
  animation:st-mark 2.4s ease-in-out infinite;
}
@keyframes st-mark{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.st-status{
  font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--st-gold2);
  opacity:0;
}
.st-status-in{animation:st-status .45s var(--st-ease) forwards}
@keyframes st-status{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── floating bar (post-reveal) ─────────────────────────────────────────── */
.st-bar{
  position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%,90px);
  z-index:55;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100% - 24px);
  padding:10px;
  border-radius:999px;
  border:1px solid rgba(197,160,89,.35);
  background:rgba(13,15,19,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  opacity:0;
  transition:transform .6s var(--st-ease),opacity .6s var(--st-ease);
}
/* keyframes with fill:both pin the end state even if frames are throttled */
.st-bar-on{animation:st-bar-in .65s var(--st-ease) both}
@keyframes st-bar-in{
  from{transform:translate(-50%,90px);opacity:0}
  to{transform:translate(-50%,0);opacity:1}
}
.st-bar-hide{transform:translate(-50%,120px) !important;opacity:0 !important;pointer-events:none}
.st-bar-wa{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:transparent;
  color:rgba(255,255,255,.62);font-weight:500;font-size:12.5px;text-decoration:none;
  transition:all .3s var(--st-ease);
  white-space:nowrap;
}
.st-bar-wa svg{opacity:.7}
.st-bar-wa:hover{border-color:rgba(37,211,102,.5);color:#7ee2ab}
.st-bar-price{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#C5A059,#E5C893 50%,#C5A059);background-size:200% 100%;
  color:#141005;font-weight:800;font-size:13.5px;
  box-shadow:0 10px 32px rgba(197,160,89,.45);
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .5s var(--st-ease),transform .5s var(--st-ease);
  white-space:nowrap;
}
.st-bar-price-on{animation:st-price-in .5s var(--st-ease) both,st-btnshine 4.5s linear infinite}
@keyframes st-price-in{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:none}
}

/* ── oferta sheet ───────────────────────────────────────────────────────── */
.st-sheet{
  position:absolute;left:0;right:0;bottom:0;
  height:75%;
  z-index:58;
  border-radius:26px 26px 0 0;
  border-top:1px solid rgba(197,160,89,.45);
  background:
    radial-gradient(ellipse 560px 200px at 50% 0%, rgba(197,160,89,.12), transparent 70%),
    rgba(12,14,18,.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 -30px 90px rgba(0,0,0,.65);
  transform:translateY(104%);
  transition:transform .55s var(--st-ease);
  display:flex;flex-direction:column;
}
.st-sheet-on{animation:st-sheet-in .55s var(--st-ease) both}
@keyframes st-sheet-in{
  from{transform:translateY(104%)}
  to{transform:translateY(0)}
}
@media (min-width:900px){
  .st-sheet{left:auto;width:480px;right:26px;border-radius:26px 26px 0 0}
}
.st-sheet-close{
  flex:0 0 auto;
  align-self:center;
  width:64px;height:34px;margin-top:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--st-mut);
  transition:color .25s;
}
.st-sheet-close:hover{color:#fff}
.st-sheet-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 24px calc(34px + env(safe-area-inset-bottom));
}
.st-h-sheet{font-size:clamp(1.5rem,5vw,1.9rem);margin-bottom:10px}

/* v2 · unlock list — the purchase OPENS locks on what they already own */
.st-unlocks{list-style:none;margin:16px 0 26px;padding:16px 18px;border:1px solid rgba(197,160,89,.35);border-radius:14px;background:rgba(197,160,89,.05)}
.st-unlocks li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:#c9cfd8;padding:7px 0;line-height:1.45}
.st-unlocks li b{color:#F5F2EA;font-weight:700}
.st-unlocks li i{font-style:normal;flex:none;font-size:12px;opacity:.9}

/* v2 · real-showcase proof strip */
.st-real{margin:26px 0 4px;text-align:center}
.st-real-line{font-size:13.5px;color:#c9cfd8;line-height:1.5;max-width:420px;margin:0 auto 14px}
.st-real-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-real-row img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid rgba(197,160,89,.3)}
.st-real-cap{margin-top:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8a93a3}

/* v2 · honest expiry (real 30-day TTL) */
.st-expiry{margin-top:14px;text-align:center;font-size:12.5px;color:#8a93a3}
.st-expiry b{color:#E5C893;font-weight:600}

.st-stack-list{list-style:none;margin:18px 0 8px;padding:0}
.st-stack-list li{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 0 11px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  border-left:2px solid rgba(255,255,255,.08);
}
.st-stack-list li.is-hero{border-left-color:var(--st-gold)}
.st-stack-list b{font-size:13.5px;font-weight:700;display:block;line-height:1.35}
.st-stack-list small{font-size:12px;color:var(--st-mut);font-weight:300;display:block;margin-top:2px;line-height:1.4}
.st-stack-list li>span{
  font-family:'Space Mono',monospace;font-size:11.5px;color:rgba(229,200,147,.75);
  white-space:nowrap;padding-top:2px;
}
.st-stack-total{
  text-align:right;font-size:12.5px;color:var(--st-mut);font-weight:300;
  padding:10px 0 4px;
}
.st-stack-total b{
  font-family:'Space Mono',monospace;color:var(--st-gold2);font-size:13px;
  text-decoration:line-through;text-decoration-color:rgba(229,200,147,.6);
}

.st-price-block{
  text-align:center;
  border:1.5px solid rgba(197,160,89,.5);border-radius:20px;
  background:
    radial-gradient(ellipse 380px 160px at 50% 0%, rgba(197,160,89,.15), transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  padding:24px 20px;margin:18px 0 6px;
}
.st-price-old{color:rgba(255,255,255,.45);text-decoration:line-through;font-size:16px;font-weight:600}
.st-price-note{font-size:13px;color:var(--st-mut);font-weight:300;margin-top:4px}
.st-price-note b{color:#86efac;font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.1em}
.st-price-now{
  font-family:'Playfair Display',serif;font-size:clamp(2.4rem,8vw,3.2rem);
  color:var(--st-gold2);line-height:1.05;margin:6px 0 4px;
}
.st-price-meta{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--st-mut);text-transform:uppercase;
}
.st-promo-row{display:flex;gap:9px;margin-top:16px}
.st-promo-row .st-input{flex:1;min-width:0;min-height:48px;text-transform:uppercase}
.st-promo-msg{font-size:12.5px;color:#f2a3a3;margin-top:8px;text-align:left}

.st-addons{margin-top:16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden}
.st-addons summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:14px 18px;
  font-size:13.5px;font-weight:700;color:var(--st-gold2);
}
.st-addons summary::-webkit-details-marker{display:none}
.st-addons summary i{font-style:normal;font-size:18px;color:var(--st-gold);transition:transform .3s var(--st-ease)}
.st-addons[open] summary i{transform:rotate(45deg)}
.st-addons-in{padding:2px 14px 14px}
.st-addon{
  display:flex;align-items:flex-start;gap:12px;
  min-height:52px;padding:12px 6px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.06);
}
.st-addon input{position:absolute;opacity:0;pointer-events:none}
.st-addon-box{
  flex:0 0 24px;width:24px;height:24px;margin-top:2px;
  border-radius:7px;border:1.5px solid rgba(197,160,89,.55);
  background:rgba(255,255,255,.03);
  position:relative;transition:all .25s var(--st-ease);
}
.st-addon input:checked+.st-addon-box{
  background:linear-gradient(135deg,var(--st-gold2),var(--st-gold));
  border-color:var(--st-gold);
  box-shadow:0 0 14px rgba(197,160,89,.4);
}
.st-addon input:checked+.st-addon-box::after{
  content:"";position:absolute;left:8px;top:3.5px;width:6px;height:11px;
  border:solid #141005;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.st-addon-txt{flex:1;min-width:0}
.st-addon-txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.st-addon-txt small{display:block;font-size:12px;color:var(--st-mut);font-weight:300;margin-top:2px;line-height:1.4}
.st-addon-price{
  font-family:'Space Mono',monospace;font-size:11.5px;color:var(--st-gold2);
  white-space:nowrap;padding-top:3px;
}

/* ── "Tu web puede crecer contigo" — capability cards (v2, tap-to-preview) ── */
.st-grow{margin:26px 0 6px}
.st-grow-h{font-family:'Playfair Display',Georgia,serif;font-size:22px;color:#F5F2EA;line-height:1.2}
.st-grow-h em{font-style:italic;color:var(--st-gold2)}
.st-grow-sub{font-size:13px;color:var(--st-mut);margin:6px 0 12px}
.st-grow-sub2{margin-top:18px}
.st-grow-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.st-cap{
  display:block;border:1px solid rgba(255,255,255,.1);border-radius:13px;
  padding:12px 13px;cursor:pointer;background:rgba(255,255,255,.02);
  transition:border-color .25s var(--st-ease),background .25s var(--st-ease);
  -webkit-tap-highlight-color:transparent;
}
.st-cap:hover{border-color:rgba(197,160,89,.4)}
.st-cap-top{display:flex;align-items:center;gap:8px}
.st-cap-ic{font-size:17px;flex:none;line-height:1}
.st-cap-nm{flex:1;min-width:0;font-size:13px;font-weight:700;color:#F5F2EA;line-height:1.25}
.st-cap-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.02em;white-space:nowrap;flex:none}
.st-cap-inc{color:#7bbf7b}
.st-cap-price{color:var(--st-gold2)}
.st-cap-more{
  display:none;font-size:12.5px;color:var(--st-mut);line-height:1.5;margin-top:9px;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.07);
}
.st-cap.is-open .st-cap-more,.st-cap.is-add.is-on .st-cap-more{display:block}
.st-cap.is-add input{position:absolute;opacity:0;pointer-events:none}
.st-cap.is-add.is-on{border-color:var(--st-gold);background:rgba(197,160,89,.08)}
.st-cap.is-add.is-on .st-cap-price{color:var(--st-gold)}
.st-cap.is-add.is-on .st-cap-price::before{content:"✓ ";}
.st-cap-add{
  display:inline-block;margin-top:8px;font-family:'Space Mono',monospace;
  font-size:11px;font-weight:700;color:#141005;background:linear-gradient(135deg,var(--st-gold2),var(--st-gold));
  border-radius:100px;padding:6px 14px;letter-spacing:.02em;
}
.st-cap.is-add.is-on .st-cap-add{display:none}
.st-grow-ask{margin-top:16px;font-size:12.5px;color:var(--st-mut);line-height:1.5;text-align:center}
.st-grow-ask-wa{color:var(--st-gold2);font-weight:700;white-space:nowrap}
@media(max-width:380px){.st-grow-grid{grid-template-columns:1fr}}

/* ── guarantee / risk-reversal badge (v2) ── */
.st-guarantee{
  display:flex;align-items:flex-start;gap:11px;
  margin:6px 0 16px;padding:15px 17px;
  border:1px solid rgba(123,191,123,.4);border-radius:14px;
  background:rgba(123,191,123,.07);
  font-size:13.5px;color:#dfe6df;line-height:1.5;
}
.st-guarantee b{color:#F5F2EA;font-weight:700}
.st-guarantee-ic{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#7bbf7b;color:#0b1a0b;font-weight:800;font-size:14px;margin-top:1px;
}
.st-guarantee-sub{display:block;margin-top:6px;font-size:12px;color:#a9b3a9;font-weight:300}

.st-cta{margin-top:20px}
.st-cta-degraded{margin-top:20px;text-decoration:none}
.st-cta-err{font-size:13px;color:#f2a3a3;margin-top:12px;font-weight:400;line-height:1.5}
.st-cta-err a{color:var(--st-gold2);text-decoration:underline}
.st-secure{
  text-align:center;font-size:11.5px;color:rgba(255,255,255,.42);
  font-weight:300;margin-top:12px;
}
.st-risk{
  font-size:12.5px;color:var(--st-mut);font-weight:300;line-height:1.6;
  border-left:2px solid rgba(197,160,89,.4);
  padding-left:14px;margin-top:18px;
}
.st-alt-row{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
}
.st-alt-wa{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:6px 10px;border-radius:8px;
  border:0;background:transparent;
  color:var(--st-mut);font-weight:500;font-size:13px;text-decoration:underline;
  text-underline-offset:3px;
  transition:color .25s var(--st-ease);
}
.st-alt-wa svg{opacity:.65}
.st-alt-wa:hover{color:#7ee2ab}
.st-alt-cal{
  color:var(--st-mut);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;
  transition:color .25s;
}
.st-alt-cal:hover{color:var(--st-gold2)}

/* ── page-level resume banner (wizard closed) ───────────────────────────── */
.st-page-resume{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:190;
  display:flex;align-items:center;gap:14px;
  max-width:calc(100% - 24px);
  padding:11px 12px 11px 20px;
  border-radius:999px;
  border:1px solid rgba(197,160,89,.45);
  background:rgba(13,15,19,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:#fff;font-family:'Inter',sans-serif;font-size:13.5px;
  animation:st-pr-in .6s cubic-bezier(.16,1,.3,1);
}
@keyframes st-pr-in{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}
.st-page-resume-go{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#C5A059,#E5C893 50%,#C5A059);background-size:200% 100%;
  color:#141005;font-weight:800;font-size:13px;white-space:nowrap;
}
.st-page-resume-x{
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.45);
  font-size:20px;line-height:1;min-width:38px;min-height:44px;
}
.st-page-resume-x:hover{color:#fff}

/* ── reduced motion / low-power ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #studio-app *,
  #studio-app *::before,
  #studio-app *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
  }
  .st-skel i{animation:none;background:rgba(255,255,255,.05)}
  .st-stage.st-blur .st-frame{filter:none}
  .st-shine{display:none}
}