/* The card itself: the designer and the customer's page draw it from these same rules. */
.loyalty-card{width:100%;border-radius:16px;background:var(--card-bg,#17191d);color:var(--card-fg,#fff);flex-direction:column;justify-content:space-between;position:relative;box-shadow:0 18px 36px #0002}
.loyalty-card.flipped{transform:rotateY(360deg)}.loyalty-card img{max-width:58%;max-height:65px;object-fit:contain;object-position:left}
.card-brand{font-size:clamp(19px,3vw,29px);font-weight:750;letter-spacing:-.04em}.card-stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.card-stamp{aspect-ratio:1;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:clamp(12px,2vw,22px);opacity:.78}.card-stamp.filled{background:var(--card-fg,#fff);color:var(--card-bg,#17191d);opacity:1}.card-stamp.pop{animation:stampPop .48s cubic-bezier(.2,1.7,.4,1)}@keyframes stampPop{0%{transform:scale(.35);opacity:.2}65%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}@keyframes stampShine{0%{filter:brightness(1)}50%{filter:brightness(1.8)}100%{filter:brightness(1)}}.card-stamp.shine{animation:stampShine .8s}.card-stamp.confetti{animation:stampPop .5s,stampShine .8s}
.card-face{display:none;position:relative;width:100%;height:100%;min-height:0}.card-face.active{display:block}
.loyalty-card{display:block;padding:0;aspect-ratio:1.65;user-select:none;touch-action:pan-y}
.card-element{position:absolute;max-width:100%;min-width:20px;cursor:grab;touch-action:none;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.1;outline:1px solid transparent}
.card-element img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:left top}
.card-element .card-stamps{width:100%}.card-element .card-stamp{font-size:clamp(12px,4cqw,20px);transition:background .15s,color .15s}.stamp-symbol{display:inline-block;line-height:1}
.card-powered{position:absolute;bottom:4%;left:0;right:0;text-align:center;pointer-events:none;font-size:clamp(9px,1.15vw,12px);letter-spacing:.025em;opacity:.78}
.card-powered{color:var(--powered-color,#ffffff)}.card-powered strong{font-weight:700}.card-powered b{color:#00bfff;font-size:1.3em}
.element-hidden{display:none!important}
.neon-logo{will-change:filter;transform:translateZ(0)}@keyframes neon-pulse{0%,100%{opacity:1}50%{opacity:.68}}@keyframes neon-flicker{0%,18%,22%,68%,72%,100%{opacity:1}19%,21%,69%,71%{opacity:.4}}
:is(#previewLogo,#publicLogo){display:block!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain!important}:is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .card-powered{z-index:10;visibility:visible;opacity:1}
/* true two-sided 3D rotation; faces remain mounted during the turn */
.loyalty-card{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1),background .2s;perspective:none;overflow:visible}
.loyalty-card.show-back{transform:rotateY(180deg)}
.card-face,.card-face.active{container-type:inline-size;display:block!important;position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:16px;background:var(--card-bg,#17191d);pointer-events:none}
.card-face.active{pointer-events:auto}
:is(#cardBack,#publicCardBack,.membership-stage .card-face-back){transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){.loyalty-card{transition:none}}
.card-stamp .stamp-symbol.stamp-fx-neon{animation:stampFxNeon var(--stamp-fx-duration,700ms) ease-in-out both}
.card-stamp .stamp-symbol.stamp-fx-sparkle{animation:stampFxSparkle var(--stamp-fx-duration,700ms) ease-out both}
.card-stamp .stamp-symbol.stamp-fx-ink{animation:stampFxInk var(--stamp-fx-duration,700ms) cubic-bezier(.16,1,.3,1) both}
.card-stamp .stamp-symbol.stamp-fx-bounce{animation:stampFxBounce var(--stamp-fx-duration,700ms) cubic-bezier(.2,1,.3,1) both}
.card-stamp .stamp-symbol.stamp-fx-spin{animation:stampFxSpin var(--stamp-fx-duration,700ms) ease-out both}
@keyframes stampFxNeon{0%{opacity:.1;filter:drop-shadow(0 0 0 transparent)}35%{opacity:1;filter:drop-shadow(0 0 var(--stamp-fx-glow,9px) var(--stamp-fx-color,#00cfff))}70%{filter:drop-shadow(0 0 calc(var(--stamp-fx-glow,9px)*1.6) var(--stamp-fx-color,#00cfff))}100%{opacity:1;filter:drop-shadow(0 0 var(--stamp-fx-glow,9px) var(--stamp-fx-color,#00cfff))}}
@keyframes stampFxSparkle{0%{opacity:0;transform:scale(.25) rotate(-35deg);filter:brightness(1)}40%{opacity:1;transform:scale(1.35) rotate(10deg);filter:brightness(var(--stamp-fx-bright,2)) drop-shadow(0 0 var(--stamp-fx-glow,9px) var(--stamp-fx-color,#00cfff))}100%{transform:scale(1);filter:brightness(1)}}
@keyframes stampFxInk{0%{opacity:0;transform:scale(2.2);filter:blur(6px)}55%{opacity:1;transform:scale(.88);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes stampFxBounce{0%{opacity:0;transform:translateY(-65%) scale(.5)}55%{opacity:1;transform:translateY(18%) scale(1.15)}75%{transform:translateY(-9%) scale(.94)}100%{transform:translateY(0) scale(1)}}
@keyframes stampFxSpin{0%{opacity:0;transform:rotate(-270deg) scale(.3)}75%{opacity:1;transform:rotate(18deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.card-stamp .stamp-symbol[class*=stamp-fx-]{animation:none!important}}
:is(#designerView,#publicCardView,#customersView) .card-stamp{width:82%;height:auto;aspect-ratio:1;justify-self:center;align-self:center}
:is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .card-powered{display:flex!important;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:0 10px}
:is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .logo-remover-line{display:block;flex:0 1 68px;height:1px;background:currentColor;opacity:.6}
:is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .card-powered{bottom:7%!important}
:is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .logo-remover-line{flex-basis:34px!important;max-width:34px!important;min-width:12px!important}
:is(#designerView,#publicCardView,#customersView) [data-element="frontLogo"]{box-sizing:border-box;touch-action:none}
:is(#designerView,#publicCardView,#customersView) .card-face{overflow:hidden}
/* v9.5.7 — Reverso: sellos más pequeños y pie despejado. */
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamp {
  border-width:1.5px!important;
}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .card-powered { z-index:15!important}
:is(#designerView,#publicCardView,#customersView) [data-element="frontLogo"]{max-width:none!important;line-height:0!important;overflow:visible!important}
:is(#designerView,#publicCardView,#customersView) [data-element="frontLogo"] img{height:auto!important;display:block!important}
.stamp-symbol-img{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%}.card-stamp .stamp-symbol:has(.stamp-symbol-img){width:75%;height:75%;display:grid;place-items:center}

/* v9.5.8: composición equilibrada, guías solo en modo selección. */
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamp{opacity:1}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"]{max-height:45%!important}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) .card-powered{bottom:5%!important}
@media(max-width:550px){:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamp{width:min(100%,38px)!important}}

/* v9.5.9 — ONLY stamp geometry: compact 5-column grid, fixed 1:1 circles,
   8px gaps at full size, proportional shrink on narrow viewports. */
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamps {
  margin-inline: auto !important;
  gap: 8px !important;
  justify-content: center !important;
  align-content: center !important;
}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamp {
  min-width: 0 !important;
}
@media (max-width: 380px) {
  :is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamps { gap: 6px !important; }
}


/* v9.5.10 — ONLY card proportions and stamp-block geometry.
   Reference MANA card: 5:3. Compact 5×2 stamps scale with card width.
   Keep text, colours, logos and business logic unchanged. */
/* v9.5.10 — ONLY card proportions and stamp-block geometry.
   Reference MANA card: 5:3. Compact 5×2 stamps scale with card width.
   Keep text, colours, logos and business logic unchanged. */
:is(#designerView,#publicCardView,#customersView) :is(#previewCard,#publicCard,.membership-stage .loyalty-card) {
  aspect-ratio: 5 / 3 !important;
  width: 100% !important;
  max-width: 500px !important;
  margin-inline: auto !important;
}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] {
  left: 16% !important;
  top: 35% !important;
  width: 68% !important;
  height: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamps {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 2.5% !important;
  row-gap: 8% !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamp {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Seven stamps sit as 4 + 3. Ten half columns keep the same stamp size and gaps as the five-column grid. */
:is(#designerView,#publicCardView,#customersView) :is(#cardBack,#publicCardBack,.membership-stage .card-face-back) [data-element="backStamps"] .card-stamps.rows-4-3{grid-template-columns:repeat(10,minmax(0,1fr))!important}
.card-stamps.rows-4-3 .card-stamp{grid-column:span 2}
.card-stamps.rows-4-3 .card-stamp:nth-child(1){grid-column:2/span 2}
.card-stamps.rows-4-3 .card-stamp:nth-child(5){grid-column:3/span 2}

.membership-stage .card-face-front{transform:translateZ(.1px)}.membership-stage .card-face-back{transform:rotateY(180deg) translateZ(.1px)}.card-stamp .stamp-symbol{max-width:100%;max-height:100%;overflow:hidden}.card-stamp:has(.stamp-symbol-img).filled{background:transparent!important}.card-stamp .stamp-symbol-img{max-width:100%!important;max-height:100%!important;width:100%!important;height:100%!important}
/* Pending new stamps remain empty until their own sequential effect begins. */
.stamp-pending{background:transparent!important;color:transparent!important}.stamp-pending .stamp-symbol{visibility:hidden!important}
/* Subtle sweep follows the visible pixels of the uploaded logo; no extra image requests. */
.logo-gold-sweep{position:absolute;inset:0;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;background:linear-gradient(110deg,transparent 38%,#b89436 44%,#ffe6a2 49%,#fff7da 51%,#d4af37 56%,transparent 63%);background-size:350% 100%;opacity:var(--gold-strength,.45);animation:logoGoldSweep var(--gold-cycle,3s) linear infinite}
@keyframes logoGoldSweep{0%{background-position:100% 0}65%,100%{background-position:0% 0}}@media(prefers-reduced-motion:reduce){.logo-gold-sweep{animation:none;background-position:45% 0;opacity:.18}}
.card-intro .logo-gold-sweep{--gold-cycle:3s!important}
/* Stable card, separate orbit/float, and a thin magnetic pedestal. */
.card-magnet{width:min(100%,500px);max-width:100%;margin:0 auto;perspective:1600px;position:relative}.magnetic-float,.card-rotor{width:100%;transform-style:preserve-3d}.card-magnet .loyalty-card{width:100%!important;max-width:100%!important;aspect-ratio:5/3!important;margin:0!important;transform-style:preserve-3d}.card-magnet:not(.is-ready) .magnetic-float{visibility:hidden}.card-magnet.is-ready .magnetic-float{animation:cardLevitate 5s ease-in-out infinite}.card-rotor{will-change:transform}.card-magnet-base{position:relative;width:42%;height:6px;margin:27px auto 0;border-radius:50%;background:linear-gradient(180deg,#e1e9ee,#b7c8d4);box-shadow:0 8px 14px #426a871c,0 -4px 16px #91b7d22b}.card-magnet-base::before{content:'';position:absolute;inset:-6px -25%;border-radius:50%;background:radial-gradient(ellipse,#80b4d428,transparent 70%)}#publicCardBody{perspective:none}.membership-stage{perspective:none}.card-magnet .card-face-front{transform:translateZ(.1px)}.card-magnet .card-face-back{transform:rotateY(180deg) translateZ(.1px)}
@keyframes cardLevitate{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}@media(prefers-reduced-motion:reduce){.card-magnet.is-ready .magnetic-float{animation:none}.card-rotor{will-change:auto}}
/* Keep the sweep soft even at stronger settings. */
.logo-gold-sweep{opacity:calc(var(--gold-strength,.45)*.7)}
.card-intro .neon-logo{animation-duration:1.95s!important}
/* A paint/container boundary on the 3D root flattens its faces and mirrors the logo.
   Each face already supplies the inline-size container used by its own text. */
.card-magnet .loyalty-card{container-type:normal!important}.card-magnet.is-operating .magnetic-float{animation-play-state:paused}
/* Same circle diameter/gaps as 5 and 10; recover seven's approved upward shift. */
:is(#designerView,#publicCardView,#customersView) .card-face-back [data-element=backStamps]:has(.rows-4-3){top:31.667%!important}
.membership-member-name{position:absolute;left:8%;top:20%;width:84%;text-align:center;line-height:1.15;white-space:normal;overflow-wrap:anywhere;pointer-events:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--card-fg,#fff)}