/* ── Asesor de Fragancias — Benito Boutique TN ─────────────── */
/* v4: gamificado premium (tarjeta-pregunta + badges A/B/C/D + brillos) */
/* Paleta: verde #0E5A45 · crema #faf6ec · dorado · serif Playfair */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bb-green: #0E5A45;
  --bb-green2: #0a4535;
  --bb-gold: #d8be82;
  --bb-gold2: #C8A96E;
  --bb-cream: #faf6ec;
  --bb-ink: #1a1209;
  --bb-muted: rgba(26,18,9,.55);
  --bb-line: rgba(26,18,9,.1);
  --bb-white: #fff;
  --bb-r: 14px;
  --bb-card-r: 18px;
  --bb-band-r: 24px;
  /* easings fuertes (Emil) — más punch que los CSS por defecto */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── reset & base ──────────────────────────────────────────── */
/* OJO: especificidad de CLASE (no ID) para no pisar los paddings de los componentes */
.bb-reco *, .bb-bar, .bb-bar * { box-sizing: border-box; }
.bb-reco * { margin: 0; padding: 0; }
#bb-reco-app {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--bb-ink);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ── ambient aura ──────────────────────────────────────────── */
.bb-aura { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bb-aura b { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; }
.bb-aura b:first-child {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--bb-green), transparent 70%);
  top: -200px; right: -150px;
}
.bb-aura b:last-child {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--bb-gold), transparent 70%);
  bottom: -200px; left: -150px;
}

/* ── quiz wrapper ──────────────────────────────────────────── */
.bb-quiz { position: relative; z-index: 1; min-height: 100vh; background: var(--bb-cream); }
.bb-shell, #bb-reco-app .bb-shell { max-width: 680px; margin: 0 auto; padding: 0 0 140px; }
.bb-stage { position: relative; min-height: 200px; }
.bb-view { animation: bbFadeIn .3s ease both; }
@keyframes bbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── band (verde) — ahora TARJETA flotante ───────────────────── */
.bb-band {
  background: var(--bb-green);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(216,190,130,.30) 0 1.4px, transparent 2px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.22) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 70% 62%, rgba(216,190,130,.22) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 32% 72%, rgba(255,255,255,.16) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 50% 40%, rgba(216,190,130,.16) 0 1px, transparent 1.6px);
  color: var(--bb-white);
  padding: 30px 24px 30px;
  position: relative;
  margin: 16px 14px 0;
  border-radius: var(--bb-band-r);
  box-shadow: 0 14px 34px rgba(14,90,69,.28);
  overflow: hidden;
}
/* "puntita" de globo de diálogo hacia las opciones */
.bb-band-q::after {
  content: '';
  position: absolute;
  left: 38px; bottom: -11px;
  width: 22px; height: 22px;
  background: var(--bb-green);
  transform: rotate(45deg);
  border-radius: 0 0 6px 0;
  z-index: 0;
}
/* sticker "?" */
.bb-qmark {
  position: absolute;
  top: 16px; right: 16px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bb-gold);
  color: var(--bb-green2);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 0 0 3px rgba(255,255,255,.25);
  transform: rotate(8deg);
  z-index: 2;
  animation: bbQfloat 3.2s var(--ease-io) infinite;
}
@keyframes bbQfloat {
  0%,100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-5px); }
}
.bb-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bb-gold);
  margin-bottom: 9px;
  position: relative; z-index: 1;
}
.bb-band-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.15; font-weight: 700;
  position: relative; z-index: 1;
  max-width: 88%;
  text-wrap: balance;
}

/* ── body ─────────────────────────────────────────────────── */
.bb-body { padding: 26px 18px 24px; position: relative; z-index: 3; background: var(--bb-cream); }
.bb-sub { color: var(--bb-muted); font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 auto 24px; text-align: center; }

