/* ======================================================================
   Tarjeta de cada negocio (web/js/card.js). Los colores llegan como variables CSS puestas por brandTheme():
   --base (fondo) --on (texto sobre el fondo) --panel --panel-on --stamp (sellos) --stamp-on --dash --chip --chip-on --cred --cred-on --pend --pend-on
   ====================================================================== */
.bc-defs{position:absolute;width:0;height:0;overflow:hidden}
@property --p{syntax:'<integer>';initial-value:0;inherits:true}
@property --c{syntax:'<integer>';initial-value:0;inherits:true}

.card.brand-card{--rx:0deg;--ry:0deg;--sx:30%;position:relative;border:0;border-radius:30px;overflow:hidden;background:var(--base);color:var(--on);padding:0;margin:0 0 24px;box-shadow:var(--sh-2);isolation:isolate;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bc-art{position:relative}
.brand-card .brand-art{border-radius:0;height:var(--arth,224px)}
.brand-card .brand-art.scene::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(to bottom,transparent,var(--base))}
.bc-meta{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:2;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.bc-chip{padding:7px 13px;border-radius:999px;background:var(--chip);color:var(--chip-on);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-by{color:var(--on);opacity:.6}
.bc-panel{position:relative;margin:0 14px 14px;padding:20px 20px 18px;border-radius:24px;background:var(--panel);color:var(--panel-on);display:flex;flex-direction:column;gap:16px;z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bc-count{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.bc-n{font-size:.95rem;font-weight:700;opacity:.9}
.bc-n strong{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-right:2px;opacity:1;font-variant-numeric:tabular-nums}
.bc-left{font-size:.8rem;font-weight:700;opacity:.75}
.bc-flag{font-size:.78rem;font-weight:800;padding:5px 12px;border-radius:999px;background:#F6D77A;color:#3A2A00;letter-spacing:.02em}
.bc-credit,.bc-pend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:.84rem;font-weight:700;padding:9px 14px;border-radius:14px;position:relative;overflow:hidden;font-variant-numeric:tabular-nums}
.bc-credit{background:var(--cred);color:var(--cred-on)}
.bc-pend{background:var(--pend);color:var(--pend-on)}
.bc-credit i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.bc-pend i{width:8px;height:8px;border-radius:50%;border:2px solid currentColor;flex:none}
.bc-credit em,.bc-pend em{font-style:normal;font-weight:500;opacity:.85;margin-left:auto;font-size:.74rem;text-align:right;white-space:nowrap}
/* El monto final es texto real. Mientras cuenta, ese texto se oculta y el contador de CSS lo recorre desde lo que había hasta el total. */
.bc-pend.fx .bc-cnt{font-size:0}
.bc-pend.fx .bc-cnt::after{content:"$" counter(p) "." counter(c,decimal-leading-zero);counter-reset:p var(--p) c var(--c);font-size:.84rem}
.bc-bal{display:flex;flex-direction:column;gap:4px;padding:2px 0 4px}
.bc-bal small{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bc-bal strong{font-size:2.9rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.bc-bal p{margin:2px 0 0;font-size:.84rem;font-weight:600;opacity:.85}

.bc-slots{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:12px 10px;justify-items:center;padding:2px 0}
.brand-card .dot.slot{width:100%;max-width:62px;height:auto;aspect-ratio:1;border-radius:50%;border:2px dashed var(--dash);background:transparent;display:grid;place-items:center;position:relative;color:var(--panel-on);font-weight:800;font-size:.9rem}
.brand-card .dot.slot span{opacity:.5}
.brand-card .dot.slot.on{border:0;background:transparent}
.brand-card .dot.slot svg{width:100%;height:100%;display:block;transform:rotate(var(--r,0deg));filter:url(#bc-rough);overflow:visible}
.st-disc{fill:var(--stamp)}
.st-ring{stroke:var(--stamp-on)}
.st-text{fill:var(--stamp-on)}
.bc-reward{position:relative;display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px dashed var(--dash);font-size:.84rem;font-weight:600;line-height:1.35}
.bc-gift{width:19px;height:19px;flex:none}
.bc-reward.ready{background:linear-gradient(110deg,#E7B547,#F8DA7E 50%,#E7B547);color:#3A2A00;border:0;border-radius:15px;padding:13px 15px;font-weight:800;font-size:.88rem}
.bc-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.07) 54%,transparent 64%);mix-blend-mode:soft-light;transform:translateX(var(--sx,30%));transition:transform .3s ease-out}

/* ---------- sello nuevo: cae con un golpe, rebota y deja un anillo de impacto ---------- */
.brand-card .dot.slot.drop svg{animation:bc-thunk .8s cubic-bezier(.2,.8,.2,1) both}
.brand-card .dot.slot.drop::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2.5px solid var(--stamp);animation:bc-ring .8s ease-out .32s both;pointer-events:none}
@keyframes bc-thunk{0%{transform:rotate(calc(var(--r) - 25deg)) scale(2.6);opacity:0}38%{opacity:1}52%{transform:rotate(var(--r)) scale(.86)}68%{transform:rotate(var(--r)) scale(1.07)}100%{transform:rotate(var(--r)) scale(1)}}
@keyframes bc-ring{from{transform:scale(.85);opacity:.9}to{transform:scale(1.9);opacity:0}}
.card.brand-card.hit{animation:bc-bump .8s ease-out both}
@keyframes bc-bump{0%,36%{transform:perspective(1000px) scale(1)}46%{transform:perspective(1000px) scale(.985) translateY(3px)}62%{transform:perspective(1000px) scale(1.004)}100%{transform:perspective(1000px) scale(1)}}

/* ---------- saldo ganado: cae una moneda, el contador sube y salen destellos ---------- */
.bc-pend.fx{animation:bc-pendin .55s cubic-bezier(.2,1.5,.3,1) 1s both}
.bc-pend.fx .bc-cnt{animation:bc-cp .8s ease-out 1.05s both,bc-cc .8s ease-out 1.05s both}
@keyframes bc-cp{from{--p:var(--p0)}to{--p:var(--p1)}}
@keyframes bc-cc{from{--c:var(--c0)}to{--c:var(--c1)}}
@keyframes bc-pendin{0%{transform:scale(.6);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.bc-pend.fx::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-120%);animation:bc-sweep2 .7s ease-out 1.15s both}
@keyframes bc-sweep2{to{transform:translateX(120%)}}
.bc-coin-wrap{position:absolute;left:50%;top:-6px;width:46px;height:46px;margin-left:-23px;z-index:8;pointer-events:none;animation:bc-coin 1.05s cubic-bezier(.35,.05,.25,1) both;filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
.bc-coin{width:100%;height:100%;display:block}
@keyframes bc-coin{0%{transform:translateY(-30px) rotateY(0) scale(1.25);opacity:0}12%{opacity:1}68%{transform:translateY(var(--ty,160px)) rotateY(1080deg) scale(1);opacity:1}80%{transform:translateY(calc(var(--ty,160px) - 16px)) rotateY(1100deg) scale(1)}100%{transform:translateY(var(--ty,160px)) rotateY(1260deg) scale(.15);opacity:0}}
.bc-spark{position:absolute;width:14px;height:14px;z-index:7;pointer-events:none;background:#FFE08A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:bc-spark .7s ease-out calc(1.05s + var(--d,0ms)) both}
@keyframes bc-spark{0%{transform:scale(0) rotate(0);opacity:0}40%{opacity:1;transform:scale(1.25) rotate(40deg)}100%{transform:scale(0) rotate(120deg);opacity:0}}

/* ---------- premio completo: ola de sellos, destello dorado, banner y confeti ---------- */
.brand-card .dot.slot.wave svg{animation:bc-wave .55s ease-in-out calc(var(--i)*55ms + 850ms) both}
@keyframes bc-wave{0%,100%{transform:rotate(var(--r)) scale(1)}42%{transform:rotate(var(--r)) scale(1.2)}}
.bc-reward.ready.fx{animation:bc-bannerin .65s cubic-bezier(.2,1.5,.3,1) 1.9s both}
@keyframes bc-bannerin{0%{transform:scale(.6);opacity:0;filter:saturate(.3)}100%{transform:scale(1);opacity:1}}
.bc-reward.ready.fx .bc-gift{animation:bc-gift 1.1s ease-in-out 2.2s both}
@keyframes bc-gift{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-16deg) scale(1.35)}45%{transform:rotate(14deg) scale(1.35)}70%{transform:rotate(-7deg) scale(1.15)}}
.bc-panel.ready{box-shadow:0 0 0 2px rgba(232,185,74,.55),0 0 20px 1px rgba(232,185,74,.25)}
.bc-panel.ready.fx{animation:bc-glow 1.6s ease-in-out 1.8s both}
@keyframes bc-glow{0%{box-shadow:0 0 0 2px rgba(232,185,74,0),0 0 0 0 rgba(232,185,74,0)}40%{box-shadow:0 0 0 3px rgba(232,185,74,.95),0 0 30px 6px rgba(232,185,74,.55)}100%{box-shadow:0 0 0 2px rgba(232,185,74,.55),0 0 20px 1px rgba(232,185,74,.25)}}
.bc-golden{position:absolute;inset:0;border-radius:24px;overflow:hidden;pointer-events:none;z-index:4}
.bc-golden::after{content:"";position:absolute;top:-10%;bottom:-10%;width:34%;left:-45%;background:linear-gradient(100deg,transparent,rgba(255,214,110,.6),transparent);transform:skewX(-18deg);animation:bc-sweep3 1.1s ease-in-out 1.5s both}
@keyframes bc-sweep3{to{left:125%}}
.bc-confetti{position:absolute;left:50%;top:50%;width:0;height:0;z-index:9;pointer-events:none}
.bc-confetti i{position:absolute;left:0;top:0;width:9px;height:15px;border-radius:2.5px;background:var(--cf);animation:bc-burst 1.25s cubic-bezier(.12,.75,.3,1) calc(2s + var(--d,0ms)) both}
@keyframes bc-burst{0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1);opacity:0}}

/* ---------- fila compacta de un negocio ---------- */
.bc-mini{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:inherit}
.bc-mini:first-child{border-top:0}
.bc-mini:hover .bc-tile{box-shadow:var(--sh-1)}
.bc-tile{width:56px;height:56px;border-radius:16px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--base,var(--biz));color:var(--on,#fff);border:1px solid var(--line)}
.bc-tile .brand-art{--arth:56px;border-radius:0;width:56px}
.bc-tile .brand-art img{max-width:86%;max-height:86%}
.bc-initial{font-weight:800;font-size:1.3rem}
.bc-mini-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bc-mini-body b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.bc-mini-body span{font-size:.82rem;color:var(--mut);font-weight:600}
.bc-bar{height:6px;border-radius:6px;background:var(--tint);overflow:hidden;margin-top:4px}
.bc-bar i{display:block;height:100%;width:var(--w,0);background:var(--biz);border-radius:6px}

/* ---------- directorio de negocios ---------- */
.card.brand-card.dir{margin:0 0 20px}
.dir .bc-panel{gap:12px}
.dir .bc-offer{font-size:.95rem;font-weight:600;line-height:1.4;margin:0}
.dir .bc-name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
.dir .bc-sub{font-size:.84rem;font-weight:600;opacity:.8;margin:0}

@media (min-width:720px){.card.brand-card{border-radius:34px}}
@media (prefers-reduced-motion:reduce){
  .card.brand-card,.bc-sheen{transition:none}
  .brand-card .dot.slot.drop svg,.brand-card .dot.slot.drop::after,.card.brand-card.hit,.bc-pend.fx,.bc-pend.fx .bc-cnt,.bc-pend.fx::before,.bc-coin-wrap,.bc-spark,
  .brand-card .dot.slot.wave svg,.bc-reward.ready.fx,.bc-reward.ready.fx .bc-gift,.bc-panel.ready.fx,.bc-golden::after,.bc-confetti i{animation:none!important}
  .bc-coin-wrap,.bc-spark,.bc-confetti{display:none}
}