/** Shopify CDN: Minification failed

Line 1089:24 Expected identifier but found whitespace
Line 1089:45 Unexpected "*"

**/
/* ============================================================================
   BANNER BUILDER PREMIUM — CSS ENGINE
   ----------------------------------------------------------------------------
   Motor de estilos reutilizable para banners de producto en Shopify.
   Este archivo NO cambia entre productos. Todo lo que cambia por producto
   (colores, textos, imagen, tiempos) vive en el archivo .liquid de la sección,
   como variables CSS (--bb-...) inyectadas por el panel de configuración.

   ÍNDICE DE MÓDULOS
   1. RESET            → normalización básica, aislamiento del banner
   2. TOKENS            → valores por defecto de todas las variables (--bb-*)
   3. TIPOGRAFÍAS        → clases de texto (título, cuerpo, etiquetas)
   4. LAYOUT             → estructura general (header, cuerpo, columnas)
   5. COMPONENTES        → cada bloque visual independiente
   6. LIBRERÍA DE ANIMACIONES → clases .bb-anim-* reutilizables + @keyframes
   7. EFECTOS DE PARTÍCULAS → lluvia de estrellas / producto / confeti (genérico)
   8. RESPONSIVE         → punto de quiebre de escritorio (900px)
   9. UTILIDADES         → helpers, accesibilidad, estados
   ============================================================================ */


/* ============================================================================
   1. RESET
   ============================================================================ */
.bb-hero, .bb-hero * {
  box-sizing: border-box;
}
.bb-hero {
  position: relative;
  isolation: isolate;
  font-family: var(--bb-font-body);
  color: var(--bb-color-text);
  background: var(--bb-color-bg);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.bb-hero img { max-width: 100%; display: block; }
.bb-hero button { font-family: inherit; cursor: pointer; }


/* ============================================================================
   2. TOKENS — valores por defecto (el .liquid los sobreescribe por instancia)
   ----------------------------------------------------------------------------
   Cualquier valor visual del banner es una variable aquí. Cambiar un producto
   nunca debería requerir tocar este archivo — solo los valores en el .liquid.
   ============================================================================ */
.bb-hero {
  /* --- Colores base --- */
  --bb-color-bg-start:      #FBF6EF;
  --bb-color-bg-end:        #FFFFFF;
  --bb-color-bg:            linear-gradient(180deg, var(--bb-color-bg-start) 0%, var(--bb-color-bg-end) 100%);
  --bb-color-text:          #33241A;
  --bb-color-text-muted:    #8B7663;
  --bb-color-accent:        #BE8C56;
  --bb-color-accent-strong: #6B4632;
  --bb-color-line:          rgba(74,46,31,0.14);
  --bb-color-verified:      #2E6FD6;
  --bb-color-onyx:          #1B1410;
  --bb-color-onyx-2:        #2A1F18;
  --bb-color-live-dot:      #D32F2F;
  --bb-color-urgent:        #D32F2F;

  /* --- Tipografías --- */
  --bb-font-heading: 'Cormorant Garamond', serif;
  --bb-font-title:   var(--bb-font-heading);
  --bb-font-body:    'Manrope', sans-serif;
  --bb-font-mono:    'Courier New', monospace;

  /* --- Radios y sombras --- */
  --bb-radius-sm: 7px;
  --bb-radius-md: 14px;
  --bb-radius-lg: 30px;
  --bb-shadow-soft: 0 22px 20px rgba(51,36,26,0.22);
  --bb-shadow-card: 0 8px 18px rgba(51,36,26,0.14);

  /* --- Producto --- */
  --bb-product-max-w-mobile: 210px;
  --bb-product-max-w-desktop: 100%;

  /* --- Velocidad global de animación (multiplicador) ---
     1 = normal. 0.5 = el doble de rápido. 2 = el doble de lento. */
  --bb-anim-speed: 1;

  /* --- Contador / temporizador --- */
  --bb-countdown-color-a: #3BFF7A;  /* primer color del reloj (ej. horas) */
  --bb-countdown-color-b: #FF3B3B;  /* segundo color (ej. min/seg, alerta) */
  --bb-countdown-bg:      #150707;
}


/* ============================================================================
   3. TIPOGRAFÍAS
   ============================================================================ */
.bb-text-eyebrow {
  margin: 0;
  text-align: inherit;
  font-size: var(--bb-eyebrow-size, clamp(12px, 3vw, 14px));
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--bb-eyebrow-color, var(--bb-color-accent));
  text-transform: var(--bb-eyebrow-transform, uppercase);
}
/* Variante decorada: ✦ a cada lado, para encabezados de combo */
.bb-text-eyebrow--deco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.bb-text-eyebrow--deco::before, .bb-text-eyebrow--deco::after {
  content: "✦";
  font-size: 0.75em;
  color: color-mix(in srgb, var(--bb-eyebrow-color, var(--bb-color-accent)) 60%, white);
}
.bb-text-desc {
  margin: clamp(3px, 0.8vw, 5px) 0 0;
  max-width: 46ch;
  font-family: var(--bb-font-title);
  font-size: clamp(15px, 4.2vw, 17.5px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--bb-desc-color, var(--bb-color-text));
  text-align: inherit;
}
.bb-text-title {
  margin: 0;
  font-family: var(--bb-font-title);
  font-weight: 600;
  font-size: var(--bb-title-size, clamp(35px, 10.1vw, 45px));
  line-height: 1.05;
  letter-spacing: var(--bb-title-spacing, 0.2px);
  color: var(--bb-title-color, var(--bb-color-text));
  text-transform: var(--bb-title-transform, none);
  text-shadow: 0 1px 4px rgba(255,255,255,0.55);
}
.bb-text-title-tm { font-size: 0.4em; vertical-align: super; font-weight: 500; }
.bb-text-title-accent {
  display: block;
  margin: 0;
  font-family: var(--bb-font-title);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 5.8vw, 26px);
  color: var(--bb-color-accent);
  letter-spacing: 0.5px;
}

/* --- Título combo: dos líneas + "+" en medio, mismo control tipográfico -- */
.bb-text-title--combo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
}
.bb-align-left > .bb-text-title--combo,
.bb-title-block.bb-align-left .bb-text-title--combo { justify-content: flex-start; }
.bb-title-line { text-transform: var(--bb-title-transform, uppercase); }
.bb-title-plus {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--bb-color-accent);
  line-height: 1;
}
.bb-text-variants {
  margin: 0 auto 0;
  text-align: center;
  font-size: clamp(10.5px, 2.7vw, 12px);
  font-weight: 500;
  color: var(--bb-color-text-muted);
  letter-spacing: 0.2px;
}


/* ============================================================================
   4. LAYOUT — estructura general (mobile-first)
   ============================================================================ */