/* ── progress bar ─────────────────────────────────────────── */
.bb-prog { display: flex !important; gap: 5px; margin-bottom: 18px; position: relative; z-index: 1; }
.bb-seg { flex: 1; height: 4px; background: rgba(255,255,255,.22); border-radius: 4px; overflow: hidden; position: relative; }
.bb-seg i { display: block; height: 100%; width: 0; background: var(--bb-gold); border-radius: inherit; transition: width .45s var(--ease-out); position: relative; }
.bb-seg.done i, .bb-seg.cur i { background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%); background-size: 200% 100%; animation: bbShimmer 2.2s linear infinite; }
@keyframes bbShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bb-seg.done i { width: 100%; }
.bb-seg.cur i { width: 50%; animation: bbSegPulse 1.4s ease-in-out infinite; }
@keyframes bbSegPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── opciones ─────────────────────────────────────────────── */
.bb-opts { display: flex !important; flex-direction: column; gap: 10px; }
.bb-opts.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-opt {
  display: flex !important; align-items: center; gap: 14px;
  background: var(--bb-white);
  border: 2px solid var(--bb-line);
  border-radius: var(--bb-r);
  padding: 12px 14px;
  cursor: pointer; text-align: left;
  transition: border-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .22s var(--ease-out), background .18s, opacity .2s var(--ease-out);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .bb-opt:hover, .bb-opt:focus-visible {
    border-color: var(--bb-green);
    box-shadow: 0 0 0 3px rgba(14,90,69,.10);
    transform: translateY(-1px);
    outline: none;
  }
}
.bb-opt:active { transform: scale(.985); }
.bb-opt.sel {
  border-color: var(--bb-green);
  background: rgba(14,90,69,.06);
  box-shadow: 0 0 0 3px rgba(14,90,69,.18), 0 10px 24px rgba(14,90,69,.20);
  transform: translateY(-2px);
}
/* al elegir una, las hermanas se atenúan (foco en la elegida) */
.bb-opts:has(.sel) .bb-opt:not(.sel) { opacity: .45; transform: scale(.99); }

/* ícono clay con badge de letra */
.bb-opt-ico-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
.bb-opt-ic {
  width: 46px !important; height: 46px !important;
  display: flex !important; align-items: center; justify-content: center;
  background-color: rgba(14,90,69,.08);
  border-radius: 12px;
  color: var(--bb-green);
}
.bb-opt-ic svg { width: 22px; height: 22px; }
.bb-opt-ic.bb-ico-img { background-size: 308px 220px !important; background-repeat: no-repeat !important; }
.bb-opt-letter {
  position: absolute;
  top: -7px; left: -7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bb-gold);
  color: var(--bb-green2);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  border: 2px solid var(--bb-cream);
  transition: background .2s var(--ease-out), color .2s, transform .35s var(--ease-spring);
  z-index: 2;
}
.bb-opt.sel .bb-opt-letter { background: var(--bb-green); color: #fff; transform: scale(1.12) rotate(-8deg); }
.bb-opt-tx { flex: 1; }
.bb-opt-tx strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--bb-ink); }
.bb-opt-tx small { display: block; font-size: 12px; color: var(--bb-muted); margin-top: 2px; line-height: 1.4; }
.bb-tick {
  flex-shrink: 0; width: 24px; height: 24px;
  background: var(--bb-green); border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s var(--ease-out), transform .3s var(--ease-spring);
  color: #fff;
}
.bb-tick svg { width: 14px; height: 14px; }
.bb-opt:not(.sel) .bb-tick { opacity: 0; transform: scale(.5); }
.bb-opt.sel .bb-tick { opacity: 1; transform: scale(1); }

/* grid opts → compact */
.bb-opts.grid .bb-opt { flex-direction: column; align-items: flex-start; padding: 14px 12px; gap: 10px; }
.bb-opts.grid .bb-tick { position: absolute; top: 10px; right: 10px; }

/* ── intro ────────────────────────────────────────────────── */
.bb-intro .bb-body { text-align: center; }
.bb-emblem {
  width: 64px; height: 64px; margin: 0 auto 16px;
  background: rgba(255,255,255,.15); border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.bb-emblem svg { width: 32px; height: 32px; }
.bb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bb-green); color: var(--bb-white);
  border: 0; border-radius: 100px; padding: 15px 30px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  margin: 20px auto 0;
  box-shadow: 0 8px 22px rgba(14,90,69,.28);
}
.bb-cta svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .bb-cta:hover { background: var(--bb-green2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,90,69,.34); } }
/* press feedback global (Emil): todo lo pulsable responde al toque */
.bb-cta:active, .bb-add:active, .bb-size:active, .bb-retake:active,
.bb-notes-btn:active, .bb-bar-go:active, .bb-bar-view:active, .bb-back:active { transform: scale(.96); }
.bb-cta, .bb-add, .bb-size, .bb-retake, .bb-notes-btn, .bb-bar-go, .bb-bar-view, .bb-back { transition: background .2s, transform .14s var(--ease-out), box-shadow .2s var(--ease-out), border-color .18s, color .18s; }
.bb-intro-gift {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(216,190,130,.16);
  border: 1px solid rgba(216,190,130,.5);
  border-radius: 100px; padding: 9px 16px; font-size: 13px;
  color: var(--bb-green2); margin: 16px auto 0;
}
.bb-intro-gift svg { width: 16px; height: 16px; flex-shrink: 0; }
.bb-intro-gift b { color: var(--bb-green); }
.bb-trust {
  display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: 12px 20px; margin-top: 24px; color: var(--bb-muted); font-size: 12px;
}
.bb-trust span { display: flex !important; align-items: center; gap: 5px; }
.bb-trust svg { width: 14px; height: 14px; }

