/* Estructura: nav, página, login */
/* ───── nav ───── */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);
  padding:calc(16px + env(safe-area-inset-top,0px)) clamp(18px,3.4vw,48px) 18px;
  background:linear-gradient(var(--bg) 55%,rgba(3,3,24,0))}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.logo{display:block;width:104px;height:auto}
.brand .sub{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--accent);transition:color .8s}
.menu{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--muted);text-decoration:none;padding:6px 0;position:relative;white-space:nowrap;transition:color .3s}
.menu a:hover,.menu a.on{color:var(--fg)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.menu a.on::after{transform:scaleX(1)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:4px;vertical-align:middle}
.who{display:flex;align-items:center;gap:12px;flex:none;font-size:13px;color:var(--muted)}

/* ───── páginas ───── */
main:focus{outline:none}
main{position:relative;z-index:5;max-width:1280px;margin:0 auto;padding:calc(112px + env(safe-area-inset-top,0px)) clamp(18px,3.4vw,48px) calc(90px + env(safe-area-inset-bottom,0px));outline:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.page-head h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.4vw,5rem);line-height:.95;letter-spacing:-.02em}
.page-head h1 em{font-style:italic;color:var(--accent);transition:color .8s}
.page-head p{margin:10px 0 0;color:var(--muted);font-weight:300;max-width:56ch;line-height:1.6}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.tools .in{width:260px;border-radius:99px;padding:10px 18px;font-size:14px}
.empty{padding:60px 0;color:var(--faint);font-family:var(--serif);font-style:italic;font-size:1.5rem}

/* resumen */
.stats{display:flex;gap:clamp(22px,3.4vw,52px);flex-wrap:wrap;margin:6px 0 46px;padding-top:22px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1}
.stats span{font-size:13px;color:var(--muted)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.cols h2,.sec h2{margin:0 0 6px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.6rem}

/* listas con línea fina (como la lista de tracks del sitio) */
.list{list-style:none;margin:0;padding:0}
.list>li>button,.list>li>.li{width:100%;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,.9fr) 110px;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);text-align:left;color:var(--muted);transition:color .3s,padding .3s}
.list>li>button:hover{color:var(--fg);padding-left:12px}
.list .nm{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.1;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .nm small{display:block;white-space:normal;font-family:var(--sans);font-size:13px;font-weight:300;color:var(--muted);margin-top:3px}
.list .st{font-size:14px}
.list .when{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:12.5px;border:1px solid var(--line);border-radius:99px;padding:3px 11px;color:var(--muted)}
.tag.gold{border-color:var(--accent);color:var(--accent)}
.tag.bad{border-color:var(--bad);color:var(--bad)}
.tag.ok{border-color:var(--ok);color:var(--ok)}

/* rejilla de portadas / artistas */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px 22px}
.card{display:block;text-align:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-6px)}
.card .img{display:block;aspect-ratio:1/1;border-radius:4px;border:1px solid var(--line);margin-bottom:12px;background-size:cover;background-position:center;transition:border-color .4s,box-shadow .4s}
.card.tall .img{aspect-ratio:4/5}
.card:hover .img{border-color:var(--h);box-shadow:0 0 44px -8px var(--h)}
.card b{display:block;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.1}
.card small{display:block;color:var(--muted);font-size:13.5px;margin-top:4px;font-weight:300}
.card.new .img{display:grid;place-items:center;border-style:dashed;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.6rem}

/* login */
.login{min-height:calc(100vh - 220px);display:grid;place-items:center;text-align:center}
.login .logo{width:220px;margin:0 auto 10px}
.login h1{margin:14px 0 8px;font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5vw,4rem);line-height:.98}
.login h1 em{font-style:italic;color:var(--accent)}
.login p{color:var(--muted);font-weight:300;margin:0 0 30px}
.login form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.login .in{width:280px;border-radius:99px}

/* Entrar con Google · botón cósmico. El botón real de Google (iframe) va encima, invisible, y recibe el clic. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.g-cosmic{position:relative;width:300px;height:52px;margin:0 auto;border-radius:99px;isolation:isolate;opacity:.55;transition:opacity .5s,transform .4s}
.g-cosmic.ready{opacity:1}
.g-cosmic:not(.ready){pointer-events:none}
.g-cosmic.ready:hover{transform:translateY(-1px) scale(1.015)}
.g-cosmic .g-ring{position:absolute;inset:0;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--a),#e6c36a,#7a6cff,#3fb4ff,#c06bff,#e6c36a);animation:gspin 6s linear infinite}
.g-cosmic .g-glow{position:absolute;inset:-4px;border-radius:inherit;z-index:-2;background:conic-gradient(from var(--a),#e6c36a,#7a6cff,#3fb4ff,#c06bff,#e6c36a);filter:blur(16px);opacity:.32;animation:gspin 6s linear infinite;transition:opacity .4s}
.g-cosmic:hover .g-glow{opacity:.7}
.g-cosmic:hover .g-ring{animation-duration:2.4s}
.g-cosmic .g-face{position:absolute;inset:1.5px;border-radius:inherit;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--fg);font-weight:500;font-size:15px;letter-spacing:.02em;
  background:
    radial-gradient(1.2px 1.2px at 14% 30%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 31% 72%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 24%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 79% 66%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 28%,rgba(230,195,106,.9),transparent 60%),
    radial-gradient(120% 170% at 50% -60%,rgba(122,108,255,.34),transparent 62%),linear-gradient(180deg,#0b0a2c,#030318)}
.g-cosmic .g-face::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s}
.g-cosmic:hover .g-face::after{transform:translateX(120%)}
.g-cosmic .g-face svg{width:20px;height:20px;flex:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.g-cosmic .g-hit{position:absolute;left:0;top:0;width:300px;height:40px;transform:scaleY(1.3);transform-origin:0 0;opacity:.0001;overflow:hidden;border-radius:99px;cursor:pointer}
@keyframes gspin{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.g-cosmic .g-ring,.g-cosmic .g-glow{animation:none}}

@media (max-width:860px){
  .nav{flex-wrap:wrap;gap:10px 14px}.menu{order:3;width:100%;margin-left:0}.who span{display:none}.who{margin-left:auto}
  main{padding-top:calc(150px + env(safe-area-inset-top,0px))}
  .cols,.row2{grid-template-columns:1fr}.row3,.meta{grid-template-columns:1fr 1fr}
  .list>li>button,.list>li>.li{grid-template-columns:1fr auto}.list .st,.list .mid{display:none}
  .tools .in{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}