:root{
  --primary: #f59e0b;
  --secondary: #fbbf24;
  --background: #fff8e7;
  --surface: #ffffff;
  --text: #333;
  --text-light: #666;
  --border: #f3d38b;

  --radius: 16px;
  --shadow: 0 4px 12px rgba(0,0,0,.08);

  --max-width: 1200px;

  --font: "Inter", sans-serif;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--font);
  background:var(--background);
  color:var(--text);
  line-height:1.5;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

/*layout*/

.site-header,
main,
.site-footer{
  max-width:var(--max-width);
  margin:auto;
  padding:24px;
}

/*header*/

.header-row{
  display:flex;
  align-items:center;
  gap:16px;
}

.logo{
  width:60px;
}

.header-text h1{
  font-size:2rem;
  color:var(--primary);
}

.subtitle{
  color:var(--text-light);
  margin-top:4px;
}

/*filtros*/

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px auto;
  max-width:var(--max-width);
  padding:0 24px;
}

.pin{
  padding:8px 16px;
  border:none;
  border-radius:999px;
  background:var(--secondary);
  cursor:pointer;
  transition:.2s;
}

.pin:hover{
  background:var(--primary);
  color:white;
}

.pin[aria-pressed="true"]{
  background:var(--primary);
  color:white;
}

/*feed y tarjetas*/

.feed{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.card{
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.2s;
}

.card:hover{
  transform:translateY(-4px);
}

.thumb-wrap{
  aspect-ratio:16/9;
  overflow:hidden;
}

.thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-body{
  padding:16px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  margin-bottom:12px;
}

.card-title{
  font-size:1.1rem;
  margin-bottom:6px;
}

.card-author{
  color:var(--text-light);
  font-size:.9rem;
}

.card-tags{
  margin-top:8px;
  color:var(--primary);
  font-size:.85rem;
}

/*vacio*/

.empty-state{
  text-align:center;
  padding:60px 20px;
  border-radius:var(--radius);
  background:white;
  box-shadow:var(--shadow);
}

/*Footer*/

.site-footer{
  margin-top:40px;
  color:var(--text-light);
}

.site-footer h3{
  color:var(--primary);
  margin-bottom:8px;
}


/*RESPONSIVE*/

@media(max-width:600px){

.header-row{
    flex-direction:column;
    text-align:center;
}

.filters{
    justify-content:center;
}

}

.player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

.song-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333; /* ajustalo a tu paleta */
}

.player-container audio {
    width: 100%;
    max-width: 500px;
}