/* Blanco Cucardas — tamaño proporcional al ancho de la imagen (container queries).
   --bc-size es un multiplicador (unitless). Escala igual en grilla, ficha y celular. */
.box-image{position:relative;container-type:inline-size}
.woocommerce-product-gallery__image{position:relative;container-type:inline-size}
.bc-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.bc-q{position:absolute;display:flex;flex-direction:column;gap:.35em;max-width:52%}
.bc-tl{top:5%;left:5%}
.bc-tr{top:5%;right:5%;align-items:flex-end}
.bc-bl{bottom:5%;left:5%}
.bc-br{bottom:5%;right:5%;align-items:flex-end}
.bc-cuc{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em;
  line-height:1;font-weight:800;color:var(--fg,#fff);background:var(--bg,#cf3a2b);
  border-radius:var(--bc-r,5px);padding:.5em .72em;box-shadow:0 2px 6px rgba(0,0,0,.25);
  white-space:nowrap;font-family:inherit;
  font-size:12px; /* fallback navegadores sin cqw */
  font-size:clamp(7px, calc(var(--bc-size,12) * 0.36cqw), calc(var(--bc-size,12) * 1.6px))}
.bc-cuc .bc-big{font-size:1em;font-weight:900;letter-spacing:-.01em}
.bc-cuc .bc-sub{font-size:.62em;font-weight:800;letter-spacing:.06em;font-style:normal;text-transform:uppercase;opacity:.95}
.bc-cuc img{display:block;max-height:2.8em;width:auto;border-radius:calc(var(--bc-r,5px) - 2px)}
.bc-logo{background:#fff;padding:.33em .58em}
.bc-logo img{max-height:3.2em}

/* Contenedores muy chicos (miniaturas de celular): achicar un poco más el footprint */
@container (max-width: 220px){
  .bc-q{gap:.25em;max-width:47%}
  .bc-cuc{padding:.34em .5em;white-space:normal;text-align:center;word-break:break-word}
}

@keyframes bc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bc-blink{0%,60%{opacity:1}61%,99%{opacity:.3}100%{opacity:1}}
@keyframes bc-sweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.bc-anim-pulse{animation:bc-pulse 1.25s ease-in-out infinite}
.bc-anim-blink{animation:bc-blink 1.1s steps(1,end) infinite}
.bc-anim-shine{position:relative;overflow:hidden}
.bc-anim-shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-130%);animation:bc-sweep 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .bc-anim-pulse,.bc-anim-blink{animation:none}
  .bc-anim-shine::after{display:none}
}