.bb-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(5px, 1.4vw, 8px) clamp(22px, 6vw, 56px) clamp(3px, 1vw, 6px);
  gap: clamp(2px, 0.6vw, 3.5px);
}
.bb-title-block { position: relative; z-index: 1; text-align: center; }
.bb-title-block.bb-align-left { text-align: left; }
.bb-text-col { position: relative; z-index: 1; margin-top: clamp(1px, 0.4vw, 3px); }
.bb-image-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: var(--bb-product-pad-top, 0) var(--bb-product-pad-right, 0) var(--bb-product-pad-bottom, 0) var(--bb-product-pad-left, 0);
}


/* ============================================================================
   5. COMPONENTES
   ----------------------------------------------------------------------------
   Cada componente es independiente: si su HTML no está presente en el banner,
   simplemente no se renderiza. Ningún componente depende de otro para existir.
   ============================================================================ */

/* --- 5.1 Imagen del producto --- */
.bb-product-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bb-product-max-w-mobile);
  transform-origin: 60% 75%;
}
.bb-product-frame {
  position: relative;
  width: 100%;
  overflow: visible;
}
.bb-product-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(51,36,26, calc(0.22 * var(--bb-shadow-opacity, 1))));
  transform: scale(var(--bb-zoom, 1));
  transform-origin: var(--bb-zoom-x, 50%) var(--bb-zoom-y, 50%);
}
.bb-platform {
  position: absolute;
  top: 50%; left: 50%;
  width: min(78%, 195px);
  aspect-ratio: 1;
  transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bb-color-accent) 20%, transparent) 0%, color-mix(in srgb, var(--bb-color-accent) 8%, transparent) 55%, transparent 78%);
  z-index: 0;
}

/* --- 5.2 Sello / medallón (ej. "5 EN 1", "2-3 MIN") --- */
.bb-seal-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.9vw, 10px);
  margin: clamp(2px, 0.6vw, 3.5px) 0 0;
}
.bb-seal {
  flex: 0 0 auto;
  width: clamp(38px, 9.4vw, 48px);
  height: clamp(38px, 9.4vw, 48px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, color-mix(in srgb, var(--bb-color-accent) 14%, white) 55%, color-mix(in srgb, var(--bb-color-accent) 24%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 55%, transparent);
  box-shadow:
    0 3px 8px color-mix(in srgb, var(--bb-color-accent-strong) 22%, transparent),
    inset 0 1px 1px rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bb-seal::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 38%, transparent);
}
.bb-seal::after {
  content: "";
  position: absolute;
  inset: 6.5px;
  border-radius: 50%;
  border: 1px dotted color-mix(in srgb, var(--bb-color-accent) 45%, transparent);
}
.bb-seal-num {
  font-family: var(--bb-font-heading);
  font-weight: 700;
  font-size: clamp(16px, 4.1vw, 21px);
  line-height: 1;
  color: var(--bb-color-accent-strong);
  position: relative;
  z-index: 1;
}
.bb-seal-label {
  font-size: clamp(6.5px, 1.7vw, 8px);
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--bb-color-accent-strong);
  margin-top: 1px;
  position: relative;
  z-index: 1;
}
.bb-seal-sub {
  margin: 0;
  font-size: clamp(9.5px, 2.4vw, 11.5px);
  font-weight: 500;
  color: var(--bb-color-text-muted);
  line-height: 1.35;
  max-width: 26ch;
}

/* ============================================================================
   5.18 Envío gratis / badge de despacho (8 estilos, prominente y editable)
   ============================================================================ */
.bb-shipping-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-title);
  font-weight: 700;
  font-size: var(--bb-shipping-size, 15px);
  color: var(--bb-shipping-color, #fff);
  line-height: 1.2;
  max-width: 100%;
}
.bb-shipping-badge .bb-icon-svg { width: 1.3em !important; height: 1.3em !important; flex: 0 0 auto; }

/* --- 1. Sólido (por defecto): píldora rellena --- */
.bb-shipping-style--solid {
  background: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 10px 20px;
  border-radius: 999px;
}

/* --- 2. Contorno: transparente, borde de color --- */
.bb-shipping-style--outline {
  background: transparent;
  color: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  border: 2px solid var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 9px 19px;
  border-radius: 999px;
}
.bb-shipping-style--outline .bb-desc-icon,
.bb-shipping-style--outline .bb-icon-svg { color: var(--bb-shipping-bg, var(--bb-color-accent-strong)); }

/* --- 3. Degradado --- */
.bb-shipping-style--gradient {
  background: linear-gradient(120deg, var(--bb-shipping-bg, var(--bb-color-accent)), var(--bb-color-accent-strong));
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bb-shipping-bg, var(--bb-color-accent)) 35%, transparent);
}

/* --- 4. Cinta / ribbon --- */
.bb-shipping-style--ribbon {
  background: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 9px 26px;
  clip-path: polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%);
}

/* --- 5. Subrayado: minimalista, sin fondo, con línea debajo --- */
.bb-shipping-style--underline {
  background: transparent;
  color: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 2px 0 6px;
  border-bottom: 2.5px solid var(--bb-shipping-bg, var(--bb-color-accent-strong));
}

/* --- 6. Grande y centrado: bloque ancho, muy prominente --- */
.bb-shipping-style--bold-block {
  display: flex;
  width: 100%;
  justify-content: center;
  background: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 12px 16px;
  border-radius: var(--bb-radius-md);
  font-size: calc(var(--bb-shipping-size, 15px) * 1.15);
  text-align: center;
}

/* --- 7. Etiqueta angular: esquina cortada, estilo tag --- */
.bb-shipping-style--tag {
  background: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 9px 22px 9px 16px;
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
}

/* --- 8. Con destello: igual al sólido, pero con brillo animado --- */
.bb-shipping-style--flash {
  background: var(--bb-shipping-bg, var(--bb-color-accent-strong));
  padding: 10px 20px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.bb-shipping-style--flash::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: bb-kf-shipping-flash 2.6s ease-in-out infinite;
}
@keyframes bb-kf-shipping-flash {
  0% { left: -60%; }
  50%, 100% { left: 130%; }
}

/* ============================================================================
   5.17 Estilos de sello (10 diseños, mismos campos de texto/color)
   ============================================================================ */

/* Por defecto, cualquier estilo que no sea medallón/estampilla/laurel apaga
   los anillos dobles (no combinan con formas no circulares). */
.bb-seal-style--ribbon.bb-seal::before, .bb-seal-style--ribbon.bb-seal::after,
.bb-seal-style--tag.bb-seal::before, .bb-seal-style--tag.bb-seal::after,
.bb-seal-style--star.bb-seal::before, .bb-seal-style--star.bb-seal::after,
.bb-seal-style--shield.bb-seal::before, .bb-seal-style--shield.bb-seal::after,
.bb-seal-style--hexagon.bb-seal::before, .bb-seal-style--hexagon.bb-seal::after,
.bb-seal-style--pill.bb-seal::before, .bb-seal-style--pill.bb-seal::after,
.bb-seal-style--corner.bb-seal::before, .bb-seal-style--corner.bb-seal::after {
  content: none;
}

