:root{
  --night:#000000;
  --line:#2B2621;          /* neutro cálido: coherente sobre negro puro */
  --bone:#E9E5DB;
  --mist:#98A1B3;
  --gold:#C9A55C;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(1.5rem,5vw,4.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--serif);
  font-size:clamp(1.0625rem,0.99rem + 0.35vw,1.1875rem);
  line-height:1.65;
  font-weight:300;
}

/* ---------- bilingüe ---------- */
body:not(.es) [data-l="es"]{display:none}
body.es [data-l="en"]{display:none}

/* ---------- estructura ---------- */
.wrap{max-width:76rem;margin:0 auto;padding:0 var(--gut)}
/* Ancho de los articulos. Este es el numero a tocar si la quieres mas o menos ancha. */
.wrap.narrow{max-width:56rem}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;padding:1.75rem 0 0;
}
.masthead.bare{justify-content:flex-end}
.sig{font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.02em}
.sig span{color:var(--mist);font-weight:400;display:block}

.langtoggle{
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  background:none;border:1px solid var(--line);color:var(--mist);
  padding:.35rem .7rem;border-radius:2px;cursor:pointer;
}
.langtoggle:hover{color:var(--bone);border-color:var(--gold)}

/* ---------- portada ---------- */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,7vw,5.5rem)}

.hero-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,300px);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:end;              /* la base de la foto a ras del último renglón */
}
.hero-copy{min-width:0}
.hero-photo{
  display:block;
  width:100%;
  height:auto;          /* imprescindible: sin esto aspect-ratio no actúa */
  aspect-ratio:1/1;
  object-fit:cover;
}
@media(max-width:820px){
  .hero-intro{grid-template-columns:1fr;gap:2.25rem}
  .hero-photo{width:min(100%,260px)}
}

.hero h1{
  font-weight:300;
  font-size:clamp(2.75rem,1.6rem + 4.6vw,5.25rem);
  line-height:.98;letter-spacing:-.022em;margin:0 0 1.5rem;
}
.hero .lede{
  max-width:46ch;
  font-size:clamp(1.15rem,1.05rem + 0.5vw,1.45rem);
  line-height:1.5;margin:0;
}

/* ---------- emisora ---------- */
.live{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
}
.playbtn{
  flex:none;width:3.5rem;height:3.5rem;border-radius:50%;
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  cursor:pointer;display:grid;place-items:center;
  transition:background .25s ease,color .25s ease;
}
.playbtn:hover{background:var(--gold);color:var(--night)}
.playbtn svg{width:1.1rem;height:1.1rem;fill:currentColor}
.playbtn .pausei{display:none}
.playbtn[aria-pressed="true"] .playi{display:none}
.playbtn[aria-pressed="true"] .pausei{display:block}
.playbtn[aria-pressed="true"]{background:var(--gold);color:var(--night)}
.livetext{font-size:1.05rem;line-height:1.5}
.livetext b{font-weight:500;color:var(--gold)}
.livetext small{
  display:block;font-family:var(--sans);font-size:.78rem;
  color:var(--mist);margin-top:.2rem;
}

/* ---------- cifras (sin regla superior) ---------- */
.facts{
  border-top:1px solid var(--line);
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;
  display:grid;gap:1.75rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}
.fact strong{
  display:block;font-weight:300;
  font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem);
  line-height:1;letter-spacing:-.02em;
}
.fact span{
  display:block;font-family:var(--sans);font-size:.82rem;
  color:var(--mist);margin-top:.45rem;line-height:1.4;
}

/* ---------- secciones: separadas por aire, no por reglas ---------- */
section{padding:clamp(3.5rem,8vw,6rem) 0}

.sechead{
  display:grid;gap:.6rem;
  border-bottom:1px solid var(--line);
  padding-bottom:1.1rem;
  margin-bottom:2.25rem;        /* aire para que no roce la primera entrada */
}
.sechead h2{
  font-weight:300;font-size:clamp(1.9rem,1.5rem + 1.5vw,2.9rem);
  line-height:1.1;letter-spacing:-.02em;margin:0;
}
.sechead p{margin:0;color:var(--mist);max-width:54ch;font-size:1.02rem}