/* ── back button ─────────────────────────────────────────── */
.bb-back-wrap { margin-top: 20px; text-align: center; }
.bb-back {
  background: none; border: none; color: var(--bb-muted); cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
}
.bb-back svg { width: 14px; height: 14px; }
.bb-back:hover { color: var(--bb-ink); }

/* ── reveal/loading ──────────────────────────────────────── */
.bb-reveal, .bb-loading {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  min-height: 320px; gap: 16px; color: var(--bb-muted); font-size: 15px; text-align: center; padding: 24px;
}
.bb-reveal h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; color: var(--bb-ink); }
.bb-spin { width: 38px; height: 38px; border: 3px solid var(--bb-line); border-top-color: var(--bb-green); border-radius: 50%; animation: bbSpin .8s linear infinite; }
@keyframes bbSpin { to { transform: rotate(360deg); } }

/* ── reveal cinematográfico ──────────────────────────────── */
.bb-reveal { min-height: 60vh; }
.bb-rv-orb { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.bb-rv-orb span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bb-green); opacity: 0; animation: bbOrb 1.9s var(--ease-out) infinite; }
.bb-rv-orb span:nth-child(2) { animation-delay: .55s; border-color: var(--bb-gold); }
.bb-rv-orb span:nth-child(3) { animation-delay: 1.1s; }
.bb-rv-orb i { width: 56px; height: 56px; border-radius: 50%; background: var(--bb-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(14,90,69,.3); animation: bbOrbCore 1.9s var(--ease-io) infinite; }
.bb-rv-orb i svg { width: 28px; height: 28px; }
@keyframes bbOrb { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bbOrbCore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.bb-rv-l1 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: var(--bb-ink); opacity: 0; animation: bbIn .5s var(--ease-out) .15s both; }
.bb-rv-l2 { color: var(--bb-muted); font-size: 14px; opacity: 0; animation: bbIn .5s var(--ease-out) .35s both; }
.bb-rv-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.bb-rv-notes span {
  font-size: 12px; color: var(--bb-green); background: rgba(14,90,69,.08); border: 1px solid rgba(14,90,69,.16);
  border-radius: 100px; padding: 5px 12px; opacity: 0; animation: bbNoteDrift 2.2s var(--ease-io) infinite;
}
.bb-rv-notes span:nth-child(1){animation-delay:.2s} .bb-rv-notes span:nth-child(2){animation-delay:.5s}
.bb-rv-notes span:nth-child(3){animation-delay:.8s} .bb-rv-notes span:nth-child(4){animation-delay:1.1s}
.bb-rv-notes span:nth-child(5){animation-delay:1.4s}
@keyframes bbNoteDrift { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* ── results ─────────────────────────────────────────────── */
.bb-res-story { color: var(--bb-muted); font-size: 14px; line-height: 1.65; margin-bottom: 16px; max-width: 580px; }
.bb-retake {
  background: none; border: 1px solid var(--bb-line); border-radius: 100px;
  padding: 8px 16px; font-size: 12.5px; color: var(--bb-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; transition: border-color .2s;
}
.bb-retake svg { width: 14px; height: 14px; }
.bb-retake:hover { border-color: var(--bb-green); color: var(--bb-green); }

/* ── gift bar ─────────────────────────────────────────────── */
.bb-gift {
  display: flex !important; align-items: center; gap: 12px;
  background: var(--bb-white); border: 2px solid var(--bb-line); border-radius: var(--bb-r);
  padding: 14px 16px; margin-bottom: 24px; transition: border-color .3s, box-shadow .3s, background .3s;
  position: relative;
}
.bb-gift.on { border-color: var(--bb-gold); background: rgba(216,190,130,.08); box-shadow: 0 6px 18px rgba(216,190,130,.25); }
.bb-gift.just-unlocked { animation: bbGiftPop .55s var(--ease-spring); }
@keyframes bbGiftPop { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
.bb-gift.on .bb-gift-ic { animation: bbGiftWiggle .5s var(--ease-spring); }
@keyframes bbGiftWiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(10deg) scale(1.1); } }
/* destellos dorados de celebración (CSS puro, livianísimo) */
.bb-spark { position: absolute; top: 22px; left: 32px; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-gold); pointer-events: none; opacity: 0; z-index: 5; }
.bb-spark.go { animation: bbSpark .7s var(--ease-out) forwards; }
@keyframes bbSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
.bb-gift-ic {
  width: 40px; height: 40px; background: rgba(14,90,69,.08); border-radius: 11px;
  display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; color: var(--bb-green);
}
.bb-gift.on .bb-gift-ic { background: rgba(216,190,130,.22); color: var(--bb-gold2); }
.bb-gift-ic svg { width: 18px; height: 18px; }
.bb-gift-main { flex: 1; }
.bb-gift-tx { font-size: 12.5px; color: var(--bb-muted); line-height: 1.4; }
.bb-gift-tx b { color: var(--bb-ink); }
.bb-gift-prog { height: 5px; background: var(--bb-line); border-radius: 4px; margin-top: 7px; overflow: hidden; }
.bb-gift-prog i { display: block; height: 100%; background: var(--bb-green); border-radius: 4px; transition: width .45s cubic-bezier(.4,0,.2,1); }
.bb-gift.on .bb-gift-prog i { background: var(--bb-gold); }
.bb-gift-count { font-size: 12px; font-weight: 700; color: var(--bb-muted); white-space: nowrap; }

/* ── product grid ────────────────────────────────────────── */
.bb-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 1000px; }

