/* Tarjeta única de producto (2026-10-18) — réplica de la de El Rey (B.tarjeta) con la marca Bubika:
   cacao #3A1F16 · mango #FFA226 · crema #FFF3E2 · rojo #E8503A · títulos Baloo 2, texto Archivo.
   Sin marcos cacao gruesos ni sombras duras (diseno_suave): línea tenue y sombra suave. */
.bk-tj{--ca:#3A1F16;--cm:#7A5A4C;--mg:#FFA226;--mgo:#F29A2E;--cr:#FFF3E2;--ro:#E8503A;--vd:#1F7A3A;
  position:relative;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 3px rgba(58,31,22,.07);font-family:Archivo,system-ui,sans-serif;color:var(--ca);min-width:0;}
.bk-tj *{box-sizing:border-box;}
.bk-tj a{text-decoration:none !important;}
.bk-tj-img{position:relative;aspect-ratio:1/1;background:#fff;flex:none;}
.bk-tj-img>a{position:relative;display:block;width:100%;height:100%;overflow:hidden;}
.bk-tj-img img{width:100%;height:100%;object-fit:contain;padding:10px;display:block;}
.bk-tj.agotado .bk-tj-img img{opacity:.55;filter:grayscale(.35);}
/* botón redondo del carrito sobre la foto */
.bk-tj-mas{position:absolute;z-index:4;right:8px;bottom:8px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ca);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(58,31,22,.16);cursor:pointer;transition:transform .15s,background .15s;}
.bk-tj-mas:hover{transform:scale(1.06);background:var(--cr);}
.bk-tj-mas svg{width:21px;height:21px;}
.bk-tj-mas.ok{background:var(--mg);color:var(--ca);}
.bk-tj-mas b{font:800 15px/1 Archivo,system-ui,sans-serif;}
.bk-tj-mas.cargando{opacity:.55;pointer-events:none;}
.bk-tj-mas.wa{color:#25D366;}
/* galería deslizable (fotos extra de la ficha) */
.bk-gal{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;clip-path:inset(0 1px 0 0);}
.bk-gal::-webkit-scrollbar{display:none;}
.bk-gal-s{flex:0 0 100%;scroll-snap-align:center;}
.bk-gal-pts{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:4px;pointer-events:none;z-index:3;}
.bk-gal-pts i{width:5px;height:5px;border-radius:9px;background:rgba(58,31,22,.22);}
.bk-gal-pts i.on{background:var(--ca);width:12px;}
.bk-gal-prev,.bk-gal-next{display:none;}
@media (hover:hover) and (pointer:fine){
  .bk-gal-prev,.bk-gal-next{display:flex;position:absolute;top:50%;z-index:3;width:28px;height:28px;margin-top:-14px;border-radius:50%;border:0;
    background:rgba(255,255,255,.92);color:var(--ca);align-items:center;justify-content:center;opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(58,31,22,.15);cursor:pointer;}
  .bk-gal-prev{left:6px;}.bk-gal-next{right:6px;}
  .bk-tj-img:hover .bk-gal-prev,.bk-tj-img:hover .bk-gal-next{opacity:1;}
}
.bk-tj-sello{position:absolute;left:8px;top:8px;z-index:3;border-radius:999px;padding:4px 9px;font:700 11px/1 Archivo,system-ui,sans-serif;background:var(--cr);color:var(--ca);}
.bk-tj-sello.top{background:var(--mg);color:var(--ca);}
.bk-tj-sello.ago{background:#F1ECE6;color:var(--cm);}
/* info */
.bk-tj-info{flex:1;padding:9px 12px 13px;color:inherit !important;display:flex;flex-direction:column;gap:4px;border-top:1px solid #F5EDE3;}
.bk-tj-nom{font:500 14.5px/1.3 Archivo,system-ui,sans-serif;color:var(--ca);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.bk-tj-fprecio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.bk-tj-precio{font:700 23px/1.1 Archivo,system-ui,sans-serif;color:var(--ca);letter-spacing:-.01em;}
.bk-tj-precio sup{font-size:12px;top:-.7em;margin-left:1px;}
.bk-tj-desc{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;background:var(--mg);color:var(--ca);
  font:800 12.5px/1 Archivo,system-ui,sans-serif;animation:bk-tj-late 2.2s ease-in-out infinite;transform-origin:0 50%;}
@keyframes bk-tj-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.bk-tj-uni{font:500 12px/1.25 Archivo,system-ui,sans-serif;color:var(--cm);}
.bk-tj-vol{font:600 12.5px/1.3 Archivo,system-ui,sans-serif;color:var(--vd);}
.bk-tj-rinde{font:500 12px/1.3 Archivo,system-ui,sans-serif;color:var(--cm);}
.bk-tj-rinde b{color:var(--ca);font-weight:700;}
.bk-tj-ago{align-self:flex-start;padding:3px 9px;border-radius:999px;background:#F1ECE6;color:var(--cm);font:700 11.5px/1.2 Archivo,system-ui,sans-serif;}
/* «Si fueras Socio»: pastillas y colores de los niveles (los mismos de El Rey) */
.bk-tj-soc{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.bk-tj-soc-k{font:700 10.5px/1.2 Archivo,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--cm);}
.bk-tj-soc-f{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;padding:3px 8px 3px 4px;border-radius:8px;}
.bk-tj-soc-f i{font:800 10px/1 Archivo,system-ui,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px 3px;border-radius:999px;}
.bk-tj-soc-f b{font:700 14px/1 Archivo,system-ui,sans-serif;color:var(--ca);white-space:nowrap;font-variant-numeric:tabular-nums;}
.bk-tj-soc-f b sup{font-size:9px;top:-.55em;margin-left:1px;}
.bk-tj-soc-f.plata{background:#EEF0F3;}
.bk-tj-soc-f.plata i{background:#BFC5CC;color:var(--ca);}
.bk-tj-soc-f.oro{background:#FFFBEB;box-shadow:inset 0 0 0 1px #FFE47A;}
.bk-tj-soc-f.oro i{background:#FFD426;color:var(--ca);}
.bk-tj-tu .bk-tj-soc-f b{font:700 11.5px/1.2 Archivo,system-ui,sans-serif;white-space:normal;text-align:right;}
/* entrada al aparecer (solo en cuadrículas; las filas de lado no animan: brincaban en El Rey) */
.bk-tj-entra{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;}
.bk-tj-entra.bk-tj-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.bk-tj-desc{animation:none !important;}.bk-tj-entra{opacity:1;transform:none;transition:none;}}

/* rejilla y fila deslizable */
.bk-tj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (min-width:768px){.bk-tj-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}}
@media (min-width:992px){.bk-tj-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:1300px){.bk-tj-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.bk-tj-fila-caja{position:relative;}
.bk-tj-fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,46%);gap:10px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;}
.bk-tj-fila::-webkit-scrollbar{display:none;}
.bk-tj-fila>*{scroll-snap-align:start;}
@media (min-width:768px){.bk-tj-fila{grid-auto-columns:minmax(180px,23%);}}
@media (min-width:1200px){.bk-tj-fila{grid-auto-columns:calc((100% - 50px) / 6);}}
.bk-tj-fila-fl{display:none;}
@media (hover:hover) and (pointer:fine){
  .bk-tj-fila-fl{display:flex;position:absolute;z-index:5;top:38%;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#3A1F16;
    align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(58,31,22,.16);cursor:pointer;}
  .bk-tj-fila-fl:hover{background:#FFF3E2;}
  .bk-tj-fila-fl.prev{left:-14px;}.bk-tj-fila-fl.next{right:-14px;}
  .bk-tj-fila-fl[disabled]{opacity:0;pointer-events:none;}
}

/* aviso flotante («Agregado: …») */
.bk-aviso{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:1095;transform:translate(-50%,20px);opacity:0;
  display:flex;align-items:center;gap:12px;width:max-content;max-width:min(92vw,440px);background:#3A1F16;color:#FFF3E2;border-radius:12px;padding:12px 14px;
  font:500 14px/1.3 Archivo,system-ui,sans-serif;box-shadow:0 8px 24px rgba(58,31,22,.25);transition:opacity .2s,transform .2s;pointer-events:none;}
.bk-aviso.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.bk-aviso a{flex:none;color:#FFA226 !important;font-weight:700;text-decoration:none;}
.bk-aviso.error{background:#E8503A;color:#fff;}
@media (min-width:992px){.bk-aviso{bottom:28px;}}