/* --- 2. Estampilla: círculo con borde punteado, sin relleno degradado --- */
.bb-seal-style--stamp.bb-seal {
  background: #fff;
  border: 1.5px dashed color-mix(in srgb, var(--bb-color-accent) 65%, transparent);
  box-shadow: none;
}
.bb-seal-style--stamp.bb-seal::before { border-style: dashed; }

/* --- 3. Píldora: horizontal, número y etiqueta lado a lado --- */
.bb-seal-style--pill.bb-seal {
  width: auto;
  height: auto;
  min-width: unset;
  flex-direction: row;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 999px;
}
.bb-seal-style--pill .bb-seal-label { margin-top: 0; }

/* --- 4. Etiqueta/tag: esquina cortada + agujerito --- */
.bb-seal-style--tag.bb-seal {
  width: clamp(46px, 11vw, 56px);
  height: clamp(38px, 9.4vw, 48px);
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 78%);
}
.bb-seal-style--tag.bb-seal::after {
  content: "";
  position: absolute;
  top: 15%; left: 15%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bb-color-accent-strong) 60%, transparent);
}

/* --- 5. Cinta/ribbon: extremos en punta --- */
.bb-seal-style--ribbon.bb-seal {
  width: clamp(58px, 14vw, 72px);
  height: clamp(32px, 8vw, 40px);
  border-radius: 0;
  clip-path: polygon(0% 50%, 10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%);
}

/* --- 6. Hexágono --- */
.bb-seal-style--hexagon.bb-seal {
  border-radius: 0;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}

/* --- 7. Escudo --- */
.bb-seal-style--shield.bb-seal {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 18%, 100% 55%, 50% 100%, 0% 55%, 0% 18%);
}

/* --- 8. Estrella --- */
.bb-seal-style--star.bb-seal {
  border-radius: 0;
  width: clamp(46px, 11.5vw, 58px);
  height: clamp(46px, 11.5vw, 58px);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.bb-seal-style--star .bb-seal-num { font-size: clamp(13px, 3.3vw, 17px); }
.bb-seal-style--star .bb-seal-label { font-size: 6px; }

/* --- 9. Esquina / diamante: cuadrado rotado 45°, contenido derecho --- */
.bb-seal-style--corner.bb-seal {
  border-radius: 6px;
  transform: rotate(45deg);
}
.bb-seal-style--corner .bb-seal-num,
.bb-seal-style--corner .bb-seal-label {
  transform: rotate(-45deg);
}

/* --- 10. Laurel: medallón + hojas decorativas a los costados --- */
.bb-seal-style--laurel.bb-seal { overflow: visible; }
.bb-seal-style--laurel.bb-seal::after {
  content: "";
  position: absolute;
  left: -11px; top: 50%;
  width: 12px; height: 20px;
  border-radius: 0 100% 0 100%;
  background: color-mix(in srgb, var(--bb-color-accent) 55%, transparent);
  transform: translateY(-50%) rotate(-20deg);
  border: none;
}
.bb-seal-style--laurel.bb-seal::before {
  content: "";
  position: absolute;
  right: -11px; left: auto; top: 50%;
  inset: auto;
  width: 12px; height: 20px;
  border-radius: 100% 0 100% 0;
  background: color-mix(in srgb, var(--bb-color-accent) 55%, transparent);
  transform: translateY(-50%) rotate(20deg);
  border: none;
}


/* --- 5.3 Beneficios (grilla de checks) --- */
.bb-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3px, 0.8vw, 4.5px) clamp(14px, 3vw, 20px);
  margin: clamp(2px, 0.6vw, 3.5px) 0 0;
  padding-top: clamp(2px, 0.6vw, 4px);
  border-top: 1px solid var(--bb-color-line);
}
.bb-benefit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(11px, 2.7vw, 12px);
  font-weight: 600;
  color: var(--bb-color-text);
}
.bb-benefit-icon { flex: 0 0 auto; width: var(--bb-benefit-icon-size, clamp(13px, 3.2vw, 15px)); height: var(--bb-benefit-icon-size, clamp(13px, 3.2vw, 15px)); }
.bb-benefit-icon-lib { flex: 0 0 auto; display: flex; }
.bb-benefit-icon-lib .bb-icon-svg { width: var(--bb-benefit-icon-size, 20px) !important; height: var(--bb-benefit-icon-size, 20px) !important; }

/* --- 5.4 Franja de variantes / sabores --- */
.bb-variant-strip {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: clamp(1px, 0.5vw, 4px) auto 0;
}

/* --- 5.5 Precio + oferta --- */
.bb-price-block {
  max-width: var(--bb-price-block-width, 460px);
  margin: 0 auto;
  padding: clamp(2px, 0.6vw, 3.5px) clamp(22px, 6vw, 56px) clamp(2px, 0.7vw, 5px);
  border-top: 1px solid var(--bb-color-line);
}
.bb-price-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 3px;
  column-gap: 6px;
  margin-bottom: clamp(5px, 1.2vw, 6.5px);
}
.bb-price-rating.bb-align-left { justify-content: flex-start; text-align: left; }
.bb-rating-word { font-weight: 700; color: var(--bb-color-text); font-size: clamp(11px, 2.7vw, 12px); }
.bb-dot { color: var(--bb-color-text-muted); opacity: 0.6; }
.bb-stars { display: inline-flex; gap: 1px; }
.bb-rating-num { font-size: clamp(11px, 2.7vw, 12px); font-weight: 700; color: var(--bb-color-text); }
.bb-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: clamp(10px, 2.4vw, 11px);
  font-weight: 600;
  color: var(--bb-color-verified);
}
.bb-rating-count {
  font-size: clamp(10px, 2.5vw, 11px);
  color: var(--bb-color-text-muted);
}
.bb-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2.8vw, 16px);
  padding: clamp(3px, 0.8vw, 5px) 0 0;
}
.bb-price-row.bb-align-left { justify-content: flex-start; }
.bb-price {
  font-family: var(--bb-font-body);
  font-weight: 800;
  color: var(--bb-color-price, var(--bb-color-accent-strong));
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* --- Estilo "elegante": tipografía serif, más liviana --- */
.bb-price-style--elegant .bb-price {
  font-family: var(--bb-font-heading);
  font-weight: 700;
  font-style: italic;
}
.bb-price-style--elegant .bb-price-currency,
.bb-price-style--elegant .bb-price-cents { font-weight: 500; }

/* --- Estilo "destacado": tarjeta con fondo alrededor --- */
.bb-price-style--bold_card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-color-accent) 16%, transparent), color-mix(in srgb, var(--bb-color-accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 30%, transparent);
  border-radius: var(--bb-radius-md);
  padding: clamp(10px, 2.4vw, 14px) clamp(16px, 3.6vw, 22px) !important;
}
.bb-price-currency,
.bb-price-amount,
.bb-price-cents { font-size: var(--bb-price-size, clamp(30px, 7.9vw, 39px)); font-weight: 700; }
.bb-price-amount { letter-spacing: -1px; }

