/* ══════════════════════════════════════════════════════════════════════
   LA PIEL — «expediente troquelado dentro de un terminal de archivo»

   El problema de antes: era un tema oscuro con acentos de color. Eso lo
   tiene cualquiera. Lo que no tiene cualquiera es una IDENTIDAD, y una
   identidad no se consigue eligiendo colores: se consigue eligiendo una
   METÁFORA FÍSICA y siendo obstinado con ella.

   La metáfora aquí: cada agente es una FICHA TROQUELADA de un archivo real
   —cartón, remaches, perforación de carpeta, placa grabada, sello de
   caucho— que estás mirando a través del terminal de la sala de máquinas.
   Dos capas: el objeto físico y el cristal por el que lo miras.

   De ahí sale todo lo demás sin tener que decidir nada más:
     · las esquinas se troquelan, no se redondean
     · los bordes son dobles, como el filo de un cartón grueso
     · los títulos van GRABADOS (hundidos), no impresos
     · lo que está vivo tiene fósforo; lo archivado, tinta
     · nada brilla salvo lo que de verdad está pasando ahora

   Regla que se aplicó al escribirlo: si un efecto no puede explicarse
   señalando el objeto físico que imita, se quita.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* EL CARTÓN. Tres tonos, no cinco: la ficha, el hueco y el canto. */
  --pl-carton:#161d2b;
  --pl-hueco:#111726;
  --pl-canto:#2e3d59;
  --pl-canto-vivo:#3d5375;

  /* LA TINTA. Lo que está escrito. */
  --pl-tinta:#eef2fa;
  --pl-tinta-2:#a8b5cb;
  --pl-tinta-3:#7c889f;

  /* LOS TRES ESTADOS, y solo tres. */
  --pl-vivo:#7ee6a8;      /* corre ahora            */
  --pl-espera:#e8b84b;    /* pide atención          */
  --pl-fallo:#d1705f;     /* salió mal, no se borra */

  --pl-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pl-serif:Fraunces,Georgia,"Times New Roman",serif;
}

/* ── EL TROQUEL ───────────────────────────────────────────────────────
   La forma de la ficha. Dos esquinas cortadas en diagonal —arriba a la
   derecha y abajo a la izquierda— porque cortar las cuatro la vuelve un
   octógono y pierde la lectura de «hoja». */
.pl-ficha{
  --corte:18px;
  position:relative;
  background:var(--pl-carton);
  padding:26px 30px 24px 46px;
  clip-path:polygon(
    0 0, calc(100% - var(--corte)) 0, 100% var(--corte),
    100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

/* EL CANTO: el borde no es una línea, son DOS —el filo exterior y la
   línea interior de la cartulina—. Es lo que da el grosor. */
.pl-ficha::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--pl-canto),var(--pl-canto)) top left/100% 1px no-repeat,
    linear-gradient(var(--pl-canto),var(--pl-canto)) bottom left/100% 1px no-repeat,
    linear-gradient(var(--pl-canto),var(--pl-canto)) top left/1px 100% no-repeat,
    linear-gradient(var(--pl-canto),var(--pl-canto)) top right/1px 100% no-repeat;
  clip-path:inherit;
}
.pl-ficha::after{
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--pl-canto) 42%,transparent);
  clip-path:polygon(
    0 0, calc(100% - 11px) 0, 100% 11px,
    100% 100%, 11px 100%, 0 calc(100% - 11px));
}

/* ── LA PERFORACIÓN DE CARPETA ────────────────────────────────────────
   Tres agujeros a la izquierda. Es el detalle que más «expediente» aporta
   y cuesta un pseudoelemento: sin él la ficha es una tarjeta; con él es
   una hoja que ha estado archivada en algún sitio. */
.pl-ficha .pl-perf{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:26px;pointer-events:none;
}
.pl-perf i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--pl-hueco);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pl-canto) 80%,transparent);
}

/* ── LOS REMACHES ─────────────────────────────────────────────────────
   Cuatro, en las esquinas del marco interior. Diminutos: si se ven al
   primer golpe de vista están mal puestos. */
.pl-remache{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb,var(--pl-canto) 90%,var(--pl-tinta));
  opacity:.55;pointer-events:none;
}
.pl-remache--ai{top:13px;left:13px}
.pl-remache--ad{top:13px;right:13px}
.pl-remache--bi{bottom:13px;left:13px}
.pl-remache--bd{bottom:13px;right:13px}

/* ── LA PLACA GRABADA ─────────────────────────────────────────────────
   El nombre del agente. Grabado = un pelo de sombra arriba y un pelo de
   luz abajo. Al revés parece impreso; así parece hundido en el metal. */
.pl-placa{
  display:inline-block;padding:5px 14px 6px;margin:0 0 3px;
  background:color-mix(in srgb,var(--pl-hueco) 80%,var(--ca,var(--pl-canto)) 8%);
  border-left:2px solid var(--ca,var(--pl-canto));
  font:600 27px/1.1 var(--pl-serif);color:var(--pl-tinta);
  letter-spacing:-.012em;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}

/* ── LA CINTA DE CLASE ────────────────────────────────────────────────
   La banda diagonal de la esquina: en un juego dice de un vistazo qué
   clase de personaje es. Aquí dice de qué liga es el agente. */
.pl-cinta{
  position:absolute;top:0;right:0;width:104px;height:104px;
  overflow:hidden;pointer-events:none;
}
.pl-cinta span{
  position:absolute;top:19px;right:-30px;width:132px;
  transform:rotate(45deg);text-align:center;
  background:var(--ca,var(--pl-canto));
  color:#0e1420;
  font:600 9.5px/1.9 var(--pl-mono);letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* ── EL RETRATO ───────────────────────────────────────────────────────
   Hexagonal, con el anillo del color del agente. El hexágono es lo que lo
   saca del terreno «foto de perfil» y lo mete en el de «ficha de unidad». */
.pl-retrato{
  position:relative;width:104px;height:118px;flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--pl-hueco);
  display:grid;place-items:center;overflow:hidden;
}
.pl-retrato img{width:100%;height:100%;object-fit:cover;display:block}
.pl-retrato__anillo{
  position:absolute;inset:0;pointer-events:none;
  background:var(--ca,var(--pl-canto));
  clip-path:polygon(
    50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,
    50% 3px, 3px calc(25% + 1.5px), 3px calc(75% - 1.5px),
    50% calc(100% - 3px), calc(100% - 3px) calc(75% - 1.5px),
    calc(100% - 3px) calc(25% + 1.5px), 50% 3px);
  opacity:.85;
}

/* ── LAS MUESCAS DE RANGO ─────────────────────────────────────────────
   Cinco muescas. Las conseguidas van llenas; las que faltan, en hueco pero
   VISIBLES: ver lo que aún no tienes es la mitad de las ganas de tenerlo. */
.pl-rango{display:flex;align-items:center;gap:9px}
.pl-rango__m{display:flex;gap:3px}
.pl-rango__m i{
  display:block;width:15px;height:6px;
  background:color-mix(in srgb,var(--pl-canto) 55%,transparent);
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
}
.pl-rango__m i.on{
  background:var(--ca,var(--pl-vivo));
  box-shadow:0 0 7px color-mix(in srgb,var(--ca,var(--pl-vivo)) 50%,transparent);
}
.pl-rango__t{
  font:600 10.5px/1 var(--pl-mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ca,var(--pl-tinta-2));
}

/* ── EL SELLO ─────────────────────────────────────────────────────────
   Girado. Un sello recto parece un botón, y un botón invita a pulsarlo. */
.pl-sello{
  display:inline-block;transform:rotate(-3.2deg);
  padding:5px 12px 6px;border:2px solid currentColor;border-radius:2px;
  font:600 10px/1 var(--pl-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--pl-fallo);opacity:.8;
}
.pl-sello--ok{color:var(--pl-vivo)}
.pl-sello--esp{color:var(--pl-espera)}

/* ── EL CRISTAL ───────────────────────────────────────────────────────
   La segunda capa: la pantalla por la que se mira. Líneas de barrido a
   1,5% de opacidad —a más se vuelve disfraz— y una viñeta muy suave.
   Va en el <body>, no dentro de las fichas, para que sea el AIRE el que
   esté detrás del cristal y no cada objeto por separado. */
.pl-cristal::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.015) 0 1px,
    transparent 1px 3px);
}
.pl-cristal::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 45%,
    transparent 55%, rgba(4,8,16,.34) 100%);
}
@media (prefers-reduced-motion:reduce){
  .pl-cristal::before{background:none}
}

/* ══════════════════════════════════════════════════════════════════════
   LO QUE HACE QUE PAREZCA UN JUEGO DE ROL Y NO UNA FICHA BONITA
   ══════════════════════════════════════════════════════════════════════

   Una ficha estática, por bien dibujada que esté, es una ilustración. Lo
   que convierte una ilustración en un juego son tres cosas, y ninguna es
   decorativa:

     1. RAREZA VISIBLE. En todo RPG se sabe si algo es común o legendario
        ANTES de leer una palabra. Es lo que hace querer subir.
     2. INFORMACIÓN AL SEÑALAR. Pasar el ratón por una estadística tiene
        que decir qué es y cómo sube. Sin eso son números decorativos.
     3. REACCIÓN. Lo que se puede mirar de cerca tiene que notarse que se
        puede mirar de cerca.

   ────────────────────────────────────────────────────────────────────── */

/* ── 1 · RAREZA POR RANGO ─────────────────────────────────────────────
   Cuatro escalones. La diferencia NO es de color —eso ya lo lleva cada
   agente— sino de CUÁNTA presencia tiene el marco: el becario apenas
   tiene canto, la referencia tiene doble filo, brillo y un halo que
   respira. Se lee de lejos, que es la gracia.

   Y va en la ficha, no en un adorno aparte: la rareza ES el marco. */
.pl-ficha[data-rango]{transition:filter .25s}

