/** Shopify CDN: Minification failed

Line 10:2 Unexpected "="
Line 446:0 Unexpected "<"
Line 447:3 Unexpected "{"
Line 447:12 Expected ":"
Line 448:0 Unexpected "<"

**/
* =========================================================
   BBX — UI PACK v8720 (DUO-SYNC + Lane BG RGBA + CTA overlay)
   ========================================================= */


   .bbx-lane--a .bbx-lane-bg {
  background: var(--laneA-color);
  opacity: var(--laneA-alpha, 1);
}
.bbx-lane--b .bbx-lane-bg {
  background: var(--laneB-color);
  opacity: var(--laneB-alpha, 1);
  margin-top: var(--laneB-overlap, -12px);
}

/* CTA offset */
.bbx-cta-row {
  display: flex;
  justify-content: center;
  margin-top: calc(30px + var(--cta-offset-y, 0px));
}

.bbx-bg-none {}
.bbx-bg-light { background:#fafafa; }
.bbx-bg-dark  { background:#111; color:#fff; }

.bbx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px 10px;}
.bbx-title{margin:0;font-weight:900;}
.bbx-actions{display:flex;gap:10px;flex-wrap:wrap;}
.bbx-section .bbx-btn{
  appearance:none;border:1px solid rgba(0,0,0,.1)!important;
  background:#fff!important;color:#111!important;
  padding:10px 14px!important;border-radius:999px!important;
  font-weight:800!important;font-size:13px!important;line-height:1!important;
  box-shadow:0 3px 10px rgba(0,0,0,.06);cursor:pointer;transition:.15s ease;
}
.bbx-section .bbx-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12);}
[data-spinshuffle]{background:#ffd166!important;border-color:#ffd166!important;}
[data-lucky]{background:linear-gradient(135deg,#8a2be2 0%,#00d4ff 100%)!important;color:#fff!important;border:0!important;}
[data-quiz-open]{background:#111!important;color:#fff!important;}
.bbx-refresh{background:#ffe08a!important;color:#111!important;}

/* Carrusel contenedor (pistas pegadas) */
.bbx-carousel{position:relative;display:flex;flex-direction:column;gap:6px;}
.bbx-prev,.bbx-next{
  position:absolute;top:46%;transform:translateY(-50%);z-index:20;border:0;background:#fff;border-radius:999px;
  width:36px;height:36px;box-shadow:0 6px 18px rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.bbx-prev{left:6px;}
.bbx-next{right:6px;}

/* Lanes con fondo propio */
.bbx-lane{ position:relative; z-index: 1; }
.bbx-lane::before{
  content:""; position:absolute; inset:0;
  border-radius:14px; z-index:0;
  pointer-events:none;
  transform: translateZ(0);
}
.bbx-laneA{ padding: var(--lane-pad,8px) 0; }
.bbx-laneA::before{ background: var(--laneA-bg, rgba(255,255,255,1)); }
.bbx-laneB{
  position: relative;
  padding: var(--lane-pad,8px) 0;
  margin-top: calc(var(--overlap-b,14px) * -1);
  z-index: 2;
}
.bbx-laneB::before{
  background: var(--laneB-bg, rgba(0,0,0,1));
  position:absolute;inset:0;
  border-radius: 18px;
  top: 10px;                /* 🔹 baja el fondo un poco */
  height: calc(100% - 20px);/* 🔹 fondo más corto */
  transform: translateY(6px); /* 🔹 sutil desplazamiento */
  z-index: 0;
}
.bbx-card{
  position:relative;
  z-index:1;               /* 🔹 cartas sobre el fondo */
  transform: translateY(-6px); /* 🔹 efecto “salido” */
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.bbx-laneB::before{ background: var(--laneB-bg, rgba(0,0,0,1)); }

/* Track/cards */
.bbx-track{
  position:relative; z-index:1;
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(100%/var(--items-m,2));
  gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 48px;scroll-behavior:smooth;min-height:220px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.bbx-track::-webkit-scrollbar{display:none}
@media(min-width:768px){ .bbx-track{ grid-auto-columns:calc(100%/var(--items-t,3)) } }
@media(min-width:1100px){ .bbx-track{ grid-auto-columns:calc(100%/var(--items-d,5)) } }

/* Móvil: dos pistas visibles en un screen, solapadas */
@media(max-width:768px){
  .bbx-duo .bbx-track{ min-height: 176px; padding:4px 38px; }
  .bbx-duo .bbx-card{ transform: scale(.92); transform-origin: center top; }
}

.bbx-slide{list-style:none!important;scroll-snap-align:start}
.bbx-card{position:relative;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.06);}
.bbx-media{position:relative;display:block;aspect-ratio:4/5;background:#f6f6f6;overflow:hidden;}
.bbx-media img{width:100%;height:100%;object-fit:cover;display:block;transition: transform .25s ease;will-change: transform;transform-origin:center center;}
.bbx-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:12px;opacity:0;pointer-events:none;}
.bbx-overlay-btn{pointer-events:auto;background:rgba(17,17,17,.92);color:#fff;font-weight:900;padding:10px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.18);}
.bbx-media:hover .bbx-overlay{opacity:1;}
.bbx-badge{position:absolute;top:8px;left:8px;z-index:5;background:#111;color:#fff;padding:6px 8px;border-radius:999px;font-weight:900;}

.bbx-like{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.12); z-index:6;
}
.bbx-like.is-liked{ background:linear-gradient(145deg,#ff66c4 0%,#ffb84d 100%); color:#111; border:0; }

/* Spotlight sólo en Lucky */
.bbx-track:not(.bbx-dim-lucky) .bbx-slide{opacity:1!important;filter:none!important;}
.bbx-track.bbx-dim-lucky .bbx-slide:not(.bbx-spotlight){
  opacity:.55!important; filter:blur(1px)!important; transition:opacity .18s ease,filter .18s ease;
}
.bbx-spotlight .bbx-card{position:relative;transform:scale(1.05);box-shadow:0 28px 80px rgba(0,0,0,.28);}
.bbx-spotlight .bbx-media::before{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(ellipse at center,rgba(255,209,102,.48),rgba(255,209,102,0)60%);
  mix-blend-mode:screen;pointer-events:none;z-index:20;}
.bbx-spotlight .bbx-card::after{
  content:"";position:absolute;inset:6px;border-radius:12px;
  box-shadow:0 0 0 3px #ffd166 inset,0 0 32px 10px rgba(255,209,102,.6);
  pointer-events:none;z-index:30;}
.bbx-spot-cta{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:#111;color:#fff;font-weight:900;border-radius:999px;padding:12px 16px;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.25);z-index:40;}
.bbx-spot-tag{
  position:absolute;left:8px;top:8px;z-index:40;background:#ffd166;color:#111;font-weight:900;
  font-size:12px;padding:6px 10px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.18);}

/* CTA grande y amarillo — pegado a pista B */
.bbx-cta-row{
  display:flex; justify-content:center;
}
.bbx-cta-row--overlay{
  position:relative;
  z-index:3; /* por encima de los fondos, debajo de like/overlays */
  margin-top: var(--cta-offset,-10px); /* control desde editor */
}
.bbx-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#FFD166;
  color:#111;
  font-weight:900;
  font-size:16px;
  border-radius:999px;
  padding:14px 36px;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:all .2s ease;
}
.bbx-cta:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 36px rgba(0,0,0,.24);
  background:#ffda70;
}
.bbx-bg-dark .bbx-cta { background:#FFD166; color:#111; }

/* Modal/Wizard (igual que antes) */
.bbx-modal{ display:none; position:fixed; inset:0; z-index:2147483000; }
.bbx-modal.is-open{ display:block; }
.bbx-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.bbx-modal__dialog{
  position:relative; margin: 5vh auto; max-width: 720px; width: calc(100% - 24px);
  background:#fff; color:#111; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display:flex; flex-direction:column; max-height: 90vh; overflow: hidden;
}
@media (max-width: 768px){ .bbx-modal__dialog{ margin: 0; width: 100%; height: 100vh; max-height: none; border-radius: 0; } }
.bbx-modal__close{ position:absolute; top:10px; right:12px; font-size:28px; line-height:1; width:36px; height:36px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bbx-modal__header{ padding:16px 18px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.bbx-modal__title{ margin:0; font-size:18px; font-weight:800; }
.bbx-modal__body{ padding: 12px 16px 16px; overflow:auto; }
.bbx-steps{display:flex;gap:6px;align-items:center}
.bbx-step{width:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.15);transition:all .2s}
.bbx-step.is-on{width:28px;background:#111}
.bbx-quiz{ width:100%; background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.00)); border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px; margin:6px 0 0; }
.bbx-quiz-body{position:relative;min-height:120px}
.bbx-qpane{display:none}
.bbx-qpane.is-on{display:block}
.bbx-qtitle{margin:0 0 10px;font-size:14px;font-weight:800}
.bbx-qgrid{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:768px){
  .bbx-qgrid{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px }
  .bbx-qgrid::-webkit-scrollbar{display:none}
}
.bbx-qopt{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(0,0,0,.12); background:#fff; color:#111; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer; transition:all .16s ease; white-space:nowrap; }
.bbx-qopt.is-picked{ background:#111; color:#fff; border-color:#111; }
.bbx-quiz-footer{display:flex;align-items:center;gap:8px;margin-top:10px}
.bbx-quiz-spacer{flex:1}
.bbx-btn.bbx-ghost{background:#fff;border:1px solid rgba(0,0,0,.12);color:#111}

/* Evita scroll del documento con modal abierto */
.bbx-noscroll { overflow: hidden; }

/* Mini-zoom desktop */
.bbx-media[data-zooming="1"] img { transform: scale(1.18); }

.bbx-bg-dark .bbx-card{ background:#151515; }
.bbx-bg-dark .bbx-btn{ background:#1c1c1c; color:#fff; border-color:rgba(255,255,255,.12); }
.bbx-bg-dark [data-spinshuffle]{ background:#ffd166!important; border-color:#ffd166!important; color:#111!important; }
.bbx-bg-dark .bbx-overlay-btn{ background:rgba(255,255,255,.92); color:#111; }

@media (prefers-reduced-motion: reduce) {
  .bbx-media img,
  .bbx-overlay,
  .bbx-overlay-btn { transition: none !important; }
}
/* ====== LANE A — fondo recortado + pop-out 3D ====== */
.bbx-laneA{
  position: relative;
  padding: var(--lane-pad,8px) 0;
  z-index: 1; /* A está debajo de B */
  transform-style: preserve-3d;
}
.bbx-laneA::before{
  content:"";
  position:absolute; inset:0;
  background: var(--laneA-bg, rgba(255,255,255,1)); /* color + alpha vía variable */
  border-radius: 18px;
  top: 10px;                   /* baja un poco el fondo */
  height: calc(100% - 20px);   /* fondo ligeramente más corto */
  transform: translateY(6px);  /* desplaza para que la tarjeta “salga” */
  z-index: 0;                  /* detrás de las cartas */
}

/* ====== LANE B — (igual que antes, con 3D refinado) ====== */
.bbx-laneB{
  position: relative;
  padding: var(--lane-pad,8px) 0;
  margin-top: calc(var(--overlap-b,14px) * -1); /* solapado sobre A */
  z-index: 2; /* B por encima de A */
  transform-style: preserve-3d;
}
.bbx-laneB::before{
  content:"";
  position:absolute; inset:0;
  background: var(--laneB-bg, rgba(0,0,0,1));      /* color + alpha vía variable */
  border-radius: 18px;
  top: 10px;
  height: calc(100% - 20px);
  transform: translateY(6px);
  z-index: 0;
}

/* ====== CARTAS — efecto 3D sutil y consistente en ambas pistas ====== */
.bbx-card{
  position: relative;
  z-index: 1;                       /* sobre el fondo ::before */
  transform: translateY(-6px) translateZ(0);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform, box-shadow;
}

/* Hover/elevate (solo dispositivos precisos) */
@media (hover:hover) and (pointer:fine){
  .bbx-card:hover{
    transform: translateY(-10px) translateZ(0.001px);
    box-shadow: 0 18px 42px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.12);
  }
}

/* Opcional: parallax mínimo de la imagen para enfatizar 3D */
@media (hover:hover) and (pointer:fine){
  .bbx-card:hover .bbx-media img{
    transform: scale(1.04);
  }
}

/* Respeto por accesibilidad: reduce movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .bbx-card,
  .bbx-card:hover,
  .bbx-media img{ transition: none !important; }
}
/* ===== Título 3D brillante (usa --title-*) ===== */
.bbx-section { padding: var(--section-pad, 16px) 0; }
.bbx-title--3d{
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg,var(--title-grad-a,#00D4FF),var(--title-grad-b,#8A2BE2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  text-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 8px 24px rgba(0,0,0,.08),
    0 0 20px color-mix(in oklab, var(--title-grad-a,#00D4FF) 50%, transparent);
}
.bbx-title--3d::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:8px; filter:blur(8px);
  background: radial-gradient(40% 100% at 10% 50%, var(--title-grad-a,#00D4FF), transparent 70%),
              radial-gradient(40% 100% at 90% 50%, var(--title-grad-b,#8A2BE2), transparent 70%);
  opacity: var(--title-glow,.4);
  pointer-events:none;
}

/* ===== Botón Guíame como “main button” 3D ===== */
.bbx-btn--guide{
  background: linear-gradient(135deg,#111,#222) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.06);
  position:relative;
}
.bbx-btn--guide::before{
  content:""; position:absolute; inset:-2px; border-radius:999px; z-index:-1;
  background: linear-gradient(135deg, var(--title-grad-a,#00D4FF), var(--title-grad-b,#8A2BE2));
  filter: blur(8px); opacity:.6;
}
.bbx-btn--guide:hover{ transform: translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.08); }

/* ===== Confetti minimal en “Me sorprende” ===== */
.bbx-confetti{ position: absolute; inset: 0; pointer-events:none; overflow: visible; z-index: 9; }
.bbx-confetti .bbx-cf{
  position:absolute; left: var(--x,50%); top: 10%;
  width:8px; height:12px; border-radius:2px;
  background: hsl(calc(360 * var(--h, .5)), 90%, 60%);
  transform: translate(-50%,0) rotateX(var(--rx)) rotateY(var(--ry));
  animation: bbx-fall var(--d,900ms) ease-out forwards;
}
.bbx-confetti .bbx-cf:nth-child(odd){ background:#FFD166; }
.bbx-confetti .bbx-cf:nth-child(3n){ background:#FF66C4; }
@keyframes bbx-fall{
  0%   { opacity:1; transform: translate(-50%,0) rotate(0deg); }
  100% { opacity:0; transform: translate(-50%,180px) rotate(720deg); }
}
/* Padding vertical controlado por var */
.bbx-section { padding: var(--section-pad, 16px) 0; }

/* Título 3D + sub */
.bbx-titlewrap{ display:flex; flex-direction:column; gap:6px; }
.bbx-subtitle{ margin:0; opacity:.7; font-weight:700; }

/* Título 3D (colores via vars) */
.bbx-title--3d{
  font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(135deg,var(--title-grad-a,#00D4FF),var(--title-grad-b,#8A2BE2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
}
.bbx-title--3d::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:10px;
  background: radial-gradient(40% 100% at 10% 50%, var(--title-grad-a,#00D4FF), transparent 70%),
              radial-gradient(40% 100% at 90% 50%, var(--title-grad-b,#8A2BE2), transparent 70%);
  opacity: var(--title-glow, .4);
  filter: blur(calc(6px + 10px * var(--title-glow, .4)));
  pointer-events:none;
}


/* Glitch opcional */
.bbx-title--glitch{
  --g1: #ff66c4; --g2: #00d4ff;
}
.bbx-title--glitch::before,
.bbx-title--glitch::after{
  content: attr(data-text);
  content: attr(data-text, string);
}
.bbx-title--glitch::before,
.bbx-title--glitch::after{
  position:absolute; left:0; top:0;
  background: none; color:transparent; -webkit-background-clip:text; background-clip:text;
  text-shadow: none; mix-blend-mode:screen; pointer-events:none;
}
.bbx-title--glitch::before{ text-shadow: 2px 0 var(--g1); animation: bbx-gl1 2s infinite linear; }
.bbx-title--glitch::after { text-shadow:-2px 0 var(--g2); animation: bbx-gl2 2s infinite linear; }
@keyframes bbx-gl1{ 0%,100%{clip-path: inset(0 0 0 0)} 10%{clip-path: inset(5% 0 60% 0)} 20%{clip-path: inset(40% 0 5% 0)} 30%{clip-path: inset(15% 0 40% 0)} }
@keyframes bbx-gl2{ 0%,100%{clip-path: inset(0 0 0 0)} 12%{clip-path: inset(60% 0 10% 0)} 22%{clip-path: inset(5% 0 45% 0)} 34%{clip-path: inset(35% 0 15% 0)} }

/* Colores de botones desde editor */
.bbx-section [data-spinshuffle]{ background: var(--btn-spin-bg,#FFD166) !important; border-color: transparent !important; color:#111 !important; }
.bbx-section [data-lucky]{ background: var(--btn-lucky-bg,#FF66C4) !important; color:#111 !important; border:0 !important; }
.bbx-section .bbx-btn--guide{
  background: linear-gradient(135deg,var(--btn-guide-a,#00D4FF),var(--btn-guide-b,#8A2BE2)) !important;
  color:#fff !important; border:0 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.bbx-section .bbx-btn--guide:hover{ transform: translateY(-2px); }

/* Explosión vistosa */
.bbx-burst{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:9; }
.bbx-burst .bbx-bp{
  --R: 180px;
  position:absolute; left: var(--cx,50%); top: var(--cy,50%);
  width:10px; height:10px; border-radius:50%;
  background: hsl(var(--h,200),95%,60%);
  transform: translate(-50%,-50%) scale(1);
  animation: bbx-burst-fly var(--t,1000ms) cubic-bezier(.15,.65,.25,1) forwards;
  box-shadow: 0 0 12px rgba(255,255,255,.45), 0 0 24px currentColor;
}
@keyframes bbx-burst-fly{
  to{
    transform:
      translate(calc(-50% + var(--R) * cos((var(--i)*8deg))), 
                calc(-50% + var(--R) * sin((var(--i)*8deg))))
      scale(0.3) rotate(720deg);
    opacity:0;
  }
}

/* CTA “Ver más” más brillosa */
.bbx-cta{
  position:relative;
  background:#FFD166; color:#111;
  box-shadow:0 10px 28px rgba(0,0,0,.24), 0 0 0 2px rgba(255,255,255,.5) inset;
}
.bbx-cta::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,.9), transparent 40%),
              radial-gradient(circle at 50% 120%, rgba(255,209,102,.6), transparent 50%);
  filter: blur(12px); opacity:.6; z-index:-1;
}
.bbx-cta:hover{ transform: translateY(-2px) scale(1.04); }
<h2 class="bbx-title bbx-title--3d{% if section.settings.title_glitch %} bbx-title--glitch{% endif %}" data-text="{{ section.settings.heading }}">
  {{ section.settings.heading }}
</h2>
/* Explosión centrada y más fuerte */
.bbx-burst{
  position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:12;
}
.bbx-burst .bbx-bp{
  position:absolute; left: var(--cx,50%); top: var(--cy,50%);
  width:12px; height:12px; border-radius:50%;
  background: hsl(var(--h,200),98%,60%);
  transform: translate(-50%,-50%) scale(1);
  box-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 28px currentColor;
  animation: bbx-burst-fly var(--t,1200ms) cubic-bezier(.15,.65,.25,1) forwards;
}
@keyframes bbx-burst-fly{
  to{
    transform:
      translate(calc(-50% + var(--R,220px) * cos((var(--i)*7deg))),
                calc(-50% + var(--R,220px) * sin((var(--i)*7deg))))
      scale(0.25) rotate(820deg);
    opacity:0;
  }
}