/* --- Alineación: cada bloque (viendo / precio / calificación / compradores)
   recibe .bb-align-left de forma independiente, según su propio ajuste. --- */
.bb-offer-btn {
  display: inline-block;
  background: var(--bb-color-button, var(--bb-color-accent-strong));
  color: #fff;
  font-size: clamp(10.5px, 2.6vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: clamp(9px, 2.3vw, 11px) clamp(18px, 4.5vw, 24px);
  border-radius: var(--bb-radius-lg);
  border: none;
}

/* --- 5.6 Tarjeta de descuento + contador regresivo --- */
.bb-countdown-card {
  position: absolute;
  right: var(--bb-countdown-offset-x, 4%);
  top: 50%;
  transform: translateY(-58%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #FFFDF9;
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 35%, transparent);
  border-radius: var(--bb-radius-md);
  padding: 8px 10px;
  box-shadow: var(--bb-shadow-card);
}
.bb-countdown-tag {
  background: var(--bb-color-accent-strong);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 3px 9px;
  border-radius: 12px;
  max-width: 100px;
  line-height: 1.25;
  text-align: center;
}
.bb-countdown-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--bb-color-text-muted);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.bb-countdown-clock {
  display: flex;
  align-items: baseline;
  gap: 1px;
  background: var(--bb-countdown-bg);
  border: 1.5px solid color-mix(in srgb, var(--bb-countdown-color-a) 50%, transparent);
  border-radius: var(--bb-radius-sm);
  padding: 5px 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.75), 0 0 10px color-mix(in srgb, var(--bb-countdown-color-a) 30%, transparent);
}
.bb-countdown-clock b {
  font-family: var(--bb-font-mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.bb-cd-unit-a { color: var(--bb-countdown-color-a); text-shadow: 0 0 6px color-mix(in srgb, var(--bb-countdown-color-a) 90%, transparent), 0 0 14px color-mix(in srgb, var(--bb-countdown-color-a) 50%, transparent); }
.bb-cd-unit-b { color: var(--bb-countdown-color-b); text-shadow: 0 0 6px color-mix(in srgb, var(--bb-countdown-color-b) 90%, transparent), 0 0 14px color-mix(in srgb, var(--bb-countdown-color-b) 50%, transparent); }
.bb-cd-colon { font-family: var(--bb-font-mono); font-size: 14px; font-weight: 800; }
.bb-cd-colon-a { color: var(--bb-countdown-color-a); }
.bb-cd-colon-b { color: var(--bb-countdown-color-b); }
.bb-countdown-units {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
  margin-top: -1px;
}
.bb-countdown-units span {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--bb-color-text-muted);
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

/* --- 5.7 Vapor / halo ambiental (genérico, cualquier producto caliente) --- */
.bb-steam {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 40%;
  height: 30%;
  transform: translateX(-38%);
  z-index: 2;
  pointer-events: none;
}
.bb-wisp {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  filter: blur(6px);
  opacity: 0;
}
.bb-wisp.w1 { left: 12%; }
.bb-wisp.w2 { left: 38%; width: 13px; height: 44px; }
.bb-wisp.w3 { left: 64%; width: 14px; height: 48px; }
.bb-wisp.w4 { left: 86%; width: 12px; height: 40px; }

/* --- 5.8 Remolino / swirl (genérico, sobre cualquier superficie circular) --- */
.bb-swirl {
  position: absolute;
  left: var(--bb-swirl-x, 63%);
  top: var(--bb-swirl-y, 15%);
  width: var(--bb-swirl-w, 33%);
  height: var(--bb-swirl-h, 21%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  opacity: 0.8;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.bb-swirl::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0.9) 35deg, rgba(255,255,255,0) 80deg,
    rgba(74,46,31,0.55) 165deg, rgba(255,255,255,0) 230deg, rgba(255,255,255,0.7) 290deg, rgba(255,255,255,0) 340deg);
}


/* --- 5.14 Urgencia en línea: stock + reloj juntos (estilo compacto) ---- */
.bb-urgency-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.bb-inline-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.bb-inline-countdown-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.bb-inline-cd-unit { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.bb-inline-cd-unit strong { font-size: 11px; font-weight: 800; color: var(--bb-color-urgent, #D32F2F); }
.bb-inline-cd-unit em { font-style: normal; font-size: 8px; font-weight: 700; margin-left: 1px; color: var(--bb-color-urgent, #D32F2F); opacity: 0.8; }
.bb-inline-cd-sep { margin: 0 2.5px; font-size: 10px; color: var(--bb-color-urgent, #D32F2F); opacity: 0.5; }

/* --- 5.15 Beneficios agrupados (dos columnas con encabezado + íconos) --
   Alternativa a .bb-benefits para combos: cada grupo de beneficios puede
   asociarse visualmente a uno de los dos productos. El ícono es cualquier
   emoji o carácter que el comerciante escriba — sin necesidad de SVGs a
   medida, así cualquier producto futuro puede tener su propio set. */
.bb-benefit-groups {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: clamp(2px, 0.5vw, 4px);
  padding-top: clamp(4px, 1vw, 6px);
  border-top: 1px solid var(--bb-color-line);
}
.bb-benefit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 clamp(6px, 2.4vw, 16px);
}
.bb-benefit-group + .bb-benefit-group { border-left: 1px solid var(--bb-color-line); }
.bb-benefit-group-heading {
  margin: 0;
  align-self: var(--bb-heading-align-self, center);
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  text-align: var(--bb-heading-text-align, center);
  color: var(--bb-color-text);
  line-height: 1.25;
}
.bb-benefit-group-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(6px, 2.2vw, 14px);
  margin-top: clamp(5px, 1.3vw, 8px);
  width: 100%;
}
.bb-benefit-group-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bb-bg-icon {
  flex: 0 0 auto;
  width: var(--bb-benefit-icon-size-group, clamp(28px, 7vw, 34px));
  height: var(--bb-benefit-icon-size-group, clamp(28px, 7vw, 34px));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 3.2vw, 16px);
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, color-mix(in srgb, var(--bb-color-accent) 18%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 45%, transparent);
}
.bb-bg-icon .bb-icon-svg { width: 58% !important; height: 58% !important; }
.bb-bg-text { display: flex; flex-direction: column; line-height: 1.2; }
.bb-bg-main {
  font-size: clamp(9.5px, 2.3vw, 11px);
  font-weight: 700;
  color: var(--bb-color-text);
  text-transform: uppercase;
  letter-spacing: 0.1px;
}
.bb-bg-sub {
  font-size: clamp(8.5px, 2vw, 9.5px);
  font-weight: 500;
  color: var(--bb-color-text-muted);
}


/* ============================================================================
   5.9 Dúo de productos con "encuentro" (combos de 2 productos)
   ----------------------------------------------------------------------------
   Dos productos entran desde costados opuestos, respiran un momento, se
   retiran y el ciclo se repite. Al encontrarse, un destello + partículas.
   Requiere .bb-anim-reveal en .bb-duo para arrancar solo al hacer scroll.
   ============================================================================ */
.bb-duo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.bb-duo-item {
  position: relative;
  display: block;
}

/* --- Etiqueta de texto/emoji junto a cada producto (modo combo) --- */
.bb-duo-label {
  position: absolute;
  z-index: 4;
  font-family: var(--bb-font-title);
  font-weight: 600;
  white-space: nowrap;
  color: var(--bb-duo-label-color, var(--bb-color-accent-strong));
  font-size: var(--bb-duo-label-size, 13px);
  pointer-events: none;
}
.bb-duo-label--top    { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.bb-duo-label--bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }
.bb-duo-label--left   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }
.bb-duo-label--right  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
.bb-duo-item--a {
  margin-right: var(--bb-duo-overlap, -20px);
  z-index: 2;
}
.bb-duo-item--b { z-index: 1; }

/* Estado inicial: fuera de pantalla a cada lado. El JS agrega .bb-duo-in
   cuando el contenedor entra en el viewport, lo que dispara el ciclo. */
.bb-duo.bb-anim-reveal { opacity: 1; transform: none; } /* el reveal genérico no aplica aquí, el dúo tiene su propio ciclo */
.bb-duo .bb-duo-item--a { opacity: 0; transform: translateX(-180%) rotate(var(--bb-duo-tilt-a, 0deg)); }
.bb-duo .bb-duo-item--b { opacity: 0; transform: translateX(180%); }
.bb-duo.bb-duo-in .bb-duo-item--a { animation: bb-kf-duo-a 8s infinite; }
.bb-duo.bb-duo-in .bb-duo-item--b { animation: bb-kf-duo-b 8s infinite; }

@keyframes bb-kf-duo-a {
  0%   { transform: translateX(-180%) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); opacity: 0; animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  8%   { opacity: 1; }
  14%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); opacity: 1; animation-timing-function: ease-in-out; }
  30%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1.025); }
  45%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); }
  60%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1.025); }
  75%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); }
  90%  { transform: translateX(0) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); opacity: 1; animation-timing-function: ease-in; }
  97%  { opacity: 0; }
  100% { transform: translateX(-180%) rotate(var(--bb-duo-tilt-a, 0deg)) scale(1); opacity: 0; }
}
@keyframes bb-kf-duo-b {
  0%   { transform: translateX(180%) scale(1); opacity: 0; animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  8%   { opacity: 1; }
  14%  { transform: translateX(0) scale(1); opacity: 1; animation-timing-function: ease-in-out; }
  30%  { transform: translateX(0) scale(1.025); }
  45%  { transform: translateX(0) scale(1); }
  60%  { transform: translateX(0) scale(1.025); }
  75%  { transform: translateX(0) scale(1); }
  90%  { transform: translateX(0) scale(1); opacity: 1; animation-timing-function: ease-in; }
  97%  { opacity: 0; }
  100% { transform: translateX(180%) scale(1); opacity: 0; }
}

.bb-impact { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.bb-impact-flash {
  position: absolute; top: 50%; left: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,253,248,0.95) 0%, color-mix(in srgb, var(--bb-color-accent) 50%, transparent) 42%, transparent 74%);
  opacity: 0;
}
.bb-duo-in .bb-impact-flash { animation: bb-kf-duo-flash 8s infinite; }
@keyframes bb-kf-duo-flash {
  0%, 12% { opacity: 0; transform: scale(0.3); }
  16%     { opacity: 1; transform: scale(1.1); }
  23%     { opacity: 0; transform: scale(1.5); }
  100%    { opacity: 0; transform: scale(1.5); }
}
.bb-impact-particle {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  opacity: 0;
}
.bb-duo-in .bb-impact-particle { animation: bb-kf-duo-particle 8s infinite; }
@keyframes bb-kf-duo-particle {
  0%, 13% { opacity: 0; transform: rotate(var(--bb-rot)) translateY(0) scale(0.5); }
  17%     { opacity: 1; transform: rotate(var(--bb-rot)) translateY(calc(var(--bb-dist) * 0.47)) scale(0.85); }
  28%     { opacity: 0; transform: rotate(var(--bb-rot)) translateY(var(--bb-dist)) scale(0.7); }
  100%    { opacity: 0; transform: rotate(var(--bb-rot)) translateY(var(--bb-dist)) scale(0.7); }
}

