/* ============================================================
   Biografía — videodjralph.com
   Línea de tiempo. Variables de color heredadas de .vdjr.
   ============================================================ */

.vdjr-bio{position:relative}

/* ── Hero ──────────────────────────────────────────────────── */
.vdjr-bio__hero{position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--linea)}
.vdjr-bio__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%;opacity:.55}
.vdjr-bio__velo{position:absolute;inset:0;background:linear-gradient(0deg,#0a0a0a 6%,rgba(10,10,10,.62) 55%,rgba(10,10,10,.28) 100%)}
.vdjr-bio__cuerpo{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--margen) 50px;width:100%}
.vdjr-bio__titulo{
  font-family:'Archivo Black',Archivo,sans-serif!important;color:var(--hueso)!important;
  font-size:clamp(42px,7vw,92px);line-height:.92;letter-spacing:-3px;text-transform:uppercase;
  margin:0 0 20px;
}
.vdjr-bio__entradilla{font-size:19px;line-height:1.65;color:var(--grisTexto);max-width:600px;margin:0}

/* ── Cifras ────────────────────────────────────────────────── */
.vdjr-bio__cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-bottom:1px solid var(--linea)}
.vdjr-bio__cifra{padding:34px var(--margen);border-right:1px solid var(--linea);display:flex;flex-direction:column;gap:8px}
.vdjr-bio__cifra:last-child{border-right:0}
.vdjr-bio__cifraN{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(28px,3.4vw,42px);letter-spacing:-1.4px;color:var(--claro)}
.vdjr-bio__cifraD{font-size:14px;line-height:1.5;color:var(--gris)}

/* ── Línea de tiempo ───────────────────────────────────────── */
.vdjr-bio__linea{padding:66px var(--margen) 20px;max-width:980px;margin:0 auto}
.vdjr-bio__lineaCabeza{margin-bottom:48px}

.vdjr-hitos{list-style:none;margin:0;padding:0;position:relative}
.vdjr-hitos::before{
  content:'';position:absolute;left:132px;top:8px;bottom:8px;width:1px;
  background:var(--linea);
}
.vdjr-hito{position:relative;display:grid;grid-template-columns:112px 1fr;gap:32px;padding:0 0 46px;align-items:start}
.vdjr-hito::after{
  content:'';position:absolute;left:128px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--negro);border:2px solid var(--claro);
}
.vdjr-hito--destacado::after{background:var(--azul);border-color:var(--azul);width:11px;height:11px;left:127px}
.vdjr-hito__año{
  font-family:'Space Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.5px;
  color:var(--claro);padding-top:1px;text-align:right;
}
.vdjr-hito--destacado .vdjr-hito__año{color:var(--azul);font-weight:700}
.vdjr-hito__titulo{
  font-family:'Archivo Black',Archivo,sans-serif!important;color:var(--hueso)!important;
  font-size:22px;line-height:1.15;text-transform:uppercase;letter-spacing:-.4px;margin:0 0 10px;
}
.vdjr-hito__texto{font-size:16.5px;line-height:1.72;color:var(--grisTexto);margin:0}
.vdjr-hito__texto p{font-size:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
.vdjr-hito__texto p+p{margin-top:12px}
.vdjr-hito__texto strong{color:var(--hueso)}
.vdjr-hito__foto{display:block;width:100%;max-width:640px;height:auto;margin-top:20px;border:1px solid var(--linea)}

/* ── Ha compartido cabina con ──────────────────────────────── */
.vdjr-bio__artistas{position:relative;background:var(--hueso);color:var(--negro);padding:70px var(--margen);margin-top:20px}
.vdjr-bio__artistasCuerpo{position:relative;max-width:980px;margin:0 auto}
.vdjr-bio__artistas .vdjr-etiqueta{color:#77726a}
.vdjr-bio__artistas .vdjr-h2{color:var(--negro)!important;margin-bottom:14px}
.vdjr-bio__artistasTexto{font-size:16.5px;line-height:1.65;color:#3a382f;max-width:640px;margin:0 0 28px}
.vdjr-tags{display:flex;flex-wrap:wrap;gap:10px}
.vdjr-tag{
  font-family:'Space Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.3px;
  padding:9px 16px;border:1px solid rgba(10,10,10,.3);color:var(--negro);
}

/* ── Hoy ───────────────────────────────────────────────────── */
.vdjr-bio__hoy{padding:66px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-bio__hoyCuerpo{max-width:1080px;margin:0 auto}
.vdjr-bio__hoyCuerpo .vdjr-h2{max-width:640px}
.vdjr-bio__hoyGrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--linea)}
.vdjr-bio__hoyCard{position:relative;padding:30px 30px 4px 0;border-right:1px solid var(--linea)}
.vdjr-bio__hoyCard:last-child{border-right:0}
.vdjr-bio__hoyCard::before{content:'';position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--azul)}
.vdjr-bio__hoyLabel{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--claro);margin:22px 0 14px}
.vdjr-bio__hoyTexto{font-size:16.5px;line-height:1.72;color:var(--grisTexto);margin:0}

/* ── Cierre ────────────────────────────────────────────────── */
.vdjr-bio__cierre{position:relative;background:var(--azul);color:var(--negro);padding:70px var(--margen)}
.vdjr-bio__cierreCuerpo{position:relative;max-width:900px;margin:0 auto}
.vdjr-bio__cierre .vdjr-etiqueta{color:rgba(10,10,10,.75)}
.vdjr-bio__cierre .vdjr-h2{color:var(--negro)!important;margin-bottom:26px}

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width:760px){
  .vdjr-bio__hero{min-height:420px}
  .vdjr-bio__cifra{padding:24px var(--margen)}
  .vdjr-bio__linea{padding:48px var(--margen) 10px}
  .vdjr-hitos::before{left:0;display:none}
  .vdjr-hito{grid-template-columns:1fr;gap:10px;padding-bottom:36px;border-top:1px solid var(--linea);padding-top:20px}
  .vdjr-hito:first-child{border-top:0;padding-top:0}
  .vdjr-hito::after{display:none}
  .vdjr-hito__año{text-align:left}
  .vdjr-bio__artistas,.vdjr-bio__hoy,.vdjr-bio__cierre{padding:44px var(--margen)}
  .vdjr-bio__hoyGrid{grid-template-columns:1fr;margin-top:30px}
  .vdjr-bio__hoyCard{padding:26px 0 4px;border-right:0;border-bottom:1px solid var(--linea)}
  .vdjr-bio__hoyCard:last-child{border-bottom:0}
  .vdjr-bio__hoyLabel{margin-top:14px}
  .vdjr-botones{flex-direction:column}
  .vdjr-btn{text-align:center}
}