/* becario — el canto casi no está */
.pl-ficha[data-rango="1"]{--pl-canto:#232d42}
.pl-ficha[data-rango="1"] .pl-placa{opacity:.9}

/* oficial — el canto normal (el de por defecto) */
.pl-ficha[data-rango="2"]{--pl-canto:#2e3d59}

/* maestro — el canto se tiñe del color del agente y aparece un filo */
.pl-ficha[data-rango="3"]{
  --pl-canto:color-mix(in srgb,var(--ca,#2e3d59) 34%,#2e3d59);
}
.pl-ficha[data-rango="3"]::after{
  border-color:color-mix(in srgb,var(--ca,#2e3d59) 30%,transparent);
}

/* referencia — doble filo, halo y respiración. Es el único que se mueve
   en toda la página, y por eso se lleva la mirada. */
.pl-ficha[data-rango="4"]{
  --pl-canto:color-mix(in srgb,var(--ca,#2e3d59) 58%,#2e3d59);
  animation:pl-respira 5.5s ease-in-out infinite;
}
.pl-ficha[data-rango="4"]::after{
  border-color:color-mix(in srgb,var(--ca,#2e3d59) 45%,transparent);
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--ca,#2e3d59) 10%,transparent);
}
@keyframes pl-respira{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--ca,#5fb8c9) 22%,transparent))}
}
@media (prefers-reduced-motion:reduce){
  .pl-ficha[data-rango="4"]{animation:none}
}

/* La chapa del rango, arriba del todo. En un juego el nivel se lee antes
   que el nombre; aquí igual. */
.pl-chapa{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 5px;margin-bottom:9px;
  background:color-mix(in srgb,var(--ca,#2e3d59) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ca,#2e3d59) 40%,transparent);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  font:600 10px/1 var(--pl-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ca,var(--pl-tinta-2));
}
.pl-chapa b{font-weight:600;color:var(--pl-tinta);font-size:11px}

/* ── 2 · INFORMACIÓN AL SEÑALAR ───────────────────────────────────────
   Una estadística sin explicación es un número decorativo. Cada una dice
   qué mide Y CÓMO SUBE, que es lo que de verdad quiere saber quien mira.
   Se hace con CSS puro: sin JS no puede fallar ni tardar. */
.pl-tip{position:relative;cursor:help}
.pl-tip__c{
  position:absolute;left:0;bottom:calc(100% + 9px);z-index:60;
  width:max(220px,100%);padding:11px 13px;
  background:#0d1421;border:1px solid var(--pl-canto);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  font:400 13px/1.6 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta-2);text-transform:none;letter-spacing:0;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s,transform .16s;
}
.pl-tip__c b{display:block;color:var(--pl-tinta);font-weight:600;
  font-size:12px;margin-bottom:3px}
.pl-tip__c em{display:block;margin-top:6px;font-style:normal;
  color:var(--ca,var(--pl-vivo));font:500 11.5px/1.5 var(--pl-mono)}
.pl-tip:hover .pl-tip__c,
.pl-tip:focus-visible .pl-tip__c{opacity:1;transform:translateY(0)}

/* ── 3 · REACCIÓN ─────────────────────────────────────────────────────
   La ficha se levanta un pelo y el canto se enciende. Dos píxeles: más
   parece un botón, menos no se nota. */
.pl-ficha{transition:transform .2s ease, filter .2s ease}
.pl-ficha:hover{transform:translateY(-2px)}
.pl-ficha:hover{--pl-canto:color-mix(in srgb,var(--ca,#2e3d59) 62%,#2e3d59)}
@media (prefers-reduced-motion:reduce){
  .pl-ficha:hover{transform:none}
}

/* ── EL GLIFO DE CLASE ────────────────────────────────────────────────
   Un símbolo por oficio, detrás del retrato, muy tenue. En un juego el
   icono de clase se reconoce antes que el nombre del personaje. Va al 7%
   porque su trabajo es que lo notes sin mirarlo. */
.pl-glifo{
  position:absolute;right:22px;bottom:16px;width:132px;height:132px;
  opacity:.07;pointer-events:none;color:var(--ca,var(--pl-tinta));
}
.pl-glifo svg{width:100%;height:100%;display:block}

/* ── EL HUD ───────────────────────────────────────────────────────────
   La banda de estado del jugador. En un juego siempre está: quién eres,
   qué llevas, cuánto falta. Aquí lo mismo, y con lo que de verdad importa
   —cuándo se reúne la casa— en vez de con adornos. */
.pl-hud{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  background:var(--pl-hueco);border:1px solid var(--pl-canto);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  margin:0 0 26px;
}
.pl-hud__c{
  flex:1 1 auto;min-width:128px;padding:13px 18px;
  border-right:1px solid color-mix(in srgb,var(--pl-canto) 60%,transparent);
}
.pl-hud__c:last-child{border-right:0}
.pl-hud__k{
  display:block;font:500 9.5px/1.6 var(--pl-mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--pl-tinta-3);margin-bottom:3px}
.pl-hud__v{
  display:block;font:600 19px/1.15 var(--pl-serif);color:var(--pl-tinta);
  font-variant-numeric:tabular-nums}
.pl-hud__v small{font:500 11px/1 var(--pl-mono);color:var(--pl-tinta-3);
  letter-spacing:.1em;margin-left:5px}
.pl-hud__v--vivo{color:var(--pl-vivo)}
.pl-hud__v--esp{color:var(--pl-espera)}

/* ══════════════════════════════════════════════════════════════════════
   TERCERA PASADA — LO QUE VI EN LAS CAPTURAS Y ESTABA MAL
   ══════════════════════════════════════════════════════════════════════

   Tres cosas, y la primera es la que más pesa:

   1. LA FICHA ERA TODO TEXTO. Una ficha de rol enseña NÚMEROS: eso es lo
      que la hace ficha y no párrafo. Tres tiras de prosa una al lado de
      otra son un folleto por muy troquelado que esté el marco.
   2. EL RETRATO PERDÍA CALIDAD. Un hexágono de 104×118 sobre una imagen
      cuadrada la recorta por los lados Y la estira: se come la cara y se
      ve peor que el círculo de antes. El retrato es lo PRIMERO que se
      mira en un juego; no puede ser lo peor resuelto de la página.
   3. NO HABÍA PROFUNDIDAD. Cartón sin grosor es papel; papel plano es un
      div con borde.
   ────────────────────────────────────────────────────────────────────── */

/* ── EL RETRATO, BIEN ─────────────────────────────────────────────────
   Cuadrado con las esquinas achaflanadas en vez de hexágono alto: el
   recorte es mínimo, la cara se ve entera y la imagen no se estira. Y
   marco de dos filos, que es lo que lo convierte en retrato enmarcado y
   no en una foto recortada. */
.pl-marco{
  --lado:126px;
  position:relative;width:var(--lado);height:var(--lado);flex:none;
}
.pl-marco__f{
  position:absolute;inset:0;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--ca,#2e3d59) 70%,transparent),
    color-mix(in srgb,var(--ca,#2e3d59) 22%,transparent));
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),
    calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.pl-marco__i{
  position:absolute;inset:2px;overflow:hidden;background:#0d1421;
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),
    calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
  display:grid;place-items:center;
}
.pl-marco__i img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;image-rendering:auto;
}
/* la sombra interior del marco: hunde el retrato en la chapa */
.pl-marco__i::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55),
             inset 0 0 0 1px color-mix(in srgb,var(--ca,#2e3d59) 30%,transparent);
}
/* cuatro tornillos en las esquinas del marco */
.pl-marco__t{position:absolute;width:3.5px;height:3.5px;border-radius:50%;
  background:#0b1018;opacity:.7;pointer-events:none}
.pl-marco__t:nth-child(3){top:7px;left:7px}
.pl-marco__t:nth-child(4){top:7px;right:7px}
.pl-marco__t:nth-child(5){bottom:7px;left:7px}
.pl-marco__t:nth-child(6){bottom:7px;right:7px}

/* ── LOS ATRIBUTOS ────────────────────────────────────────────────────
   Esto es lo que faltaba. Cuatro medidas por agente, con su número GRANDE
   y su barra de muescas. Un RPG se lee de un vistazo porque los números
   están donde siempre y son legibles desde lejos. */
.pl-atrs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:color-mix(in srgb,var(--pl-canto) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--pl-canto) 55%,transparent);
  margin:18px 0 0;
}
.pl-atr{background:var(--pl-carton);padding:11px 13px 12px;position:relative}
.pl-atr__k{
  display:block;font:500 9.5px/1.4 var(--pl-mono);letter-spacing:.17em;
  text-transform:uppercase;color:var(--pl-tinta-3);margin-bottom:5px}
.pl-atr__n{
  display:block;font:600 25px/1 var(--pl-serif);color:var(--pl-tinta);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:7px}
.pl-atr__n small{
  font:500 10.5px/1 var(--pl-mono);color:var(--pl-tinta-3);
  letter-spacing:.1em;margin-left:4px}
.pl-atr__b{display:flex;gap:2px}
.pl-atr__b i{
  flex:1;height:5px;
  background:color-mix(in srgb,var(--pl-canto) 60%,transparent);
  clip-path:polygon(1px 0,100% 0,calc(100% - 1px) 100%,0 100%)}
.pl-atr__b i.on{background:var(--ca,var(--pl-vivo))}
/* el que va al máximo se enciende, y solo ese */
.pl-atr--tope .pl-atr__n{color:var(--ca,var(--pl-vivo))}
.pl-atr--tope .pl-atr__b i.on{
  box-shadow:0 0 6px color-mix(in srgb,var(--ca,var(--pl-vivo)) 55%,transparent)}

/* ── PROFUNDIDAD ──────────────────────────────────────────────────────
   El cartón tiene grosor: una sombra proyectada corta y dura (no difusa,
   que eso es de interfaz web) y un filo de luz arriba. */
.pl-ficha{
  box-shadow:0 2px 0 rgba(0,0,0,.34),
             0 6px 18px rgba(0,0,0,.22),
             inset 0 1px 0 rgba(255,255,255,.045);
}
.pl-ficha:hover{
  box-shadow:0 4px 0 rgba(0,0,0,.34),
             0 12px 26px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── LA CINTA, BIEN PUESTA ────────────────────────────────────────────
   En la captura se salía por la esquina. El contenedor tiene que recortar
   y la banda ir más adentro. */
.pl-cinta{width:96px;height:96px}
.pl-cinta span{
  top:16px;right:-34px;width:128px;
  font-size:9px;line-height:1.85;letter-spacing:.16em;
}

/* ── EL GLIFO, DONDE NO ESTORBA ───────────────────────────────────────
   En la captura caía encima del texto de la última tira. Se va al borde
   inferior derecho, más pequeño y más tenue. */
.pl-glifo{right:16px;bottom:12px;width:104px;height:104px;opacity:.055}

/* ── LOS BOTONES ──────────────────────────────────────────────────────
   Troquelados, y se HUNDEN al pulsar. Un botón que no se hunde no
   confirma que lo has pulsado. */
.pl-bt{
  display:inline-flex;align-items:center;gap:8px;padding:10px 15px;
  color:var(--pl-tinta);text-decoration:none;background:transparent;
  border:1px solid color-mix(in srgb,var(--pl-canto) 90%,transparent);
  font:500 10.5px/1 var(--pl-mono);letter-spacing:.13em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition:border-color .18s,background .18s,transform .08s;
}
.pl-bt:hover{border-color:var(--ca);background:color-mix(in srgb,var(--ca) 10%,transparent)}
.pl-bt:active{transform:translateY(1px)}
.pl-bt::before{content:"▸";color:var(--ca);opacity:.8}

/* ── LA RANURA BLOQUEADA ──────────────────────────────────────────────
   En un juego una ranura vacía no es un fallo: es la prueba de que hay
   más, y da más ganas que un número relleno. Aquí además es lo honesto —
   ese dato lo sabe el motor, no la página, y rellenarlo a ojo en una casa
   que presume de registro sería lo peor que se puede hacer. */
.pl-atr--cerrada{opacity:.62}
.pl-atr--cerrada .pl-atr__n{color:var(--pl-tinta-3)}
.pl-atr--cerrada .pl-atr__k::after{content:" ⌧";opacity:.6}
.pl-atr__nota{
  display:block;margin-top:6px;
  font:400 10px/1.4 var(--pl-mono);letter-spacing:.08em;
  color:var(--pl-tinta-3);opacity:.85}
.pl-atr--cerrada .pl-atr__b i{
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--pl-canto) 60%,transparent) 0 2px,
    transparent 2px 4px)}

/* ══════════════════════════════════════════════════════════════════════
   CUARTA PASADA — QUE ESTÉ VIVO
   ══════════════════════════════════════════════════════════════════════

   Lo que separa una maqueta bonita de algo que parece un juego es que
   REACCIONE. No con adornos que se mueven porque sí: con movimiento que
   dice algo cada vez que ocurre.

   Cuatro reglas, y son las que evitan que esto acabe siendo un circo:

     · Nada se mueve solo salvo lo que de verdad está pasando ahora.
     · Todo lo demás se mueve COMO RESPUESTA: al entrar en pantalla, al
       señalar, al pulsar.
     · Cada animación dura menos de medio segundo. Más y estorba.
     · prefers-reduced-motion lo apaga todo. Sin excepciones.
   ────────────────────────────────────────────────────────────────────── */

/* ── LA MATERIALIZACIÓN ───────────────────────────────────────────────
   Las fichas no están: LLEGAN. Entran escalonadas al asomar por la
   pantalla, con el canto encendiéndose primero y el contenido después.
   Es el gesto que convierte una lista en un reparto que se presenta. */
.pl-ficha[data-entra]{
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .42s cubic-bezier(.2,.7,.3,1),
             transform .42s cubic-bezier(.2,.7,.3,1);
}
.pl-ficha[data-entra="ya"]{opacity:1;transform:none}

/* el barrido de encendido: una línea recorre la ficha al aparecer */
.pl-ficha[data-entra="ya"]::before{animation:pl-encender .55s ease-out}
@keyframes pl-encender{
  0%{filter:brightness(3.2)}
  100%{filter:brightness(1)}
}

/* ── LA BARRA DE ESCANEO ──────────────────────────────────────────────
   Al señalar una ficha, una línea de luz la recorre de arriba abajo. Una
   sola vez, no en bucle: en bucle sería un adorno, una vez es un aparato
   leyendo lo que hay debajo. */
.pl-escaneo{
  position:absolute;left:0;right:0;height:64px;top:-70px;z-index:4;
  pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb,var(--ca,#5fb8c9) 13%,transparent) 45%,
    color-mix(in srgb,var(--ca,#5fb8c9) 30%,transparent) 50%,
    color-mix(in srgb,var(--ca,#5fb8c9) 13%,transparent) 55%,
    transparent);
}
.pl-ficha:hover .pl-escaneo{animation:pl-barre .78s ease-out}
@keyframes pl-barre{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(calc(100% + 640px))}
}

/* ── LOS CORCHETES DE PUNTERÍA ────────────────────────────────────────
   Cuatro escuadras en las esquinas que SE SEPARAN al señalar, como el
   visor de un aparato que fija un objetivo. Es el detalle más «futurista»
   de la casa y cuesta cuatro pseudoelementos. */
.pl-mirilla{position:absolute;inset:10px;pointer-events:none;z-index:3}
.pl-mirilla i{
  position:absolute;width:13px;height:13px;
  border:0 solid color-mix(in srgb,var(--ca,#2e3d59) 60%,transparent);
  opacity:0;transition:opacity .22s, transform .28s cubic-bezier(.2,.7,.3,1);
}
.pl-mirilla i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.pl-mirilla i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.pl-mirilla i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.pl-mirilla i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.pl-ficha:hover .pl-mirilla i{opacity:.9}
.pl-ficha:hover .pl-mirilla i:nth-child(1){transform:translate(-5px,-5px)}
.pl-ficha:hover .pl-mirilla i:nth-child(2){transform:translate(5px,-5px)}
.pl-ficha:hover .pl-mirilla i:nth-child(3){transform:translate(-5px,5px)}
.pl-ficha:hover .pl-mirilla i:nth-child(4){transform:translate(5px,5px)}

/* ── EL ANILLO DEL RETRATO ────────────────────────────────────────────
   Un arco que rodea el marco y SE DIBUJA al aparecer, proporcional al
   rango. No es decoración: es el mismo dato de la chapa dicho en forma,
   para que se lea sin leer. */
.pl-anillo{
  position:absolute;inset:-9px;pointer-events:none;
  transform:rotate(-90deg);
}
.pl-anillo circle{
  fill:none;stroke:var(--ca,#2e3d59);stroke-width:1.6;
  stroke-linecap:butt;opacity:.75;
  stroke-dasharray:var(--dash, 0 999);
  transition:stroke-dasharray .9s cubic-bezier(.2,.7,.3,1);
}
.pl-anillo .fondo{
  stroke:color-mix(in srgb,var(--pl-canto) 70%,transparent);
  opacity:.5;stroke-dasharray:none;
}

/* ── LOS NÚMEROS QUE LLEGAN ───────────────────────────────────────────
   Cuentan hacia arriba al aparecer. Medio segundo, y solo la primera vez:
   un número que se recalcula cada vez que pasas por delante es un tic. */
.pl-atr__n[data-cuenta]{font-variant-numeric:tabular-nums}

/* ── EL CANAL DE DATOS ────────────────────────────────────────────────
   Una línea finísima en el borde superior por la que corre un punto de
   luz. Muy tenue: es el latido del aparato, no un anuncio. */
.pl-canal{
  position:absolute;top:0;left:16px;right:16px;height:1px;z-index:2;
  pointer-events:none;overflow:hidden;
}
.pl-canal::after{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--ca,#5fb8c9) 65%,transparent),transparent);
  animation:pl-corre 7s linear infinite;
}
@keyframes pl-corre{
  0%{left:-30%}
  100%{left:100%}
}

/* ── LA REJILLA DE FONDO, VIVA ────────────────────────────────────────
   Papel milimetrado que se desplaza muy despacio. Tan despacio que no se
   ve moverse: se nota que la página no está muerta y no se sabe por qué.
   4 píxeles por minuto. */
.pl-cristal{
  background-image:
    linear-gradient(color-mix(in srgb,var(--pl-canto) 22%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--pl-canto) 22%,transparent) 1px,transparent 1px);
  background-size:38px 38px;
  animation:pl-deriva 240s linear infinite;
}
@keyframes pl-deriva{
  0%{background-position:0 0}
  100%{background-position:38px 38px}
}

/* ── TODO SE APAGA SI LO PIDEN ────────────────────────────────────────
   Sin excepciones y sin discutirlo. */
@media (prefers-reduced-motion:reduce){
  .pl-ficha[data-entra]{opacity:1;transform:none;transition:none}
  .pl-ficha[data-entra="ya"]::before{animation:none}
  .pl-ficha:hover .pl-escaneo{animation:none}
  .pl-canal::after{animation:none;opacity:.35;left:20%}
  .pl-cristal{animation:none}
  .pl-anillo circle{transition:none}
  .pl-mirilla i{transition:opacity .01s}
}

/* ══════════════════════════════════════════════════════════════════════
   EL MÓVIL — QUE NO ES UNA VERSIÓN REDUCIDA, ES OTRA COSA
   ══════════════════════════════════════════════════════════════════════

   Media casa estaba montada sobre :hover, y en un teléfono el hover NO
   EXISTE. No es que se vea peor: es que las explicaciones de cada
   estadística eran INALCANZABLES. El escaneo, los corchetes de puntería
   y los tooltips estaban muertos para quien entra desde el móvil, que es
   por donde entra casi todo el mundo.

   Tres decisiones:
     1. Lo que en escritorio sale al SEÑALAR, en móvil sale al TOCAR.
        No se esconde: cambia de gesto.
     2. La ficha no se «encoge»: se REORDENA. Una rejilla de dos columnas
        estrujada a 360px no es una ficha, es una lista de trozos.
     3. Lo que solo tiene sentido con puntero (puntería, escaneo) se
        apaga entero en vez de dejarse a medias.
   ────────────────────────────────────────────────────────────────────── */

/* ── LAS EXPLICACIONES, TOCABLES ──────────────────────────────────────
   En un aparato sin puntero, el tooltip se abre al tocar. Se marca con
   una señal visible —un punto— porque si no, nadie sabe que hay algo que
   tocar: un secreto que no se anuncia no existe. */
@media (hover:none){
  .pl-tip{cursor:default}
  .pl-tip::after{
    content:"";position:absolute;top:6px;right:6px;
    width:5px;height:5px;border-radius:50%;
    background:var(--ca,var(--pl-vivo));opacity:.55;
  }
  .pl-tip[data-abierto="1"] .pl-tip__c{opacity:1;transform:translateY(0)}
  .pl-tip[data-abierto="1"]::after{opacity:1}
  /* al abrirse ocupa el ancho de la ficha y se coloca DEBAJO: encima
     taparía justo el dato que se está explicando */
  .pl-tip__c{width:auto;left:0;right:0;bottom:auto;top:calc(100% + 7px)}
  /* y lo que solo funciona con puntero se apaga entero */
  .pl-escaneo, .pl-mirilla{display:none}
  .pl-ficha:hover{transform:none}
}

/* ── LA FICHA EN VERTICAL ─────────────────────────────────────────────
   No se encoge: se reordena. El retrato arriba con la chapa y el nombre
   al lado —que es como se lee una ficha en la mano— y todo lo demás
   debajo a una columna. */
@media (max-width:720px){
  .pl-ficha{
    --corte:13px;
    padding:20px 18px 20px 20px;      /* la perforación se va: no cabe */
  }
  .pl-ficha .pl-perf{display:none}
  .pl-remache--ai,.pl-remache--bi{left:8px}
  .pl-remache--ad,.pl-remache--bd{right:8px}
  .pl-cinta{width:74px;height:74px}
  .pl-cinta span{top:12px;right:-30px;width:104px;font-size:8px;letter-spacing:.13em}
  .pl-glifo{width:78px;height:78px;right:10px;bottom:8px;opacity:.045}

  .pl-marco{--lado:88px}
  .pl-placa{font-size:22px;padding:4px 11px 5px}
  .pl-chapa{font-size:9px;padding:3px 8px 4px}

  /* los atributos a dos columnas: cuatro en fila son ilegibles a 360px */
  .pl-atrs{grid-template-columns:1fr 1fr}
  .pl-atr{padding:9px 11px 10px}
  .pl-atr__n{font-size:21px}

  .pl-hud{flex-direction:column;align-items:stretch}
  .pl-hud__c{border-right:0;border-bottom:1px solid
    color-mix(in srgb,var(--pl-canto) 60%,transparent)}
  .pl-hud__c:last-child{border-bottom:0}

  .pl-bt{padding:11px 14px;font-size:10px}
}

/* ── EL PULGAR ────────────────────────────────────────────────────────
   Nada tocable por debajo de 44px de alto. Es la medida de un dedo, y
   saltársela convierte cada toque en una lotería. */
@media (max-width:720px){
  .pl-bt, .pl-tip, .cz-nav__links a{min-height:44px}
  .pl-bt{display:inline-flex;align-items:center}
}

/* ══════════════════════════════════════════════════════════════════════
   EL PERSONAL DE LA CASA — cómo se ve cuando alguien te dice algo
   ══════════════════════════════════════════════════════════════════════
   Abajo a la derecha, del tamaño de una nota, no de un anuncio. Entra
   deslizándose desde el borde: no aparece de golpe encima, que es lo que
   hace odiosas a las ventanas emergentes.
   En el móvil ocupa el ancho y se pega abajo, que es donde llega el
   pulgar.                                                                */
/* (la posición vieja de .cv —abajo a la derecha, suelta— se retiró al
   unificar el eje agéntico: ahora la nota sale del retrato) */
.cv[data-ver="1"]{opacity:1;transform:none}
.cv::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--pl-canto);border-left:2px solid var(--ca);
  clip-path:inherit}

.cv__cab{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.cv__ini{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ca) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--ca) 45%,transparent);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  font:600 17px/1 Fraunces,Georgia,serif;color:var(--ca);
}
.cv__quien{display:flex;flex-direction:column;gap:1px;min-width:0}
.cv__quien b{font:600 15px/1.2 Outfit,ui-sans-serif,system-ui,sans-serif}
.cv__quien i{
  font:500 10px/1.3 "Geist Mono",ui-monospace,monospace;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pl-tinta-3)}
/* la marca de «no lo conocías»: lo que convierte al personal en algo que
   coleccionar sin decir en ningún momento que hay que coleccionarlo */
.cv__nuevo{
  margin-left:auto;flex:none;
  font:600 8.5px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.15em;
  text-transform:uppercase;color:var(--pl-vivo);
  padding:4px 7px;border:1px solid color-mix(in srgb,var(--pl-vivo) 40%,transparent)}

.cv__t{margin:0 0 13px;font-size:14.8px;line-height:1.62;
  color:var(--pl-tinta-2);max-width:none}
.cv__pie{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cv__r{
  background:transparent;color:var(--pl-tinta);
  border:1px solid color-mix(in srgb,var(--ca) 45%,transparent);
  padding:9px 12px;font:500 12.5px/1.3 Outfit,ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;text-align:left;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  transition:background .18s,border-color .18s}
.cv__r:hover{background:color-mix(in srgb,var(--ca) 12%,transparent);border-color:var(--ca)}
.cv__r::before{content:"▸ ";color:var(--ca)}
.cv__x{
  background:transparent;color:var(--pl-tinta-2);border:1px solid var(--pl-canto);
  padding:9px 12px;font:500 12.5px/1.3 Outfit,ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.cv__x:hover{color:var(--pl-tinta);border-color:var(--pl-tinta-3)}
/* el botón de callar va apagado y a la derecha: tiene que estar SIEMPRE
   disponible y no tiene que apetecer más que lo demás */
.cv__mute{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font:400 10.5px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;
  color:var(--pl-tinta-3);opacity:.6;padding:8px 2px}
.cv__mute:hover{opacity:1;color:var(--pl-fallo)}

@media (max-width:720px){
  .cv{right:10px;left:10px;bottom:10px;width:auto;padding:15px 16px 13px}
  .cv__r,.cv__x{min-height:44px;display:inline-flex;align-items:center}
  .cv__mute{min-height:44px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .cv{transition:none;opacity:1;transform:none}
}

/* el contador de personal va debajo del de páginas, más apagado: es un
   descubrimiento lateral, no una tarea */
.cz-rastro--gente{margin-top:9px;padding-top:9px;opacity:.9}
.cz-rastro--gente b{color:var(--pl-tinta)}

/* la marca de «esto pasó de verdad»: distingue lo sellado por el motor de
   lo escrito a mano. Mezclarlos sin decirlo sería la trampa que esta casa
   dice no hacer. */
.cv__real{
  display:block;margin:-6px 0 12px;
  font:400 10.5px/1.5 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;
  color:var(--pl-vivo);opacity:.8}
.cv__real::before{content:"◈ ";opacity:.7}

/* ══════════════════════════════════════════════════════════════════════
   PASE ESTÉTICO SOBRE LO NUEVO
   ══════════════════════════════════════════════════════════════════════
   El dilema y el expediente nacieron con la piel puesta, pero les
   faltaban los detalles que hacen que una página parezca hecha y no
   montada. Cinco cosas, todas pequeñas, todas con motivo.            */

/* ── 1 · LA NUMERACIÓN GRANDE ─────────────────────────────────────────
   «DILEMA 01 de 04» en pequeño se lee como un dato. En grande y al
   margen se lee como el sello de un expediente, que es lo que es. */
.caso__n{
  position:relative;padding-left:0;
}
.caso__n b{
  font-size:15px;letter-spacing:.1em;
}

/* ── 2 · LA LETRA DE LA OPCIÓN, TROQUELADA ───────────────────────────
   Un cuadrado con la A dentro es un formulario. Uno achaflanado con la
   A en monoespaciada es una ficha de opción múltiple de un manual
   técnico, que es el registro que buscamos. */
.op__l{
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}

/* ── 3 · LA OPCIÓN ELEGIDA SE HUNDE ──────────────────────────────────
   Cuando ya has decidido, tu opción y la de la casa dejan de ser
   botones: son constancia. Se hunden un pelo y pierden el brillo de
   arriba, que es lo que las convierte en algo ya ocurrido. */
.op[data-tuya], .op[data-casa]{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.34);
}

/* ── 4 · EL SUBRAYADO DEL CARGO ──────────────────────────────────────
   La senda de cinco escalones necesitaba que el tuyo pesara más sin
   gritar. Un filo abajo, del color del cargo: se ve de reojo. */
.esc[data-tuyo="1"]{
  box-shadow:inset 0 -2px 0 var(--ca,#7ee6a8);
}

/* ── 5 · EL PAPEL DE LOS BLOQUES DE CIERRE ───────────────────────────
   Los bloques que rematan una página —«coincidir no es acertar», «lo
   que la casa te debe»— llevan una trama diagonal finísima. Es el papel
   de los documentos que importan: no se nota mirando, se nota al
   dejarlo de mirar. */
.fin, .promesa, .veredicto{
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.012) 0 1px, transparent 1px 6px);
}

/* ── LA TABLA DE UNA MUESTRA ──────────────────────────────────────────
   Cinco filas dentro de la nota del acompañante. Tiene que leerse como
   una salida de terminal, no como una tabla de web: monoespaciada en los
   números, alineados a la derecha, y sin bordes verticales — las líneas
   verticales en una tabla pequeña la trocean y la hacen ilegible. */
.cv__tabla{margin:2px 0 12px;overflow-x:auto;
  border-top:1px solid var(--pl-canto);border-bottom:1px solid var(--pl-canto)}
.cv__tabla table{width:100%;border-collapse:collapse;font-size:13px}
.cv__tabla th{
  text-align:left;padding:8px 9px 7px;
  font:500 9.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pl-tinta-3);white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--pl-canto) 70%,transparent)}
.cv__tabla td{
  padding:7px 9px;color:var(--pl-tinta-2);vertical-align:top;
  border-bottom:1px dotted color-mix(in srgb,var(--pl-canto) 55%,transparent)}
.cv__tabla tr:last-child td{border-bottom:0}
.cv__tabla td:first-child{color:var(--pl-tinta);max-width:190px}
.cv__tabla td.num{
  font:500 12.5px/1.4 "Geist Mono",ui-monospace,monospace;
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* LA ADVERTENCIA. Va en ámbar y con el signo delante porque tiene que
   verse ANTES que la tabla si alguien lee en diagonal — que es como se
   lee todo. Sin ella la tabla no se pinta. */
.cv__adv{
  margin:0 0 13px;padding:10px 12px;
  background:color-mix(in srgb,var(--pl-espera) 7%,transparent);
  border-left:2px solid color-mix(in srgb,var(--pl-espera) 55%,transparent);
  font-size:13.4px;line-height:1.6;color:var(--pl-tinta-2)}
.cv__adv::before{content:"⚠ ";color:var(--pl-espera)}

/* ── LA TABLA EN MÓVIL: SE DA LA VUELTA ───────────────────────────────
   EN LA CAPTURA DE GERARD ESTO ESTABA ROTO: «Beka European Stock FI»
   partido en tres líneas de dos palabras, la columna de coste —que es
   EL DATO— cortada fuera de la pantalla, y una barra de scroll
   horizontal dentro de una nota de 300px.

   Una tabla de cuatro columnas no cabe en un móvil y no hay ajuste de
   tamaño que lo arregle. Así que en móvil DEJA DE SER UNA TABLA: cada
   fila pasa a ser una ficha con sus etiquetas delante. Ocupa más alto y
   se lee entero, que es lo único que importa. */
@media (max-width:720px){
  .cv__tabla{overflow:visible;border:0;
    border-top:1px solid var(--pl-canto)}
  .cv__tabla table,.cv__tabla tbody,.cv__tabla tr,.cv__tabla td{display:block;width:auto}
  .cv__tabla thead{display:none}       /* los títulos van fila a fila */
  .cv__tabla tr{
    padding:10px 0 11px;
    border-bottom:1px dotted color-mix(in srgb,var(--pl-canto) 55%,transparent)}
  .cv__tabla tr:last-child{border-bottom:0}
  .cv__tabla td{
    border:0;padding:1px 0;text-align:left;max-width:none;white-space:normal}
  /* la PRIMERA celda es el nombre: en grande y entero */
  .cv__tabla td:first-child{
    font:500 14px/1.4 Outfit,ui-sans-serif,system-ui,sans-serif;
    color:var(--pl-tinta);margin-bottom:3px}
  /* las demás llevan su etiqueta delante, sacada del propio encabezado */
  .cv__tabla td:not(:first-child){
    display:flex;justify-content:space-between;gap:12px;align-items:baseline;
    font:500 12.5px/1.5 "Geist Mono",ui-monospace,monospace;
    color:var(--pl-tinta-2)}
  .cv__tabla td[data-k]::before{
    content:attr(data-k);flex:none;
    font:500 9px/1.5 "Geist Mono",ui-monospace,monospace;letter-spacing:.13em;
    text-transform:uppercase;color:var(--pl-tinta-3)}
  .cv__tabla td.num{text-align:right}
}

/* ══════════════════════════════════════════════════════════════════════
   EL ACABADO — lo que se nota cuando falta y nadie sabe nombrar
   ══════════════════════════════════════════════════════════════════════ */

/* ── LA SELECCIÓN ─────────────────────────────────────────────────────
   El azul del sistema encima de esta paleta canta muchísimo. Y hay una
   razón más: en un sitio donde se copia y se pega —cifras, nombres de
   fondo— la selección se ve mucho más de lo normal. */
::selection{background:color-mix(in srgb,var(--pl-vivo) 30%,transparent);
  color:var(--pl-tinta)}

/* ── LA BARRA DE DESPLAZAMIENTO ───────────────────────────────────────
   Una barra blanca de sistema en una página oscura es el detalle que
   delata que se ha hecho un tema encima de una web, y no una web. */
*{scrollbar-width:thin;scrollbar-color:var(--pl-canto) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--pl-canto);border:3px solid transparent;
  background-clip:content-box;border-radius:6px}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--pl-canto) 60%,var(--pl-tinta-3));
  background-clip:content-box}

/* ── EL FOCO ──────────────────────────────────────────────────────────
   Uno solo para toda la casa, en fósforo, con separación. Quien navega
   con teclado tiene que ver dónde está sin adivinarlo. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline:2px solid var(--pl-vivo);outline-offset:3px;border-radius:1px}

/* ── EL DESPLAZAMIENTO ────────────────────────────────────────────────
   Suave, salvo que pidan lo contrario. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── LOS NÚMEROS, SIEMPRE TABULARES ───────────────────────────────────
   Que las cifras de una columna se alineen no es capricho: sin esto, un
   1 ocupa menos que un 8 y las columnas bailan. En una casa que enseña
   tablas es de lo primero que se ve. */
:where(td, th, .num, [class*="__n"], [class*="stat"], time){
  font-variant-numeric:tabular-nums}

/* ── EL PAPEL ─────────────────────────────────────────────────────────
   ESTO ES LO MÁS DE GESTORA QUE TIENE LA CASA Y CASI NADIE LO HACE:
   si alguien imprime una página o la guarda en PDF, sale como un
   DOCUMENTO. Fondo blanco, tinta negra, sin adornos, con encabezado y
   con la dirección de cada enlace escrita al lado — que es lo que hace
   que un papel siga sirviendo cuando ya no tienes la pantalla delante.

   Una gestora imprime. Sus clientes imprimen. Que salga un cuadrado
   negro con letras grises es lo que pasa cuando nadie lo ha probado. */
@media print{
  *{background:#fff !important;color:#000 !important;
    box-shadow:none !important;text-shadow:none !important;
    clip-path:none !important;animation:none !important}
  body{font:400 11pt/1.5 Georgia,"Times New Roman",serif}
  .cz-nav, .cz-pie, .cz-rastro, .cv, .pl-glifo, .pl-mirilla, .pl-escaneo,
  .pl-canal, .pl-perf, .pl-remache, .pl-cinta, .pl-hud, .nav, .pl-bt{
    display:none !important}
  .pl-ficha, .exp, .caso, .rito, .ficha, .fin{
    border:1px solid #999 !important;padding:14pt !important;
    margin:0 0 12pt !important;break-inside:avoid}
  h1, h2, h3{font-family:Georgia,serif;break-after:avoid}
  h1{font-size:19pt} h2{font-size:14pt} h3{font-size:12pt}
  /* la dirección de cada enlace, al lado */
  a[href^="/"]::after{content:" (bquantagents.com" attr(href) ")";
    font-size:8pt;color:#555 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";
    font-size:8pt;color:#555 !important}
  /* el encabezado del documento */
  main::before{
    content:"BQUANT AGENTS · documento impreso desde bquantagents.com";
    display:block;font:400 8pt/1.4 "Courier New",monospace;
    letter-spacing:.1em;text-transform:uppercase;color:#666 !important;
    border-bottom:1px solid #999;padding-bottom:6pt;margin-bottom:14pt}
  table{border-collapse:collapse;width:100%}
  th, td{border:1px solid #bbb !important;padding:4pt 6pt}
  @page{margin:16mm}
}

/* ── DETALLES DE LETRA ────────────────────────────────────────────────
   Cosas que nadie ve y todo el mundo nota. */
:where(body){
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-text-size-adjust:100%;   /* el móvil no reescala solo */
}
/* las citas entre comillas españolas se separan un pelo del texto */
:where(blockquote, .cita, .lema){quotes:"«" "»" "\\201C" "\\201D"}
/* nada de subrayado a media palabra: el subrayado esquiva los rasgos
   descendentes, que es lo que separa un enlace legible de uno tachado */
a{text-underline-offset:.18em;text-decoration-skip-ink:auto}

/* ── LOS AVISOS ───────────────────────────────────────────────────────
   Abajo a la IZQUIERDA, lejos del acompañante que vive a la derecha. Si
   los dos salieran del mismo lado se taparían justo cuando más cosas
   están pasando.
   Entran deslizándose desde el borde y se van solos. No tienen botón de
   cerrar a propósito: un aviso que hay que cerrar es una tarea. */
/* LOS AVISOS, AL MISMO EJE. Estaban abajo a la izquierda, en la esquina
   contraria a todo lo demás. Ahora salen bajo la columna de agentes,
   porque son de lo mismo: alguien se ha unido, has cambiado de sitio en
   la casa. Lo agéntico entero ocupa UNA franja de la pantalla. */
.av{
  position:fixed;right:14px;bottom:26px;z-index:9992;
  display:flex;align-items:center;gap:12px;
  max-width:min(340px,calc(100vw - 44px));
  padding:13px 17px 13px 14px;background:#161d2b;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,
    11px 100%,0 calc(100% - 11px));
  box-shadow:0 3px 0 rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateX(16px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.7,.3,1);
}
.av[data-ver="1"]{opacity:1;transform:none}
.av::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--pl-canto);border-left:2px solid var(--av,var(--pl-vivo));
  clip-path:inherit}

.av__m{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  color:var(--av,var(--pl-vivo));font-size:15px;line-height:1;
  border:1px solid color-mix(in srgb,var(--av,var(--pl-vivo)) 40%,transparent);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.av__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.av__t b{font:600 14.4px/1.35 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta)}
.av__t i{font:400 11.5px/1.4 "Geist Mono",ui-monospace,monospace;
  font-style:normal;letter-spacing:.04em;color:var(--pl-tinta-3)}

/* tres tonos, y cada uno significa algo distinto:
   gente = has conocido a alguien · acto = has hecho algo · cargo = has
   cambiado de sitio en la casa. El último es el único que se destaca. */
.av[data-tono="gente"]{--av:#8fb8e8}
.av[data-tono="acto"]{--av:#e8b84b}
.av[data-tono="cargo"]{--av:#7ee6a8}
.av[data-tono="cargo"] .av__m{
  box-shadow:0 0 12px color-mix(in srgb,var(--pl-vivo) 30%,transparent)}

@media (max-width:720px){
  /* en el móvil el acompañante ocupa el ancho abajo, así que el aviso
     sube por encima de él en vez de pelearse por el sitio */
  .av{left:10px;right:10px;bottom:auto;top:74px;max-width:none;
    transform:translateY(-12px)}   /* en móvil arriba: abajo está la columna */
  .av[data-ver="1"]{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .av{transition:opacity .12s ease}
  .av[data-ver="1"]{transform:none}
}

/* ── EL CRUCE ENTRE PÁGINAS ───────────────────────────────────────────
   Un fundido corto, con la entrante subiendo un pelo. Corto a propósito:
   250 ms se siente como fluidez, 500 se siente como esperar. */
@view-transition{navigation:auto}
::view-transition-old(root){
  animation:cz-sale .17s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){
  animation:cz-entra .25s cubic-bezier(0,0,.2,1) both}
@keyframes cz-sale{to{opacity:0}}
@keyframes cz-entra{from{opacity:0;transform:translateY(6px)}}
/* la barra y el pie NO se cruzan: son lo único que se queda quieto entre
   páginas, y que se quede quieto es lo que da la sensación de que estás
   dentro del mismo sitio y no saltando entre webs. */
.cz-nav{view-transition-name:cz-barra}
::view-transition-group(cz-barra){animation-duration:.01s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ÚLTIMO PASE: LAS CIFRAS
   ══════════════════════════════════════════════════════════════════════
   En una casa que enseña números, los números son la tipografía que más
   importa. Y estaban tratados como texto normal.                       */

/* ── LA CIFRA GRANDE ──────────────────────────────────────────────────
   Las de «lo que no cuadra» y las de los atributos. Tres cosas:
     · ligaduras y kerning apagados en cifras — en las fuentes de texto,
       las ligaduras se comen la separación entre dígitos
     · cero rasgado si la fuente lo tiene: distingue el 0 de la O, que en
       una tabla de ISINs es la diferencia entre buscar bien y no
     · y un pelo de espacio negativo entre letras, porque las cifras
       grandes en serif salen sueltas                                    */
:where(.cifra__n, .pl-atr__n, .m__n, .pl-hud__v, .av__t b){
  font-feature-settings:"tnum" 1, "zero" 1, "liga" 0, "calt" 0;
  letter-spacing:-.022em;
}

/* ── EL SIGNO ─────────────────────────────────────────────────────────
   Un menos delante de una cifra tiene que verse ANTES que la cifra: en
   una tabla de rentabilidades, el signo ES el dato. Se colorea sin
   colorear el número entero, que sería gritar. */
.neg{color:var(--pl-fallo)}
.pos{color:var(--pl-vivo)}
.cifra__n .neg, .pl-atr__n .neg{opacity:.85}

/* ── LA UNIDAD ────────────────────────────────────────────────────────
   «21,4 pp» — el «pp» no es parte del número y no debe pesar como él.
   Baja de tamaño, sube de gris y se separa un pelo. */
:where(.cifra__n) small, :where(.cifra__n) span[data-u]{
  font-size:.52em;opacity:.72;margin-left:.14em;letter-spacing:.02em;
  font-weight:400;
}

/* ── LA COLUMNA DE CIFRAS ─────────────────────────────────────────────
   En una tabla, los números a la derecha y con el mismo ancho de dígito.
   Ya estaba en las muestras; ahora en cualquier tabla de la casa. */
:where(table) :where(td, th):has(+ :where(td, th)):last-of-type,
:where(table) td[data-num], :where(table) th[data-num]{text-align:right}

/* ── EL RANGO ─────────────────────────────────────────────────────────
   «16,3 frente a 24,7»: el «frente a» es una conjunción, no un dato.
   Cuando dos cifras se comparan, lo que las une tiene que desaparecer. */
.cifra__n span{font-size:.5em;opacity:.62;font-weight:400;
  letter-spacing:.04em;margin:0 .12em}

/* ── LA VIUDA ─────────────────────────────────────────────────────────
   Un número no puede quedarse solo al final de una línea separado de su
   unidad. Es el detalle que más se nota leyendo y que menos se arregla. */
:where(.cifra__q, .caso p, .cv__t, .cv__adv){text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════════════
   EL RUIDO DE FONDO — detalles que no piden nada y hacen sitio
   ══════════════════════════════════════════════════════════════════════ */

/* ── LAS LUCES ────────────────────────────────────────────────────────
   Fuera de horario la casa se ve un punto más apagada. Literalmente, y
   sin decir nada: nadie va a leer un cartel de «son las tres de la
   mañana», pero el ojo nota que hay menos luz.
   Lo pone casa.js en el <html> mirando el reloj. Es tan poco como un 4%
   de saturación y un 3% de brillo — si se nota como efecto, es
   demasiado. */
html[data-luz="noche"]{filter:saturate(.94) brightness(.97)}
html[data-luz="finde"]{filter:saturate(.90)}
@media (prefers-reduced-motion:reduce){html[data-luz]{filter:none}}
@media print{html[data-luz]{filter:none}}

/* ── EL SELLO DEL DÍA ─────────────────────────────────────────────────
   La huella de la jornada, abajo del todo y en pequeñísimo. No significa
   nada para quien no sepa; quien sepa entiende que ahí hay una cadena.
   Es el detalle que separa una web que dice que sella de una que sella. */
.pl-sello{
  position:fixed;left:14px;bottom:10px;z-index:2;pointer-events:none;
  font:400 9px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.16em;
  color:color-mix(in srgb,var(--pl-tinta-3) 40%,transparent);
  user-select:text;pointer-events:auto}
.pl-sello b{font-weight:400;color:color-mix(in srgb,var(--pl-espera) 45%,transparent)}
@media (max-width:720px){.pl-sello{display:none}}
@media print{.pl-sello{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   EL SÉQUITO — los que te siguen
   ══════════════════════════════════════════════════════════════════════
   REDONDOS Y CON SU FOTO. Lo probé achaflanado y Gerard prefiere las
   redonditas de siempre — así que redondas se quedan y no se vuelve
   sobre ello.

   Y TIENEN QUE SENTIRSE VIVOS, que era la queja de fondo: una fila de
   fotos quietas no acompaña a nadie. Tres movimientos, los tres por
   debajo del umbral de «esto es una animación»:

     1. RESPIRAN. Una escala de ±1,5% en ciclos largos y DESFASADOS entre
        ellos. Si respiraran a la vez sería un latido de interfaz; con el
        desfase parece un grupo de personas quietas, que nunca están
        quietas del todo.
     2. MIRAN AL RATÓN. El retrato se desplaza 3px hacia donde está el
        cursor. Tres píxeles no se ven; lo que se nota es que la columna
        «atiende».
     3. TE SIGUEN AL BAJAR. Al hacer scroll se retrasan un pelo y luego
        se recolocan, como quien camina detrás de ti.                  */

.sq{
  position:fixed;right:15px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:9px;align-items:center;
  pointer-events:none;
  /* el retardo al seguirte: la columna llega un poco después que tú */
  transition:transform .5s cubic-bezier(.22,.7,.25,1);
}
.sq[data-vacio]{display:none}
.sq[data-baja]{transform:translateY(calc(-50% + 7px))}
.sq[data-sube]{transform:translateY(calc(-50% - 7px))}

.sq__q{
  pointer-events:auto;position:relative;display:block;
  width:38px;height:38px;flex:none;
  border-radius:50%;                     /* redondas, como deben ser */
  background:#141b29;overflow:hidden;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c,#8d99b0) 38%,transparent),
             0 2px 8px rgba(0,0,0,.34);
  filter:saturate(.78) brightness(.86);
  transition:filter .32s ease,box-shadow .32s ease,transform .2s cubic-bezier(.2,.7,.3,1);
  /* RESPIRAN, cada uno a su ritmo: --i es su posición en la columna */
  animation:sq-respira 5.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.3s);
}
.sq__q img{width:100%;height:100%;object-fit:cover;display:block;
  /* MIRAN AL RATÓN: el desplazamiento va en la foto, no en el marco, así
     que el círculo no se mueve y la cara sí. Es el mismo truco que usan
     los retratos que «te siguen con la vista». */
  transform:translate(calc(var(--mx,0) * 3px), calc(var(--my,0) * 3px));
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
  will-change:transform}
.sq__ini{position:absolute;inset:0;display:none;place-items:center;
  font:600 15px/1 Fraunces,Georgia,serif;color:var(--c,#8d99b0)}
.sq__q[data-sinfoto] .sq__ini{display:grid}

@keyframes sq-respira{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}}

.sq__q:hover, .sq__q:focus-visible{
  filter:none;transform:translateX(-4px) scale(1.14);animation-play-state:paused;
  box-shadow:0 0 0 2px var(--c,#8d99b0),
             0 0 20px color-mix(in srgb,var(--c,#8d99b0) 34%,transparent)}
.sq__q:hover img{transform:none}

/* EL QUE ESTÁ HABLANDO: se enciende del todo y le late un anillo de su
   color. Es lo que ata la columna con la nota del acompañante. */
.sq__q[data-habla]{
  filter:none;animation:sq-habla 1.9s ease-in-out infinite}
@keyframes sq-habla{
  0%,100%{box-shadow:0 0 0 2px var(--c,#8d99b0),
                     0 0 0 0 color-mix(in srgb,var(--c,#8d99b0) 40%,transparent)}
  55%{box-shadow:0 0 0 2px var(--c,#8d99b0),
                 0 0 0 7px color-mix(in srgb,var(--c,#8d99b0) 0%,transparent)}}

/* EL QUE ACABA DE UNIRSE llega desde el borde. Una vez y sin rebote. */
.sq__q[data-nuevo]{animation:sq-entra .7s cubic-bezier(.2,.75,.3,1) both}
@keyframes sq-entra{
  from{opacity:0;transform:translateX(26px) scale(.8)}
  to{opacity:1;transform:none}}

.sq__n{
  pointer-events:none;margin-top:4px;
  font:500 9px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;
  color:color-mix(in srgb,var(--pl-tinta-3) 60%,transparent)}

@media (max-width:720px){
  .sq{top:auto;bottom:9px;right:auto;left:9px;transform:none;
    flex-direction:row;gap:6px}
  .sq[data-baja],.sq[data-sube]{transform:none}
  .sq__q{width:29px;height:29px}
  .sq__n{margin:0 0 0 4px;align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .sq,.sq__q,.sq__q img{transition:none;animation:none}
  .sq__q[data-nuevo],.sq__q[data-habla]{animation:none}
  .sq__q img{transform:none}
}
@media print{.sq{display:none}}

/* ── FORMAL, INFORMAL Y ESCRITO ───────────────────────────────────────
   Cada cosa que dice la casa lleva su registro, y se ve en el filo
   izquierdo de la nota. No hay leyenda ni etiqueta: quien pase un rato
   aquí aprenderá solo que el filo ámbar es una cifra y el gris es de
   pasillo, y a quien no le importe no le molesta.

     FORMAL    filo ámbar y sólido — sale del libro o de la base
     INFORMAL  filo punteado y apagado — es del pasillo
     ESCRITO   filo neutro — escrito a mano y revisado             */
.cv[data-reg="formal"]::before{border-left:2px solid var(--pl-espera)}
.cv[data-reg="informal"]::before{
  border-left:2px dotted color-mix(in srgb,var(--pl-tinta-3) 60%,transparent)}
.cv[data-reg="escrito"]::before{
  border-left:2px solid color-mix(in srgb,var(--pl-canto) 90%,var(--pl-tinta-3))}

/* y lo FORMAL lleva la letra un punto más asentada: cuando alguien te
   está dando una cifra, la tipografía no debería sonar igual que cuando
   te cuenta que lleva tres días atascado */
.cv[data-reg="formal"] .cv__t{letter-spacing:-.002em}
.cv[data-reg="informal"] .cv__t{font-style:normal;opacity:.94}

/* ══════════════════════════════════════════════════════════════════════
   LO AGÉNTICO, EN UN SOLO SITIO
   ══════════════════════════════════════════════════════════════════════
   EL PROBLEMA QUE ARREGLA ESTO, dicho por Gerard: «la parte agéntica
   parece algo caótica». Y lo era, de forma medible: la nota salía abajo
   a la derecha, los avisos abajo a la izquierda y el séquito arriba a la
   derecha. TRES ESQUINAS PARA LA MISMA COSA — y nada indicaba que
   tuvieran algo que ver entre sí.

   AHORA HAY UN SOLO EJE: la columna de agentes, a la derecha. Todo lo
   que dice la casa sale DE UN RETRATO CONCRETO, a su altura, con un
   piquito que apunta a él.

   El efecto es inmediato: dejas de tener cinco cosas sueltas y pasas a
   tener un grupo de gente a un lado de la pantalla, de los cuales uno te
   está hablando. Que es lo que se pretendía desde el principio.        */

.cv{
  position:fixed;z-index:9990;
  right:66px;                        /* justo a la izquierda de la columna */
  top:var(--cv-top,50%);
  transform:translateY(-50%);
  width:min(370px,calc(100vw - 96px));
  max-height:min(74vh,620px);overflow-y:auto;overscroll-behavior:contain;
  padding:17px 19px 14px;background:#161d2b;
  box-shadow:0 3px 0 rgba(0,0,0,.36),0 16px 40px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;pointer-events:none;
  transition:opacity .34s ease,transform .4s cubic-bezier(.2,.7,.3,1),
             top .45s cubic-bezier(.2,.7,.3,1);
}
.cv[data-ver="1"]{opacity:1;pointer-events:auto}
.cv::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--pl-canto);
  border-left:2px solid var(--ca,var(--pl-espera))}

/* EL PIQUITO que apunta al retrato. Es lo único que hace falta para que
   se entienda de un vistazo quién está hablando: sin él, la nota es un
   cartel; con él, es alguien diciéndote algo. */
.cv::after{
  content:"";position:absolute;right:-7px;top:50%;
  width:12px;height:12px;transform:translateY(-50%) rotate(45deg);
  background:#161d2b;
  border-right:1px solid var(--pl-canto);border-top:1px solid var(--pl-canto)}

/* entra desde el lado del retrato, no desde abajo: viene DE él */
.cv{transform:translateY(-50%) translateX(14px)}
.cv[data-ver="1"]{transform:translateY(-50%)}

@media (max-width:720px){
  /* en móvil la columna está abajo, así que la nota va encima y a lo
     ancho — el piquito se gira para apuntar hacia abajo */
  .cv{right:9px;left:9px;top:auto;bottom:48px;width:auto;max-height:66vh;
    transform:translateY(10px)}
  .cv[data-ver="1"]{transform:none}
  .cv::after{right:26px;top:auto;bottom:-7px;
    border:0;border-left:1px solid var(--pl-canto);
    border-bottom:1px solid var(--pl-canto)}
}
@media (prefers-reduced-motion:reduce){
  .cv{transition:opacity .15s ease}
  .cv,.cv[data-ver="1"]{transform:translateY(-50%)}
}

/* ══════════════════════════════════════════════════════════════════════
   EL FONDO — que la casa tenga suelo
   ══════════════════════════════════════════════════════════════════════
   Hasta ahora el fondo era un color plano. Un color plano no es
   neutralidad: es ausencia, y se nota como se nota una habitación sin
   muebles.

   CUATRO CAPAS, de menos a más visible, y NINGUNA se mueve. El
   movimiento ya lo ponen los agentes; si además se moviera el fondo,
   competirían. Un fondo bueno es el que no puedes describir de memoria
   aunque lleves media hora mirándolo.                                  */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    /* 1 · LA LUZ. Una claridad muy leve arriba a la izquierda, como una
       ventana fuera de cuadro. Es lo que hace que la pantalla tenga
       ARRIBA y ABAJO en vez de ser una superficie uniforme. */
    radial-gradient(1100px 620px at 16% -8%,
      color-mix(in srgb,var(--pl-espera) 5%,transparent) 0%, transparent 62%),
    /* 2 · LA PROFUNDIDAD. Las esquinas de abajo, un punto más oscuras.
       Sin esto la página flota; con esto se apoya en algo. */
    radial-gradient(1400px 900px at 50% 118%,
      rgba(0,0,0,.30) 0%, transparent 66%),
    /* 3 · LA REJILLA TÉCNICA. Papel milimetrado de sala de máquinas: una
       trama de 44px casi invisible y otra de 11px aún menos. Se ve al
       mirar de cerca y no se ve al leer, que es exactamente el punto. */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.016) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.016) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.007) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.007) 0 1px, transparent 1px 11px);
}

/* 4 · EL GRANO. Ruido finísimo por encima de todo. Es lo que quita a una
   pantalla el aspecto de PANTALLA: sin grano, los degradados salen a
   bandas y todo parece plástico. Con él, parece material.
   Va en un SVG embebido, así que no es una imagen que descargar. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
</filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* LAS MARCAS DE REGISTRO. Cuatro escuadras en las esquinas, del tamaño
   de una uña. Son las marcas de corte de una imprenta — el detalle que
   dice «esto es un documento» sin decir nada. No se ven en móvil: ahí el
   borde de la pantalla ya es el borde. */
.pl-cristal::before,.pl-cristal::after{--esq:16px}
@media (min-width:900px){
  body{position:relative}
  .pl-marcas{position:fixed;inset:15px;z-index:-1;pointer-events:none}
  .pl-marcas i{position:absolute;width:15px;height:15px;
    border:0 solid color-mix(in srgb,var(--pl-canto) 85%,transparent)}
  .pl-marcas i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
  .pl-marcas i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
  .pl-marcas i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
  .pl-marcas i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
}
@media (max-width:899px){.pl-marcas{display:none}}
@media print{body::before,body::after,.pl-marcas{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   LA NOTA, CON CARA — más rolera
   ══════════════════════════════════════════════════════════════════════
   Gerard: «las fichas de los agentes deben estar más chulas, más
   roleras». El problema era que la nota tenía el NOMBRE del agente pero
   no su CARA: leías «MERKLE» en letra pequeña y no había nadie ahí.

   Ahora lleva su retrato, del mismo sitio que el séquito. Y el retrato
   es lo que convierte una caja de texto en alguien hablando.          */
.cv__cab{
  display:flex;align-items:center;gap:11px;margin-bottom:11px;
  padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb,var(--pl-canto) 75%,transparent)}
.cv__cara{
  flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:#0f1420;position:relative;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ca,#8d99b0) 55%,transparent),
             0 0 16px color-mix(in srgb,var(--ca,#8d99b0) 18%,transparent)}
.cv__cara img{width:100%;height:100%;object-fit:cover;display:block}
.cv__cara b{position:absolute;inset:0;display:none;place-items:center;
  font:600 17px/1 Fraunces,Georgia,serif;color:var(--ca,#8d99b0)}
.cv__cara[data-sinfoto] b{display:grid}
.cv__cara[data-sinfoto] img{display:none}

/* EL RANGO, en la esquina del retrato: un punto de color con su clase.
   Es el detalle de ficha de personaje que faltaba — de un vistazo sabes
   si quien habla delibera o ejecuta. */
.cv__div{
  position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;
  border-radius:50%;background:#0f1420;display:grid;place-items:center;
  box-shadow:0 0 0 1.5px var(--ca,#8d99b0);
  font:600 8px/1 "Geist Mono",ui-monospace,monospace;color:var(--ca,#8d99b0)}

/* la nota entera con un halo del color del agente: se nota QUIÉN habla
   antes de leer una palabra */
.cv[data-ver="1"]{
  box-shadow:0 3px 0 rgba(0,0,0,.36),0 16px 40px rgba(0,0,0,.44),
    0 0 44px -12px color-mix(in srgb,var(--ca,transparent) 30%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05)}

/* ══════════════════════════════════════════════════════════════════════
   EL TRADUCTOR — que se entienda lo que pone
   ══════════════════════════════════════════════════════════════════════
   El término se queda tal cual, con un subrayado de puntos debajo. Al
   pasar por encima sale lo que le dirías a alguien en un bar.

   EL SUBRAYADO ES DE PUNTOS Y NO DE LÍNEA a propósito: una línea
   continua se lee como enlace y la gente hace clic esperando ir a otro
   sitio. Los puntos dicen «aquí hay algo» sin prometer un viaje.       */
.tr{
  position:relative;cursor:help;
  border-bottom:1px dotted color-mix(in srgb,var(--pl-espera) 55%,transparent);
  transition:border-color .2s ease,color .2s ease}
.tr:hover,.tr:focus-visible{
  border-bottom-color:var(--pl-espera);color:var(--pl-tinta)}

.tr__t{
  position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:min(300px,74vw);
  padding:11px 13px;background:#1b2435;
  font:400 13.2px/1.6 Outfit,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--pl-tinta-2);
  box-shadow:0 2px 0 rgba(0,0,0,.34),0 12px 30px rgba(0,0,0,.42);
  border:1px solid var(--pl-canto);border-top:2px solid var(--pl-espera);
  opacity:0;visibility:hidden;pointer-events:none;z-index:9995;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.3,1),
             visibility .2s}
.tr:hover .tr__t,.tr:focus-visible .tr__t,
.tr[aria-expanded="true"] .tr__t{
  opacity:1;visibility:visible;transform:translateX(-50%)}
/* el piquito, para que se vea de qué palabra sale */
.tr__t::after{
  content:"";position:absolute;left:50%;bottom:-6px;
  width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:#1b2435;
  border-right:1px solid var(--pl-canto);border-bottom:1px solid var(--pl-canto)}

/* cerca del borde no se sale: se pega al lado que quede */
.tr:first-child .tr__t{left:0;transform:translateX(0) translateY(4px)}
.tr:first-child:hover .tr__t{transform:translateX(0)}
.tr:first-child .tr__t::after{left:22px}

@media (max-width:720px){
  .tr__t{position:fixed;left:10px;right:10px;bottom:auto;top:auto;
    max-width:none;width:auto;transform:none;margin-top:8px}
  .tr[aria-expanded="true"] .tr__t{transform:none}
  .tr__t::after{display:none}
  .tr{min-height:auto}
}
@media (prefers-reduced-motion:reduce){.tr__t{transition:opacity .1s ease}}
@media print{
  .tr{border-bottom:0}
  .tr__t{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   MÁS FONDO — la casa vista de lejos
   ══════════════════════════════════════════════════════════════════════
   Al fondo de cuatro capas le faltaba lo que hace que un sitio parezca
   grande: algo MÁS ALLÁ. Dos añadidos, los dos detrás de todo y los dos
   quietos.                                                             */

/* LAS COORDENADAS. Números de referencia en los márgenes, como los de un
   plano técnico o un mapa. No indican nada —no hay nada que indicar— y
   ese es justamente el detalle: un plano de verdad los lleva porque
   alguien tuvo que medir algo alguna vez. */
.pl-coord{
  position:fixed;z-index:-1;pointer-events:none;user-select:none;
  font:400 8.5px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.22em;
  color:color-mix(in srgb,var(--pl-tinta-3) 22%,transparent)}
.pl-coord--i{left:6px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl}
.pl-coord--d{right:6px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl}
@media (max-width:1100px){.pl-coord{display:none}}

/* LA LEJANÍA. Una segunda capa de puntos, más pequeños y más apagados
   que la principal, desplazada. Es el truco más viejo del dibujo: dos
   planos a distinta densidad y el ojo lee PROFUNDIDAD sin que nadie se
   lo diga. */
body::before{
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
}
.pl-lejos{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb,var(--pl-tinta-3) 26%,transparent) .6px, transparent .7px),
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb,var(--pl-espera) 14%,transparent) .5px, transparent .6px);
  background-size:96px 96px, 61px 61px;
  background-position:0 0, 23px 37px;
  opacity:.5}
@media print{.pl-coord,.pl-lejos{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   LAS ANIMACIONES QUE FALTABAN — solo donde algo PASA
   ══════════════════════════════════════════════════════════════════════
   No son adorno: cada una marca un momento. Ninguna se repite en bucle,
   así que no tocan el techo de permanentes.                            */

/* AL LLEGAR A UNA PÁGINA, lo importante entra escalonado. Es lo que hace
   que una página se sienta ABIERTA en vez de aparecida. 40 ms entre
   piezas: por debajo no se percibe orden, por encima se percibe espera. */
@media (prefers-reduced-motion:no-preference){
  [data-casa] main > *{animation:cz-sube .5s cubic-bezier(.2,.75,.3,1) both}
  [data-casa] main > *:nth-child(1){animation-delay:.02s}
  [data-casa] main > *:nth-child(2){animation-delay:.06s}
  [data-casa] main > *:nth-child(3){animation-delay:.10s}
  [data-casa] main > *:nth-child(4){animation-delay:.14s}
  [data-casa] main > *:nth-child(5){animation-delay:.18s}
  [data-casa] main > *:nth-child(n+6){animation-delay:.22s}
}
@keyframes cz-sube{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* UNA CIFRA QUE CAMBIA parpadea una vez en ámbar. En una casa que
   publica números, que un número cambie ES la noticia. */
.pl-cambia{animation:cz-cambia 1.5s ease-out 1}
@keyframes cz-cambia{
  0%{color:var(--pl-espera);text-shadow:0 0 14px color-mix(in srgb,var(--pl-espera) 55%,transparent)}
  100%{color:inherit;text-shadow:none}}

/* AL PULSAR algo importante, un pulso corto desde el punto tocado. Dura
   lo que dura un clic y no deja rastro. */
.pl-bt{position:relative;overflow:hidden}
.pl-bt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--pl-espera) 26%,transparent) 0%, transparent 62%);
  opacity:0;transform:scale(.3)}
.pl-bt:active::after{animation:cz-pulso .42s ease-out 1}
@keyframes cz-pulso{
  0%{opacity:.85;transform:scale(.3)}
  100%{opacity:0;transform:scale(1.9)}}

/* ══════════════════════════════════════════════════════════════════════
   EL RÓTULO HUMANIZADO — que lo visual mande
   ══════════════════════════════════════════════════════════════════════
   Tres piezas y una jerarquía muy clara:

     ◈  QUIÉN ACIERTA DE VERDAD     ← lo que se lee primero, y grande
        posteriors de skill          ← el término técnico, pequeño

   El GLIFO va delante porque en un vistazo la forma llega antes que la
   palabra: eso es lo de «que prime lo visual». Un ojo para lo que mira,
   una balanza para lo que mide, un candado para lo que se sella.      */
.hm{
  display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  position:relative;letter-spacing:0;text-transform:none}
.hm__g{
  width:13px;height:13px;flex:none;align-self:center;
  color:color-mix(in srgb,var(--pl-espera) 78%,transparent);
  opacity:.9}
.hm__t{
  font:500 12px/1.35 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in srgb,var(--pl-tinta) 92%,transparent)}
/* EL TÉRMINO TÉCNICO. Pequeño, en cursiva y apagado — pero AHÍ. Quien
   sabe lo sigue viendo, y quien busque «vintage» en la página lo sigue
   encontrando. Perderlo sería cambiar precisión por cercanía, y eso no
   se hace en esta casa. */
.hm__o{
  font:400 9.5px/1.35 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.08em;font-style:italic;
  color:color-mix(in srgb,var(--pl-tinta-3) 62%,transparent);
  white-space:nowrap}

/* la ayuda, para los que la llevan */
.hm[data-ayuda]{cursor:help}
.hm__ayuda{
  position:absolute;left:0;top:calc(100% + 8px);
  width:max-content;max-width:min(290px,72vw);
  padding:10px 12px;background:#1b2435;
  font:400 12.8px/1.6 Outfit,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--pl-tinta-2);
  border:1px solid var(--pl-canto);border-top:2px solid var(--pl-espera);
  box-shadow:0 2px 0 rgba(0,0,0,.34),0 12px 28px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;z-index:9994;
  transform:translateY(-4px);
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .2s}
.hm[data-ayuda]:hover .hm__ayuda,.hm[data-ayuda]:focus-within .hm__ayuda{
  opacity:1;visibility:visible;transform:none}
.hm[data-ayuda]:hover .hm__g{color:var(--pl-espera);opacity:1}

@media (max-width:720px){
  /* en móvil el término técnico pasa a la línea de abajo: en una
     pantalla estrecha, dos cosas en la misma línea las parte por donde
     no debe */
  .hm{flex-direction:column;align-items:flex-start;gap:2px}
  .hm__g{align-self:flex-start;margin-bottom:2px}
  .hm__ayuda{position:fixed;left:10px;right:10px;top:auto;
    max-width:none;width:auto}
}
@media print{
  .hm__g,.hm__ayuda{display:none}
  .hm__o::before{content:" ("}
  .hm__o::after{content:")"}
}

/* ══════════════════════════════════════════════════════════════════════
   EL ESCALAFÓN Y LAS HABILIDADES — la parte de rol de la ficha
   ══════════════════════════════════════════════════════════════════════
   Gerard: «ficha de personal, habilidades, nivel».

   La decisión de fondo: LOS CINCO PELDAÑOS SIEMPRE A LA VISTA. Enseñar
   solo el actual quedaría más limpio y sería mucho peor — lo que da ganas
   de seguir es ver lo que todavía NO tienes, con su condición al lado.

   Y la jerarquía va con LUZ, no con tamaño: lo conseguido está apagado
   (ya no compite por la mirada), lo actual encendido con el color del
   agente, y lo que falta en gris con su candado. Se lee de un vistazo sin
   leer una palabra, que es lo que se pedía.                            */
.nv-bloque{margin:26px 0;display:grid;gap:22px}
.nv,.hb2{
  position:relative;padding:18px 18px 16px;
  background:color-mix(in srgb,var(--pl-caja) 94%,transparent);
  border:1px solid var(--pl-canto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 2px 0 rgba(0,0,0,.28);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.nv__cab,.hb2__cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb,var(--pl-canto) 70%,transparent)}
.nv__et{
  font:600 10.5px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pl-tinta-3)}
.nv__hoy{
  font:600 13px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pl-agente,var(--pl-espera))}
.nv__hoy--no{color:var(--pl-tinta-3);font-style:italic;text-transform:none}

.nv__pasos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nv__p{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  padding:9px 10px;position:relative;
  border-left:2px solid transparent;transition:background .18s ease}
/* la línea que une los peldaños: es lo que lo hace ESCALERA y no lista */
.nv__p::before{
  content:"";position:absolute;left:26px;top:30px;bottom:-2px;width:1px;
  background:color-mix(in srgb,var(--pl-canto) 80%,transparent)}
.nv__p:last-child::before{display:none}
.nv__num{
  width:26px;height:26px;display:grid;place-items:center;
  font:600 12px/1 "Geist Mono",ui-monospace,monospace;
  border:1px solid var(--pl-canto);border-radius:50%;
  color:var(--pl-tinta-3);background:var(--pl-fondo)}
.nv__n{
  font:600 13.5px/1.3 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pl-tinta-2);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.nv__pide{
  display:block;margin-top:3px;
  font:400 13.2px/1.55 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta-2)}
.nv__dato{
  display:block;margin-top:2px;
  font:400 10.5px/1.4 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.06em;color:var(--pl-tinta-3);opacity:.8}

/* CONSEGUIDO: apagado. Ya no compite por la mirada. */
.nv__p--hecho{opacity:.5}
.nv__p--hecho .nv__num{
  border-color:color-mix(in srgb,var(--pl-ok,#7ee6a8) 55%,transparent);
  color:var(--pl-ok,#7ee6a8)}
.nv__p--hecho .nv__num::after{content:"✔";font-size:11px}
.nv__p--hecho .nv__num{font-size:0}

/* DONDE ESTÁS: lo único encendido, con el color del agente. */
.nv__p--aqui{
  background:color-mix(in srgb,var(--pl-agente,var(--pl-espera)) 8%,transparent);
  border-left-color:var(--pl-agente,var(--pl-espera))}
.nv__p--aqui .nv__num{
  border-color:var(--pl-agente,var(--pl-espera));
  color:var(--pl-agente,var(--pl-espera));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pl-agente,var(--pl-espera)) 14%,transparent)}
.nv__p--aqui .nv__n{color:var(--pl-tinta)}
.nv__marca{
  font:600 9px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;
  padding:3px 6px;background:var(--pl-agente,var(--pl-espera));
  color:#0d1420;border-radius:2px}

/* LO QUE FALTA: gris y con candado — pero la condición se lee igual de
   bien que las demás. Ese es el punto: un peldaño bloqueado que no dice
   qué pide es una pared; uno que lo dice es una misión. */
.nv__p--falta .nv__num{
  border-style:dashed;opacity:.55;font-size:0}
.nv__p--falta .nv__num::after{content:"🔒";font-size:10px;filter:grayscale(1) opacity(.7)}
.nv__p--falta .nv__n{color:var(--pl-tinta-3)}
.nv__p--falta .nv__pide{color:var(--pl-tinta-3)}
.nv__p--no{opacity:.42}

.nv__ley{
  margin:14px 0 0;padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--pl-canto) 60%,transparent);
  font:400 12.4px/1.62 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta-3);text-wrap:pretty}
.nv__ley b{color:var(--pl-tinta-2);font-weight:600}

/* ── LAS HABILIDADES ────────────────────────────────────────────────
   El glifo de estado va DELANTE y es lo primero que se lee: ✔ en el
   libro, ◐ en curso, ✕ bloqueada. Tres y ni uno más — con cuatro haría
   falta una leyenda, y una leyenda para leer una ficha es que la ficha
   está mal.                                                          */
.hb2__cuenta{
  font:400 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;
  color:var(--pl-tinta-3)}
.hb2__lista{display:grid;gap:9px}
.hb2__h{
  display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;
  padding:11px 12px;background:var(--pl-fondo);
  border:1px solid var(--pl-canto);border-left-width:2px;
  transition:transform .16s ease,border-color .16s ease}
.hb2__h:hover{transform:translateX(2px)}
.hb2__g{
  width:24px;height:24px;display:grid;place-items:center;font-size:12px;
  border:1px solid var(--pl-canto);border-radius:2px}
.hb2__t{
  font:500 14.6px/1.4 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta);text-wrap:pretty}
.hb2__meta{display:flex;gap:9px;flex-wrap:wrap;margin:5px 0 6px}
.hb2__est,.hb2__rama{
  font:600 9px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;
  padding:3px 6px;border:1px solid var(--pl-canto);color:var(--pl-tinta-3)}
/* el porqué: lo que separa esto de una lista de perks con nombre bonito */
.hb2__pq{
  font:400 13px/1.62 Outfit,ui-sans-serif,system-ui,sans-serif;
  color:var(--pl-tinta-2);text-wrap:pretty;max-width:68ch}
.hb2__dep{
  margin-top:7px;font:400 11.6px/1.5 "Geist Mono",ui-monospace,monospace;
  color:var(--pl-tinta-3)}
.hb2__dep b{color:var(--pl-espera);font-weight:500}

.hb2__h--hecha{border-left-color:var(--pl-ok,#7ee6a8)}
.hb2__h--hecha .hb2__g{
  color:var(--pl-ok,#7ee6a8);
  border-color:color-mix(in srgb,var(--pl-ok,#7ee6a8) 45%,transparent)}
.hb2__h--curso{border-left-color:var(--pl-espera,#e8b84b)}
.hb2__h--curso .hb2__g{
  color:var(--pl-espera,#e8b84b);
  border-color:color-mix(in srgb,var(--pl-espera,#e8b84b) 45%,transparent)}
.hb2__h--bloqueada{border-left-color:var(--pl-canto);opacity:.62}
.hb2__h--bloqueada .hb2__t{color:var(--pl-tinta-2)}

@media (max-width:720px){
  .nv__p{grid-template-columns:28px 1fr;gap:9px;padding:8px 4px}
  .nv__p::before{left:22px}
  .nv__num{width:22px;height:22px}
  .hb2__h{grid-template-columns:22px 1fr;gap:9px}
  .hb2__g{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .hb2__h,.nv__p{transition:none}
  .hb2__h:hover{transform:none}
}