/* --- 5.10 Galería con leyendas ---------------------------------------- */
.bb-gallery { width: 100%; margin-top: clamp(8px, 2vw, 12px); text-align: center; }
.bb-gallery-label {
  margin: 0 0 clamp(5px, 1.2vw, 8px);
  font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bb-color-text-muted);
}
.bb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--bb-gallery-cols, 4), 1fr);
  gap: clamp(5px, 1.4vw, 9px);
  max-width: var(--bb-gallery-max-width, 100%);
  margin: 0 auto;
}
.bb-gallery-cell {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bb-shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bb-gallery-cell img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.bb-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(20,15,12,0.85) 0%, rgba(20,15,12,0) 100%);
  color: #fff;
  font-size: clamp(6.5px, 1.7vw, 8.5px);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 2px 4px;
  line-height: 1.15;
}
@media (hover: hover) {
  .bb-gallery-cell:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(20,15,12,0.18); }
}

/* --- 5.11 Insignia de stock limitado ----------------------------------- */
.bb-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(155deg, var(--bb-color-onyx, #1B1410) 0%, var(--bb-color-onyx-2, #2A1F18) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 40%, transparent);
  color: var(--bb-color-accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(20,15,12,0.35);
}
.bb-stock-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.bb-stock-badge strong { font-weight: 800; color: #fff; }

/* --- 5.12 Barra de "personas ya compraron" (prueba social) ------------- */
.bb-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(10px, 2.2vw, 14px) auto 0;
  background: linear-gradient(135deg, var(--bb-color-bg-start) 0%, #ffffff 100%);
  border-radius: 999px;
  padding: clamp(8px, 1.8vw, 10px) clamp(18px, 4vw, 26px) clamp(8px, 1.8vw, 10px) clamp(10px, 2.4vw, 16px);
  color: var(--bb-color-text);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bb-color-accent) 16%, transparent), 0 2px 6px rgba(20,15,12,0.08);
  border: 1px solid color-mix(in srgb, var(--bb-color-accent) 28%, transparent);
  width: fit-content;
  max-width: 100%;
}
.bb-social-bar.bb-align-left { margin-left: 0; margin-right: auto; }
.bb-social-avatars { display: flex; margin-right: 12px; flex: none; }
.bb-social-avatar {
  width: clamp(23px, 5.6vw, 30px);
  height: clamp(23px, 5.6vw, 30px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -9px;
  box-shadow: 0 2px 5px rgba(20,15,12,0.18);
}
.bb-social-avatar:first-child { margin-left: 0; }
.bb-social-text {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1.35;
  font-size: clamp(10.5px, 2.4vw, 13px);
  color: var(--bb-social-text-color, var(--bb-color-text));
}
.bb-social-verified { display: flex; align-items: center; justify-content: center; flex: none; }
.bb-social-verified svg { width: clamp(13px, 3vw, 15px); height: clamp(13px, 3vw, 15px); display: block; }
.bb-social-name { font-weight: 700; }
.bb-social-count-wrap { position: relative; display: inline-flex; align-items: center; }
.bb-social-text strong { font-weight: 800; color: var(--bb-color-accent-strong); }

/* --- 5.13 "N personas viendo esto" -------------------------------------- */
.bb-viewing-now { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: clamp(6px, 1.4vw, 9px); }
.bb-viewing-now.bb-align-left { justify-content: flex-start; }
.bb-viewing-dot {
  width: 8px; height: 8px; min-width: 8px; border-radius: 50%;
  background: var(--bb-color-live-dot, #D32F2F);
  box-shadow: 0 0 10px color-mix(in srgb, var(--bb-color-live-dot, #D32F2F) 40%, transparent);
  animation: bb-kf-viewing-pulse 1.4s infinite;
}
@keyframes bb-kf-viewing-pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.bb-viewing-text { font-size: clamp(11px, 2.4vw, 13px); font-weight: 700; }
.bb-fade-swap { display: inline-block; transition: opacity 0.25s ease; }
.bb-fade-swap.bb-fading { opacity: 0; }
   ----------------------------------------------------------------------------
   Sistema reutilizable: cada clase .bb-anim-* aplica UNA animación con nombre.
   Todas leen sus parámetros de variables CSS, así que un mismo elemento puede
   cambiar duración / delay / easing / amplitud sin escribir CSS nuevo — solo
   ajustando variables desde el HTML (style="--bb-anim-duration:3s") o desde
   el panel de configuración de la sección.

   Parámetros soportados por casi todas:
     --bb-anim-duration   (tiempo, ej. 5s)
     --bb-anim-delay      (tiempo, ej. 0.6s)
     --bb-anim-easing     (ej. ease-in-out, linear, cubic-bezier(...))
     --bb-anim-loop       (infinite | 1 | 3 ...)
     --bb-anim-amplitude  (distancia, ej. 6px) — "intensidad" del movimiento
     --bb-anim-scale-peak (número, ej. 1.03) — para animaciones de escala

   Para agregar una animación nueva a la librería: sumar su @keyframes aquí
   con prefijo bb-kf-, y su clase .bb-anim-<nombre> que la invoque leyendo
   las variables de arriba. No requiere tocar ningún otro archivo.
   ============================================================================ */

/* --- Flotar (vertical, suave) --- */
.bb-anim-float {
  animation: bb-kf-float
    var(--bb-anim-duration, 5s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--bb-anim-amplitude, 6px))); }
}

/* --- Respirar (escala, para "el producto respira") --- */
.bb-anim-breathe {
  animation: bb-kf-breathe
    var(--bb-anim-duration, 5.5s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--bb-anim-scale-peak, 1.028)); }
}

