/* ===================================
   RLD ENSEMBLE — TAMBOR DE PIEDRA
   Se carga DESPUÉS de cronicas-style.css y solo cambia la paleta:
   piedra (gris cálido) + mar (azul verdoso) + barro.
   =================================== */

:root {
  --bg:       #f1efe8;
  --bg2:      #e6e3d8;
  --surface:  #fbfaf5;
  --panel:    #e4e0d2;
  --border:   #bdb6a2;
  --muted:    #6d6858;
  --gray:     #3f3d34;
  --dark:     #1b1c18;
  --black:    #0f100d;

  --mar:      #1f6470;   /* Raíz de Mar — azul garífuna */
  --piedra:   #6e5b45;   /* Raíz de Piedra — piedra lenca */
  --confl:    #7a3b2e;   /* Confluencia — barro */

  --accent:   #1f6470;
  --accent2:  #3f8c8f;
  --ocre:     #1f6470;
  --ocre2:    #3f8c8f;
}

/* Cada álbum puede fijar su propio acento con class="theme-piedra" en <body> */
body.theme-piedra { --accent: #6e5b45; --ocre: #6e5b45; --accent2: #9a7f5f; --ocre2: #9a7f5f; }
body.theme-mar    { --accent: #1f6470; --ocre: #1f6470; --accent2: #3f8c8f; --ocre2: #3f8c8f; }

nav { background: rgba(241,239,232,0.95); }

.page-header-bg {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(110,91,69,0.08) 0%, transparent 60%);
}

/* ── Portada provisional (sin imagen) ── */
.cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 2.6rem;
  color: var(--surface);
  background: linear-gradient(135deg, var(--accent), var(--dark));
}

/* ── Tarjetas de la trilogía ── */
.trilogy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.tri-card {
  background: var(--surface);
  border: 2px solid var(--dark);
  display: flex; flex-direction: column;
  color: var(--dark);
  transition: transform .25s, box-shadow .25s;
}
a.tri-card:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--dark); color: var(--dark); }
.tri-card.is-soon { opacity: .7; border-style: dashed; }
.tri-top { padding: 1.75rem 1.5rem 1.25rem; flex: 1; }
.tri-num {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.tri-title { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; line-height: 1.1; color: var(--black); }
.tri-tag { font-family: var(--font-display); font-style: italic; font-size: .9rem; color: var(--muted); margin-top: .35rem; }
.tri-text { font-size: .86rem; color: var(--gray); line-height: 1.7; margin-top: .9rem; }
.tri-bottom {
  padding: .7rem 1.5rem; border-top: 2px solid var(--dark);
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .08em; color: var(--muted);
}
@media (max-width: 860px) { .trilogy { grid-template-columns: 1fr; } }

/* ── Bloques de texto ── */
.prose p { font-size: .97rem; color: var(--dark); line-height: 1.85; margin-bottom: 1rem; max-width: 720px; }
.prose p strong { color: var(--black); }

/* ── Versiones de un mismo álbum ── */
.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0 .5rem; }
.version {
  border: 2px solid var(--dark); background: var(--surface); padding: 1.1rem 1.25rem;
}
.version-label { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.version-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--black); margin: .2rem 0 .3rem; }
.version-text { font-size: .82rem; color: var(--gray); line-height: 1.6; }

/* ── Estado / próximamente ── */
.status-pill {
  display: inline-block; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .15rem .5rem; border: 1px solid var(--border); color: var(--muted);
  margin-left: .5rem; vertical-align: middle; white-space: nowrap;
}
.track-link.is-off { opacity: .4; pointer-events: none; }
.track-row.is-instrumental .track-title { font-style: italic; }

/* ── Separador de actos ── */
.act-row {
  padding: .7rem 1.25rem; background: var(--panel);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--border);
}

.tracks-header, .track-row { grid-template-columns: 50px 1fr 70px 90px; }
.track-state { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.track-lang { background: transparent; }

@media (max-width: 640px) {
  .track-row { grid-template-columns: 30px 1fr auto; }
  .section { padding-left: 1rem; padding-right: 1rem; }
  .page-header { padding: 2rem 1rem; }
}

/* ── Glosario ── */
.glossary { width: 100%; max-width: 640px; border-collapse: collapse; border: 2px solid var(--dark); background: var(--surface); }
.glossary th { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .6rem 1rem; background: var(--panel); border-bottom: 2px solid var(--dark); }
.glossary td { padding: .55rem 1rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.glossary td:first-child { font-family: var(--font-display); font-style: italic; font-weight: 700; color: var(--accent); width: 35%; }
.glossary tr:last-child td { border-bottom: none; }
body.theme-tierra { --accent: #7a3b2e; --ocre: #7a3b2e; --accent2: #a0583f; --ocre2: #a0583f; }

/* ── Botones por versión (Spotify / Letras) ── */
.version { display: flex; flex-direction: column; }
.version-status { margin-top: .6rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: var(--accent); }
.version-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.vbtn {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .8rem; border: 1.5px solid var(--dark); color: var(--dark); background: transparent;
  text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.vbtn-spotify { border-color: #1DB954; color: #13853c; }
a.vbtn-spotify:hover { background: #1DB954; color: #fff; }
a.vbtn-letras:hover { background: var(--dark); color: var(--bg); }
.vbtn.is-off { opacity: .45; cursor: default; }

/* ── Libro de letras (notas del Productor) ── */
.libro-banner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  border: 2.5px solid var(--dark); background: var(--surface);
  padding: 1.25rem 1.5rem; position: relative; box-shadow: 5px 5px 0 var(--accent);
}
.libro-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.libro-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .2rem; }
.libro-eyebrow { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.libro-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--black); }
.libro-desc { font-size: .86rem; color: var(--gray); line-height: 1.6; margin-top: .2rem; }
.libro-btn {
  font-family: var(--font-body); font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--surface); background: var(--dark); border: 2px solid var(--dark);
  padding: .75rem 1.3rem; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s;
}
.libro-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) { .libro-btn { width: 100%; text-align: center; } }

/* ── Portadas ── */
.tri-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 2px solid var(--dark); }
.version-cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 2px solid var(--dark); margin-bottom: 1rem; }
.version-cover.is-soon {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--bg2) 12px 24px);
  border-style: dashed; color: var(--muted);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.8;
}


/* Anclas de versión (#trova, #jazz, #folk, #rock) bajo el menú fijo */
.version[id] { scroll-margin-top: 90px; }