/* ════════════════════════════════════════════════════════════
   ESCENAS DE DRACO (antes en el hero)
   · .hd-*  Draco sujetando el navegador: suelta un producto y la
            tienda cambia (js/draco-tiendas.js). Vive en "Tiendas reales".
   · .hv-*  Draco con el móvil: entran ventas de Shopify como
            notificaciones iOS (js/draco-ventas.js). Vive en el CTA final.
   Las dos escenas escalan con el ancho de su contenedor, así que
   cada sección solo decide el tamaño del wrapper.
   ════════════════════════════════════════════════════════════ */

/* ── Draco + navegador ── */
.hd-stage-wrap{position:relative;width:100%;aspect-ratio:602/686;container-type:inline-size}
.hd-stage{position:absolute;inset:0;isolation:isolate}
.hd-body,.hd-hand{position:absolute;left:22.2%;top:-6.5%;width:77.8%;height:auto;pointer-events:none;user-select:none}
/* El cuerpo no se recorta: el navegador (opaco, por delante) ya tapa
   lo que queda detrás. */
.hd-body{z-index:1}
/* Cada mano se recorta con una máscara SVG (clipPathUnits=objectBoundingBox,
   definida junto a la escena) trazada sobre el contorno real del sprite.
   Cada pose (sujeta/suelta) usa su propio contorno. */
.hd-hand{z-index:5}
.hd-hand--left[data-hd-hand-closed]{clip-path:url(#hd-clip-left-sujeta)}
.hd-hand--left[data-hd-hand-open]{clip-path:url(#hd-clip-left-suelta);opacity:0}
.hd-hand--right{clip-path:url(#hd-clip-right)}
/* Navegador deformado con una matriz afín (rotación + escala + cizalla)
   medida sobre la ilustración; sin traslación en px, así escala con el
   stage. clip-path en vez de overflow evita una fisura de subpíxel en
   pantallas HiDPI. */
.hd-browser{position:absolute;left:9.4%;top:44.2%;width:97.2%;transform-origin:0 0;transform:matrix(0.9229,0.0598,-0.1359,0.8479,0,0);border:1px solid #ffffff24;border-radius:12px;overflow:hidden;clip-path:inset(0 round 12px);background:#14171d;box-shadow:0 28px 65px #0007;z-index:2}
.hd-browser-topbar{display:flex;align-items:center;gap:1.4cqi;padding:2.2cqi 3cqi;background:#1a1e26}
.hd-browser-dot{width:1.6cqi;height:1.6cqi;border-radius:50%}
.hd-browser-dot--red{background:#ff5f57}.hd-browser-dot--yellow{background:#febc2e}.hd-browser-dot--green{background:#28c840}
.hd-browser-viewport{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#f5c4d8}
.hd-browser-tilt{position:absolute;inset:0}
.hd-store-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 45% 20%)}
.hd-store-layer[data-hd-active="base"]{clip-path:none;z-index:1}
.hd-store-layer[data-hd-active="reveal"]{z-index:2}
/* Marquito con el producto: el borde superior queda bajo los nudillos. */
.hd-card{position:absolute;left:30.4%;top:44.7%;width:19.2%;aspect-ratio:4/5;box-sizing:border-box;padding:1.8cqi 1.8cqi 4.4cqi;border-radius:2cqi;background:#fff;box-shadow:0 9px 22px #0005;z-index:4;transform-origin:50% 8%;transform:rotate(-5deg);will-change:transform,opacity}
.hd-card-img{width:100%;height:100%;object-fit:contain;display:block;background:#f8f5f6;border-radius:3px}

/* ── Draco + móvil (Assets/draco-ventas.webp; coordenadas del PNG original 1297×1212) ──
   .hv-canvas mide lo mismo que el PNG original en píxeles y se escala con
   --hv-scale (= ancho del wrapper / 1297, lo fija draco-ventas.js).
   .hv-rig agrupa imagen + overlay para que la reacción a cada venta
   (inclinación + squash) mueva el móvil y los dedos juntos. */
.hv-wrap{position:relative;width:100%;aspect-ratio:1297/1212;pointer-events:none}
.hv-rig{position:absolute;inset:0;transform-origin:50% 92%;will-change:transform}
.hv-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hv-canvas{position:absolute;left:0;top:0;width:1297px;height:1212px;transform-origin:0 0;transform:scale(var(--hv-scale,.3))}
/* Pantalla del móvil: rectángulo de 290×630 llevado a las 4 esquinas
   reales de la pantalla con una homografía (coincide la perspectiva). */
.hv-screen{position:absolute;left:0;top:0;width:290px;height:630px;border-radius:40px;overflow:hidden;transform-origin:0 0;
  transform:matrix3d(0.84883734,0.13961217,0,-0.00010843478,-0.25475188,0.93284818,0,-4.4014805e-05,0,0,1,0,956.2,190.9,0,1)}
.hv-fingers{position:absolute;left:1120px;top:483px;width:150px;height:323px}
.hv-stack{position:absolute;left:9px;right:9px;top:292px;height:250px}
.hv-notif{position:absolute;left:0;right:0;top:0;height:78px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 12px 0 10px;border-radius:20px;
  background:#1e2026;border:1px solid rgba(255,255,255,.06);color:#fff;
  font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;will-change:transform,opacity}
.hv-icon{flex:0 0 auto;width:46px;height:46px;border-radius:11px;background:#f4f5f2;display:flex;align-items:center;justify-content:center}
.hv-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.hv-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.hv-app{font-size:15px;font-weight:600}
.hv-time{font-size:11.5px;color:rgba(255,255,255,.55)}
.hv-title{font-size:15px;font-weight:500;white-space:nowrap}
.hv-meta{font-size:12.5px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Contador demo bajo el móvil: es parte de la ilustración (no un dato real). */
.hv-tally{position:absolute;right:2%;top:73%;display:flex;flex-direction:column;gap:2px;padding:8px 14px 9px;border-radius:14px;
  background:#1e2026;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(0,0,0,.35);color:#fff;
  font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;transform-origin:50% 50%;white-space:nowrap}
.hv-tally-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.72)}
.hv-tally-demo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.hv-tally-value{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Charco de luz bajo el dragón */
.hv-floor{position:absolute;left:12%;right:4%;bottom:-4%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,#2f6dff8c,#1f5cf533 55%,transparent);filter:blur(14px);opacity:.9}