/* Cierre con QR: ninguna transición afecta la matriz ni su zona de silencio. */
.cq-stage { --cq-arrival: 0; position: relative; width: 760px; height: 615px; isolation: isolate; }
.cq-stage .cq-aura { position: absolute; z-index: -2; width: 720px; height: 610px; left: 20px; top: 0; background: radial-gradient(ellipse, rgba(45,173,98,.16), transparent 67%); pointer-events: none; }
.cq-stage .cq-orbit { position: absolute; z-index: -1; border: 1px solid rgba(45,173,98,.12); border-radius: 50%; pointer-events: none; opacity: calc(.35 + var(--cq-arrival) * .65); transform: scale(calc(.95 + var(--cq-arrival) * .05)); }
.cq-stage .cq-orbit-a { width: 646px; height: 646px; left: 57px; top: -20px; }
.cq-stage .cq-orbit-b { width: 718px; height: 718px; left: 21px; top: -56px; border-color: rgba(45,173,98,.055); }
.cq-stage .cq-card { position: absolute; left: 94px; top: 0; width: 572px; height: 615px; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; background: linear-gradient(155deg, rgba(18,29,22,.97), rgba(8,14,10,.98) 65%); box-shadow: 0 28px 75px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.035); }
.cq-stage .cq-brand { position: absolute; left: 31px; right: 31px; top: 21px; height: 30px; display: flex; align-items: center; gap: 9px; }
.cq-stage .cq-brand > img { width: 27px; height: 27px; object-fit: contain; }
.cq-stage .cq-brand > strong { font-size: 20px; letter-spacing: -.6px; font-weight: 750; color: #f0f7f2; }
.cq-stage .cq-brand > strong > span { font-weight: 450; color: #b5c6bb; }
.cq-stage .cq-badge { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(45,173,98,.23); border-radius: 99px; background: rgba(45,173,98,.07); color: #80c99d; font-size: 10px; font-weight: 650; letter-spacing: .2px; }
.cq-stage .cq-code-frame { position: absolute; left: 85px; top: 70px; width: 400px; height: 400px; }
.cq-stage .cq-code-link { display: block; width: 400px; height: 400px; line-height: 0; background: #fff; }
.cq-stage .cq-code { display: block; width: 400px; height: 400px; max-width: none; opacity: 1; transform: none; filter: none; image-rendering: pixelated; }
.cq-stage .cq-code-link:focus-visible { outline: 3px solid #34d399; outline-offset: 8px; }
.cq-stage .cq-corner { position: absolute; width: 21px; height: 21px; border: 2px solid #2DAD62; pointer-events: none; }
.cq-stage .cq-corner-tl { left: -11px; top: -11px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0; }
.cq-stage .cq-corner-tr { right: -11px; top: -11px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cq-stage .cq-corner-bl { left: -11px; bottom: -11px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cq-stage .cq-corner-br { right: -11px; bottom: -11px; border-left: 0; border-top: 0; border-radius: 0 0 8px; }
.cq-stage .cq-hint { position: absolute; left: 25px; right: 25px; top: 486px; margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; color: #a5b8ac; font-size: 17px; line-height: 24px; }
.cq-stage .cq-hint > svg { width: 19px; height: 19px; color: #6ba881; }
.cq-stage .cq-action { position: absolute; left: 85px; top: 526px; width: 400px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid rgba(81,220,135,.3); border-radius: 12px; background: #2DAD62; color: #041b0d; font: 750 20px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.4px; text-decoration: none; box-shadow: 0 6px 22px rgba(45,173,98,.12); transition: background .2s ease; }
.cq-stage .cq-action:hover { background: #34d399; }
.cq-stage .cq-action:focus-visible, .cq-stage .cq-url:focus-visible { outline: 2px solid #34d399; outline-offset: 5px; }
.cq-stage .cq-action > svg { width: 21px; height: 21px; }
.cq-stage .cq-url { position: absolute; left: 30px; right: 30px; top: 586px; color: #9cb8a6; text-align: center; text-decoration: none; font-size: 15px; line-height: 20px; letter-spacing: .15px; overflow-wrap: anywhere; }
.cq-stage .cq-url:hover { color: #d7eddf; }
.cq-stage .cq-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #2DAD62; opacity: calc(.3 + var(--cq-arrival) * .4); box-shadow: 0 0 16px rgba(45,173,98,.4); pointer-events: none; }
.cq-stage .cq-spark-a { left: 45px; top: 165px; }
.cq-stage .cq-spark-b { right: 43px; top: 444px; }
