/* EXPERIENCIA INTUITIVA: BUSCADOR, PEDIDO Y COTIZACIÓN */
:root{--search-sticky-height:72px;}
.search-hero{position:relative;}
.search-suggestions{
display:none;
position:absolute;
left:0;
right:0;
top:calc(100% + 8px);
z-index:10050;
padding:7px;
border-radius:17px;
background:rgba(15,18,23,.99);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 55px rgba(0,0,0,.62);
overflow:hidden;
}
.search-suggestions.show{display:grid;gap:2px;}
.search-suggestion{
width:100%;
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:7px 9px;
border:0;
border-radius:12px;
background:transparent;
color:#fff;
text-align:left;
cursor:pointer;
}
.search-suggestion:hover,.search-suggestion:focus{background:rgba(255,255,255,.07);outline:0;}
.search-suggestion img{width:38px;height:38px;border-radius:9px;object-fit:cover;background:#20242b;}
.search-suggestion-copy{min-width:0;}
.search-suggestion-copy strong,.search-suggestion-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-suggestion-copy strong{font-size:12.5px;font-weight:950;}
.search-suggestion-copy small{margin-top:3px;color:#9ca3af;font-size:10.5px;font-weight:750;}
.search-suggestion>i{color:var(--green);font-size:12px;}
.search-help-row{
display:flex;
align-items:center;
gap:8px;
margin:10px 2px 5px;
padding:0 1px 2px;
overflow-x:auto;
scrollbar-width:none;
}
.search-help-row::-webkit-scrollbar{display:none;}
.search-help-row>span{flex:0 0 auto;color:#747b87;font-size:9.5px;font-weight:850;}
.search-help-row button{
flex:0 0 auto;
min-height:25px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.08);
background:#15191f;
color:#bfc5cf;
font-size:9.5px;
font-weight:850;
cursor:pointer;
}
.search-help-row button:hover{border-color:rgba(19,200,255,.35);color:#fff;}
.related-results-note{
grid-column:1/-1;
margin:8px 0 5px;
padding:11px 13px;
border-radius:14px;
background:rgba(19,200,255,.08);
border:1px solid rgba(19,200,255,.18);
color:#cceffc;
font-size:11.5px;
line-height:1.35;
font-weight:800;
}
.related-results-note strong{color:#fff;}
.related-results-action{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
margin-top:9px;
min-height:36px;
padding:0 13px;
border:0;
border-radius:999px;
background:var(--green);
color:#052012;
font-size:10.5px;
font-weight:950;
cursor:pointer;
}
.mobile-order-bar{display:none;}
.request-required-copy{
padding:11px 12px;
border-radius:13px;
background:rgba(250,204,21,.08);
border:1px solid rgba(250,204,21,.17);
color:#d7dbe2;
}
.required-mark{
display:inline-flex;
margin-left:5px;
padding:3px 6px;
border-radius:5px;
background:#ef4444;
color:#fff;
font-size:8px;
line-height:1;
letter-spacing:.04em;
}
.request-link-help{display:block;margin:-6px 2px 13px;color:#8f96a2;font-size:10.5px;line-height:1.3;font-weight:700;}
.request-link-help.valid{color:#76f5aa;}
.form-row input.input-valid{border-color:rgba(37,211,102,.68);box-shadow:0 0 0 3px rgba(37,211,102,.10);}
.form-row input.input-invalid{border-color:rgba(239,68,68,.62);}
.btn-send:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.45);}
.btn-send:not(:disabled){box-shadow:0 10px 24px rgba(37,211,102,.19);}
.song-variant-picker{display:none;margin:10px 0 12px;padding:10px;border-radius:14px;background:#f5f7fa;border:1px solid #e2e7ee;}
.song-variant-picker.show{display:block;}
.song-variant-picker>strong{display:block;margin-bottom:7px;color:#374151;font-size:10.5px;font-weight:950;text-align:left;}
.song-variant-options{display:flex;flex-wrap:wrap;gap:6px;}
.song-variant-btn{min-height:32px;padding:0 10px;border-radius:9px;border:1px solid #d7dde6;background:#fff;color:#4b5563;font-size:9.5px;font-weight:950;cursor:pointer;}
.song-variant-btn.active{border-color:#22c55e;background:#dcfce7;color:#086634;box-shadow:0 0 0 2px rgba(34,197,94,.10);}
.version-count-pill{display:inline-flex;align-items:center;min-height:17px;padding:3px 6px;border-radius:5px;background:#0ea5e9;color:#03131b;font-size:8px;line-height:1;font-weight:950;}
/* Cover aleatorio: difuminado 5/10, incluso durante la reproducción */
.song-cover img.missing-cover,
.song-row.is-playing-demo .song-cover img.missing-cover,
.album-cover img.missing-cover,
.search-suggestion img.missing-cover,
.song-order-cover img.missing-cover,
.now-playing-cover img.missing-cover{
filter:blur(2.5px) brightness(.68) saturate(.82) !important;
opacity:.72 !important;
transform:scale(1.10) !important;
}
.ck-order-steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:5px;
padding:9px 12px 10px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.ck-order-step{display:grid;justify-items:center;gap:4px;color:#7f8793;font-size:8.5px;line-height:1.1;font-weight:850;text-align:center;}
.ck-order-step i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1a1f27;color:#9ca3af;font-style:normal;font-size:9px;}
.ck-order-step.active{color:#111827;}.ck-order-step.active i{background:var(--green);color:#052012;}
#cartBackdrop .ck-order-step:not(.active){color:#6b7280;}
@media (max-width:720px){
 .search-topbar{padding-bottom:7px !important;}
 .search-help-row{margin:10px 2px 5px;}
 .mobile-order-bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:9700;
  min-height:54px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:linear-gradient(135deg,#171c23,#0d1117);
  color:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.62),0 0 0 1px rgba(37,211,102,.07);
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
 }
 .mobile-order-bar.show{display:flex;}
 .mobile-order-bar span,.mobile-order-bar strong{display:flex;align-items:center;gap:8px;}
 .mobile-order-bar span>i{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:rgba(37,211,102,.13);color:var(--green);}
 .mobile-order-bar span b{font-size:12px;font-weight:900;}
 .mobile-order-bar strong{color:var(--green);font-size:11px;font-weight:950;letter-spacing:.02em;}
 body.has-cart-items .float-cart{display:none !important;}
 body.has-cart-items{padding-bottom:92px !important;}
 .search-suggestion{grid-template-columns:36px minmax(0,1fr) auto;}
 .search-suggestion img{width:36px;height:36px;}
}
.mobile-order-bar,.mobile-order-bar.show{display:none !important;}
.float-cart,
body.has-cart-items .float-cart{
display:flex !important;
right:12px !important;
top:50% !important;
bottom:auto !important;
width:52px !important;
height:52px !important;
transform:translateY(-50%) !important;
z-index:9700 !important;
justify-content:center !important;
gap:0 !important;
padding:0 !important;
border-radius:999px !important;
border:1px solid rgba(37,211,102,.32) !important;
background:rgba(15,18,23,.96) !important;
color:#f8fafc !important;
box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025),0 0 18px rgba(37,211,102,.11) !important;
animation:none !important;
transition:width .28s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease !important;
overflow:visible !important;
}
.float-cart::after{display:none !important;content:none !important;}
.float-cart-label{display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;color:#e8edf3;font-size:12px;font-weight:900;line-height:1;transition:max-width .16s ease,opacity .06s ease;}
.float-cart i{font-size:20px !important;color:#f8fafc !important;}
.float-cart .cart-badge{top:-5px !important;right:-4px !important;min-width:20px !important;height:20px !important;padding:0 5px !important;background:#25d366 !important;color:#052012 !important;border:2px solid #0f1217 !important;font-size:10px !important;}
.float-cart.order-bubble-expanded,
body.has-cart-items .float-cart.order-bubble-expanded{width:150px !important;box-sizing:border-box !important;justify-content:center !important;padding:0 14px !important;gap:10px !important;border-color:rgba(37,211,102,.50) !important;background:rgba(18,23,29,.98) !important;box-shadow:0 16px 38px rgba(0,0,0,.52),0 0 22px rgba(37,211,102,.17) !important;}
.float-cart.order-bubble-expanded.order-bubble-label-visible .float-cart-label{max-width:105px;opacity:1;transition:max-width .16s ease,opacity .10s ease;}
.float-cart.order-bubble-expanded .cart-badge{opacity:0 !important;transform:scale(.72);}
.ck-row-number{display:inline-block;min-width:22px;color:#111827;font-weight:950;}

/* DJGABO MEJORAS 2026 · guía promo, búsqueda y contador dinámico */
.catalog-counter{display:inline-block;min-width:4.8ch;font-variant-numeric:tabular-nums;color:#17e87a;text-shadow:0 0 18px rgba(23,232,122,.28);}
.search-suggestions{display:none !important;visibility:hidden !important;pointer-events:none !important;}
.free-guide-backdrop.show{display:flex !important;}
.free-guide-backdrop{z-index:13200 !important;background:rgba(3,7,18,.76) !important;backdrop-filter:blur(14px) !important;}
.free-guide-modal{max-width:390px !important;border-radius:28px !important;background:linear-gradient(180deg,#ffffff,#f8fafc) !important;box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.20) !important;overflow:hidden !important;}
.free-guide-head{padding:18px 18px 12px !important;border-bottom:0 !important;align-items:flex-start !important;background:radial-gradient(circle at 16% 0%,rgba(37,211,102,.22),transparent 34%),radial-gradient(circle at 88% 8%,rgba(19,200,255,.16),transparent 32%) !important;}
.free-guide-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;color:#059669;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;}
.free-guide-kicker::before{content:"🎁";font-size:14px;letter-spacing:0;}
.free-guide-head h3{margin:0 !important;color:#0f172a !important;font-size:24px !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.035em !important;}
.free-guide-close{background:#eef2f7 !important;color:#111827 !important;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06) !important;}
.free-guide-body{padding:0 18px 16px !important;overflow:visible !important;}
.free-guide-text{margin:0 0 13px !important;color:#475569 !important;font-size:13px !important;line-height:1.42 !important;font-weight:800 !important;}
.free-guide-demo{position:relative;border-radius:22px;background:#111827;padding:12px;min-height:210px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 46px rgba(15,23,42,.22);overflow:hidden;}
.free-guide-demo::before{content:"";position:absolute;inset:-30% -20% auto auto;width:180px;height:180px;border-radius:50%;background:rgba(37,211,102,.20);filter:blur(16px);}
.free-demo-song{position:relative;display:grid;grid-template-columns:46px 1fr 36px;gap:10px;align-items:center;padding:9px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);}
.free-demo-cover{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#25d366,#13c8ff);color:#052012;display:grid;place-items:center;font-size:18px;}
.free-demo-copy{min-width:0;}
.free-demo-copy strong,.free-demo-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.free-demo-copy strong{color:#fff;font-size:13.5px;font-weight:950;}
.free-demo-copy small{margin-top:4px;color:#aeb7c5;font-size:11px;font-weight:750;}
.free-demo-dots{height:36px;border-radius:999px;background:rgba(255,255,255,.08);color:#e5e7eb;display:grid;place-items:center;}
.free-demo-menu{position:relative;width:205px;margin:13px 0 0 auto;padding:7px;border-radius:15px;background:#2b2d30;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 38px rgba(0,0,0,.40);}
.free-demo-menu div{min-height:38px;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 11px;color:#e5e7eb;font-size:12.5px;font-weight:850;}
.free-demo-menu i{width:16px;text-align:center;color:#b7bcc6;}
.free-demo-menu .free-demo-target{margin-top:3px;background:rgba(37,211,102,.14);color:#a7f3c8;box-shadow:inset 0 0 0 1px rgba(37,211,102,.22);}
.free-demo-menu .free-demo-target i{color:#25d366;}
.free-demo-hand{position:absolute;right:44px;top:54px;font-size:31px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:freeGuideHand 1.65s ease-in-out infinite;z-index:3;}
@keyframes freeGuideHand{0%,18%{transform:translate(0,0) rotate(-22deg) scale(1);opacity:.96;}38%,52%{transform:translate(0,88px) rotate(-22deg) scale(1.08);opacity:1;}72%,100%{transform:translate(0,0) rotate(-22deg) scale(1);opacity:.96;}}
.free-guide-mini{margin:12px 2px 0 !important;color:#64748b !important;font-size:11.7px !important;line-height:1.35 !important;font-weight:750 !important;text-align:center;}
.free-guide-mini strong{color:#059669;}
.free-guide-footer{padding:0 18px 18px !important;border-top:0 !important;background:transparent !important;}
.free-guide-go{min-height:48px !important;border-radius:14px !important;background:#25d366 !important;color:#052012 !important;box-shadow:0 14px 30px rgba(37,211,102,.25) !important;font-size:14px !important;}
.related-results-note{margin:10px 0 12px;padding:14px 14px;border-radius:18px;background:linear-gradient(180deg,#101318,#0d1015);border:1px solid rgba(37,211,102,.18);color:#cbd5e1;font-size:12.5px;line-height:1.35;font-weight:750;}
.related-results-note strong{display:block;margin-bottom:6px;color:#fff;font-size:14px;font-weight:950;}
.related-suggestion-btn{width:100%;margin:9px 0 8px;min-height:42px;border:0;border-radius:13px;background:rgba(37,211,102,.14);color:#a7f3c8;font-size:12.5px;font-weight:950;text-align:left;padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;}
.related-suggestion-btn i{color:#25d366;}
.related-results-action{margin-top:2px;border:0;background:transparent;color:#13c8ff;font-size:11.5px;font-weight:900;cursor:pointer;padding:0;}
@media (max-width:390px){.free-guide-modal{max-width:calc(100vw - 26px) !important;}.free-guide-head h3{font-size:22px !important;}.free-demo-menu{width:190px;}.free-demo-hand{right:38px;}}


/* DJGABO PATCH · modal guía animado y realista */
.free-guide-backdrop.show{display:flex !important;}
.free-guide-backdrop{z-index:13200 !important;background:rgba(0,0,0,.80) !important;backdrop-filter:blur(14px) !important;}
.free-guide-modal{
  max-width:392px !important;
  border-radius:26px !important;
  background:radial-gradient(circle at 18% 0%,rgba(37,211,102,.14),transparent 34%),linear-gradient(180deg,#141820,#0d1015) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.05) !important;
  overflow:hidden !important;
}
.free-guide-head{padding:18px 18px 8px !important;border-bottom:0 !important;align-items:flex-start !important;background:transparent !important;}
.free-guide-kicker{display:inline-flex !important;align-items:center !important;gap:6px !important;margin-bottom:9px !important;padding:8px 10px !important;border-radius:999px !important;background:rgba(37,211,102,.13) !important;border:1px solid rgba(37,211,102,.25) !important;color:#7dffad !important;font-size:10px !important;font-weight:950 !important;letter-spacing:.10em !important;text-transform:uppercase !important;}
.free-guide-kicker::before{content:"🎁" !important;font-size:14px !important;letter-spacing:0 !important;}
.free-guide-head h3{margin:0 !important;color:#fff !important;font-size:25px !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.035em !important;text-shadow:0 3px 14px rgba(0,0,0,.32) !important;}
.free-guide-head h3::first-letter{ }
.free-guide-close{background:rgba(255,255,255,.08) !important;color:#fff !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;}
.free-guide-body{padding:0 18px 14px !important;overflow:visible !important;}
.free-guide-text{margin:4px 0 16px !important;color:#cbd5e1 !important;font-size:14px !important;line-height:1.25 !important;font-weight:850 !important;text-align:left !important;}
.free-guide-demo{position:relative !important;border-radius:22px !important;background:linear-gradient(180deg,#0d1118,#111827) !important;padding:12px !important;min-height:190px !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 48px rgba(0,0,0,.36) !important;overflow:visible !important;}
.free-guide-demo::before{content:"" !important;position:absolute !important;right:14px !important;top:6px !important;width:130px !important;height:130px !important;border-radius:50% !important;background:rgba(37,211,102,.16) !important;filter:blur(18px) !important;pointer-events:none !important;}
.free-demo-label{position:absolute !important;left:50% !important;top:-13px !important;transform:translateX(-50%) !important;height:27px !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 17px !important;border-radius:999px !important;background:#151a22 !important;border:1px solid rgba(255,255,255,.11) !important;color:#9aa3af !important;font-size:12px !important;font-weight:900 !important;z-index:4 !important;}
.free-demo-song{position:relative !important;display:grid !important;grid-template-columns:54px minmax(0,1fr) 34px !important;gap:11px !important;align-items:center !important;padding:10px !important;border-radius:17px !important;background:rgba(255,255,255,.055) !important;border:1px solid rgba(255,255,255,.08) !important;z-index:2 !important;}
.free-demo-cover{position:relative !important;width:54px !important;height:54px !important;border-radius:11px !important;overflow:hidden !important;background:#20242b !important;color:#fff !important;display:block !important;box-shadow:0 12px 24px rgba(0,0,0,.24) !important;}
.free-demo-cover img{width:100% !important;height:100% !important;object-fit:cover !important;display:none !important;filter:brightness(.76) !important;}
.free-demo-cover.has-img img{display:block !important;}
.free-demo-cover:not(.has-img){background:linear-gradient(135deg,#232a37,#151a22) !important;}
.free-demo-cover:not(.has-img)::before{content:"♪";position:absolute;inset:0;display:grid;place-items:center;color:#25d366;font-size:25px;font-weight:950;}
.free-demo-play{position:absolute !important;inset:0 !important;margin:auto !important;width:34px !important;height:34px !important;border-radius:999px !important;background:rgba(0,0,0,.30) !important;border:1px solid rgba(255,255,255,.34) !important;display:grid !important;place-items:center !important;color:#fff !important;backdrop-filter:blur(3px) !important;}
.free-demo-play i{font-size:13px !important;margin-left:2px !important;}
.free-demo-copy{min-width:0 !important;align-self:center !important;}
.free-demo-copy strong,.free-demo-copy small{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.free-demo-copy strong{color:#fff !important;font-size:16px !important;line-height:1.08 !important;font-weight:950 !important;}
.free-demo-copy small{margin-top:4px !important;color:#aeb7c5 !important;font-size:12px !important;font-weight:750 !important;}
.free-demo-pill{display:inline-flex !important;margin-top:7px !important;min-height:19px !important;align-items:center !important;padding:3px 8px !important;border-radius:6px !important;background:#4438ca !important;color:#fff !important;font-size:10px !important;font-weight:950 !important;letter-spacing:.25px !important;}
.free-demo-dots{height:34px !important;width:34px !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;color:#e5e7eb !important;display:grid !important;place-items:center !important;animation:freeGuideDotsPulse 2.6s ease-in-out infinite !important;}
.free-demo-menu{position:relative !important;width:205px !important;margin:12px 0 0 auto !important;padding:7px !important;border-radius:15px !important;background:#2b2d30 !important;border:1px solid rgba(255,255,255,.09) !important;box-shadow:0 16px 42px rgba(0,0,0,.44) !important;z-index:2 !important;}
.free-demo-menu div{min-height:38px !important;border-radius:10px !important;display:flex !important;align-items:center !important;gap:10px !important;padding:0 11px !important;color:#e5e7eb !important;font-size:12.5px !important;font-weight:900 !important;}
.free-demo-menu i{width:16px !important;text-align:center !important;color:#b7bcc6 !important;}
.free-demo-menu .free-demo-target{margin-top:3px !important;background:rgba(37,211,102,.15) !important;color:#a7f3c8 !important;box-shadow:inset 0 0 0 1px rgba(37,211,102,.25) !important;animation:freeGuideFreePulse 2.6s ease-in-out infinite !important;}
.free-demo-menu .free-demo-target i{color:#25d366 !important;}
.free-demo-hand{position:absolute !important;right:37px !important;top:53px !important;font-size:30px !important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)) !important;animation:freeGuideHandReal 2.6s ease-in-out infinite !important;z-index:5 !important;transform-origin:50% 50% !important;}
@keyframes freeGuideDotsPulse{0%,23%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0);background:rgba(255,255,255,.08);}8%,16%{box-shadow:0 0 0 6px rgba(37,211,102,.10);background:rgba(37,211,102,.16);}}
@keyframes freeGuideFreePulse{0%,45%,100%{filter:brightness(1);box-shadow:inset 0 0 0 1px rgba(37,211,102,.25),0 0 0 rgba(37,211,102,0);}60%,78%{filter:brightness(1.16);box-shadow:inset 0 0 0 1px rgba(37,211,102,.45),0 0 22px rgba(37,211,102,.18);}}
@keyframes freeGuideHandReal{0%,18%{transform:translate(0,0) rotate(-8deg) scale(1);opacity:1;}26%,38%{transform:translate(0,0) rotate(-8deg) scale(1.12);opacity:1;}50%,70%{transform:translate(-42px,91px) rotate(-10deg) scale(1.08);opacity:1;}82%,100%{transform:translate(0,0) rotate(-8deg) scale(1);opacity:1;}}
.free-guide-mini{display:none !important;}
.free-guide-footer{padding:0 18px 18px !important;border-top:0 !important;background:transparent !important;}
.free-guide-go{min-height:50px !important;border-radius:14px !important;background:#25d366 !important;color:#052012 !important;box-shadow:0 14px 30px rgba(37,211,102,.25) !important;font-size:15px !important;font-weight:950 !important;}
@media (max-width:390px){.free-guide-modal{max-width:calc(100vw - 24px) !important;}.free-guide-head h3{font-size:23px !important;}.free-demo-menu{width:190px !important;}.free-demo-hand{right:31px !important;}.free-guide-text{font-size:13.5px !important;}}



/* ======================================================
   MODAL GUÍA GRATIS FINAL: 3 CARDS REALES + MENÚ ARRIBA
   ====================================================== */
#freeGuideBackdrop.free-guide-backdrop.show{display:flex !important;}
#freeGuideBackdrop .free-guide-modal.guide3-modal{
  width:100% !important; max-width:360px !important; border-radius:22px !important; background:#07090c !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 28px 75px rgba(0,0,0,.65) !important; color:#fff !important; overflow:hidden !important;
}
#freeGuideBackdrop .guide3-head{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:10px !important;padding:14px 14px 4px !important;}
#freeGuideBackdrop .guide3-kicker{margin-bottom:5px !important;color:#25d366 !important;font-size:9.5px !important;font-weight:950 !important;letter-spacing:.08em !important;text-transform:uppercase !important;}
#freeGuideBackdrop .guide3-title{margin:0 !important;color:#fff !important;font-size:20px !important;line-height:1.08 !important;font-weight:950 !important;letter-spacing:-.035em !important;text-shadow:none !important;}
#freeGuideBackdrop .guide3-title strong{color:#25d366 !important;}
#freeGuideBackdrop .guide3-text{margin:6px 0 0 !important;color:#a7adb8 !important;font-size:12px !important;line-height:1.2 !important;font-weight:750 !important;text-align:left !important;}
#freeGuideBackdrop .guide3-close{flex:0 0 auto !important;width:30px !important;height:30px !important;border:0 !important;border-radius:999px !important;background:#1c2027 !important;color:#b8bec8 !important;font-size:20px !important;font-weight:900 !important;cursor:pointer !important;}
#freeGuideBackdrop .guide3-body{position:relative !important;min-height:284px !important;padding:10px 10px 4px !important;overflow:hidden !important;}
#freeGuideBackdrop .guide3-list{position:relative !important;z-index:2 !important;display:grid !important;gap:9px !important;}
#freeGuideBackdrop .guide3-row{position:relative !important;display:grid !important;grid-template-columns:48px 1fr 32px !important;gap:11px !important;align-items:center !important;min-height:72px !important;padding:8px 6px !important;border-radius:13px !important;background:#07090c !important;border-bottom:1px solid rgba(255,255,255,.045) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 10px 22px rgba(0,0,0,.18) !important;}
#freeGuideBackdrop .guide3-row.target{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 3px 0 0 #25d366,0 10px 22px rgba(0,0,0,.20) !important;}
#freeGuideBackdrop .guide3-cover{position:relative !important;width:48px !important;height:48px !important;border-radius:8px !important;overflow:hidden !important;background:#111318 !important;}
#freeGuideBackdrop .guide3-cover img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;filter:brightness(.62) !important;}
#freeGuideBackdrop .guide3-cover-play{position:absolute !important;inset:0 !important;margin:auto !important;width:30px !important;height:30px !important;border-radius:999px !important;border:1px solid rgba(255,255,255,.34) !important;background:rgba(0,0,0,.22) !important;color:rgba(255,255,255,.94) !important;display:flex !important;align-items:center !important;justify-content:center !important;backdrop-filter:blur(2px) !important;z-index:2 !important;}
#freeGuideBackdrop .guide3-cover-play i{font-size:12px !important;margin-left:2px !important;}
#freeGuideBackdrop .guide3-info{min-width:0 !important;text-align:left !important;}
#freeGuideBackdrop .guide3-song-title{display:block !important;color:#f8f8f8 !important;font-size:15px !important;font-weight:750 !important;line-height:1.2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#freeGuideBackdrop .guide3-artist{margin-top:4px !important;color:#8d939f !important;font-size:12.5px !important;font-weight:600 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#freeGuideBackdrop .guide3-tags{display:flex !important;gap:5px !important;margin-top:6px !important;flex-wrap:wrap !important;}
#freeGuideBackdrop .guide3-pill{display:inline-flex !important;align-items:center !important;min-height:17px !important;padding:3px 6px !important;border-radius:5px !important;background:#4438ca !important;color:#fff !important;font-size:9px !important;line-height:1 !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:.35px !important;}
#freeGuideBackdrop .guide3-dots{width:32px !important;height:32px !important;border:0 !important;border-radius:999px !important;background:transparent !important;color:#8d939f !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:18px !important;cursor:pointer !important;}
#freeGuideBackdrop .guide3-row.target .guide3-dots{animation:guide3DotsClickFinal 3.2s ease-in-out infinite !important;}
#freeGuideBackdrop .guide3-menu{position:absolute !important;left:50% !important;top:86px !important;z-index:6 !important;width:206px !important;padding:6px !important;border-radius:12px !important;background:#2b2d30 !important;border:1px solid rgba(255,255,255,.08) !important;box-shadow:0 16px 38px rgba(0,0,0,.55) !important;transform-origin:bottom center !important;opacity:0;transform:translate(-50%, 10px) scale(.96);animation:guide3MenuOpenFinal 3.2s ease-in-out infinite !important;}
#freeGuideBackdrop .guide3-menu::after{content:"" !important;position:absolute !important;right:18px !important;bottom:-7px !important;width:14px !important;height:14px !important;background:#2b2d30 !important;border-right:1px solid rgba(255,255,255,.08) !important;border-bottom:1px solid rgba(255,255,255,.08) !important;transform:rotate(45deg) !important;}
#freeGuideBackdrop .guide3-menu button{position:relative !important;z-index:2 !important;width:100% !important;min-height:34px !important;border:0 !important;background:transparent !important;color:#d8d8d8 !important;display:flex !important;align-items:center !important;gap:10px !important;padding:0 10px !important;border-radius:8px !important;font-size:12.2px !important;font-weight:650 !important;text-align:left !important;cursor:pointer !important;white-space:nowrap !important;}
#freeGuideBackdrop .guide3-menu button i{width:16px !important;text-align:center !important;color:#b7bcc6 !important;font-size:13px !important;}
#freeGuideBackdrop .guide3-menu button.share i{color:#13c8ff !important;}
#freeGuideBackdrop .guide3-menu button.add{color:#a7f3c8 !important;}
#freeGuideBackdrop .guide3-menu button.add i{color:#25d366 !important;}
#freeGuideBackdrop .guide3-menu button.free{min-height:38px !important;margin-top:3px !important;background:#1db954 !important;color:#fff !important;font-weight:950 !important;animation:guide3FreeGlowFinal 3.2s ease-in-out infinite !important;}
#freeGuideBackdrop .guide3-menu button.free i,#freeGuideBackdrop .guide3-menu button.free span{color:#fff !important;}
#freeGuideBackdrop .guide3-hand{position:absolute !important;right:24px !important;top:112px !important;z-index:10 !important;font-size:28px !important;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)) !important;animation:guide3HandFinal 3.2s ease-in-out infinite !important;pointer-events:none !important;transform-origin:center !important;}
#freeGuideBackdrop .guide3-footer{padding:0 14px 12px !important;}
#freeGuideBackdrop .guide3-start{width:100% !important;min-height:44px !important;border:0 !important;border-radius:13px !important;background:#25d366 !important;color:#052012 !important;font-size:14.5px !important;font-weight:950 !important;cursor:pointer !important;box-shadow:0 14px 30px rgba(37,211,102,.25) !important;}
@keyframes guide3HandFinal{0%,22%{transform:translate(0,0) rotate(-10deg) scale(1);opacity:1;}28%,35%{transform:translate(0,0) rotate(-10deg) scale(1.16);opacity:1;}48%,70%{transform:translate(-114px,103px) rotate(-10deg) scale(1.05);opacity:1;}76%,84%{transform:translate(-114px,103px) rotate(-10deg) scale(1.18);opacity:1;}92%,100%{transform:translate(0,0) rotate(-10deg) scale(1);opacity:1;}}
@keyframes guide3DotsClickFinal{0%,20%,100%{background:transparent;color:#8d939f;box-shadow:none;}26%,35%{background:rgba(37,211,102,.16);color:#fff;box-shadow:0 0 0 7px rgba(37,211,102,.08);}}
@keyframes guide3MenuOpenFinal{0%,33%{opacity:0;transform:translate(-50%, 10px) scale(.96);}40%,88%{opacity:1;transform:translate(-50%, 0) scale(1);}100%{opacity:0;transform:translate(-50%, 10px) scale(.96);}}
@keyframes guide3FreeGlowFinal{0%,55%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0),0 0 0 rgba(37,211,102,0);text-shadow:none;}68%,86%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 0 24px rgba(37,211,102,.32);text-shadow:0 1px 2px rgba(0,0,0,.18);}}
@media(max-width:370px){#freeGuideBackdrop .free-guide-modal.guide3-modal{max-width:calc(100vw - 18px) !important;}#freeGuideBackdrop .guide3-menu{width:198px !important;}#freeGuideBackdrop .guide3-title{font-size:19px !important;}#freeGuideBackdrop .guide3-hand{right:20px !important;}}

/* =============================================================
   DJGABO FIX 2026 · GOOGLE DRIVE COMPLETO, SIN RECORTES
   - Muestra todos los controles del reproductor de Google Drive.
   - No usa máscara, recorte ni overflow:hidden.
   - Mantiene la marquesina debajo del reproductor.
   - Reserva espacio para que el catálogo no quede tapado.
   ============================================================= */

#bottomDemoPlayer.show{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

/* El contenedor debe medir exactamente lo mismo que el iframe.
   Así Google puede mostrar también la fila inferior de volumen. */
#bottomDemoPlayer:has(#bottomDemoDrive.is-active) .bottom-demo-info{
  position:relative !important;
  width:100% !important;
  height:132px !important;
  min-height:132px !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  border-radius:12px !important;
  background:#202124 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

/* Desactiva la máscara utilizada por la versión compacta anterior. */
#bottomDemoPlayer:has(#bottomDemoDrive.is-active) .bottom-demo-info::after{
  display:none !important;
  content:none !important;
}

#bottomDemoDrive.is-active{
  display:block !important;
  visibility:visible !important;
  width:100% !important;
  height:132px !important;
  min-height:132px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:12px !important;
  background:#202124 !important;
  transform:none !important;
  overflow:visible !important;
}

#bottomDemoPlayer:has(#bottomDemoDrive.is-active) .demo-play-hint{
  position:relative !important;
  z-index:3 !important;
  margin-top:7px !important;
}

/* El modal también muestra el reproductor completo. */
#songDrivePreview{
  display:block !important;
  visibility:visible !important;
  width:100% !important;
  height:132px !important;
  min-height:132px !important;
  max-height:none !important;
  border:0 !important;
  border-radius:12px !important;
  background:#202124 !important;
  transform:none !important;
}

/* Celular: Google usa un diseño de dos filas más compacto. */
@media (max-width:719px){
  #bottomDemoPlayer:has(#bottomDemoDrive.is-active){
    padding-left:8px !important;
    padding-right:8px !important;
  }

  #bottomDemoPlayer:has(#bottomDemoDrive.is-active) .bottom-demo-info,
  #bottomDemoDrive.is-active,
  #songDrivePreview{
    height:132px !important;
    min-height:132px !important;
  }

  body:has(#bottomDemoPlayer.show #bottomDemoDrive.is-active){
    padding-bottom:calc(196px + env(safe-area-inset-bottom)) !important;
  }
}

/* Computadora: el reproductor de Drive necesita más altura para mostrar
   la onda y la fila completa del volumen, como en la página de Drive. */
@media (min-width:720px){
  #bottomDemoPlayer:has(#bottomDemoDrive.is-active) .bottom-demo-info,
  #bottomDemoDrive.is-active,
  #songDrivePreview{
    height:180px !important;
    min-height:180px !important;
  }

  body:has(#bottomDemoPlayer.show #bottomDemoDrive.is-active){
    padding-bottom:238px !important;
  }
}

/* =========================================================
   DJGABO · NAVEGACIÓN CLARA 2026
   - Canasta junto al usuario
   - Contador debajo de las pestañas
   - Pestañas sin compartir fila con el contador
   ========================================================= */
.search-cart-row{
  grid-template-columns:minmax(0,1fr) 44px 46px !important;
  gap:8px !important;
}
.top-cart-btn{
  position:relative !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:999px !important;
  border:1px solid rgba(37,211,102,.35) !important;
  background:radial-gradient(circle at 50% 30%,rgba(37,211,102,.25),rgba(37,211,102,.07) 48%,#11151a 100%) !important;
  color:#7dffad !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:0 0 0 1px rgba(37,211,102,.07),0 0 15px rgba(37,211,102,.18),0 10px 24px rgba(0,0,0,.30) !important;
  overflow:visible !important;
  transform:none !important;
  animation:none !important;
  z-index:2 !important;
}
.top-cart-btn i{
  color:#f8fafc !important;
  font-size:17px !important;
}
.top-cart-btn .float-cart-label{
  display:none !important;
}
.top-cart-btn .cart-badge{
  position:absolute !important;
  top:-4px !important;
  right:-4px !important;
  min-width:19px !important;
  height:19px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  border:2px solid #0b0e12 !important;
  background:#25d366 !important;
  color:#052012 !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:950 !important;
  z-index:4 !important;
}
.top-cart-btn.has-items{
  border-color:rgba(37,211,102,.58) !important;
  box-shadow:0 0 0 1px rgba(37,211,102,.12),0 0 22px rgba(37,211,102,.28),0 10px 24px rgba(0,0,0,.30) !important;
}
.top-cart-btn.cart-pop{
  animation:topCartPop .58s ease both !important;
}
@keyframes topCartPop{
  0%{transform:scale(1)}
  42%{transform:scale(1.16)}
  100%{transform:scale(1)}
}

.catalog-sticky{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  align-items:start !important;
  justify-content:stretch !important;
  gap:7px !important;
}
.catalog-sticky .tabs{
  order:1 !important;
  width:100% !important;
  max-width:100% !important;
  flex:none !important;
  margin:0 !important;
  padding:0 0 2px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}
.catalog-sticky .mode-line{
  order:2 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:none !important;
  text-align:left !important;
}
.catalog-sticky #count{
  display:block !important;
  width:100% !important;
  color:#8d939f !important;
  text-align:left !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}
.catalog-sticky .tab{
  min-width:auto !important;
  white-space:nowrap !important;
}

@media (max-width:390px){
  .search-topbar{padding-left:10px !important;padding-right:10px !important;}
  .search-cart-row{grid-template-columns:minmax(0,1fr) 41px 41px !important;gap:6px !important;}
  .top-cart-btn,.client-access-btn{width:41px !important;height:41px !important;min-width:41px !important;}
  .catalog-sticky{padding-left:12px !important;padding-right:12px !important;}
  .catalog-sticky .tabs{gap:6px !important;}
  .catalog-sticky .tab{height:33px !important;padding:0 9px !important;font-size:10.4px !important;}
}


/* DJGABO · EFECTO COVER VOLANDO A LA CANASTA SUPERIOR */
.fly-to-cart{
  position:fixed !important;
  z-index:15050 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background-color:#141820 !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  box-shadow:0 20px 48px rgba(0,0,0,.62),0 0 0 2px rgba(37,211,102,.42),0 0 24px rgba(37,211,102,.22) !important;
  will-change:transform,opacity !important;
  transform-origin:center center !important;
}
.top-cart-btn.cart-pop{
  animation:topCartPop .62s cubic-bezier(.22,.90,.30,1.25) both !important;
}
@media (prefers-reduced-motion:reduce){
  .fly-to-cart{display:none !important;}
}

/* =========================================================
   DJGABO · ARTISTA DEBAJO DEL TÍTULO EN CARRUSELES
   RECIÉN AGREGADOS + LOS MÁS ELEGIDOS
   ========================================================= */
#newRail .album-card,
#mostRequestedRail .album-card{
  padding-bottom:4px !important;
}
#newRail .album-sub,
#mostRequestedRail .album-sub{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:13px !important;
  margin-top:2px !important;
  color:#7f8793 !important;
  font-size:10.3px !important;
  line-height:13px !important;
  font-weight:650 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  pointer-events:none !important;
}