/* =====================================================================
   SELLALA · Componente "la tarjeta vive en el Wallet"
   Lo usan la landing (web/index.html), la página suelta y el video
   (web/escena-wallet/index.html). Todas las clases empiezan con "ew-"
   para no pisarse con la landing. Solo se animan transform y opacity.
   ===================================================================== */
.ew{ --ew-papel:#F4F5F0; --ew-tinta:#15161C; --ew-gris:#6B6F7A; --ew-linea:#DCDED6; --ew-woop:#F2561C; --ew-cobalto:#2340E0; --ew-lima:#D6F24B;
  position:relative; display:flex; flex-direction:column; align-items:center; font-family:'Onest', system-ui, sans-serif; color:var(--ew-tinta); }
.ew svg{ display:block; }
.ew-anillo{ position:absolute; width:min(520px,118%); aspect-ratio:1; top:46%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); color:var(--ew-woop); opacity:.12; pointer-events:none; }
.ew-marco{ position:relative; width:calc(300px * var(--k,1)); height:calc(612px * var(--k,1)); }
.ew-telefono{ position:absolute; top:0; left:0; width:300px; height:612px; transform-origin:0 0; transform:scale(var(--k,1));
  border-radius:48px; background:var(--ew-tinta); padding:10px; box-shadow:0 2px 4px rgba(21,22,28,.06), 0 24px 60px -18px rgba(21,22,28,.28), inset 0 0 0 1.5px #3a3c46; }
.ew-leyenda{ display:none; margin-top:22px; text-align:center; min-height:3.2em; max-width:30ch; }
.ew-leyenda b{ display:block; font-size:18px; font-weight:600; }
.ew-leyenda span{ display:block; color:var(--ew-gris); font-size:15px; margin-top:2px; }
.ew-puntos{ display:none; gap:8px; justify-content:center; margin-top:14px; }
.ew-punto{ width:8px; height:8px; border-radius:50%; background:var(--ew-linea); transition:width .35s, background-color .35s; }
.ew-punto.activo{ width:24px; border-radius:8px; background:var(--ew-woop); }

/* Lista de pasos (va al lado, en compu) */
.ew-pasos{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:10px; text-align:left; }
.ew-paso{ position:relative; display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; padding:14px 16px; border-radius:16px; transition:background-color .4s, box-shadow .4s; cursor:pointer; }
.ew-paso.activo{ background:#fff; box-shadow:0 1px 2px rgba(21,22,28,.06), 0 8px 24px -10px rgba(21,22,28,.14); }
.ew-paso-n{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-weight:500; font-size:14px; box-shadow:inset 0 0 0 1.5px var(--ew-linea, #DCDED6); color:var(--ew-gris, #6B6F7A); transition:background-color .4s, color .4s, box-shadow .4s; }
.ew-paso.activo .ew-paso-n{ background:var(--ew-woop, #F2561C); color:#fff; box-shadow:none; }
.ew-paso-t b{ display:block; font-size:17px; font-weight:600; }
.ew-paso-t span{ display:block; font-size:15px; color:#6B6F7A; margin-top:2px; }
.ew-barra{ position:absolute; left:16px; right:16px; bottom:0; height:2px; border-radius:2px; background:#F2561C; transform-origin:left; transform:scaleX(0); opacity:0; }
.ew-paso.activo .ew-barra{ opacity:1; }

@media (max-width:860px){
  .ew-pasos{ display:none; }
  .ew-leyenda{ display:block; }
  .ew-puntos{ display:flex; }
}

/* ---------- Pantalla (coordenadas fijas: 280 x 592) ---------- */
.ew-pantalla{ position:relative; width:280px; height:592px; border-radius:38px; overflow:hidden; background:#F2F2F4; font-size:14px; line-height:1.35; text-align:left; }
.ew-capa{ position:absolute; inset:0; }
.ew-isla{ position:absolute; top:12px; left:50%; width:92px; height:26px; margin-left:-46px; border-radius:20px; background:var(--ew-tinta); z-index:30; }
.ew-estado{ position:absolute; top:14px; left:26px; right:22px; display:flex; justify-content:space-between; font-size:13px; font-weight:600; z-index:29; color:var(--ew-tinta); font-family:'JetBrains Mono',monospace; }
.ew-estado .ew-iconos{ display:flex; gap:5px; align-items:center; }
.ew-estado svg{ width:17px; height:12px; }
.ew-estado.claro{ color:#fff; }

.ew-wtit{ position:absolute; top:50px; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between; }
.ew-wtit b{ font-size:27px; font-weight:700; letter-spacing:-.02em; }
.ew-mas{ width:30px; height:30px; border-radius:50%; background:#E3E3E8; display:grid; place-items:center; }
.ew-mas svg{ width:14px; height:14px; }
.ew-listo{ position:absolute; top:54px; left:18px; right:18px; display:flex; justify-content:space-between; font-size:15px; font-weight:600; color:var(--ew-cobalto); opacity:0; }
.ew-listo i{ font-style:normal; width:26px; height:26px; border-radius:50%; background:#E3E3E8; display:grid; place-items:center; color:var(--ew-tinta); font-size:13px; letter-spacing:1px; line-height:1; }

.ew-pase{ position:absolute; left:14px; width:252px; height:400px; border-radius:14px; overflow:hidden; box-shadow:0 -1px 0 rgba(255,255,255,.12) inset, 0 -6px 16px -10px rgba(0,0,0,.35); will-change:transform, opacity; }
.ew-cab{ height:48px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:14.5px; }
.ew-cab small{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; opacity:.7; display:block; text-align:right; }
.ew-cab em{ font-style:normal; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; }
.ew-banco{ top:96px; height:160px; background:linear-gradient(135deg,#2A2C35 0%, #15161C 70%); color:#fff; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.ew-chip{ width:34px; height:26px; border-radius:6px; background:linear-gradient(135deg,#D9C27A,#A88E45); }
.ew-num{ font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.12em; opacity:.85; }
.ew-fila{ display:flex; justify-content:space-between; align-items:flex-end; }
.ew-marca-b{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.ew-tipo{ font-size:11px; opacity:.7; }
.ew-helado{ background:#BFE8D6; color:#0F3D2C; }
.ew-gym{ background:#1E1F26; color:#fff; }
.ew-pan{ background:#F1E2C6; color:#4A3412; }

.ew-cafe{ background:var(--ew-cobalto); color:#fff; }
.ew-cafe::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,.16), transparent 55%); }
.ew-marca{ display:flex; align-items:center; gap:8px; }
.ew-logo{ width:28px; height:28px; border-radius:50%; background:#fff; color:var(--ew-cobalto); display:grid; place-items:center; }
.ew-logo svg{ width:16px; height:16px; }
.ew-sellos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:8px 14px 0; }
.ew-sello{ position:relative; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38); }
.ew-tinta{ position:absolute; inset:0; border-radius:50%; background:var(--ew-woop); color:#fff; display:grid; place-items:center; box-shadow:0 3px 8px -2px rgba(0,0,0,.35); }
.ew-tinta svg{ width:50%; height:50%; }
.ew-vacio .ew-tinta{ opacity:0; }
.ew-onda{ position:absolute; inset:-3px; border-radius:50%; box-shadow:0 0 0 2px var(--ew-lima); opacity:0; }
.ew-datos{ display:flex; justify-content:space-between; padding:14px 14px 0; }
.ew-datos small{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; opacity:.72; display:block; }
.ew-datos b{ font-size:14px; font-weight:600; }
.ew-qr{ margin:16px auto 0; width:118px; height:118px; background:#fff; border-radius:10px; padding:8px; }
.ew-qr svg{ width:100%; height:100%; }
.ew-qr-pie{ text-align:center; font-size:10px; opacity:.7; margin-top:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.06em; }

.ew-toque{ position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(21,22,28,.22); box-shadow:0 0 0 2px rgba(255,255,255,.7); opacity:0; pointer-events:none; z-index:20; }
.ew-ficha{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; border-radius:999px; background:var(--ew-tinta); color:#fff; font-size:13px; font-weight:600; white-space:nowrap; opacity:0; z-index:21; box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
.ew-ok{ width:22px; height:22px; border-radius:50%; background:var(--ew-lima); color:var(--ew-tinta); display:grid; place-items:center; }
.ew-ok svg{ width:13px; height:13px; }

.ew-bloqueo{ opacity:0; z-index:25; background:radial-gradient(120% 70% at 20% 0%, #3D58F0 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, #F2561C 0%, transparent 65%), linear-gradient(180deg,#1B2DA8,#15161C); color:#fff; }
.ew-hora{ position:absolute; top:78px; left:0; right:0; text-align:center; }
.ew-hora small{ display:block; font-size:15px; font-weight:500; opacity:.85; }
.ew-hora b{ display:block; font-size:76px; font-weight:600; letter-spacing:-.03em; line-height:1; margin-top:2px; font-variant-numeric:tabular-nums; }
.ew-aviso{ position:absolute; top:236px; left:10px; right:10px; display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:20px; background:rgba(250,250,252,.93); color:var(--ew-tinta); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); opacity:0; text-align:left; }
.ew-aviso-ic{ width:38px; height:38px; flex:none; border-radius:9px; overflow:hidden; }
.ew-aviso-ic svg{ width:100%; height:100%; }
.ew-aviso-cab{ display:flex; justify-content:space-between; font-size:13px; }
.ew-aviso-cab span{ color:var(--ew-gris); font-size:12px; }
.ew-aviso-msg{ font-size:13.5px; line-height:1.35; margin-top:1px; }
.ew-boton{ position:absolute; bottom:34px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.ew-boton svg{ width:18px; height:18px; }
.ew-home{ position:absolute; bottom:8px; left:50%; width:110px; height:4px; margin-left:-55px; border-radius:4px; background:rgba(255,255,255,.85); }

@media (prefers-reduced-motion: reduce){ .ew-paso, .ew-punto, .ew-paso-n{ transition:none; } }