/* Webzi Sitio — escenas animadas del widget «Pasos con imagen» (Cómo funciona).
   Calcadas del prototipo marketing/home-webzi/prototipos/como-funciona.html.
   Cada escena se dibuja en un lienzo fijo de 680 × 520 y se escala al ancho
   disponible (escenas.js): así se ve igual en cualquier columna. Todo va bajo
   .wz-esc para no chocar con el tema ni con Elementor. */
.wz-esc{position:relative;width:100%;aspect-ratio:680/520;overflow:hidden;border-radius:20px}
.wz-esc[hidden]{display:none}
.wz-esc *{box-sizing:border-box}
.wz-e-lienzo{position:absolute;left:0;top:0;width:680px;height:520px;transform-origin:0 0;font-family:inherit;color:#0F1B33;line-height:1.3}
.wz-e-sombra{box-shadow:0 1px 2px rgba(15,27,51,.06),0 24px 60px -24px rgba(15,27,51,.35)}

/* Ventana de navegador */
.wz-e-nav{position:absolute;border-radius:14px;background:#fff;overflow:hidden;border:1px solid #e6ebf3}
.wz-e-cromo{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f6f8fb;border-bottom:1px solid #e9edf3}
.wz-e-cromo>i{width:9px;height:9px;border-radius:50%;background:#d8dee8}
.wz-e-cromo>i:nth-child(1){background:#ff8b85}.wz-e-cromo>i:nth-child(2){background:#fdc75a}.wz-e-cromo>i:nth-child(3){background:#5fd07a}
.wz-e-url{margin-left:10px;flex:1;max-width:260px;height:18px;border-radius:9px;background:#fff;border:1px solid #e3e8f0;font-size:10px;color:#4b5875;display:flex;align-items:center;gap:5px;padding:0 9px;white-space:nowrap;overflow:hidden}
.wz-e-url svg{width:10px;height:10px;flex:none;color:#16a34a}
.wz-e-vista{position:relative;overflow:hidden}

/* Sitio de ejemplo, armado a 960 px y escalado */
.wz-e-web{--marca:#475569;--fuente:inherit;width:960px;transform-origin:0 0;font-family:"Poppins",sans-serif;color:#1f2937;background:#fff;line-height:1.3}
.wz-e-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f0f0f0}
.wz-e-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:#111}
.wz-e-marca{width:34px;height:34px;border-radius:50%;border:2px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:9px;font-weight:600;transition:all .4s}
.wz-e-marca svg{display:none;width:18px;height:18px}
.wz-e-logo.wz-ok .wz-e-marca{border:0;background:var(--marca);color:#fff}
.wz-e-logo.wz-ok .wz-e-marca svg{display:block}
.wz-e-logo.wz-ok .wz-e-marca b{display:none}
.wz-e-menu{display:flex;gap:28px;font-size:14px;color:#374151}
.wz-e-menu span:first-child{color:var(--marca);font-weight:500;transition:color .5s}
.wz-e-pedir{background:var(--marca);color:#fff;font-size:13px;padding:9px 18px;border-radius:999px;transition:background .5s}
.wz-e-hero{position:relative;height:330px;background-size:cover;background-position:center;display:flex;align-items:center;padding:0 56px}
.wz-e-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--marca) 88%,#000) 0%,color-mix(in srgb,var(--marca) 55%,transparent) 55%,transparent 85%)}
.wz-e-hero>div{position:relative;max-width:470px;color:#fff}
.wz-e-eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.wz-e-h{display:block;font-family:var(--fuente);font-size:44px;line-height:1.08;margin:10px 0 12px;font-weight:600}
.wz-e-hero p{font-size:15px;line-height:1.6;opacity:.92;margin:0 0 20px}
.wz-e-btns{display:flex;gap:10px}
.wz-e-btn{background:#fff;color:var(--marca);font-weight:600;font-size:14px;padding:12px 22px;border-radius:999px;transition:color .5s}
.wz-e-btn2{border:1.5px solid rgba(255,255,255,.8);color:#fff;font-size:14px;padding:11px 22px;border-radius:999px}
.wz-e-prod{padding:30px 40px 34px}
.wz-e-prod>b{display:block;margin:0 0 18px;font-family:var(--fuente);font-size:24px;font-weight:600;color:#111}
.wz-e-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wz-e-card{border-radius:14px;overflow:hidden;border:1px solid #eee}
.wz-e-card img{display:block;width:100%!important;height:150px!important;max-width:none!important;object-fit:cover;border-radius:0!important}
.wz-e-card>div{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.wz-e-card b{color:var(--marca);transition:color .5s}
.wz-e-estrellas{color:#f59e0b;font-size:12px;letter-spacing:1px}

/* 1 · Cuéntanos de tu negocio */
.wz-e1-nav{left:220px;top:60px;width:440px}
.wz-e1-nav .wz-e-vista{height:300px}
.wz-e1-nav .wz-e-web{transform:scale(.4583);filter:blur(10px) saturate(.4);transition:filter 1.6s ease}
.wz-e1-nav.wz-revela .wz-e-web{filter:none}
.wz-e-velo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.55);color:#0B2550;font-weight:600;font-size:14px;transition:opacity .8s}
.wz-e1-nav.wz-revela .wz-e-velo{opacity:0}
.wz-e-barra{width:180px;height:6px;border-radius:3px;background:#dde5f2;overflow:hidden}
.wz-e-barra i{display:block;height:100%;width:0;background:#2563C9;transition:width 1.6s ease}
.wz-e-prompt{position:absolute;left:30px;top:150px;width:372px;border-radius:20px;background:#fff;border:1px solid #e6ebf3;padding:18px 18px 64px;z-index:5}
.wz-e-prompt small{display:block;font-size:12px;color:#8a95ab;margin-bottom:8px;font-weight:600}
.wz-e-tx{font-size:16px;line-height:1.45;color:#0F1B33;min-height:46px}
.wz-e-cursor{display:inline-block;width:2px;height:18px;background:#2563C9;vertical-align:-3px;animation:wz-e-parp .7s step-end infinite}
@keyframes wz-e-parp{50%{opacity:0}}
.wz-e-enviar{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:#2563C9;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.wz-e-enviar.wz-pulsa{transform:scale(.85)}
.wz-e-chips{position:absolute;left:18px;right:62px;bottom:20px;display:flex;gap:5px;overflow:hidden}
.wz-e-chips span{white-space:nowrap;font-size:11.5px;font-weight:600;background:#eef8d0;color:#3d5200;padding:4px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .35s}
.wz-e-chips span.wz-ve{opacity:1;transform:none}
.wz-e-chispa{position:absolute;left:14px;top:112px;width:44px;height:44px;color:#0B2550;z-index:6}
.wz-e-chispa2{position:absolute;left:52px;top:100px;width:20px;height:20px;color:#0B2550;z-index:6}

/* 2 · Elige un diseño */
.wz-e2-pila .wz-e-nav{left:110px;top:70px;width:500px;transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s,filter 1s}
.wz-e2-pila .wz-e-vista{height:312px}
.wz-e2-pila .wz-e-vista img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:top;border-radius:0!important}
.wz-e-flota{position:absolute;z-index:20;background:#fff;border:1px solid #e6ebf3;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:600;color:#0B2550;display:flex;align-items:center;gap:8px}
.wz-e-flota svg{width:18px;height:18px;color:#2563C9}
.wz-e-rubros{position:absolute;left:40px;bottom:30px;display:flex;gap:8px;z-index:20}
.wz-e-rubros span{background:#fff;border:1px solid #e3e8f2;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;color:#4b5875;transition:all .3s}
.wz-e-rubros span.wz-on{background:#0B2550;color:#fff;border-color:#0B2550}
.wz-e-elegido{position:absolute;left:520px;top:54px;z-index:30;background:#B6DE13;color:#0B2550;font-weight:700;font-size:12px;padding:6px 11px;border-radius:999px;display:flex;align-items:center;gap:5px;opacity:0;transform:scale(.6);transition:all .35s}
.wz-e-elegido.wz-ve,.wz-e-publicado.wz-ve{opacity:1;transform:none}
.wz-e-elegido svg{width:13px;height:13px}

/* 3 · Personaliza y publica */
.wz-e3-nav{left:40px;top:58px;width:470px}
.wz-e3-nav .wz-e-vista{height:330px}
.wz-e3-nav .wz-e-web{transform:scale(.4896)}
.wz-e-panel{position:absolute;left:470px;top:110px;width:200px;border-radius:18px;background:#fff;border:1px solid #e6ebf3;padding:16px;z-index:8;transform:translateY(16px);opacity:0;transition:all .5s}
.wz-e-panel.wz-ve{transform:none;opacity:1}
.wz-e-panel>b{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:#0B2550}
.wz-e-panel>b svg{width:15px;height:15px;color:#2563C9}
.wz-e-panel small{display:block;font-size:11px;font-weight:600;color:#8a95ab;margin:0 0 6px}
.wz-e-subir{height:38px;border:1.5px dashed #cbd5e1;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#64748b;margin-bottom:12px;transition:all .3s}
.wz-e-subir.wz-ok{border-style:solid;border-color:#16a34a;color:#166534;background:#f0fdf4}
.wz-e-colores{display:flex;gap:8px;margin-bottom:12px}
.wz-e-colores i{width:24px;height:24px;border-radius:50%;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s}
.wz-e-colores i.wz-sel{outline-color:#2563C9}
.wz-e-letras{display:flex;gap:6px}
.wz-e-letras span{flex:1;text-align:center;border:1px solid #e3e8f2;border-radius:8px;padding:6px 0;font-size:15px;color:#334155;transition:all .2s}
.wz-e-letras span.wz-sel{border-color:#2563C9;background:#eff5ff;color:#2563C9}
.wz-e-puntero{position:absolute;z-index:12;width:22px;height:22px;transition:left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.wz-e-publicado{position:absolute;left:300px;top:30px;z-index:12;background:#B6DE13;color:#0B2550;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;opacity:0;transform:scale(.6);transition:all .35s}
.wz-e-publicado svg{width:15px;height:15px}
.wz-e-movil{--marca:#475569;--fuente:inherit;position:absolute;right:28px;bottom:-280px;width:150px;height:300px;border-radius:26px;background:#0F1B33;padding:8px;z-index:9;transition:bottom .8s cubic-bezier(.3,1.2,.5,1)}
.wz-e-movil.wz-ve{bottom:22px}
.wz-e-pant{width:100%;height:100%;border-radius:20px;overflow:hidden;background:#fff;position:relative;font-family:"Poppins",sans-serif}
.wz-e-mtop{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden}
.wz-e-mtop i{flex:none;width:12px;height:2px;background:#111;box-shadow:0 -4px 0 #111,0 4px 0 #111}
.wz-e-mhero{position:relative;height:150px;background-size:cover;background-position:60% center}
.wz-e-mhero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--marca) 85%,#000) 100%)}
.wz-e-mhero div{position:absolute;left:10px;right:10px;bottom:12px;color:#fff;font-family:var(--fuente);font-size:15px;font-weight:600;line-height:1.15}
.wz-e-mbtn{margin:10px;background:var(--marca);color:#fff;font-size:9px;text-align:center;padding:7px;border-radius:999px}
.wz-e-mcards{display:flex;gap:6px;padding:0 10px}
.wz-e-mcards img{width:50%!important;height:60px!important;object-fit:cover;border-radius:8px!important}

@media (prefers-reduced-motion:reduce){
  .wz-esc *{transition:none!important;animation:none!important}
}