/* layout.css — maquetación original exacta */
header{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.head-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.head-brand{color:var(--mint);letter-spacing:.3em}
.head-brand span{color:var(--mint-dim)}
.head-tag{color:var(--mint-dim);letter-spacing:.24em}

/* HERO */
.hero{padding:110px 0 84px;border-bottom:1px solid var(--line)}
.kicker{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--mint);
  border:1px solid var(--mint-dim);
  padding:8px 18px;
  margin-bottom:38px;
}
h1{
  font-weight:400;
  font-size:clamp(3rem,11vw,7rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--mint);
  text-transform:uppercase;
  margin-bottom:26px;
}
h1 .split{display:block}
h1 .light{color:var(--txt)}
.role{
  font-size:clamp(1rem,2.4vw,1.3rem);
  color:var(--txt);
  letter-spacing:.06em;
  margin-bottom:34px;
}
.role b{color:var(--mint);font-weight:400;font-style:italic}

/* Géneros */
.genres{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:0 auto 48px;
  padding:0;
  max-width:760px;
}
.genres li{
  font-size:clamp(.85rem,2vw,1.05rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint);
  border:1px solid var(--mint-dim);
  background:transparent;
  padding:12px 24px;
  transition:background .25s, color .25s, border-color .25s;
}
.genres li:hover{background:var(--mint);color:#000;border-color:var(--mint)}

/* Botones */
.btn{
  display:inline-block;
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:#000;
  background:var(--mint);
  border:1px solid var(--mint);
  padding:16px 42px;
  transition:background .25s, color .25s;
  will-change:transform;
}
.btn:hover{background:transparent;color:var(--mint)}

/* Secciones */
section{padding:88px 0;border-bottom:1px solid var(--line)}
.sec-label{
  display:block;
  font-size:.7rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--mint-dim);
  margin-bottom:20px;
}
h2{
  font-weight:400;
  font-size:clamp(1.7rem,4.4vw,2.7rem);
  letter-spacing:.04em;
  color:var(--mint);
  text-transform:uppercase;
  margin-bottom:26px;
}
.lead{max-width:64ch;margin:0 auto;color:var(--txt);font-size:1.05rem;line-height:1.85}
.lead b{color:var(--mint);font-weight:400}
.lead i{color:var(--mint)}

/* Tier list */
.tierlist{display:flex;flex-direction:column;gap:22px;margin-top:50px;text-align:center}
.track{
  border:1px solid var(--line);
  padding:40px 30px 34px;
  background:#020403;
  transition:border-color .3s, background .3s, opacity .35s, transform .35s;
  position:relative;
  text-align:left;
  transform-style:preserve-3d;
}
.track:hover{border-color:var(--mint);background:#040a07}
.track-head{text-align:center;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.rank{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#000;
  background:var(--mint);
  padding:6px 16px;
  margin-bottom:20px;
}
.track h3{
  font-weight:400;
  font-size:clamp(1.7rem,4.8vw,2.5rem);
  letter-spacing:.06em;
  color:var(--mint);
  text-transform:uppercase;
  margin-bottom:12px;
}
.track h3 button{
  all:unset;
  cursor:pointer;
  color:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  font:inherit;
  border-bottom:1px solid transparent;
}
.track h3 button:hover{border-color:var(--mint)}
.meta{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mint-dim)}
.desc{color:var(--txt);font-size:1.02rem;line-height:1.95;margin-bottom:18px}
.desc b{color:var(--mint);font-weight:400}
.desc i{color:var(--mint)}
.specs{
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-wrap:wrap;gap:8px;text-align:left;
}
.specs li{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mint-dim);border:1px solid var(--line);padding:6px 12px;
  transition:color .25s, border-color .25s;
}
.specs li:hover{color:var(--mint);border-color:var(--mint-dim)}
.watch{
  display:inline-block;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--mint);
  border:1px solid var(--mint-dim);padding:12px 26px;
  transition:background .25s, color .25s, border-color .25s;
  word-break:break-all;will-change:transform;
}
.watch:hover{background:var(--mint);color:#000;border-color:var(--mint)}

/* Canal */
.channel{border:1px solid var(--mint-dim);padding:52px 30px;margin-top:46px;background:#020403}
.channel .url{
  font-size:clamp(.95rem,2.6vw,1.35rem);
  letter-spacing:.04em;color:var(--mint);margin-bottom:30px;word-break:break-all;
}
.channel .url a{color:var(--mint);text-decoration:none;border-bottom:1px solid var(--mint-dim);padding-bottom:3px}
.channel .url a:hover{border-color:var(--mint)}

/* Tags */
.tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:40px;padding:0}
.tags li{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint-dim);border:1px solid var(--line);padding:8px 14px;
  transition:color .25s, border-color .25s, background .25s;
}
.tags li:hover{color:#000;background:var(--mint);border-color:var(--mint)}
.tags li mark{background:var(--mint);color:#000;padding:0 2px}

/* Música / lista oficial */
.cover-thumb{
  width:180px;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--mint-dim);
  display:block;margin:0 auto 18px;background:#000;
}
.song-list{list-style:none;padding:0;margin:34px 0 0;text-align:left;display:flex;flex-direction:column;gap:10px}
.song-list li{
  border:1px solid var(--line);padding:12px 16px;
  font-size:.85rem;letter-spacing:.06em;color:var(--txt);
}
.song-list li b{color:var(--mint);font-weight:400}
.song-list a{color:var(--mint);text-decoration:none;border-bottom:1px solid var(--mint-dim)}
.song-list a:hover{border-color:var(--mint)}

/* Footer */
footer{padding:64px 0 80px;font-size:.82rem;letter-spacing:.08em;color:var(--mint-dim)}
footer .foot-brand{color:var(--mint);letter-spacing:.34em;text-transform:uppercase;font-size:.84rem;margin-bottom:14px}
footer a{color:var(--mint);text-decoration:none;border-bottom:1px solid var(--mint-dim)}
footer a:hover{border-color:var(--mint)}

@media (max-width:600px){
  body{font-size:17px}
  .hero{padding:72px 0 60px}
  section{padding:62px 0}
  .track{padding:30px 18px 26px}
  .channel{padding:38px 18px}
  .head-inner{justify-content:center;text-align:center}
}