/* =========================================================
   Shoppi · kit de demostraciones
   WhatsApp realista · anotaciones · motor de animación
   ========================================================= */

/* ---------- 1. utilidades de movimiento ---------- */
[data-rv]{opacity:0;will-change:transform,opacity;transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease;transition-delay:var(--rvd,0ms)}
[data-rv="up"]{transform:translateY(30px)}
[data-rv="down"]{transform:translateY(-26px)}
[data-rv="left"]{transform:translateX(38px)}
[data-rv="right"]{transform:translateX(-38px)}
[data-rv="zoom"]{transform:scale(.93)}
[data-rv="blur"]{filter:blur(9px);transform:translateY(16px)}
[data-rv="tiltin"]{transform:perspective(900px) rotateY(-9deg) translateX(26px);transform-origin:left center}
[data-rv].seen{opacity:1;transform:none;filter:none}

[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
[data-stagger].seen>*{opacity:1;transform:none}

/* línea que se dibuja al entrar */
.draw{position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.draw i{position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--aqua) 45%,var(--lime));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s cubic-bezier(.16,1,.3,1) .15s}
.draw.seen i{transform:scaleX(1)}

/* barras que se llenan al entrar */
.bar i[data-w]{width:0;transition:width 1.3s cubic-bezier(.16,1,.3,1) var(--bd,0ms)}

/* brillo que sigue al cursor */
.glow{position:relative;overflow:hidden}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(59,143,137,.16),transparent 62%)}
.glow:hover::after{opacity:1}

/* flotación suave y pulso */
@keyframes sh-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes sh-pulse{0%{box-shadow:0 0 0 0 rgba(0,168,132,.5)}70%{box-shadow:0 0 0 12px rgba(0,168,132,0)}100%{box-shadow:0 0 0 0 rgba(0,168,132,0)}}
@keyframes sh-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes sh-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sh-sheen{to{transform:translateX(320%)}}
.float{animation:sh-float 6s ease-in-out infinite alternate}

/* ---------- 2. escena de demostración ---------- */
.scene{position:relative;display:grid;gap:1rem}
.scene-frame{position:relative}
.scene-tag{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line2);
  border-radius:99px;padding:.32rem .7rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--violet);
  box-shadow:0 14px 28px -18px rgba(16,32,63,.5);white-space:nowrap}
.scene-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:sh-pulse 2.4s infinite}
.scene-tag.tl{top:-.7rem;left:1rem}
.scene-tag.tr{top:-.7rem;right:1rem}
.scene-tag.br{bottom:-.7rem;right:1rem}
.scene-tag.bl{bottom:-.7rem;left:1rem}

/* leyenda paso a paso, se sincroniza con el demo */
.xpl{list-style:none;display:grid;gap:.15rem;margin:0;padding:0;counter-reset:xp}
.xpl li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:.7rem;align-items:start;
  padding:.62rem .75rem;border-radius:11px;transition:background .35s ease,opacity .35s ease;opacity:.45}
.xpl li::before{counter-increment:xp;content:counter(xp,decimal-leading-zero);grid-column:1;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--mute2);border:1px solid var(--line2);
  border-radius:7px;height:22px;display:grid;place-items:center;transition:all .35s ease;background:#fff}