/* ── card ─────────────────────────────────────────────────── */
.bb-card {
  background: var(--bb-white); border-radius: var(--bb-card-r); overflow: hidden;
  border: 1px solid var(--bb-line); box-shadow: 0 2px 12px rgba(0,0,0,.05);
  display: flex !important; flex-direction: column;
  /* scroll-reveal: arranca oculta, entra al ver */
  opacity: 0; transform: translateY(28px) scale(.97);
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out), box-shadow .3s var(--ease-out);
  transform-style: preserve-3d;
}
.bb-card.is-in { opacity: 1; transform: none; }
.bb-card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .bb-card.is-in:hover { box-shadow: 0 16px 40px rgba(14,90,69,.18); transform: translateY(-4px) rotateX(2.5deg); }
}
.bb-card-media { position: relative; background: #f5f0e8; aspect-ratio: 1/1; overflow: hidden; }
.bb-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out), filter .26s var(--ease-out), opacity .26s var(--ease-out); }
.bb-card-img.swapping { filter: blur(9px); opacity: .35; transform: scale(1.04); }
.bb-card:hover .bb-card-img { transform: scale(1.03); }
.bb-rank {
  position: absolute; top: 10px; left: 10px; background: var(--bb-green); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 100px; padding: 4px 10px;
  display: flex !important; align-items: center; gap: 4px; z-index: 2;
  box-shadow: 0 3px 10px rgba(14,90,69,.3);
}
.bb-rank svg { width: 11px; height: 11px; }
.bb-fav {
  position: absolute; top: 10px; right: 10px; background: var(--bb-gold); color: var(--bb-green2);
  font-size: 10.5px; font-weight: 800; border-radius: 100px; padding: 4px 9px;
  display: flex !important; align-items: center; gap: 3px; z-index: 2;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.bb-fav svg { width: 10px; height: 10px; }
/* al ver las NOTAS, ocultar badges para que no tapen el texto de la imagen */
.bb-card-media.notes-on .bb-rank,
.bb-card-media.notes-on .bb-fav { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.bb-notes-btn {
  position: absolute; bottom: 8px; right: 8px; background: rgba(26,18,9,.55); color: #fff;
  font-size: 11px; font-weight: 600; border: none; border-radius: 100px; padding: 5px 10px;
  cursor: pointer; display: flex !important; align-items: center; gap: 4px;
  backdrop-filter: blur(6px); z-index: 2; transition: background .2s;
}
.bb-notes-btn svg { width: 12px; height: 12px; }
.bb-notes-btn:hover { background: rgba(26,18,9,.75); }
.bb-card-body { padding: 16px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.bb-brand { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted); margin-bottom: 4px; }
.bb-name { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--bb-ink); line-height: 1.25; margin-bottom: 8px; }
.bb-why { font-size: 12.5px; color: var(--bb-muted); line-height: 1.55; margin-bottom: 10px; flex: 1; }
.bb-ideal { display: flex !important; align-items: center; gap: 6px; font-size: 12px; color: var(--bb-green); margin-bottom: 10px; }
.bb-ideal svg { width: 13px; height: 13px; flex-shrink: 0; }
.bb-notes { display: flex !important; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.bb-notes span { background: rgba(14,90,69,.07); color: var(--bb-green); border-radius: 100px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; }
.bb-sizes { display: flex !important; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.bb-size {
  background: var(--bb-cream); border: 1.5px solid var(--bb-line); border-radius: 10px; padding: 10px 14px;
  cursor: pointer; display: flex !important; flex-direction: column; align-items: center; gap: 3px; min-width: 72px;
  transition: border-color .18s, background .18s;
}
.bb-size small { font-size: 11.5px; color: var(--bb-muted); font-weight: 600; }
.bb-size b { font-size: 14.5px; font-weight: 700; color: var(--bb-ink); }
.bb-size-old { font-size: 10px; color: var(--bb-muted); text-decoration: line-through; line-height: 1; opacity: .8; }
.bb-size.sel { border-color: var(--bb-green); background: rgba(14,90,69,.07); }
.bb-size.sel b { color: var(--bb-green); }
.bb-size:not(.nostock):hover { border-color: var(--bb-green); }
.bb-size.nostock { background: rgba(0,0,0,.04); border-color: var(--bb-line); border-style: dashed; cursor: not-allowed; opacity: .8; }
.bb-size.nostock small { color: var(--bb-muted); text-decoration: line-through; }
.bb-size-ns { font-size: 11px; font-weight: 700; color: #b23b3b; letter-spacing: .01em; }
.bb-add {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  background: var(--bb-green); color: #fff; border: none; border-radius: var(--bb-r);
  padding: 13px 18px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.bb-add svg { width: 16px; height: 16px; }
.bb-add:hover { background: var(--bb-green2); box-shadow: 0 6px 16px rgba(14,90,69,.25); }
.bb-add.added { background: rgba(14,90,69,.10); color: var(--bb-green); cursor: default; box-shadow: none; animation: bbAddPop .4s var(--ease-spring); }
.bb-add.added svg { color: var(--bb-green); }
/* estado loading: deshabilitado + spinner (evita doble-clic / clic perdido) */
.bb-add.loading { pointer-events: none; opacity: .9; }
.bb-add.loading svg { display: none; }
.bb-add.loading::before { content:''; width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation: bbSpin .7s linear infinite; }
/* sin stock */
.bb-add.nostock { background:#bbb !important; color:#fff !important; cursor:not-allowed !important; opacity:.65; pointer-events:none; box-shadow:none; }
.bb-add.nostock svg { display:none; }
@keyframes bbAddPop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.bb-add.flash { animation: bbFlash .5s var(--ease-out); }
@keyframes bbFlash { 0% { transform: scale(1); } 50% { transform: scale(.97); opacity: .85; } 100% { transform: scale(1); } }

/* ── sticky bar ─────────────────────────────────────────── */
.bb-bar {
  position: fixed; bottom: -100px; left: 0; right: 0; background: var(--bb-ink); color: #fff;
  z-index: 1000; transition: bottom .35s cubic-bezier(.4,0,.2,1);
  border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -4px 24px rgba(0,0,0,.18);
}
.bb-bar.show { bottom: 0; }
.bb-bar-wrap { padding: 12px 16px 20px; max-width: 680px; margin: 0 auto; }
.bb-bar-ship { height: 3px; background: rgba(255,255,255,.15); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
#bb-bar-ship { display: block; height: 100%; background: var(--bb-gold); border-radius: 4px; transition: width .6s var(--ease-out); }
.bb-bar-count.bump { animation: bbBump .42s var(--ease-spring); }
@keyframes bbBump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.bb-bar-msg { font-size: 11.5px; color: rgba(255,255,255,.65); line-height: 1.4; margin-bottom: 10px; }
.bb-bar-msg b { color: var(--bb-gold); }
.bb-bar-row { display: flex !important; align-items: center; gap: 8px; }
.bb-bar-count { flex: 1; display: flex !important; flex-direction: column; }
.bb-bar-count b { font-size: 18px; font-weight: 800; line-height: 1.1; }
.bb-bar-count small { font-size: 11px; color: rgba(255,255,255,.5); }
.bb-bar-view {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
}
.bb-bar-view:hover { background: rgba(255,255,255,.2); }
.bb-bar-go {
  background: var(--bb-gold); color: var(--bb-green2); border: none; border-radius: 100px;
  padding: 12px 18px; font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex !important; align-items: center; gap: 5px; white-space: nowrap;
  transition: background .2s; text-decoration: none;
}
.bb-bar-go:hover { background: #c8a96e; }
.bb-bar-go svg { width: 14px; height: 14px; }

/* ── enter animations ───────────────────────────────────── */
.bb-ani { opacity: 0; animation: bbIn .55s var(--ease-out) both; }
@keyframes bbIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bb-view, .bb-card, .bb-ani, .bb-spin, .bb-seg.cur i,
  .bb-qmark, .bb-seg.done i, .bb-gift.just-unlocked, .bb-gift.on .bb-gift-ic, .bb-add.added,
  .bb-rv-orb span, .bb-rv-orb i, .bb-rv-l1, .bb-rv-l2, .bb-rv-notes span, .bb-bar-count.bump { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bb-card { transition: none !important; opacity: 1 !important; transform: none !important; }
  .bb-tick { transition: none !important; }
  .bb-opt:not(.sel) .bb-tick { opacity: 0 !important; transform: scale(.5) !important; }
  .bb-opt.sel .bb-opt-letter { transform: none !important; }
  .bb-spark { display: none !important; }
  .bb-card-img { transition: none !important; }
  .bb-bar { transition: bottom .01s; }
}

/* ── mobile compact (< 520px) ──────────────────────────────── */
@media (max-width: 519px) {
  .bb-body { padding: 22px 14px 20px; }
  .bb-card-body { padding: 10px 11px 12px; }
  .bb-name { font-size: 14px; margin-bottom: 5px; }
  .bb-why { font-size: 11px; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bb-ideal { font-size: 11px; margin-bottom: 7px; }
  .bb-notes { gap: 4px; margin-bottom: 8px; }
  .bb-notes span { font-size: 10.5px; padding: 2px 8px; }
  .bb-sizes { gap: 5px; margin-bottom: 8px; }
  .bb-size { padding: 8px 9px; min-width: 56px; }
  .bb-size small { font-size: 10px; }
  .bb-size b { font-size: 12.5px; }
  .bb-add { font-size: 12.5px; padding: 11px 14px; }
  /* badges: apilados arriba-izquierda para no solaparse en cards angostas */
  .bb-rank { top: 8px; left: 8px; font-size: 10px; padding: 3px 8px; }
  .bb-fav { top: 36px; left: 8px; right: auto; font-size: 9.5px; padding: 3px 8px; }
  .bb-notes-btn { font-size: 10px; padding: 4px 9px; }
}

/* ── tablet (>= 520px) ──────────────────────────────────── */
@media (min-width: 520px) {
  .bb-grid { gap: 16px; }
  .bb-band { padding: 40px 32px 38px; margin: 22px 22px 0; }
  .bb-body { padding: 34px 28px 28px; }
}

/* ── desktop (>= 720px) ─────────────────────────────────── */
@media (min-width: 720px) {
  .bb-shell { padding-bottom: 160px; }
  .bb-opts.grid { grid-template-columns: 1fr 1fr; }
  .bb-opts:not(.grid) { max-width: 600px; margin: 0 auto; }
  .bb-band { padding: 44px 40px 42px; }
  .bb-body { padding: 40px 32px 32px; }
  .bb-bar-wrap { padding: 14px 24px 24px; }
}

/* ── page header override ─────────────────────────────── */
.page-header { display: none; }
.bb-reco { padding: 0; }
.bb-reco .container { padding: 0; max-width: none; }