/* Tarjetas de perfil de vidrio. Las comparten la sección de perfiles de la
   landing y la página /perfiles/, para que las dos se vean igual sin tener el
   CSS dos veces. La animación (anillo que se llena, P/L que cuenta, inclinación)
   la pone el JavaScript de cada página; sin él las tarjetas se ven completas. */

/* La paleta de la landing, para las páginas que no la definen en :root.
   Oscura a propósito, como la landing: es la cara de la marca. */
.bz-tarjetas {
  --ink: #0b0f19; --panel: #121824; --line: #1a2333; --line-strong: #26324a;
  --text: #f8f9fa; --muted: #8997ad; --cyan: #00e5ff; --gain: #00ff88; --loss: #ff4d4d;
  --violet: #7850ff;
  --glass: rgba(18, 24, 36, .38); --glass-strong: rgba(18, 24, 36, .62);
  --glass-edge: rgba(255, 255, 255, .09);
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ── Vidrio: la tarjeta base de toda la página ── */
.glass {
  position: relative; overflow: hidden; border-radius: 14px;
  background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 55%), var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.7);
  transform-style: preserve-3d;
}
/* Reflejo que sigue al puntero dentro de la tarjeta */
.glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(0,229,255,.16), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.glass:hover::before { opacity: 1; }
.glass > * { position: relative; }

.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1000px; }
.pcard { padding: 22px 20px 20px; display: grid; gap: 16px; align-content: start; }
.pcard .rank { position: absolute; top: 14px; right: 16px; font: 800 22px/1 var(--display); color: rgba(255,255,255,.14); }
.ptop { display: flex; align-items: center; gap: 12px; }
.pav {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 800 22px/1 var(--display); color: var(--text); background: var(--panel);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(0,229,255,.55), 0 0 18px rgba(0,229,255,.25);
}
.pname { font-weight: 600; font-size: 17px; }
.puser { font: 400 12px/1.3 var(--mono); color: var(--muted); }
.pbio { color: var(--muted); font-size: 14px; min-height: 2.9em; }
.pmid { display: flex; align-items: center; gap: 16px; }
.ring { width: 72px; height: 72px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pmid .pl { display: grid; gap: 4px; }
.pmid .pl span, .pfoot span { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pmid .pl b { font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pfoot { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--glass-edge); }
.pfoot div { display: grid; gap: 4px; }
.pfoot b { font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.plink { font-size: 14px; font-weight: 600; color: var(--cyan); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.plink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Sin esto `display: grid` gana al atributo hidden y la tarjeta 9 seguiría viéndose */
.pcard[hidden] { display: none; }
.pav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pav.con-foto { background: var(--panel); }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .glass::before { transition: none; } }