/* ============================================================
   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)}

/* ============================================================
   V2 (19/09/2026): hero de dos tarjetas, rejilla de sectores, rasca y gana.
   Parte de los tokens de la landing: misma tipografía, mismo acento.
   ============================================================ */
.lv-next{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--text-secondary);
  background:var(--surface-1);font-variant-numeric:tabular-nums;
}
.lv-next::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- Las dos tarjetas del hero ---------- */
.lv-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start;margin-bottom:22px}
.lv-card{
  position:relative;background:var(--surface-1);border:1px solid rgba(0,167,179,.2);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:0 26px 60px -34px rgba(0,0,0,.75);
}
.lv-card .lv-label{
  position:absolute;top:14px;left:14px;z-index:3;
  background:rgba(7,16,24,.78);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);
}
.lv-shot{position:relative;aspect-ratio:9/16;background:var(--surface-0);overflow:hidden}
.lv-shot-sq{aspect-ratio:1/1}
.lv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lv-shot-none{
  width:100%;height:100%;display:flex;align-items:flex-end;padding:18px;
  background:linear-gradient(160deg,#0A2831 0%,#0D1B26 62%,#071018 100%);
}
.lv-shot-none span{font-family:var(--font-display);font-size:15px;color:var(--text-muted);word-break:break-word}
.lv-card-body{padding:16px 18px 18px}
.lv-card .lv-handle{font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Sobre tarjeta, --text-muted se queda en 4,16:1 (lo canta Lighthouse):
   los grises pequeños de las tarjetas usan el de la casa, un punto más claro. */
.lv-card .lv-artist,.lv-tile .lv-artist{font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--text-muted-card,#7591A0)}
.lv-figures{display:flex;gap:26px;align-items:flex-end;margin-bottom:14px}
.lv-fig b{
  display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(34px,4.4vw,52px);font-variant-numeric:tabular-nums;
}
.lv-fig span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted-card,#7591A0)}
.lv-fig-accent b{color:var(--accent-text)}
/* El Factor Sonar, a la mitad que las vistas (Oli, 19/09): a igual tamaño los
   dos números competían y el ×N se iba al borde de la tarjeta. */
.lv-fig-accent b{font-size:clamp(17px,2.2vw,26px)}
/* .lv-fig.lv-fig-accent y no .lv-fig-accent a secas: con una sola clase
   empataba con «.lv-figures-sm .lv-fig b», que va después y ganaba. */
.lv-figures-sm .lv-fig.lv-fig-accent b{font-size:clamp(13px,1.1vw,15px)}
.lv-figures-sm .lv-fig b{font-size:clamp(20px,2.2vw,26px)}
.lv-watch{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  color:var(--accent-text);text-decoration:none;border-bottom:1px solid transparent;
}
.lv-watch:hover{border-bottom-color:var(--accent-text)}
.lv-watch-sm{font-size:13px}
.lv-compare{max-width:70ch;color:var(--text-secondary);font-size:15.5px;margin:0 0 6px}

/* ---------- Rasca y gana ---------- */
.lv-card-scratch .lv-shot{touch-action:none}          /* solo aquí: el scroll de la página no se toca */
.lv-scratch{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;transition:opacity .4s var(--ease,ease)}
.lv-scratch.is-gone{opacity:0;pointer-events:none}
.lv-scratch canvas{position:absolute;inset:0;cursor:crosshair}
.lv-scratch-hint{
  position:relative;z-index:1;pointer-events:none;text-align:center;max-width:70%;
  font-size:13.5px;font-weight:600;color:var(--text-primary);text-shadow:0 1px 10px rgba(0,0,0,.6);
  transition:opacity .2s ease;
}
.lv-scratch-hint.is-hidden{opacity:0}
.lv-scratch-btn{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-pill);
  padding:7px 16px;font-size:12.5px;font-weight:700;color:var(--text-primary);cursor:pointer;
}
.lv-scratch-btn:hover,.lv-scratch-btn:focus-visible{border-color:var(--accent);color:var(--accent-text)}

/* ---------- Rejilla de sectores / audios: tres por fila ---------- */
.lv-sectors{margin-top:clamp(40px,5vw,72px)}
.lv-sectors h2{margin-bottom:6px}
.lv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:18px}
.lv-grid[data-showing="9"] .lv-grid-cell.is-extra{display:none}
.lv-tile{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;padding-bottom:14px;transition:transform .18s ease,border-color .18s ease;
}
.lv-tile:hover{transform:translateY(-3px);border-color:rgba(0,167,179,.45)}
.lv-tile .lv-tag{margin:12px 14px 0}
.lv-tile .lv-shot{margin-top:10px}
.lv-tile .lv-handle{font-family:var(--font-display);font-size:14.5px;font-weight:700;margin:12px 14px 8px}
.lv-tile .lv-figures{margin:0 14px 10px;gap:18px}
.lv-tile .lv-sectors{margin:0 14px 8px}
.lv-tile .lv-watch{margin:0 14px}
.lv-showall{margin:22px auto 0;display:block}
.lv-short{margin-top:clamp(40px,5vw,72px);max-width:70ch}
.lv-short h2{margin-top:26px}
.lv-short p{color:var(--text-secondary);font-size:15.5px;margin-top:10px}

/* Entrada escalonada: 16 px y fundido, una sola vez. */
.lv-in{opacity:0;transform:translateY(16px)}
.lv-in.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}

@media(max-width:860px){
  .lv-duo{grid-template-columns:1fr;gap:18px}
  .lv-grid{grid-template-columns:1fr}
  .lv-fig b{font-size:40px}
  .lv-fig-accent b{font-size:20px}
  .lv-figures-sm .lv-fig.lv-fig-accent b{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .lv-in,.lv-in.is-in{opacity:1;transform:none;transition:none}
  .lv-tile:hover{transform:none}
}