/* --- Girar (para remolinos / swirls) --- */
.bb-anim-spin {
  animation: bb-kf-spin
    var(--bb-anim-duration, 2.8s)
    var(--bb-anim-easing, linear)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-spin { to { transform: rotate(360deg); } }

/* --- Subir y desvanecer (para vapor / humo) --- */
.bb-anim-rise {
  animation: bb-kf-rise
    var(--bb-anim-duration, 4.4s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-rise {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  18% { opacity: var(--bb-anim-peak-opacity, 0.78); }
  60% { opacity: calc(var(--bb-anim-peak-opacity, 0.78) * 0.56); }
  100% { transform: translateY(calc(-1 * var(--bb-anim-amplitude, 68px))) scaleX(1.6); opacity: 0; }
}

/* --- Parpadeo (dos puntos de reloj, indicadores en vivo) --- */
.bb-anim-blink {
  animation: bb-kf-blink
    var(--bb-anim-duration, 1s)
    step-end
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-blink {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.25; }
}

/* --- Alarma (alterna dos colores en borde/sombra — "bomba de tiempo") --- */
.bb-anim-alarm {
  animation: bb-kf-alarm
    var(--bb-anim-duration, 1.4s)
    step-end
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-alarm {
  0%, 45% {
    border-color: color-mix(in srgb, var(--bb-countdown-color-a) 50%, transparent);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.75), 0 0 15px color-mix(in srgb, var(--bb-countdown-color-a) 55%, transparent);
  }
  50%, 95% {
    border-color: color-mix(in srgb, var(--bb-countdown-color-b) 60%, transparent);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.75), 0 0 16px color-mix(in srgb, var(--bb-countdown-color-b) 60%, transparent);
  }
  100% {
    border-color: color-mix(in srgb, var(--bb-countdown-color-a) 50%, transparent);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.75), 0 0 15px color-mix(in srgb, var(--bb-countdown-color-a) 55%, transparent);
  }
}

/* --- Pulso (crece/decrece sutil, para llamar la atención sin exagerar) --- */
.bb-anim-pulse {
  animation: bb-kf-pulse
    var(--bb-anim-duration, 2.2s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--bb-anim-scale-peak, 1.05)); }
}