/* ---------- listas de obra ---------- */
/* una sola regla ENTRE elementos: ni encima del primero ni bajo el último */
.list{margin:0;padding:0;list-style:none}
.item{
  display:block;padding:1.4rem 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .2s ease;
}
.list li:last-child .item{border-bottom:none;padding-bottom:0}
a.item:hover{padding-left:.6rem}
a.item:hover .ttl{color:var(--gold)}
.ttl{font-size:1.2rem;font-weight:400;line-height:1.3;display:block;transition:color .2s ease}
.meta{
  font-family:var(--sans);font-size:.8rem;color:var(--mist);
  margin-top:.5rem;display:block;line-height:1.6;max-width:72ch;
}

/* ---------- plataformas ---------- */
.plats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.plat{
  font-family:var(--sans);font-size:.85rem;font-weight:500;
  border:1px solid var(--line);padding:.55rem 1rem;border-radius:2px;
  color:var(--mist);transition:color .2s,border-color .2s;
}
.plat:hover{color:var(--bone);border-color:var(--gold)}

/* ---------- contacto y pie ---------- */
.contact a.big{
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);font-weight:300;
  border-bottom:1px solid var(--line);padding-bottom:.15rem;
  transition:border-color .2s,color .2s;
}
.contact a.big:hover{color:var(--gold);border-color:var(--gold)}

footer{
  padding:1rem 0 3.5rem;
  font-family:var(--sans);font-size:.8rem;color:var(--mist);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}

/* ================= ARTÍCULOS ================= */
.back{
  font-family:var(--sans);font-size:.82rem;color:var(--mist);
  display:inline-block;margin:2.5rem 0 0;
}
.back:hover{color:var(--gold)}

article{padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,7vw,5rem)}
article h1{
  font-weight:300;font-size:clamp(2.1rem,1.6rem + 2.2vw,3.5rem);
  line-height:1.08;letter-spacing:-.02em;margin:0 0 1rem;
}
article .sub{
  font-style:italic;color:var(--mist);font-size:1.15rem;
  line-height:1.5;margin:0 0 2.5rem;max-width:48ch;
}
article h2{
  font-weight:400;font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);
  line-height:1.2;letter-spacing:-.015em;margin:3rem 0 1rem;
}
article p{
  margin:0 0 1.35rem;
  max-width:84ch;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
article blockquote{
  margin:2rem 0;padding-left:1.4rem;border-left:1px solid var(--gold);
  color:var(--mist);font-style:italic;max-width:60ch;
}
article blockquote p{margin:0 0 .5rem}

/* Subtitulo, versos y textos cortos: nunca justificados */
article .sub,
article blockquote p,
article .songbox p,
.lyrics p{
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
}
article hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
article a{color:var(--gold);border-bottom:1px solid transparent}
article a:hover{border-bottom-color:var(--gold)}

.pending{
  border:1px dashed var(--line);border-radius:2px;
  padding:1.5rem;color:var(--mist);font-family:var(--sans);
  font-size:.88rem;line-height:1.6;margin:2.5rem 0;
}

.songbox{padding:1.75rem 0;margin:2rem 0}
.songbox h3{
  font-family:var(--sans);font-size:.9rem;font-weight:600;margin:0 0 .5rem;
}
.songbox p{color:var(--mist);font-size:.98rem;margin:0 0 1.1rem;max-width:56ch}

/* ---------- letra de cancion ---------- */
.lyrics{
  margin:2.5rem 0;max-width:56ch;
  color:var(--mist);line-height:1.95;
}
.lyrics p{margin:0 0 1.5rem;max-width:none}
.lyrics p:last-child{margin-bottom:0}
.lyrics .chorus,
.lyrics .coda{font-style:italic}

/* En columna estrecha el justificado abre huecos entre palabras */
@media (max-width:760px){
  article p{
    text-align:left;
    hyphens:manual;
    -webkit-hyphens:manual;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}