.xpl li b{grid-column:2;display:block;font-size:.88rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.xpl li span{grid-column:2;display:block;font-size:.8rem;color:var(--mute);line-height:1.45}
.xpl.lit li{opacity:1}
.xpl.lit li::before{border-color:var(--violet);color:var(--violet)}
.xpl li.on{opacity:1;background:var(--violet-pale)}
.xpl li.on::before{background:var(--violet);border-color:var(--violet);color:#fff}
.xpl li.done{opacity:.85}
.xpl li.done::before{border-color:var(--aqua);color:var(--aqua)}
.dark .xpl li b,section.dark .xpl li b,.band.dark .xpl li b{color:#fff}
.dark .xpl li span,section.dark .xpl li span,.band.dark .xpl li span{color:rgba(255,255,255,.6)}
.dark .xpl li::before,section.dark .xpl li::before,.band.dark .xpl li::before{background:transparent;border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6)}
.dark .xpl li.on,section.dark .xpl li.on,.band.dark .xpl li.on{background:rgba(255,255,255,.08)}
.dark .xpl li.on::before,section.dark .xpl li.on::before,.band.dark .xpl li.on::before{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* encabezado y pie explicativo de un mock */
.vis-cap{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.vis-cap b{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:var(--violet);background:var(--violet-pale);
  border-radius:99px;padding:.3rem .6rem}
.vis-cap span{font-size:.79rem;color:var(--mute2)}
.vis-foot{margin-top:.9rem;display:flex;gap:.5rem;flex-wrap:wrap}
.vis-foot span{font-size:.72rem;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:.3rem .65rem;display:inline-flex;align-items:center;gap:.35rem}
.vis-foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aqua)}
.dark .vis-cap b,section.dark .vis-cap b,.band.dark .vis-cap b{background:rgba(255,255,255,.1);color:var(--lime)}
.dark .vis-cap span,section.dark .vis-cap span,.band.dark .vis-cap span{color:rgba(255,255,255,.55)}

/* punto interactivo sobre un mock */
.hot{position:absolute;z-index:7;width:20px;height:20px;border-radius:50%;border:0;padding:0;cursor:help;
  background:var(--violet);box-shadow:0 0 0 4px rgba(16,32,63,.14);display:grid;place-items:center}
.hot::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.hot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--violet);opacity:.5;animation:hotring 2.6s ease-out infinite}
@keyframes hotring{0%{transform:scale(.6);opacity:.65}100%{transform:scale(1.5);opacity:0}}
.hot .tip{position:absolute;bottom:150%;left:50%;transform:translate(-50%,6px);width:max-content;max-width:210px;
  background:var(--ink);color:#fff;font-size:.74rem;line-height:1.4;font-family:var(--body);text-align:left;
  padding:.55rem .7rem;border-radius:9px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
  box-shadow:0 20px 40px -22px rgba(16,32,63,.7);pointer-events:none}
.hot .tip b{display:block;color:var(--lime);font-size:.62rem;font-family:var(--mono);letter-spacing:.1em;margin-bottom:.2rem}
.hot:hover .tip,.hot:focus-visible .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- 3. WhatsApp realista ---------- */
/* El alto del chat (--wa-h) se elige para que el marco quede en ~2.1 de proporción,
   que es la de un teléfono real. Si cambiás el ancho, recalculá --wa-h. */
