/* ============================================================
   PÁGINAS VIVAS (18/09/2026) — audios en tendencia y reel del día.
   Las genera scripts/build-live.py con los datos del motor. Sin miniaturas
   de terceros: tarjetas tipográficas, los números son el dibujo.
   Hereda tokens.css + site.css (nav, .btn, .faq) + legal.css (pie).
   ============================================================ */
.lv-sample{
  margin:73px 0 0;   /* la nav es fija: el aviso empieza debajo, si no el selector queda sobre el coral */
  padding:12px 28px;text-align:center;font-size:13.5px;font-weight:600;
  background:var(--contact-soft);color:var(--contact-text);border-bottom:1px solid var(--contact);
}
.lv-hero{padding:clamp(100px,9vw,124px) 0 clamp(18px,3vw,28px)}
.lv-h1{
  font-family:var(--font-display);font-size:clamp(32px,4.6vw,52px);
  line-height:1.06;letter-spacing:-.025em;font-weight:700;margin:14px 0 14px;max-width:18ch;
}
.lv-updated{color:var(--text-muted);font-size:14.5px;margin:0;max-width:70ch}
.lv-archive-back{margin:14px 0 0;font-size:14.5px}
.lv-archive-back a,.lv-sibling a,.lv-weeks a,.lv-weeknav a,.lv-open a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

.lv-body{padding-bottom:clamp(56px,7vw,88px)}
.lv-body > *{max-width:820px}
.lv-body h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:52px 0 14px}
.lv-body p{color:var(--text-secondary);font-size:16.5px;line-height:1.65;margin:0 0 16px}
.lv-body p b{color:var(--text-primary)}
.lv-help{font-size:14.5px!important;color:var(--text-muted)!important}
.lv-empty{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px}

/* ---------- Lista de audios ---------- */
.lv-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:10px;max-width:820px}
.lv-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;
}
.lv-rank{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-muted-card,#7591A0);font-variant-numeric:tabular-nums;padding-top:2px}
.lv-item-body{min-width:0}
.lv-name{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px;color:var(--text-primary)}
.lv-artist{font-weight:500;color:var(--text-secondary);font-size:15px}
.lv-figures{font-size:14.5px;color:var(--text-secondary);margin:0 0 8px!important;font-variant-numeric:tabular-nums}
.lv-figures b{color:var(--text-primary)}
.lv-dot{opacity:.45;padding:0 2px}
.lv-sectors{margin:0 0 8px!important;display:flex;flex-wrap:wrap;gap:6px}
.lv-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-secondary);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 10px;
}
.lv-clips{font-size:13.5px!important;color:var(--text-muted-card,#7591A0)!important;margin:0 0 8px!important}
.lv-open{font-size:14px!important;margin:0!important}
.lv-posted{color:var(--text-muted-card,#7591A0)}   /* sobre tarjeta, --text-muted se queda en 4,16:1 */
.lv-badge{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap;align-self:center;
}
.lv-rising{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--aqua-700)}
.lv-peak{background:var(--wave-soft);color:var(--wave-text);border:1px solid transparent}
.lv-fading{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border)}   /* --text-muted sobre surface-2 da 3,74:1 */

/* ---------- Tarjetas de reel ---------- */
.lv-reel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px}
.lv-reel-big{border-color:var(--aqua-700);background:linear-gradient(160deg,#0A2831 0%,#0D1B26 60%);padding:26px 28px;margin:8px 0 12px;max-width:820px}
.lv-reel header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lv-body h2.lv-handle{margin:0;font-size:19px}
.lv-handle{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--text-primary);overflow-wrap:anywhere}
.lv-nums{display:flex;flex-wrap:wrap;gap:14px 26px;margin-bottom:12px}
.lv-num{display:flex;flex-direction:column;gap:2px}
.lv-num b{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.lv-num span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--text-muted-card,#7591A0)}
.lv-num-hero b{font-size:34px;color:var(--accent-text)}
.lv-reel-big .lv-num b{font-size:26px}
.lv-reel-big .lv-num-hero b{font-size:44px}
.lv-copy{font-size:15px!important;margin:0 0 10px!important}
.lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:820px}

/* ---------- Semanas, FAQ y cierre ---------- */
.lv-weeks{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.lv-weeks li{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;font-size:14px}
.lv-weeknav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:36px 0 0;font-size:14.5px}
.lv-sibling{margin-top:36px!important;font-size:15px!important}
.lv-faq{max-width:820px;margin-bottom:8px}
.lv-faq .faq-a p{padding-right:0}
.lv-cta{
  margin:48px 0 0;background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:26px 28px;max-width:820px;
}
.lv-cta h2{margin:0 0 10px!important;font-size:clamp(20px,2.4vw,26px)!important}
.lv-cta p{margin:0 0 18px}

@media(max-width:860px){
  .lv-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lv-hero{padding-top:96px}
  .lv-item{grid-template-columns:auto 1fr;gap:10px 12px;padding:16px}
  .lv-badge{grid-column:2;justify-self:start;align-self:start;margin-top:2px}
  .lv-nums{gap:12px 18px}
  .lv-reel-big{padding:20px}
  .lv-cta{padding:22px 20px}
  .lv-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .lv-item,.lv-reel{transition:none}
}

/* Datos flacos (regla 5 de build-live.py, 19/09): mientras la lista no llegue
   al mínimo no se enseña una lista corta, solo esta línea. Discreta a
   propósito: no es un error ni un aviso, es el estado normal de una página
   que se llena sola por la mañana. */
.lv-collecting{color:var(--text-muted);font-size:15.5px;margin:0;padding:14px 0 2px;
  border-top:1px solid var(--border)}