/* ============================================================
   DISEÑO E-COMMERCE · diseno-ecommerce.html, versión 3 (oct 2026)
   Escenas SVG animadas propias de la página. La base (hero en 2
   columnas, tarjetas, FAQ, cierre, entradas GSAP) viene de
   css/diseno-web.css, que también se carga acá.

   Igual que en Diseño Web: las coreografías corren solo con .en-vista;
   sin JS o con movimiento reducido se ve el cuadro final de la historia.
   ============================================================ */
.ec-sel{fill:rgba(62,230,168,.12);stroke:var(--mint)}
.ec-pill{fill:rgba(6,5,18,.45);stroke:var(--line-strong)}
.ec-add{fill:rgba(108,99,255,.22);stroke:rgba(108,99,255,.55)}
.ec-badge circle{fill:var(--mint)}
.ec-cart{fill:none;stroke:var(--lavender);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ec-cart-r{fill:var(--lavender)}
.ec-promo rect{fill:rgba(62,230,168,.16)}
.ec-drawer-bg{fill:#1B1839;stroke:var(--line-strong)}
.ec-fin{fill:var(--mint)}
.ec-pin{fill:var(--mint)}
.ec-ruta{fill:none;stroke:rgba(169,164,248,.4);stroke-width:1.6;stroke-dasharray:4 4}
.ec-camion rect,.ec-camion path{fill:var(--lavender)}
.ec-camion circle{fill:#fff}
.ec-radio{fill:none;stroke:var(--lavender);stroke-width:1.4}
.ec-radio-p{fill:var(--mint)}
.ec-burbuja{fill:var(--iris)}
.ec-burbuja-t{fill:#fff !important}
.ec-talle{fill:rgba(6,5,18,.45);stroke:var(--line-strong)}
.ec-tache{stroke:var(--danger);stroke-width:1.4;stroke-linecap:round}
.ec-check{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ec-agotado rect{fill:rgba(255,92,135,.14);stroke:rgba(255,92,135,.6)}
.ec-agotado text{fill:var(--danger) !important;font-weight:700}
.ec-repuesto rect{fill:rgba(62,230,168,.12);stroke:rgba(62,230,168,.6)}
.ec-repuesto text{fill:var(--mint) !important;font-weight:700}
.ec-nieve{fill:none;stroke:#BFE6FF;stroke-width:1.6;stroke-linecap:round}
.ec-gris{opacity:.3}
.ec-abandono rect{fill:var(--danger)}
.ec-abandono text{fill:#fff !important;font-weight:700}
.ec-envio-mal{fill:var(--danger) !important}

/* ============================================================
   HERO · tu equipo prende la promo, un cliente compra sin fricción
   y el pedido llega solo
   ============================================================ */
.ech{--d:12s}
.ech .ech-cursor{transform:translate(600px,330px)}
.ech .ec-st12{opacity:0}
.ech .ec-knob{transform:translateX(12px)}
.en-vista .ech .ech-cursor{animation:ech-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-cursor{
  0%,4%{transform:translate(640px,380px)}
  10%,15%{transform:translate(619px,282px)}
  24%,29%{transform:translate(222px,216px)}
  46%,51%{transform:translate(354px,180px)}
  56%,61%{transform:translate(348px,234px)}
  72%,100%{transform:translate(600px,330px)}
}
.en-vista .ech .ec-c1{animation:ech-c1 var(--d) ease-out infinite}
.en-vista .ech .ec-c2{animation:ech-c2 var(--d) ease-out infinite}
.en-vista .ech .ec-c3{animation:ech-c3 var(--d) ease-out infinite}
.en-vista .ech .ec-c4{animation:ech-c4 var(--d) ease-out infinite}
@keyframes ech-c1{0%,11%{opacity:0;transform:scale(.3)}13%{opacity:1}20%,100%{opacity:0;transform:scale(1.9)}}
@keyframes ech-c2{0%,25%{opacity:0;transform:scale(.3)}27%{opacity:1}34%,100%{opacity:0;transform:scale(1.9)}}
@keyframes ech-c3{0%,47%{opacity:0;transform:scale(.3)}49%{opacity:1}56%,100%{opacity:0;transform:scale(1.9)}}
@keyframes ech-c4{0%,57%{opacity:0;transform:scale(.3)}59%{opacity:1}66%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .ech .ec-knob{animation:ech-knob var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-knob{0%,12%{transform:none}15%,94%{transform:translateX(12px)}98%,100%{transform:none}}
.en-vista .ech .ec-track-on{animation:ech-track var(--d) linear infinite}
@keyframes ech-track{0%,12%{opacity:0}15%,94%{opacity:1}98%,100%{opacity:0}}
.en-vista .ech .ec-promo{animation:ech-promo var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-promo{0%,14%{opacity:0;transform:translateY(-6px)}19%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ech .ec-add2{animation:ech-add var(--d) linear infinite}
@keyframes ech-add{0%,26%{fill:rgba(108,99,255,.22)}27.5%{fill:var(--mint)}33%,100%{fill:rgba(108,99,255,.22)}}
.en-vista .ech .ec-badge{animation:ech-badge var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ech-badge{0%,27%{transform:scale(0)}31%{transform:scale(1.3)}34%,94%{transform:scale(1)}98%,100%{transform:scale(0)}}
.en-vista .ech .ec-drawer{animation:ech-drawer var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-drawer{0%,32%{transform:translateX(180px)}39%,94%{transform:none}99%,100%{transform:translateX(180px)}}
.en-vista .ech .ec-pay-on{animation:ech-pay var(--d) linear infinite}
@keyframes ech-pay{0%,48%{opacity:0}50%,94%{opacity:1}98%,100%{opacity:0}}
.en-vista .ech .ec-fin{animation:ech-fin var(--d) linear infinite}
@keyframes ech-fin{0%,58%{fill:var(--mint)}59.5%{fill:#fff}63%,100%{fill:var(--mint)}}
.en-vista .ech .ec-ok{animation:ech-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-ok{0%,61%{opacity:0;transform:translateY(6px)}65%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ech .ec-toast{animation:ech-toast var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ech-toast{0%,67%{opacity:0;transform:translateY(-8px)}72%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ech .ec-st12{animation:ech-st12 var(--d) linear infinite}
.en-vista .ech .ec-st11{animation:ech-st11 var(--d) linear infinite}
@keyframes ech-st12{0%,73%{opacity:1}76%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes ech-st11{0%,73%{opacity:0}76%,94%{opacity:1}98%,100%{opacity:0}}

/* ============================================================
   PROBLEMA · los meses pasan y la tienda se queda vieja; en el
   último paso el envío sorpresa espanta la compra
   ============================================================ */
.ecp{--d:11s}
.ecp .ec-m1,.ecp .ec-m3{opacity:0}
.ecp .ech-cursor{transform:translate(500px,410px)}
.en-vista .ecp .ec-m1{animation:ecp-m1 var(--d) linear infinite}
.en-vista .ecp .ec-m3{animation:ecp-m3 var(--d) linear infinite}
.en-vista .ecp .ec-m6{animation:ecp-m6 var(--d) linear infinite}
@keyframes ecp-m1{0%,20%{opacity:1}23%,100%{opacity:0}}
@keyframes ecp-m3{0%,20%{opacity:0}23%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes ecp-m6{0%,42%{opacity:0}45%,94%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecp .ec-agot{animation:ecp-agot var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ecp-agot{0%,25%{opacity:0;transform:scale(1.4) rotate(-12deg)}29%,94%{opacity:1;transform:rotate(-12deg)}98%,100%{opacity:0;transform:rotate(-12deg)}}
.ecp .ec-agot{transform:rotate(-12deg)}
.en-vista .ecp .ec-nieve-g{animation:ecp-nieve var(--d) linear infinite}
@keyframes ecp-nieve{0%,44%{opacity:0}48%,94%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecp .ec-viejo{animation:ecp-viejo var(--d) linear infinite}
@keyframes ecp-viejo{0%,46%{opacity:1}54%,94%{opacity:.3}98%,100%{opacity:1}}
.ecp .ec-viejo{opacity:.3}
.en-vista .ecp .il-telarana{animation:ecp-tela var(--d) ease-in-out infinite}
@keyframes ecp-tela{0%,48%{stroke-dashoffset:1}60%,94%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.en-vista .ecp .dw-mal1{animation:ecp-mal1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .ecp .dw-mal2{animation:ecp-mal2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .ecp .dw-mal3{animation:ecp-mal3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ecp-mal1{0%,28%{opacity:0;transform:scale(.6)}33%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ecp-mal2{0%,50%{opacity:0;transform:scale(.6)}55%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ecp-mal3{0%,68%{opacity:0;transform:scale(.6)}73%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ecp .ech-cursor{animation:ecp-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecp-cursor{0%,58%{transform:translate(300px,420px)}64%,68%{transform:translate(268px,328px)}78%,100%{transform:translate(500px,410px)}}
.en-vista .ecp .ec-envio-mal{animation:ecp-envio var(--d) linear infinite}
@keyframes ecp-envio{0%,63%{opacity:.35}66%,94%{opacity:1}98%,100%{opacity:.35}}
.en-vista .ecp .ec-abandono{animation:ecp-aband var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ecp-aband{0%,77%{opacity:0;transform:translateY(5px) scale(.8)}82%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 1 · pagar como paga el uruguayo
   ============================================================ */
.ecf-pago{--d:6s}
.ecf-pago .ech-cursor{transform:translate(150px,128px)}
.en-vista .ecf-pago .ech-cursor{animation:ecf1-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf1-cursor{0%,6%{transform:translate(200px,150px)}26%,36%{transform:translate(36px,90px)}54%,100%{transform:translate(150px,128px)}}
.en-vista .ecf-pago .ec-c1{animation:ecf1-click var(--d) ease-out infinite}
@keyframes ecf1-click{0%,29%{opacity:0;transform:scale(.3)}31%{opacity:1}40%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .ecf-pago .ec-sel-g{animation:ecf1-sel var(--d) linear infinite}
@keyframes ecf1-sel{0%,30%{opacity:0}33%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecf-pago .dw-ok{animation:ecf1-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf1-ok{0%,38%{opacity:0;transform:translateX(-6px)}45%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 2 · el envío se ve antes del final
   ============================================================ */
.ecf-envio{--d:6.5s}
.ecf-envio .ec-mvd{opacity:0}
.ecf-envio .ech-cursor{transform:translate(150px,128px)}
.en-vista .ecf-envio .ech-cursor{animation:ecf2-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf2-cursor{0%,6%{transform:translate(180px,150px)}20%,28%{transform:translate(110px,48px)}46%,100%{transform:translate(150px,128px)}}
.en-vista .ecf-envio .ec-c1{animation:ecf2-click var(--d) ease-out infinite}
@keyframes ecf2-click{0%,21%{opacity:0;transform:scale(.3)}23%{opacity:1}31%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .ecf-envio .ec-mvd{animation:ecf2-mvd var(--d) linear infinite}
.en-vista .ecf-envio .ec-salto{animation:ecf2-salto var(--d) linear infinite}
@keyframes ecf2-mvd{0%,24%{opacity:1}26%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes ecf2-salto{0%,24%{opacity:0}26%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecf-envio .ec-camion{animation:ecf2-camion var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes ecf2-camion{0%,30%{transform:translate(0,0)}62%,93%{transform:translate(104px,-44px)}98%,100%{transform:translate(0,0)}}
.ecf-envio .ec-camion{transform:translate(104px,-44px)}
.en-vista .ecf-envio .ec-calc{animation:ecf2-calc var(--d) linear infinite}
@keyframes ecf2-calc{0%,30%{opacity:0}35%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecf-envio .dw-ok{animation:ecf2-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf2-ok{0%,62%{opacity:0;transform:translateY(4px)}68%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 3 · la ficha contesta antes de que pregunten
   ============================================================ */
.ecf-ficha{--d:7s}
.ecf-ficha .ec-burb{opacity:0}
.en-vista .ecf-ficha .ec-burb{animation:ecf3-burb var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf3-burb{0%,4%{opacity:0;transform:translateY(6px) scale(.9)}10%,38%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-4px)}}
.en-vista .ecf-ficha .ec-x{animation:ecf3-x var(--d) linear infinite}
@keyframes ecf3-x{0%,16%{opacity:0}20%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .ecf-ficha .ec-i1{animation:ecf3-i1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .ecf-ficha .ec-i2{animation:ecf3-i2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .ecf-ficha .ec-i3{animation:ecf3-i3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf3-i1{0%,22%{opacity:0;transform:translateX(-6px)}28%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ecf3-i2{0%,30%{opacity:0;transform:translateX(-6px)}36%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ecf3-i3{0%,38%{opacity:0;transform:translateX(-6px)}44%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 4 · tu equipo repone un agotado y lo publica
   ============================================================ */
.ecf-equipo{--d:6.4s}
.ecf-equipo .ec-agotado{opacity:0}
.ecf-equipo .ech-cursor{transform:translate(170px,128px)}
.en-vista .ecf-equipo .ech-cursor{animation:ecf4-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf4-cursor{0%,6%{transform:translate(200px,150px)}24%,32%{transform:translate(252px,72px)}50%,100%{transform:translate(170px,128px)}}
.en-vista .ecf-equipo .ec-c1{animation:ecf4-click var(--d) ease-out infinite}
@keyframes ecf4-click{0%,27%{opacity:0;transform:scale(.3)}29%{opacity:1}38%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .ecf-equipo .ec-agotado{animation:ecf4-ag var(--d) linear infinite}
.en-vista .ecf-equipo .ec-repuesto{animation:ecf4-rep var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ecf4-ag{0%,29%{opacity:1}31%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes ecf4-rep{0%,29%{opacity:0;transform:scale(.7)}34%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ecf-equipo .dw-ok{animation:ecf4-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ecf4-ok{0%,40%{opacity:0;transform:translateY(4px)}47%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ech *,.ecp *,.ecf-pago *,.ecf-envio *,.ecf-ficha *,.ecf-equipo *{animation:none !important}
}

/* ============================================================
   VERSIÓN B (página corta) · enlaces a la guía y listas de una línea
   ============================================================ */
.list-check--corta li{align-items:center}
.list-check--corta li strong{font-weight:600}
.guia-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--sp-sm);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--mint);
  text-decoration:none;border-bottom:1px solid rgba(62,230,168,.4);padding-bottom:.15rem;
  transition:border-color .25s,gap .25s;
}
.guia-link:hover{border-color:var(--mint);gap:.75rem}
.enlaces-guia{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-sm);padding:0}
.enlaces-guia a{
  display:inline-flex;align-items:center;min-height:42px;padding:.55rem 1rem;border-radius:100px;
  border:1px solid var(--line-strong);color:var(--text);text-decoration:none;font-size:var(--fs-sm);
  transition:border-color .25s,color .25s,background .25s;
}
.enlaces-guia a:hover{border-color:var(--mint);color:var(--mint);background:rgba(62,230,168,.08)}
.trab .works2__list{margin-top:var(--sp-md)}

/* Las tarjetas de "Qué incluye" (.inc-cards) viven en v2.css: las usa todo el sitio. */