.wa-device{--wa-green:#008069;--wa-green-dk:#006e5b;--wa-bubble:#D9FDD3;--wa-paper:#EFEAE2;
  --wa-meta:#667781;--wa-ink:#111B21;--wa-blue:#53BDEB;--wa-panel:#F0F2F5;--wa-ico:#54656F;
  --wa-radius:38px;--wa-notch:84px;--wa-h:410px;
  width:min(272px,86vw);margin-inline:auto;position:relative;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wa-device.wide{--wa-radius:42px;--wa-notch:96px;--wa-h:478px;width:min(304px,88vw)}
.wa-frame{position:relative;background:#000;border-radius:var(--wa-radius);padding:10px 9px;
  box-shadow:0 2px 0 1px #1c1c1e inset,0 50px 90px -42px rgba(16,32,63,.55),0 0 0 2px #2a2a2c;overflow:hidden}
.wa-frame::before{content:"";position:absolute;z-index:9;top:10px;left:50%;transform:translateX(-50%);
  width:var(--wa-notch);height:24px;background:#000;border-radius:0 0 14px 14px}
.wa-screen{position:relative;border-radius:calc(var(--wa-radius) - 9px);overflow:hidden;background:var(--wa-paper);display:flex;flex-direction:column}

/* barra de estado del teléfono */
.wa-status{background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:.42rem .95rem .3rem;font-size:.66rem;font-weight:600;letter-spacing:.01em}
.wa-status .sys{display:flex;align-items:center;gap:4px}
.wa-status svg{width:13px;height:13px;display:block;fill:#fff}

/* encabezado del chat */
.wa-head{background:var(--wa-green);color:#fff;display:flex;align-items:center;gap:.42rem;padding:.4rem .55rem .52rem}
.wa-head .bk{width:14px;height:14px;flex:none;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wa-ava{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,#A2DDD8,#3B8F89);color:#08302c;font-weight:800;font-size:.74rem;font-family:var(--display)}
.wa-id{min-width:0;flex:1;line-height:1.15}
.wa-id b{display:block;font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-id small{display:block;font-size:.64rem;color:rgba(255,255,255,.85);height:1em;transition:opacity .2s}
.wa-acts{display:flex;align-items:center;gap:.62rem;flex:none}
.wa-acts svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.wa-acts svg.fill{fill:#fff;stroke:none}

/* lienzo de la conversación */
.wa-chat{position:relative;flex:0 0 auto;padding:.55rem .5rem .3rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.18rem;
  background-color:var(--wa-paper);overflow:hidden;height:var(--wa-h,398px)}
.wa-chat::before{content:"";position:absolute;inset:0;background:url("/assets/wa-doodles.svg") repeat;background-size:235px;pointer-events:none}
.wa-chat>*{position:relative;z-index:1}

.wa-day{align-self:center;background:#FFFFFF;color:var(--wa-meta);font-size:.63rem;font-weight:500;letter-spacing:.02em;
  padding:.2rem .6rem;border-radius:7px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin:.15rem 0 .3rem;text-transform:uppercase}
.wa-enc{align-self:center;background:#FFEECD;color:#54656F;font-size:.6rem;line-height:1.35;text-align:center;
  max-width:88%;padding:.32rem .6rem;border-radius:7px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-bottom:.35rem}
.wa-enc svg{width:8px;height:8px;display:inline-block;vertical-align:-1px;margin-right:2px;fill:#54656F}

.wa-msg{display:flex;max-width:84%;margin-bottom:.14rem}
.wa-msg.in{align-self:flex-start;margin-left:.22rem}
.wa-msg.out{align-self:flex-end;margin-right:.22rem}
.wa-msg.tall{max-width:90%}
.wa-b{position:relative;background:#fff;border-radius:7.5px;padding:.33rem .5rem .28rem .55rem;
  box-shadow:0 1px .5px rgba(11,20,26,.13);color:var(--wa-ink);font-size:.795rem;line-height:1.32;max-width:100%}
.wa-msg.out .wa-b{background:var(--wa-bubble)}
.wa-msg.in .wa-b{border-top-left-radius:0}
.wa-msg.out .wa-b{border-top-right-radius:0}
.wa-msg.in .wa-b::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:#fff;
  clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-msg.out .wa-b::before{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;background:var(--wa-bubble);
  clip-path:polygon(0 0,100% 0,0 100%)}
.wa-msg.cont .wa-b{border-radius:7.5px}
.wa-msg.cont .wa-b::before{display:none}
.wa-b p{margin:0;color:var(--wa-ink);font-size:.795rem;line-height:1.34;white-space:pre-line;
  padding-right:3.6rem;word-break:break-word}
.wa-b p em{font-style:italic}
.wa-b p strong{font-weight:600}
.wa-meta{float:right;display:inline-flex;align-items:center;gap:2px;height:14px;margin:-12px -1px -2px .4rem;
  font-size:.605rem;color:var(--wa-meta);white-space:nowrap;letter-spacing:.01em}
.wa-meta.blk{float:none;display:block;text-align:right;height:auto;margin:.1rem .18rem 0 0}
.wa-ck{width:15px;height:11px;fill:none;stroke:var(--wa-meta);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .4s ease}
.wa-ck .c2{opacity:0;transition:opacity .3s ease}
.wa-msg.sent .wa-ck .c2{opacity:1}
.wa-msg.read .wa-ck{stroke:var(--wa-blue)}
.wa-msg.read .wa-ck .c2{opacity:1}

/* indicador de escritura */
.wa-typing .wa-b{padding:.5rem .7rem;display:flex;gap:4px;align-items:center}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:#9AA6AC;display:block;animation:sh-dot 1.25s infinite}
.wa-typing i:nth-child(2){animation-delay:.16s}
.wa-typing i:nth-child(3){animation-delay:.32s}

/* tarjeta de producto del catálogo */
.wa-card{padding:.28rem .28rem .3rem;width:min(212px,100%)}
.wa-thumb{height:112px;border-radius:6px;display:grid;place-items:center;font-size:44px;
  background:linear-gradient(145deg,#DDEFEC,#BFE0DB);position:relative;overflow:hidden}
.wa-thumb .badge-w{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.55);color:#fff;font-size:.54rem;
  letter-spacing:.08em;padding:.12rem .35rem;border-radius:4px}
.wa-cbody{padding:.42rem .32rem .1rem}
.wa-cbody b{display:block;font-size:.8rem;font-weight:600;color:var(--wa-ink)}
.wa-cbody .pr{display:block;font-size:.8rem;color:#027EB5;font-weight:500;margin-top:.05rem}
.wa-cbody small{display:block;font-size:.7rem;color:var(--wa-meta);margin-top:.15rem;line-height:1.35}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:.35rem;padding-top:.42rem;
  border-top:1px solid rgba(0,0,0,.09);color:#027EB5;font-size:.79rem;font-weight:500}
.wa-cta svg{width:13px;height:13px;fill:none;stroke:#027EB5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* resumen de pedido / pago */
.wa-order{width:min(226px,100%);padding:.45rem .55rem .3rem}
.wa-oh{display:flex;align-items:center;gap:.35rem;font-size:.62rem;letter-spacing:.06em;color:var(--wa-meta);
  text-transform:uppercase;font-weight:600;margin-bottom:.35rem}
.wa-oh svg{width:11px;height:11px;fill:none;stroke:var(--wa-meta);stroke-width:2}
.wa-ol{display:flex;justify-content:space-between;gap:.7rem;font-size:.75rem;color:#3B4A54;padding:.1rem 0}
.wa-ol b{color:var(--wa-ink);font-weight:600}
.wa-ot{display:flex;justify-content:space-between;border-top:1px solid rgba(0,0,0,.09);margin-top:.3rem;padding-top:.32rem;
  font-size:.82rem;font-weight:700;color:var(--wa-ink)}
.wa-note{font-size:.66rem;color:var(--wa-meta);margin-top:.25rem}

/* mensaje de sistema / pago aprobado */
.wa-sysmsg{align-self:center;background:#fff;border-radius:7px;box-shadow:0 1px .5px rgba(11,20,26,.13);
  padding:.34rem .6rem;font-size:.66rem;color:#1E7A43;display:inline-flex;align-items:center;gap:.35rem;margin:.2rem 0}
.wa-sysmsg svg{width:11px;height:11px;fill:none;stroke:#1E7A43;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* barra de escritura */
.wa-input{background:var(--wa-panel);display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem .55rem}
.wa-field{flex:1;background:#fff;border-radius:99px;display:flex;align-items:center;gap:.45rem;padding:.42rem .65rem;
  box-shadow:0 1px .5px rgba(11,20,26,.1);min-width:0}
.wa-field span{flex:1;font-size:.76rem;color:#8696A0;white-space:nowrap;overflow:hidden}
.wa-field svg,.wa-input>svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--wa-ico);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wa-mic{width:34px;height:34px;border-radius:50%;background:#00A884;display:grid;place-items:center;flex:none}
.wa-mic svg{width:16px;height:16px;fill:#fff;stroke:none}
.wa-home{height:5px;width:calc(var(--wa-notch) + 6px);border-radius:99px;background:rgba(0,0,0,.35);margin:.15rem auto .3rem}

/* mensajes ocultos hasta que el guion los reproduce */
.wa-chat[data-wa] .wa-msg,.wa-chat[data-wa] .wa-sysmsg{opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.9,.3,1.3)}
.wa-chat[data-wa] .wa-msg.show,.wa-chat[data-wa] .wa-sysmsg.show{opacity:1;transform:none}
.wa-chat[data-wa] .wa-msg.hide,.wa-chat[data-wa] .wa-sysmsg.hide{display:none}

/* notificación flotante sobre el teléfono */
.wa-toast{position:absolute;z-index:12;left:50%;top:14px;transform:translate(-50%,-140%);width:min(300px,86%);
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-radius:16px;padding:.55rem .7rem;display:flex;gap:.55rem;
  align-items:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.9,.3,1.25),opacity .4s;opacity:0}
.wa-toast.show{transform:translate(-50%,0);opacity:1}
.wa-toast .ic{width:26px;height:26px;border-radius:7px;background:#25D366;display:grid;place-items:center;flex:none}
.wa-toast .ic svg{width:15px;height:15px;fill:#fff}
.wa-toast b{display:block;font-size:.72rem;color:#111B21}
.wa-toast small{display:block;font-size:.68rem;color:#667781}

/* ---------- 3b. Instagram real ---------- */
.ig-screen{background:#fff;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#000;
  display:flex;flex-direction:column;height:100%}
.ig-status{display:flex;align-items:center;justify-content:space-between;padding:.42rem .95rem .28rem;
  font-size:.66rem;font-weight:600;color:#000}
.ig-status .sys{display:flex;align-items:center;gap:4px}
.ig-status svg{width:13px;height:13px;display:block;fill:#000}
.ig-top{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem .5rem}
.ig-top b{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.ig-top .vf{width:13px;height:13px;flex:none}
.ig-top .sp{margin-left:auto;display:flex;gap:.9rem}
.ig-top .sp svg{width:17px;height:17px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.ig-prof{display:flex;align-items:center;gap:.7rem;padding:.2rem .7rem .5rem}
.ig-ava{width:62px;height:62px;border-radius:50%;flex:none;padding:2.4px;
  background:conic-gradient(from -35deg,#FDF497,#FD5949,#D6249F,#285AEB,#FDF497)}
.ig-ava span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 2px #fff;font-size:26px}
.ig-stats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.ig-stats b{display:block;font-size:.8rem;font-weight:600}
.ig-stats span{display:block;font-size:.55rem;color:#262626;letter-spacing:-.01em}
.ig-bio{padding:0 .7rem .55rem;font-size:.68rem;line-height:1.38}
.ig-bio b{display:block;font-size:.7rem;font-weight:600}
.ig-bio span{display:block;color:#737373}
.ig-bio i{display:block;font-style:normal;color:#00376B;font-weight:500}
.ig-btns{display:flex;gap:.35rem;padding:0 .8rem .6rem}
.ig-btns span{flex:1;text-align:center;font-size:.7rem;font-weight:600;padding:.32rem;border-radius:7px;
  background:#EFEFEF;color:#000}
.ig-btns span.pri{background:#0095F6;color:#fff}
.ig-tabs{display:flex;border-top:1px solid #DBDBDB}
.ig-tabs i{flex:1;display:grid;place-items:center;padding:.42rem 0;border-bottom:1.6px solid transparent}
.ig-tabs i.on{border-bottom-color:#000}
.ig-tabs svg{width:16px;height:16px;fill:none;stroke:#8E8E8E;stroke-width:1.8;display:block}
.ig-tabs i.on svg{stroke:#000}
.ig-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6px;background:#fff;flex:1;align-content:start}
.ig-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(145deg,#EAF4F2,#CFE6E2)}
.ig-cell::after{content:"";position:absolute;top:5px;right:5px;width:13px;height:13px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 7h-3V6a5 5 0 0 0-10 0v1H4l-1 15h18zM9 6a3 3 0 0 1 6 0v1H9z'/%3E%3C/svg%3E");
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ig-nav{display:flex;justify-content:space-around;align-items:center;padding:.5rem .6rem;border-top:1px solid #DBDBDB}
.ig-nav svg{width:19px;height:19px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.ig-nav .me{width:19px;height:19px;border-radius:50%;background:linear-gradient(145deg,#EAF4F2,#CFE6E2);
  box-shadow:0 0 0 1.4px #000}

/* ---------- 3c. navegador real ---------- */
.br-chrome{background:#DEE1E6;padding:.4rem .5rem 0}
.br-tabs{display:flex;align-items:flex-end;gap:.3rem}
.br-tab{display:flex;align-items:center;gap:.35rem;background:#fff;border-radius:8px 8px 0 0;padding:.36rem .6rem;
  font-size:.64rem;color:#3C4043;max-width:190px;min-width:0}
.br-tab .fav{width:12px;height:12px;border-radius:3px;flex:none;display:grid;place-items:center;
  background:var(--violet);color:#fff;font-size:7px;font-family:var(--display);font-weight:800}
.br-tab b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-tab .x{margin-left:.15rem;color:#9AA0A6;font-size:.7rem;line-height:1}
.br-plus{color:#5F6368;font-size:.8rem;padding:0 .3rem .3rem;line-height:1}
.br-bar{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.4rem .6rem}
.br-bar .nav{display:flex;gap:.45rem;color:#5F6368}
.br-bar .nav svg{width:13px;height:13px;fill:none;stroke:#5F6368;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.br-url{flex:1;display:flex;align-items:center;gap:.35rem;background:#F1F3F4;border-radius:99px;padding:.24rem .6rem;
  font-size:.64rem;color:#202124;min-width:0}
.br-url svg{width:10px;height:10px;flex:none;fill:#5F6368}
.br-url span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-url i{font-style:normal;color:#5F6368}

/* ---------- 4. panel operativo que acompaña al chat ---------- */
.sync-arrow{display:grid;place-items:center;position:relative}
.sync-arrow .ln{width:2px;height:100%;min-height:52px;background:linear-gradient(180deg,transparent,var(--line2),transparent);position:relative;overflow:hidden}
.sync-arrow .ln i{position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:sflow 2.2s linear infinite}
@keyframes sflow{from{top:-8px;opacity:0}15%{opacity:1}85%{opacity:1}to{top:100%;opacity:0}}
@media(max-width:940px){.sync-arrow .ln{width:100%;height:2px;min-height:0;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
  .sync-arrow .ln i{animation:sflowh 2.2s linear infinite;top:-2px;left:0}
  @keyframes sflowh{from{left:-8px;opacity:0}15%{opacity:1}85%{opacity:1}to{left:100%;opacity:0}}}

/* tarjeta "qué pasó por detrás" */
.behind{background:#fff;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 52px -34px rgba(16,32,63,.45)}
.behind-h{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:var(--bg2);border-bottom:1px solid var(--line)}
.behind-h b{font-family:var(--display);font-size:.85rem;letter-spacing:-.02em}
.behind-h .lvd{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.1em;color:#1E7A43}
.behind-h .lvd::before{content:"";width:6px;height:6px;border-radius:50%;background:#1E7A43;animation:sh-pulse 2.2s infinite}
.behind-r{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;border-bottom:1px solid var(--line);
  font-size:.79rem;color:var(--mute);opacity:.35;transition:opacity .45s ease,background .45s ease}
.behind-r:last-child{border-bottom:0}
.behind-r.on{opacity:1;background:linear-gradient(90deg,var(--violet-pale),transparent 70%)}
.behind-r .dt{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:none;transition:background .4s}
.behind-r.on .dt{background:var(--aqua)}
.behind-r b{color:var(--ink);font-weight:600;font-size:.79rem}
.behind-r .tg{margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;color:var(--mute2);white-space:nowrap}
.behind-r.on .tg{color:var(--violet)}

/* ---------- 5. selector de canales (demo interactivo) ---------- */
.chansel{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.chansel button{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line2);background:#fff;color:var(--mute);
  font-family:var(--body);font-size:.78rem;font-weight:500;padding:.42rem .8rem;border-radius:99px;cursor:pointer;
  transition:all .22s ease}
.chansel button:hover{border-color:var(--violet);color:var(--ink)}
.chansel button[aria-selected="true"]{background:var(--violet);border-color:var(--violet);color:#fff;
  box-shadow:0 12px 24px -14px rgba(16,32,63,.7)}
.chansel button i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6;font-style:normal}
.dark .chansel button,section.dark .chansel button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.dark .chansel button[aria-selected="true"],section.dark .chansel button[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}

.panes{position:relative}
.pane{display:none;animation:sh-pop .5s cubic-bezier(.2,.8,.2,1)}
.pane.on{display:block}

/* ---------- 6. mocks compartidos (cola, tienda, reparto, atribución) ---------- */
.win{background:#fff;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 26px 52px -34px rgba(16,32,63,.45)}
.mono-xs{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--mute2)}
.ch{display:inline-flex;align-items:center;gap:.32rem;font-size:.64rem;font-weight:500;padding:.18rem .5rem;border-radius:99px;white-space:nowrap}
.ch::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ch-wa{background:#E8F4EC;color:#1E7A43}
.ch-web{background:var(--violet-pale);color:var(--violet)}
.ch-app{background:#FBE9E6;color:#B84A3D}
.ch-pos{background:#EEF1F5;color:#4B5670}
.ch-ig{background:#F7EAF2;color:#A13A72}
.ch-call{background:#E3F4F2;color:var(--aqua)}
.stt{display:inline-flex;align-items:center;gap:.32rem;font-size:.66rem;font-weight:500;white-space:nowrap}
.stt::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
.stt-new{color:var(--violet)}.stt-kit{color:#996A13}.stt-rte{color:var(--coral)}.stt-ok{color:#1E7A43}

.queue{font-size:.78rem}
.qhead{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:var(--bg2)}
.qhead b{font-family:var(--display);font-size:.86rem}
.qhead span{margin-left:auto}
.qrow{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);transition:background .4s}
.qrow:last-child{border-bottom:0}
.qrow .who{flex:1;min-width:0}
.qrow .who b{display:block;font-weight:500;font-size:.78rem}
.qrow .who small{color:var(--mute2);font-size:.66rem}
.qmin{font-family:var(--mono);font-size:.62rem;color:var(--mute2);white-space:nowrap}
.qbtn{font-size:.66rem;font-weight:600;color:var(--violet);border:1px solid var(--line2);border-radius:6px;padding:.24rem .55rem;white-space:nowrap}
.qbtn.solid{background:var(--violet);border-color:var(--violet);color:#fff}
.qrow.new{animation:qin .55s cubic-bezier(.2,.9,.3,1.2);background:var(--violet-pale)}
@keyframes qin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.store{font-size:.78rem}
.sbar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:var(--bg2);border-bottom:1px solid var(--line)}
.sbar i{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.surl{margin-left:.5rem;flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.2rem .6rem;font-family:var(--mono);font-size:.6rem;color:var(--mute2)}
.shead{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.shead b{font-family:var(--display);font-size:.95rem;letter-spacing:-.02em}
.scart{font-size:.68rem;font-weight:600;color:var(--violet);border:1px solid var(--line2);border-radius:6px;padding:.24rem .6rem;transition:all .3s}
.scart.hot{background:var(--violet);border-color:var(--violet);color:#fff;transform:scale(1.06)}
.sitems{padding:.5rem .9rem .8rem}
.sitem{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.sitem:last-child{border-bottom:0}
.sthumb{width:44px;height:44px;border-radius:8px;background:linear-gradient(145deg,#EEF6F5,#D6ECE9);border:1px solid var(--line);flex:none;display:grid;place-items:center;font-size:20px}
.sitem .who{flex:1;min-width:0}
.sitem .who b{display:block;font-weight:500;font-size:.78rem}
.sitem .who small{color:var(--mute2);font-size:.66rem}
.sprice{font-weight:600;font-size:.76rem}
.sadd{font-size:.64rem;font-weight:600;color:var(--violet);border:1px solid var(--line2);border-radius:6px;padding:.2rem .5rem;margin-left:.6rem;transition:all .3s}
.sadd.hot{background:var(--violet);border-color:var(--violet);color:#fff}
.sfoot{display:flex;justify-content:space-between;padding:.6rem .9rem;border-top:1px solid var(--line);background:var(--bg2)}

.delm{font-size:.78rem}
.pos-h{display:flex;justify-content:space-between;padding:.6rem .9rem;border-bottom:1px solid var(--line);background:var(--bg2)}
.del-r{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.del-r:last-child{border-bottom:0}
.del-r .who{flex:1}
.del-r .who b{font-weight:500;font-size:.76rem;display:block}
.del-r .who small{color:var(--mute2);font-size:.66rem}

.attr{font-size:.8rem;padding:1.3rem 1.4rem}
.attr-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.attr-h b{font-family:var(--display);font-size:.9rem}
.dlive{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;color:#1E7A43;font-weight:500}
.dlive::before{content:"";width:6px;height:6px;border-radius:50%;background:#1E7A43;animation:sh-pulse 2.2s infinite}

/* mapa de reparto */
.mapbox{position:relative;aspect-ratio:16/10;background:
  linear-gradient(0deg,rgba(226,236,235,.9) 1px,transparent 1px) 0 0/100% 38px,
  linear-gradient(90deg,rgba(226,236,235,.9) 1px,transparent 1px) 0 0/38px 100%,
  linear-gradient(150deg,#F6FBFA,#E8F3F2)}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.mroute{fill:none;stroke:var(--aqua);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 7;animation:mdash 1.4s linear infinite}
@keyframes mdash{to{stroke-dashoffset:-26}}
.mrider{fill:var(--violet);stroke:#fff;stroke-width:2.5}
.mpin{position:absolute;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:.2rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;color:var(--mute)}
.mpin i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;line-height:1;background:#fff;border:1px solid var(--line2);box-shadow:0 10px 20px -10px rgba(16,32,63,.6)}
.mpin.dest i{background:var(--coral);border-color:var(--coral);color:#fff}
.meta-eta{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);background:#fff;border:1px solid var(--line2);
  border-radius:99px;padding:.4rem .9rem;font-size:.74rem;font-weight:600;box-shadow:0 16px 30px -18px rgba(16,32,63,.55);white-space:nowrap}
.meta-eta span{color:var(--aqua)}

/* calculadora de comisión */
.calc{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:1.6rem 1.5rem;box-shadow:0 30px 60px -40px rgba(16,32,63,.5)}
.calc label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--mute2);margin-bottom:.5rem}
.calc input[type=range]{width:100%;accent-color:var(--violet);height:26px;cursor:pointer}
.calc .val{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.1rem}
.calc .rowsplit{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
@media(max-width:520px){.calc .rowsplit{grid-template-columns:1fr}}
.calc .box{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--bg2)}
.calc .box.win2{border-color:var(--violet);background:var(--violet-pale)}
.calc .box span{display:block;font-size:.72rem;color:var(--mute);margin-bottom:.3rem}
.calc .box b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;display:block}
.calc .save{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line2);display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;flex-wrap:wrap}
.calc .save span{font-size:.82rem;color:var(--mute)}
.calc .save b{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--aqua);letter-spacing:-.04em}
.calc small{display:block;margin-top:.7rem;font-size:.7rem;color:var(--mute2)}

/* ---------- 7. respeto por reduce-motion ---------- */
@media(prefers-reduced-motion:reduce){
  [data-rv],[data-stagger]>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .draw i{transform:scaleX(1)}
  .float,.scene-tag::before,.hot::after,.wa-typing i,.sync-arrow .ln i,.behind-h .lvd::before,
  .qrow.new,.mroute,.dlive::before{animation:none}
  .wa-chat[data-wa] .wa-msg,.wa-chat[data-wa] .wa-sysmsg{opacity:1;transform:none}
}

/* en pantallas angostas los revelados laterales se vuelven verticales: evitan desbordar el ancho */
@media(max-width:940px){[data-rv="left"],[data-rv="right"],[data-rv="tiltin"]{transform:translateY(26px)}}