/* --- Aparecer (fade-in de entrada, no infinito) --- */
.bb-anim-appear {
  opacity: 0;
  animation: bb-kf-appear
    var(--bb-anim-duration, 0.6s)
    var(--bb-anim-easing, ease-out)
    var(--bb-anim-delay, 0s)
    1 forwards;
}
@keyframes bb-kf-appear {
  from { opacity: 0; transform: translateY(var(--bb-anim-amplitude, 8px)); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Sacudir (temblor pequeño, ej. urgencia en un botón) --- */
.bb-anim-shake {
  animation: bb-kf-shake
    var(--bb-anim-duration, 2.4s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-shake {
  0%, 92%, 100% { transform: translateX(0) rotate(0deg); }
  93% { transform: translateX(calc(-1 * var(--bb-anim-amplitude, 2px))) rotate(-1deg); }
  95% { transform: translateX(var(--bb-anim-amplitude, 2px)) rotate(1deg); }
  97% { transform: translateX(calc(-1 * var(--bb-anim-amplitude, 2px))) rotate(-1deg); }
}

/* --- Revelar al entrar en pantalla ---
   El JS (RevealEngine) agrega la clase .bb-in-view cuando el elemento
   entra en el viewport; antes de eso queda oculto/desplazado. Funciona
   para cualquier elemento — un producto, una galería, una tarjeta suelta. */
.bb-anim-reveal {
  opacity: 0;
  transform: translateY(var(--bb-anim-amplitude, 18px));
}
.bb-anim-reveal.bb-in-view {
  animation: bb-kf-appear
    var(--bb-anim-duration, 0.65s)
    var(--bb-anim-easing, ease-out)
    var(--bb-anim-delay, 0s)
    1 forwards;
}

/* --- Brillo (barrido de luz sobre el producto) --- */
.bb-anim-shine {
  position: relative;
  overflow: hidden;
}
.bb-anim-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
  background-size: 220% 220%;
  background-position: 0% 0%;
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: bb-kf-shine var(--bb-anim-duration, 7s) ease-in-out var(--bb-anim-delay, 0s) infinite;
}
@keyframes bb-kf-shine {
  0%, 42% { background-position: 0% 0%; opacity: 0; }
  50% { opacity: 1; }
  58%, 100% { background-position: 100% 100%; opacity: 0; }
}

/* --- Destello (flash de luz repentino, ej. sobre el precio) --- */
.bb-anim-flash-target { position: relative; overflow: hidden; }
.bb-flash-layer {
  position: absolute;
  inset: -20px -16px;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.bb-flash-layer.bb-flash-active { animation: bb-kf-flash 0.5s ease-out; }
@keyframes bb-kf-flash {
  0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: 0.2; }
  30% { opacity: 0.9; } 45% { opacity: 0; } 100% { opacity: 0; }
}

/* --- Contador que "salta" al cambiar de valor (stock, compradores, etc.) --- */
.bb-count-bump { display: inline-block; transform-origin: center; }
.bb-count-bump.bb-bump-active { animation: bb-kf-count-bump 0.38s ease-out; }
@keyframes bb-kf-count-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* --- Estrellita que aparece y sube al confirmarse una compra --- */
.bb-star-pop { position: absolute; opacity: 0; pointer-events: none; }
.bb-star-pop.bb-pop-active { animation: bb-kf-star-pop 0.8s ease-out; }
@keyframes bb-kf-star-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(-20deg) translateY(0); }
  35% { opacity: 1; transform: scale(1.35) rotate(8deg) translateY(-2px); }
  65% { opacity: 1; transform: scale(1) rotate(0deg) translateY(-4px); }
  100% { opacity: 0; transform: scale(0.55) rotate(18deg) translateY(-10px); }
}

/* --- Brillar (resplandor pulsante, ideal para sellos/insignias) --- */
.bb-anim-glow {
  animation: bb-kf-glow
    var(--bb-anim-duration, 2.2s)
    var(--bb-anim-easing, ease-in-out)
    var(--bb-anim-delay, 0s)
    var(--bb-anim-loop, infinite);
}
@keyframes bb-kf-glow {
  0%, 100% { box-shadow: 0 3px 8px color-mix(in srgb, var(--bb-color-accent-strong) 22%, transparent), inset 0 1px 1px rgba(255,255,255,0.9); }
  50% { box-shadow: 0 3px 8px color-mix(in srgb, var(--bb-color-accent-strong) 22%, transparent), inset 0 1px 1px rgba(255,255,255,0.9), 0 0 16px color-mix(in srgb, var(--bb-color-accent) 65%, transparent); }
}

/* --- 5.16 Descripción elegante -----------------------------------------
   Alternativa a los beneficios (con o sin combo): un párrafo con
   tratamiento premium — serif, itálica, con un adorno fino arriba —
   para cuando el comerciante prefiere prosa a una lista. */
.bb-elegant-desc {
  text-align: center;
  margin-top: clamp(6px, 1.6vw, 10px);
  padding-top: clamp(8px, 2vw, 12px);
}
.bb-elegant-desc-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(8px, 2vw, 12px);
}
.bb-elegant-desc-rule::before, .bb-elegant-desc-rule::after {
  content: "";
  height: 1px;
  width: clamp(24px, 8vw, 48px);
  background: linear-gradient(90deg, transparent, var(--bb-color-accent), transparent);
}
.bb-elegant-desc-rule span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bb-color-accent);
  flex: 0 0 auto;
}
.bb-elegant-desc-text {
  margin: 0 auto;
  max-width: 42ch;
  font-family: var(--bb-font-title);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 3.8vw, 18px);
  line-height: 1.5;
  color: var(--bb-color-text);
  letter-spacing: 0.1px;
}

/* --- Ícono incrustado dentro de cualquier texto de descripción --- */
.bb-desc-icon {
  display: inline-flex;
  vertical-align: -0.15em;
  color: var(--bb-desc-icon-color, currentColor);
}
.bb-desc-icon .bb-icon-svg { width: 1em !important; height: 1em !important; }


/* ============================================================================
   7. EFECTOS DE PARTÍCULAS (genérico — estrellas, confeti, o el producto mismo)
   ----------------------------------------------------------------------------
   El JS genera los elementos .bb-particle dentro de estos contenedores.
   El estilo es agnóstico a qué representan: pueden ser estrellitas doradas
   cayendo por todo el banner, o granos de un producto cayendo de un punto A
   a un punto B (como la canchita de PopJoy). El comportamiento se define en
   banner-builder.js, el aspecto se define aquí.
   ============================================================================ */
.bb-particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bb-particle-field.bb-particle-field--contained { overflow: visible; }

.bb-particle {
  position: absolute;
  opacity: 0;
}
.bb-particle svg { display: block; width: 100%; height: 100%; }

.bb-particle-burst {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bb-particle-burst::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* --- Partícula tipo "lluvia": cae de arriba hacia abajo del contenedor --- */
@keyframes bb-kf-particle-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  92%  { opacity: 0; transform: translateY(var(--bb-fall-distance)) rotate(160deg); }
  100% { opacity: 0; transform: translateY(var(--bb-fall-distance)) rotate(160deg); }
}
@keyframes bb-kf-particle-burst {
  0%, 89% { opacity: 0; transform: scale(0.2); }
  91%     { opacity: 1; transform: scale(0.5); }
  100%    { opacity: 0; transform: scale(1); }
}
/* El aro/destello vive en ::before para poder animarlo aparte del ícono.
   Ambos leen la MISMA duración/delay via variables heredadas del elemento
   padre, así siempre quedan sincronizados sin importar cuántas partículas
   se generen. */
.bb-particle-burst::before {
  inset: -3px;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(232,201,150,0.75) 32%, rgba(190,140,86,0) 72%);
  opacity: 0;
  animation-name: bb-kf-burst-flash;
  animation-duration: var(--bb-burst-duration, 6s);
  animation-delay: var(--bb-burst-delay, 0s);
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@keyframes bb-kf-burst-flash {
  0%, 88.5% { opacity: 0; transform: scale(0.3); }
  90%       { opacity: 1; transform: scale(1); }
  96%       { opacity: 0.5; transform: scale(1.3); }
  100%      { opacity: 0; transform: scale(1.5); }
}

