/* Perfil público de una persona (persona.html, 2026-10-26; mockup videos-y-boton-central, pantalla 7).
   Tokens de piel.css: un acento, tinta y grises; nada por debajo de 12 px. */
.pr { max-width: 560px; margin: 0 auto; padding: 18px 16px calc(96px + var(--sa-abajo)); }
.pr-cab { display: flex; align-items: flex-start; gap: 12px; }
.pr-cab .quien { flex: 1; min-width: 0; padding-top: 4px; }
.pr-cab h1 { font-weight: 300; font-size: 26px; line-height: 1.1; margin: 0; letter-spacing: -.015em; }
.pr-cab h1 .rp-verif { vertical-align: 2px; }
.pr-cab .sub { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ava { position: relative; width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: visible;
  background: var(--ink); color: var(--surf); font-size: 24px; font-weight: 300; text-decoration: none; }
.pr-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pr-ava.vivo::after { content: "LIVE"; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); border: 2px solid var(--bg); }
.pr-ava.vivo { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--acc); }
.pr-numeros { display: flex; gap: 22px; padding: 14px 0 0; }
.pr-numeros div { font-size: 12px; color: var(--muted); }
.pr-numeros b { display: block; font-size: 18px; font-weight: 500; color: var(--ink); }
.pr-botones { display: flex; gap: 8px; padding: 12px 0 0; }
.pr-botones .sg-fila { flex: 1; }
.pr-botones .sg-btn { flex: 1; min-height: 42px; font-size: 14px; }
.pr-botones .sg-n { display: none; }
.pr-botones .pr-btn { flex: 1; min-height: 42px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.pr-botones .pr-btn.ico { flex: 0 0 42px; padding: 0; }
.pr-botones .pr-btn .trazo { width: 18px; height: 18px; }
.pr-bio { padding: 10px 0 0; font-size: 14px; color: var(--ink); }
.pr-bio small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.pr-bio small a { color: var(--acc); text-decoration: none; font-weight: 500; }
.pr-tabs { display: flex; margin: 14px 0 0; border-bottom: 1px solid var(--line); }
.pr-tabs button { flex: 1; border: 0; background: none; padding: 10px 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pr-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.pr-tabs button[hidden] { display: none; }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 2px; }
.pr-grid .it { position: relative; }
.pr-grid a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #4A3A30; color: #fff; text-decoration: none; }
.pr-grid .it:nth-child(3n+2) a { background: #2D4A3A; }
.pr-grid .it:nth-child(3n) a { background: #3A3550; }
.pr-grid .pin { position: absolute; right: 6px; bottom: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.pr-grid .pin.on { background: var(--acc); color: var(--acc-ink); }
.pr-grid .pin:disabled { opacity: .5; cursor: default; }
.pr-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-grid .pr-portada { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-grid .pr-portada.ancha { object-fit: contain; }
.pr-grid .pr-fondo { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(12px) brightness(.7); }
.pr-grid small { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pr-grid small .trazo { width: 12px; height: 12px; fill: #fff; stroke: none; }
.pr-grid .ancla { position: absolute; left: 6px; top: 6px; font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 6px; background: var(--acc); color: var(--acc-ink); }
.pr-grid .pend { position: absolute; right: 6px; top: 6px; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.2); }
.pr-grid .ancla + .pend { right: auto; left: 6px; top: 32px; }
.pr-vacio { grid-column: 1 / -1; padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.pr-vacio h3 { font-weight: 300; font-size: 22px; color: var(--ink); margin: 0 0 6px; }
.pr-vacio a, .pr-vacio button { display: inline-flex; align-items: center; margin-top: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.pr-noexiste { padding: 48px 16px; text-align: center; color: var(--muted); }