/* Recorrido guiado: pasos a la izquierda, vista previa fija a la derecha (arriba en celular). */
:root{--live:#75b7ff;--live2:#9b8aff;--header-h:82px}
html{scroll-padding-top:calc(var(--header-h) + 10px)}
/* overflow-x:hidden en body convierte al body en contenedor de scroll y anula position:sticky. */
body{overflow:visible;overflow-x:clip}
.nav-advanced{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:#b5b8c3;cursor:pointer;transition:color .2s}
.nav-advanced:hover{color:var(--accent)}

.journey{max-width:1400px;padding:0 28px 30px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"intro stage" "steps stage";column-gap:56px;align-items:start}
.journey-intro{grid-area:intro;min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.journey-intro h1{margin:18px 0 16px}
.journey-intro .intro{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;margin:0}
.journey-steps{grid-area:steps}
.journey-stage{grid-area:stage;position:sticky;top:calc(var(--header-h) + 14px);height:calc(100vh - var(--header-h) - 28px);margin-top:14px;display:flex;flex-direction:column;gap:10px;z-index:2}

.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.stage-progress{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;color:#dce2ec}
.stage-dots{display:flex;gap:5px}
.stage-dots i{width:20px;height:5px;border-radius:5px;background:#2a2f3c;transition:background .4s,transform .4s}
.stage-dots i.on{background:var(--live);transform:scaleY(1.25)}
.journey-complete .stage-progress{color:var(--live)}
.stage-actions{display:flex;gap:6px}
.stage-actions button{border:1px solid #333744;background:#1a1d26;padding:7px 11px;border-radius:20px;font-size:11px;color:#c4cad6;cursor:pointer;transition:border-color .2s,color .2s}
.stage-actions button:hover{border-color:var(--live);color:#fff}
.stage-actions .randomize{color:var(--accent);border-color:#304b72;background:#15273f}
.stage-actions button:disabled{opacity:.35;cursor:default}
.stage-frame{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid #ffffff1c;border-radius:16px;overflow:hidden;background:#0d0f14;box-shadow:0 30px 90px #0009,0 0 0 1px color-mix(in srgb,var(--live) 22%,transparent),0 0 90px color-mix(in srgb,var(--live) 16%,transparent);transition:box-shadow .6s}
.stage-frame.pulse{animation:stage-pulse 1.2s ease-out}
.stage-bar{height:34px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;background:#191c25;border-bottom:1px solid #ffffff12;font-size:10px;letter-spacing:.4px;color:#aeb8c9}
.journey .canvas{flex:1;min-height:0;height:auto;padding:0;display:flex;justify-content:center;background:radial-gradient(#4044534d .7px,transparent .7px) 0 0/13px 13px,#0d0f14;overflow:hidden}
.journey .canvas iframe{height:100%;border:0;border-radius:0;box-shadow:none;transition:width .45s ease}
.journey .canvas iframe.mobile{width:390px;border-inline:1px solid #ffffff1a}
.stage-note{font-size:10px;color:#7f8798;margin:0}

.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.32;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.step.is-active{opacity:1;transform:none}
.step-num{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--live)}
.step h2{font-size:clamp(34px,3.5vw,48px);margin:10px 0 8px}
.step-text{color:var(--muted);font-size:15px;line-height:1.6;max-width:440px;margin:0 0 26px}
.step-q{display:flex;align-items:center;gap:12px;margin:34px 0 4px;font-size:17px;font-weight:600;color:#eef1f7}
.step-hint{font-size:12px;color:#9fb0c8;margin:16px 0 0}
.scroll-cue{margin:34px 0 0;font-size:12px;color:#8a93a5;animation:cue 2.2s ease-in-out infinite}

.choice-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.choice,.chip,.format-choice,.tool-choice{cursor:pointer;color:#e8ecf4;border:1px solid #2c3140;background:#151821;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.choice{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;border-radius:40px;font-size:14px;font-weight:600}
.choice b{font-size:17px;color:var(--live)}
.choice:hover,.chip:hover,.format-choice:hover,.tool-choice:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--live) 70%,transparent)}
.choice.active,.chip.is-on,.chip.active,.format-choice.is-on,.tool-choice.is-on{background:color-mix(in srgb,var(--live) 20%,#151821);border-color:var(--live);box-shadow:0 0 0 1px var(--live)}
.choice:focus-visible,.chip:focus-visible,.format-choice:focus-visible,.tool-choice:focus-visible,.swatch:focus-visible{outline:2px solid #fff;outline-offset:3px}

.big-input{display:block;font-size:12px;color:#aab2c2;margin:0 0 18px;max-width:480px}
.big-input input{font-size:20px!important;padding:15px 17px!important;border-radius:12px!important;background:#11141b!important;border-color:#2c3242!important}
.big-input input:focus{border-color:var(--live)!important;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent)}

.palette-row{display:flex;flex-wrap:wrap;gap:14px 16px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;color:#b8c0cf;font-size:11px;cursor:pointer}
.swatch span{width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--a) 0 50%,var(--b) 50% 100%);box-shadow:0 0 0 2px #0c0d11,0 0 0 3px #ffffff22;transition:transform .25s,box-shadow .25s}
.swatch:hover span{transform:scale(1.08) rotate(25deg)}
.swatch[aria-pressed=true]{color:#fff}
.swatch[aria-pressed=true] span{box-shadow:0 0 0 3px #0c0d11,0 0 0 5px var(--a),0 8px 30px color-mix(in srgb,var(--a) 45%,transparent)}
.row-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.segmented{display:inline-flex;gap:4px;padding:4px;border:1px solid #2c3140;border-radius:30px;background:#12141b}
.chip{padding:9px 15px;border-radius:30px;font-size:12px}
.segmented .chip{border-color:transparent;background:transparent}
.segmented.big .chip{padding:14px 22px;font-size:14px}
.color-pick{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:#aab2c2}
.color-pick input{width:42px!important;height:42px!important;border-radius:50%!important;padding:3px!important;margin:0!important;cursor:pointer}

.format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.format-choice{padding:8px 8px 12px;border-radius:14px;text-align:left}
.format-choice strong{display:block;font-size:13px;margin:9px 4px 2px}
.format-choice small{display:block;font-size:10px;color:#8f9bb0;margin:0 4px}
.mini-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8a93a5;margin:24px 0 10px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.tool-choice{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;align-items:start;padding:16px;border-radius:14px;text-align:left}
.tool-choice b{grid-row:1/3;font-size:24px;line-height:1;color:var(--live)}
.tool-choice strong{font-size:14px}
.tool-choice span{font-size:11px;line-height:1.5;color:#98a3b6}

.step-final{position:relative;min-height:92vh}
.step-final h2 em{color:var(--live)}
.summary{list-style:none;padding:0;margin:0 0 20px;max-width:520px;border-top:1px solid var(--line)}
.summary li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.summary span{color:var(--muted)}
.summary b{display:flex;align-items:center;gap:6px;font-weight:600;text-align:right}
.mini-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #ffffff30}
.plan-reco{max-width:520px;padding:20px 22px;margin:0 0 22px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--live) 16%,#141823),#13151c 70%);border:1px solid color-mix(in srgb,var(--live) 40%,transparent)}
.plan-reco h3{font:600 22px Manrope,sans-serif;margin:8px 0 6px}
.plan-reco p{font-size:13px;color:#aab2c2;margin:0 0 10px}
.plan-reco .eyebrow{color:var(--live);margin:0}
.plan-price-line strong{font-size:24px;color:#fff;margin-right:4px}
.plan-price-line small{display:block;font-size:11px;color:#8a93a5;margin-top:4px}
.final-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.final-actions .button{width:auto;gap:18px}
.all-plans{margin-top:26px;max-width:560px}
.all-plans summary{cursor:pointer;font-size:12px;color:var(--accent)}
.all-plans .plan-cards{grid-template-columns:1fr;margin-top:16px}
.burst{position:absolute;top:30%;left:35%;pointer-events:none}
.burst i{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--live);opacity:0}
.burst i:nth-child(even){background:var(--live2);border-radius:50%}
.burst i:nth-child(1){--x:-140px;--y:-90px}.burst i:nth-child(2){--x:120px;--y:-110px}.burst i:nth-child(3){--x:170px;--y:10px}.burst i:nth-child(4){--x:-170px;--y:30px}
.burst i:nth-child(5){--x:-60px;--y:-150px}.burst i:nth-child(6){--x:60px;--y:-160px}.burst i:nth-child(7){--x:110px;--y:120px}.burst i:nth-child(8){--x:-110px;--y:110px}
.celebrate .burst i{animation:burst 1.1s cubic-bezier(.2,.7,.3,1) forwards}

.real-work{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center}
.real-copy p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.7;max-width:360px}

.advanced-drawer{position:fixed;top:0;left:0;bottom:0;width:min(420px,100%);z-index:40;overflow-y:auto;background:#13151c;border-right:1px solid var(--line);box-shadow:30px 0 80px #000a;animation:drawer-in .3s ease}
.advanced-drawer[hidden],.drawer-backdrop[hidden]{display:none}
.drawer-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px;background:#13151c;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:16px;margin:0}
.drawer-head p{font-size:11px;color:var(--muted);margin:4px 0 0}
.drawer-head .close{position:static;flex:none}
.advanced-drawer form{padding:0 0 30px}
.drawer-backdrop{position:fixed;inset:0;z-index:39;background:#0304074d}

@keyframes stage-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 70%,transparent),0 30px 90px #0009}100%{box-shadow:0 0 0 22px transparent,0 30px 90px #0009}}
@keyframes cue{50%{transform:translateY(5px);opacity:.6}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(220deg)}}
@keyframes drawer-in{from{transform:translateX(-30px);opacity:0}}

@media(max-width:900px){
  .journey{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "steps";padding:0 16px 24px;column-gap:0}
  .journey-intro{min-height:0;padding:30px 0 22px}
  .journey-intro h1{font-size:clamp(40px,11vw,58px);letter-spacing:-2.4px}
  .scroll-cue{display:none}
  .journey-stage{top:var(--header-h);height:min(44svh,400px);margin:0 -16px;padding:8px 16px 10px;gap:6px;background:#0c0d11f0;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:8}
  .stage-note{display:none}
  .stage-top{gap:8px}
  .stage-progress{font-size:11px;gap:8px;white-space:nowrap}
  .stage-dots{gap:3px}
  .stage-dots i{width:8px}
  .stage-actions button{padding:6px 10px;white-space:nowrap}
  .stage-actions #fullscreen{display:none}
  .stage-frame{border-radius:12px}
  .stage-bar{height:26px}
  .step{min-height:64svh;padding:30px 0;opacity:.45;transform:none}
  .step h2{font-size:32px}
  .format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid{grid-template-columns:1fr}
  .swatch span{width:52px;height:52px}
  .real-work{grid-template-columns:1fr;gap:26px}
  .advanced-drawer{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .step,.journey .canvas iframe,.choice,.chip,.format-choice,.tool-choice,.swatch span,.stage-dots i{transition:none}
  .step{transform:none}
  .scroll-cue,.stage-frame.pulse,.advanced-drawer{animation:none}
}