/* ── Personaje: columnas de luz (23-sep-2026) ────────────────────────────
   Pedro eligió la opción B de vista-previa-personaje.html: la figura a la
   izquierda con su estado y las cuatro barras como columnas que se llenan
   de luz desde abajo, el mismo lenguaje del Inicio. Abajo, el nivel, desde
   dónde vive y el ciclo. La figura sigue siendo el lienzo de personaje.js.

   Carga el último; quitar su <link> deja la pantalla sin estos estilos. */

body[data-vista="personaje"]{ --ambiente:rgba(122,78,255,.12) }

.pj{ max-width:none; padding:44px 40px 56px; animation:lx-rise .6s var(--curva-lx) both }
.pj-rotulo{ margin:0; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-tenue) }
.pj-cabeza{ margin-bottom:30px }
.pj-h1{ margin:16px 0 0; font-family:var(--display); font-weight:200; font-size:clamp(30px,3.4vw,38px); letter-spacing:-.03em; line-height:1.05; color:var(--tinta) }
.pj-bajada{ margin:8px 0 0; max-width:56ch; font-size:12.5px; line-height:1.6; color:var(--tinta-media) }

.pj-cuerpo{ display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,2.6fr); gap:14px; align-items:stretch }

/* ── La figura y su estado ────────────────────────────────────────────── */
.pj-figura{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 22px 24px; text-align:center; border-radius:22px;
  border:1px solid rgba(238,237,245,.08); background:rgba(238,237,245,.02);
}
.pj-figura::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 38%, rgba(122,78,255,.16), transparent 62%) }
.pj-figura > *{ position:relative }
.pj-figura .figura{ width:92%; max-width:340px; margin:0 auto }
.pj-figura h3{ margin:12px 0 2px; font-family:var(--display); font-weight:200; font-size:24px; color:var(--oro) }
.pj-cargado{ margin:0; font-size:12px; color:var(--tinta-media) }
.pj-frase{ margin:12px 0 0; max-width:30ch; font-size:11.5px; line-height:1.55; color:var(--tinta-tenue) }

/* ── Las cuatro columnas ─────────────────────────────────────────────── */
.pj-cols{ display:flex; gap:10px; min-height:480px }
.pj-col{
  --c:var(--c-lila); position:relative; overflow:hidden; flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px 18px;
  border-radius:22px; border:1px solid rgba(238,237,245,.07); background:rgba(238,237,245,.015);
  animation:lx-rise .6s var(--curva-lx) both; transition:border-color .4s;
}
.pj-col:hover{ border-color:rgba(var(--c),.3) }
/* La luz que sube desde abajo es el valor de la barra. */
.pj-col::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:var(--v);
  background:linear-gradient(0deg, rgba(var(--c),.34), rgba(var(--c),.04));
  transition:height 1.2s var(--curva-lx);
}
/* Y el haz de arriba, como en las columnas del Inicio. */
.pj-col::after{
  content:''; position:absolute; top:0; left:50%; width:1px; height:40%;
  background:linear-gradient(180deg, rgb(var(--c)), transparent); box-shadow:0 0 16px 2px rgba(var(--c),.5); opacity:.6;
}
.pj-col > *{ position:relative }
.pj-col b{ font-family:var(--display); font-weight:200; font-size:44px; letter-spacing:-.04em; line-height:1; color:var(--tinta) }
.pj-col b i{ font-style:normal; font-size:14px; color:var(--tinta-tenue); margin-left:2px }
.pj-col h4{ margin:8px 0 3px; font-family:var(--display); font-weight:300; font-size:16px; line-height:1.2; color:var(--tinta) }
.pj-col small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--c),.9) }

/* ── Abajo: nivel, desde dónde vive y el ciclo ───────────────────────── */
.pj-abajo{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:10px }
.pj-caja{ padding:20px 22px; border-radius:22px; border:1px solid rgba(238,237,245,.08); background:rgba(238,237,245,.02) }
.pj-cifra{ display:flex; align-items:baseline; gap:10px; margin:10px 0 6px }
.pj-cifra b{ font-family:var(--display); font-weight:200; font-size:40px; letter-spacing:-.04em; line-height:1; color:var(--tinta) }
.pj-cifra .delta{ font-size:11px }
.pj-de{ font-size:12px; color:var(--tinta-tenue) }
.pj-nombre{ font-size:12px; color:var(--oro) }
.pj-texto{ font-size:11.5px; line-height:1.55; color:var(--tinta-media) }

@media (max-width:860px){
  .pj{ padding:22px 18px 40px }
  .pj-cuerpo, .pj-abajo{ grid-template-columns:1fr }
  .pj-figura .figura{ width:56%; max-width:200px }
  .pj-cols{ min-height:0; display:grid; grid-template-columns:1fr 1fr }
  .pj-col{ min-height:190px }
  .pj-col b{ font-size:34px }
}
@media (prefers-reduced-motion:reduce){ .pj, .pj-col{ animation:none } .pj-col::before{ transition:none } }