:root{
--bg:#050607;
--panel:#0b0d0f;
--panel-2:#101215;
--card:#121418;
--card-2:#171a20;
--line:rgba(255,255,255,.08);
--line-2:rgba(255,255,255,.12);
--text:#f7f7f7;
--muted:#a2a7b0;
--muted-2:#727783;
--blue:#13c8ff;
--blue-2:#0ea5e9;
--green:#25d366;
--yellow:#facc15;
--orange:#f97316;
--red:#ef4444;
--nav-h:78px;
--radius:22px;
}
*{box-sizing:border-box}
html,body{
margin:0;
padding:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}
body{
padding-bottom:calc(var(--nav-h) + 24px);
}
button,input{
font-family:inherit;
}
button,a{
-webkit-tap-highlight-color:transparent;
}
a{
color:inherit;
text-decoration:none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
-webkit-appearance:none;
appearance:none;
display:none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal{
display:none;
width:0;
height:0;
}
.app{
width:100%;
min-height:100vh;
background:
radial-gradient(circle at 20% -10%, rgba(19,200,255,.16), transparent 32%),
radial-gradient(circle at 90% 6%, rgba(250,204,21,.10), transparent 28%),
linear-gradient(180deg,#050607 0%,#08090b 42%,#050607 100%);
}
.app-shell{
width:100%;
max-width:520px;
margin:0 auto;
min-height:100vh;
position:relative;
}
/* BUSCADOR SUPERIOR FIJO */
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:18px 18px 8px;
}
.search-topbar{
position:sticky;
top:0;
z-index:880;
padding:12px 18px 10px;
background:linear-gradient(180deg,rgba(5,6,7,.98),rgba(5,6,7,.92));
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.07);
}
.search-cart-row{
width:100%;
display:grid;
grid-template-columns:1fr 48px;
align-items:center;
gap:10px;
}
/* HERO */
.hero{
position:relative;
padding:10px 18px 14px;
}
.search-hero{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:9px;
min-height:52px;
padding:0 13px;
border-radius:999px;
background:#101114;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.search-topbar .search-hero{
min-height:50px;
box-shadow:none;
background:#101318;
border-color:rgba(255,255,255,.08);
}
.search-topbar .search-hero:focus-within{
border-color:rgba(37,211,102,.55);
box-shadow:0 0 0 3px rgba(37,211,102,.09);
}
.search-hero i{
color:#c8cbd2;
font-size:17px;
}
#q{
width:100%;
min-width:0;
border:0;
outline:0;
background:transparent;
color:#fff;
font-size:15px;
font-weight:650;
padding:13px 0;
}
#q::placeholder{
color:#6f7580;
}
.clear-btn{
width:30px;
height:30px;
border-radius:999px;
border:0;
background:#1c2027;
color:#9da3ad;
display:none;
font-weight:900;
cursor:pointer;
}
/* CANASTA CON REFLECTOR */
.hero-cart-btn{
position:relative;
width:48px;
height:48px;
border-radius:999px;
border:1px solid rgba(37,211,102,.35);
background:
radial-gradient(circle at 50% 30%,rgba(37,211,102,.28),rgba(37,211,102,.08)
46%,rgba(255,255,255,.035) 100%);
color:#7dffad;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:
0 0 0 1px rgba(37,211,102,.08),
0 0 18px rgba(37,211,102,.25),
0 12px 28px rgba(0,0,0,.34);
overflow:visible;
}
.hero-cart-btn:before{
content:"";
position:absolute;
inset:-7px;
border-radius:inherit;
background:radial-gradient(circle,rgba(37,211,102,.20),transparent 68%);
opacity:.9;
pointer-events:none;
}
.hero-cart-btn i{
position:relative;
z-index:2;
font-size:20px;
}
.cart-badge{
position:absolute;
top:8px;
right:24%;
min-width:17px;
height:17px;
padding:0 5px;
border-radius:999px;
background:var(--green);
color:#06180c;
display:none;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:950;
line-height:1;
}
.hero-cart-btn .cart-badge{
top:-2px;
right:-2px;
display:none;
position:absolute;
z-index:4;
}
/* PREMIUM BANNER */
.premium-card{
margin-top:16px;
position:relative;
overflow:hidden;
min-height:188px;
border-radius:20px;
background:
linear-gradient(120deg,rgba(19,200,255,.94),rgba(0,133,190,.86)),
#0ea5e9;
box-shadow:0 18px 45px rgba(0,167,232,.22);
padding:19px 18px;
}
.premium-card:after,
.premium-card:before{
display:none;
}
.premium-content{
position:relative;
z-index:3;
max-width:58%;
}
.premium-kicker{
color:rgba(255,255,255,.85);
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.45px;
}
.premium-title{
margin-top:7px;
max-width:280px;
font-size:23px;
line-height:1.04;
font-weight:900;
letter-spacing:-.035em;
color:#fff;
}
.premium-sub{
margin-top:7px;
max-width:245px;
color:rgba(255,255,255,.88);
font-size:12.5px;
line-height:1.28;
font-weight:650;
}
.premium-btn{
margin-top:13px;
height:37px;
padding:0 16px;
border-radius:999px;
border:0;
background:#061016;
color:#fff;
font-size:12.5px;
font-weight:900;
cursor:pointer;
}
.hero-people{
position:absolute;
z-index:2;
right:-6px;
bottom:-8px;
width:205px;
max-width:50%;
height:auto;
object-fit:contain;
filter:drop-shadow(0 20px 28px rgba(0,0,0,.28));
pointer-events:none;
}
.hero-mobile{display:block}
.hero-desktop{display:none}
/* SECTION COMMON */
.section{
padding:12px 18px 4px;
}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}
.section-title{
margin:0;
font-size:18px;
line-height:1.1;
font-weight:800;
letter-spacing:.3px;
}
.section-hint{
display:none;
}
.see-all{
border:0;
background:transparent;
color:var(--blue);
font-size:12px;
font-weight:800;
cursor:pointer;
padding:0;
white-space:nowrap;
}
/* RAILS */
.rail{
display:flex;
align-items:flex-start;
overflow-x:auto;
gap:14px;
padding-bottom:4px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.album-card{
flex:0 0 126px;
border:0;
background:transparent;
color:#fff;
padding:0;
cursor:pointer;
text-align:left;
scroll-snap-align:start;
display:flex;
flex-direction:column;
}
.album-cover{
width:126px;
aspect-ratio:1/1;
border-radius:8px;
overflow:hidden;
background:#111;
position:relative;
box-shadow:0 15px 30px rgba(0,0,0,.28);
flex:0 0 auto;
}
.album-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.album-title{
margin-top:8px;
font-size:13px;
line-height:1.22;
font-weight:750;
min-height:auto;
max-height:none;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.album-sub{
margin-top:4px;
color:#737985;
font-size:11px;
font-weight:650;
min-height:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* TABS */
.catalog-wrap{
padding:12px 0 18px;
}
.catalog-sticky{
position:relative;
top:auto;
z-index:1;
background:transparent;
backdrop-filter:none;
border-bottom:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 18px 10px;
}
.mode-line{
order:2;
margin-top:0;
flex:0 0 auto;
justify-content:flex-end;
display:flex;
align-items:center;
gap:12px;
color:#6f7580;
font-size:11px;
font-weight:650;
}
.mode-label{
display:none!important;
}
.tabs{
order:1;
flex:1 1 auto;
display:flex;
gap:9px;
overflow-x:auto;
margin-top:0;
padding-bottom:2px;
scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
flex:0 0 auto;
min-width:64px;
height:34px;
border-radius:8px;
border:0;
background:#111318;
color:#d3d6dd;
font-size:12px;
font-weight:800;
cursor:pointer;
padding:0 13px;
}
.tab.active{
background:var(--blue);
color:#031017;
}
#count{
white-space:nowrap;
color:#8d939f;
font-size:11.5px;
font-weight:800;
}
/* LIST */
#statusBox{
margin:14px 18px;
padding:14px;
border-radius:16px;
background:#111318;
color:#a3a9b4;
border:1px solid rgba(255,255,255,.07);
text-align:center;
font-size:13px;
font-weight:700;
}
#list{
padding:0 18px;
display:grid;
gap:4px;
}
.song-row{
display:grid;
grid-template-columns:48px 1fr 42px;
gap:12px;
align-items:center;
min-height:72px;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.045);
}
.song-cover{
width:48px;
height:48px;
border-radius:8px;
overflow:hidden;
background:#111318;
position:relative;
cursor:pointer;
}
.song-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.58);
}
.cover-blur{
filter:blur(1.7px) brightness(.58)!important;
opacity:.65;
transform:scale(1.09);
}
.cover-play-btn{
position:absolute;
inset:0;
margin:auto;
width:31px;
height:31px;
border-radius:999px;
border:1px solid rgba(255,255,255,.34);
background:rgba(0,0,0,.28);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
backdrop-filter:blur(4px);
z-index:3;
}
.cover-play-btn i{
font-size:12px;
margin-left:2px;
}
.song-info{
min-width:0;
}
.song-title{
font-size:15px;
font-weight:750;
line-height:1.2;
color:#f8f8f8;
display:block!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.song-artist{
margin-top:4px;
color:#8d939f;
font-size:12.5px;
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tag-row{
display:flex;
gap:5px;
margin-top:6px;
flex-wrap:wrap;
}
.pill{
display:inline-flex;
align-items:center;
gap:4px;
min-height:17px;
padding:3px 6px;
border-radius:5px;
font-size:9px;
line-height:1;
font-weight:900;
text-transform:uppercase;
letter-spacing:.35px;
}
.pill-vivo,
.pill-live{
background:#23d66f;
color:#062112;
}
.pill-coro{
background:#7b73bf;
color:#fff;
}
.pill-top{
display:none!important;
}
.pill-full{
background:#1c2027;
color:#838a96;
}
.song-actions{
display:flex;
align-items:center;
gap:0;
justify-content:flex-end;
}
.play-btn{
width:34px;
height:34px;
border-radius:999px;
border:0;
background:transparent!important;
color:#8d939f!important;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.play-btn i{
font-size:15px;
}
.play-btn.locked{
background:transparent!important;
color:#8d939f!important;
cursor:pointer;
}
.add-btn{
display:none!important;
}