/* --- Destello al final de un flujo dirigido (ej. canchita llegando al tazón) --- */
.bb-particle-burst--stream::before {
  inset: -4px;
  background: radial-gradient(circle, rgba(255,253,246,0.95) 0%, rgba(243,227,184,0.78) 34%, rgba(190,140,86,0) 72%);
}


/* ============================================================================
   8. RESPONSIVE — escritorio (900px+)
   ============================================================================ */
@media (min-width: 900px) {
  .bb-text-title { font-size: var(--bb-title-size-desktop, var(--bb-title-size)); }
  .bb-gallery-grid { max-width: var(--bb-gallery-max-width-desktop, 560px); }
  .bb-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bb-body {
    display: grid;
    grid-template-columns: 1fr var(--bb-product-col-desktop, 38%);
    grid-template-areas: "title image" "rest image";
    align-items: center;
    column-gap: clamp(28px, 3.6vw, 52px);
    max-width: 1180px;
    width: 100%;
    padding: clamp(26px, 3.2vw, 38px) clamp(40px, 5vw, 64px) 0;
  }
  .bb-title-block { grid-area: title; }
  .bb-text-col { grid-area: rest; margin-top: 0; }
  .bb-image-col { grid-area: image; padding: 0; }
  .bb-text-desc { max-width: 42ch; }
  .bb-benefits { grid-template-columns: 1fr 1fr; max-width: 420px; }
  .bb-platform { width: min(82%, 280px); }
  .bb-product-wrap { max-width: var(--bb-product-max-w-desktop); }

  .bb-price-block {
    max-width: 1180px;
    width: 100%;
    padding: clamp(10px, 1.5vw, 13px) clamp(40px, 5vw, 64px) clamp(18px, 2.5vw, 25px);
  }
  .bb-countdown-card { right: var(--bb-countdown-offset-x-desktop, -6%); padding: 10px 13px; }
  .bb-countdown-tag { font-size: 10px; padding: 4px 11px; }
  .bb-countdown-label { font-size: 9px; }
  .bb-countdown-clock b { font-size: 18px; }
  .bb-cd-colon { font-size: 16px; }
}


/* ============================================================================
   9. UTILIDADES
   ============================================================================ */
.bb-hidden { display: none !important; }
.bb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Respeta la preferencia del usuario de reducir el movimiento:
   apaga TODAS las animaciones de la librería de una sola vez. */
@media (prefers-reduced-motion: reduce) {
  .bb-anim-float, .bb-anim-breathe, .bb-anim-spin, .bb-anim-rise,
  .bb-anim-blink, .bb-anim-alarm, .bb-anim-pulse, .bb-anim-shake, .bb-anim-glow,
  .bb-anim-shine::after, .bb-flash-layer, .bb-count-bump, .bb-star-pop,
  .bb-viewing-dot, .bb-shipping-style--flash::after,
  .particle, .bb-particle, .bb-particle-burst {
    animation: none !important;
  }
  .bb-wisp { opacity: 0; }
  .bb-anim-reveal { opacity: 1 !important; transform: none !important; }
  .bb-duo-item--a, .bb-duo-item--b { opacity: 1 !important; transform: none !important; }
  .bb-impact-flash, .bb-impact-particle { display: none; }
  .bb-gallery-cell.bb-anim-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   10. VARIACIÓN VISUAL POR MODELO (además de los colores)
   ----------------------------------------------------------------------------
   Estas reglas solo se activan si el .bb-hero trae la clase .bb-preset-modern
   o .bb-preset-minimal (agregada por el .liquid según "Elige un modelo").
   En "Personalizado" NO se agrega ninguna clase, así que nada de esto aplica
   y el diseño base (el de siempre) queda exactamente igual que hoy.
   ============================================================================ */

/* --- Fondo: Moderno usa un degradado diagonal más audaz + resplandor --- */
.bb-preset-modern {
  background:
    radial-gradient(ellipse 60% 45% at 82% 8%, color-mix(in srgb, var(--bb-color-accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--bb-color-bg-start) 0%, var(--bb-color-bg-end) 100%);
}

/* --- Fondo: Minimalista, casi plano --- */
.bb-preset-minimal {
  background: var(--bb-color-bg-end);
}

/* --- Sombras: Moderno, más marcadas y con color; Minimalista, sin sombra --- */
.bb-preset-modern .bb-product-image { filter: drop-shadow(0 26px 22px color-mix(in srgb, var(--bb-color-accent-strong) 38%, transparent)); }
.bb-preset-modern .bb-gallery-cell,
.bb-preset-modern .bb-social-bar,
.bb-preset-modern .bb-countdown-card { box-shadow: 0 12px 24px color-mix(in srgb, var(--bb-color-accent) 22%, transparent); }

.bb-preset-minimal .bb-product-image { filter: none; }
.bb-preset-minimal .bb-gallery-cell,
.bb-preset-minimal .bb-social-bar,
.bb-preset-minimal .bb-countdown-card,
.bb-preset-minimal .bb-stock-badge { box-shadow: none; }
.bb-preset-minimal .bb-social-bar,
.bb-preset-minimal .bb-countdown-card { border-width: 1px; }

/* --- Forma de botones/píldoras: Moderno más redondo + resplandor; Minimalista, casi recto --- */
.bb-preset-modern .bb-offer-btn { border-radius: 999px; box-shadow: 0 8px 18px color-mix(in srgb, var(--bb-color-button) 45%, transparent); }
.bb-preset-minimal .bb-offer-btn,
.bb-preset-minimal .bb-stock-badge,
.bb-preset-minimal .bb-shipping-badge.bb-shipping-style--solid,
.bb-preset-minimal .bb-shipping-badge.bb-shipping-style--gradient { border-radius: 4px; }

/* --- Marco del contador: Moderno más grueso; Minimalista sin marco --- */
.bb-preset-modern .bb-countdown-clock { border-width: 2px; }
.bb-preset-minimal .bb-countdown-clock { border: none; background: transparent; box-shadow: none; }
.bb-preset-minimal .bb-countdown-card { background: transparent; border: 1px solid var(--bb-color-line); box-shadow: none; }

/* --- Partículas: Moderno más grandes y notorias; Minimalista, sutiles --- */
.bb-preset-modern .bb-particle { transform: scale(1.35); }
.bb-preset-minimal .bb-particle { transform: scale(0.6); opacity: 0.5; }

/* --- Velocidad de respiración/brillo: Moderno más vivo; Minimalista más quieto ---
   (Solo ajusta la velocidad de animaciones que el usuario ya activó — no las
   prende ni las apaga, respeta sus interruptores tal cual los dejó.) */
.bb-preset-modern .bb-anim-breathe { animation-duration: 4s; }
.bb-preset-modern .bb-anim-shine::after { animation-duration: 5s; }
.bb-preset-minimal .bb-anim-breathe { animation-duration: 8s; }
.bb-preset-minimal .bb-anim-shine::after { animation-duration: 10s; }