/* ═══════════════════════════════════════════════════════════════════════
   B&N SOLUTIONS — TARJETA OPERATIVA
   Destino de los QR de las tarjetas físicas. Mismo credo del home:
   obsidiana, platino y luz; el acento es intensidad de blanco. Cada
   integrante firma con su atractor extraño integrándose en vivo.
   Sin backdrop-filter en el contenido: esto se abre desde una cámara,
   en la calle, con una mano — el primer frame manda.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#000000;
  --ink:#f4f5f7;
  --ink-2:rgba(244,245,247,.62);
  --ink-3:rgba(244,245,247,.38);
  --edge:rgba(244,245,247,.10);
  --edge-2:rgba(244,245,247,.2);
  --metal:linear-gradient(105deg,#ffffff 0%,#c9ced6 34%,#8d939d 52%,#e8ebef 72%,#ffffff 100%);
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(18px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{background:var(--bg);}
body{
  font-family:var(--sans);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
}
::selection{background:rgba(244,245,247,.92);color:#050506;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}
em{font-style:normal;}
svg{display:block;}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;}

/* ── Retícula de fondo: profundidad sin costo ───────────────────────── */
.tj-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(232,234,238,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,234,238,.5) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 100%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 100%);
}
/* Brackets de estación en las cuatro esquinas del viewport */
.tj-bk{position:fixed;width:18px;height:18px;border:1px solid rgba(232,234,238,.28);z-index:2;pointer-events:none;}
.tj-bk.tl{top:60px;left:16px;border-right:0;border-bottom:0;}
.tj-bk.tr{top:60px;right:16px;border-left:0;border-bottom:0;}
.tj-bk.bl{bottom:16px;left:16px;border-right:0;border-top:0;}
.tj-bk.br{bottom:16px;right:16px;border-left:0;border-top:0;}
@media(max-width:600px){.tj-bk{display:none;}}

.tj-wrap{position:relative;z-index:1;padding:0 var(--pad) 64px;max-width:1180px;margin:0 auto;}

/* ── Telemetría: solo datos reales (reloj de Santiago, coordenadas) ── */
.tj-tele{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0 22px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-3);
}
.tj-tele b{font-weight:400;color:var(--ink-2);}
.tj-tele .sep{width:14px;height:1px;background:var(--edge-2);}
.tj-live{display:inline-flex;align-items:center;gap:7px;}
.tj-live i{width:4px;height:4px;border-radius:50%;background:var(--ink);animation:tjPulse 2.4s ease-in-out infinite;}
@keyframes tjPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(244,245,247,.35);}50%{opacity:.5;box-shadow:0 0 0 5px rgba(244,245,247,0);}}
#tjClock{font-variant-numeric:tabular-nums;}
@media(max-width:520px){.tj-tele{gap:10px;font-size:9px;letter-spacing:.14em;}.tj-tele .opt{display:none;}}

/* ── Reparto: identidad a la izquierda, instrumento a la derecha ───── */
/* minmax(0,…) y no 1fr: el mínimo automático de una pista es su min-content,
   y basta una ecuación en nowrap para estirar la columna más que el viewport. */
.tj-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,4vw,64px);align-items:start;}
.tj-cols>*{min-width:0;}
@media(max-width:900px){.tj-cols{grid-template-columns:minmax(0,1fr);gap:30px;}}

/* ── Identidad ──────────────────────────────────────────────────────── */
.tj-op{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color:var(--ink-3);border:1px solid var(--edge-2);padding:5px 10px;margin-bottom:20px;
}
.tj-name{
  font-size:clamp(38px,8.4vw,76px);font-weight:600;line-height:.95;letter-spacing:-.03em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;background-position:var(--sweep,20%) 0;
  transition:background-position .5s cubic-bezier(.2,.6,.2,1);
}
.tj-rol{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--ink-2);
}
.tj-rol .bar{width:26px;height:1px;background:var(--ink-3);}
.tj-lede{margin-top:22px;max-width:46ch;font-size:15px;line-height:1.62;color:var(--ink-2);font-weight:300;}

/* ── Acciones ───────────────────────────────────────────────────────── */
.tj-acts{margin-top:32px;display:flex;flex-direction:column;gap:10px;max-width:460px;}
.tj-btn{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 20px;border:1px solid var(--edge-2);overflow:hidden;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  transition:border-color .3s ease,color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.tj-btn span{position:relative;z-index:1;display:flex;align-items:center;gap:12px;}
.tj-btn svg{width:15px;height:15px;flex:none;}
.tj-btn .arw{position:relative;z-index:1;color:var(--ink-3);transition:transform .3s ease,color .3s ease;}
/* Barrido de luz: el relleno entra desde la izquierda, el texto se invierte */
.tj-btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.6,.02,.2,1);}
.tj-btn:hover::before,.tj-btn:active::before{transform:scaleX(1);}
.tj-btn:hover,.tj-btn:active{color:#050506;border-color:var(--ink);}
.tj-btn:hover .arw,.tj-btn:active .arw{color:#050506;transform:translateX(4px);}
/* Primaria: guardar contacto. Nace en blanco — es la acción que importa. */
.tj-btn.prim{background:var(--ink);color:#050506;border-color:var(--ink);font-weight:500;}
.tj-btn.prim::before{background:#050506;}
.tj-btn.prim:hover,.tj-btn.prim:active{color:var(--ink);}
.tj-btn.prim:hover .arw,.tj-btn.prim:active .arw{color:var(--ink);}
.tj-btn.prim .arw{color:rgba(5,5,6,.5);}

/* Flex y no grid: la cantidad de canales cambia por persona (2, 4, 5). Con
   flex:1 la última fila se reparte el ancho sobrante en vez de dejar huecos. */
.tj-mini{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;max-width:460px;}
.tj-mini a{
  flex:1 1 92px;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px 6px;border:1px solid var(--edge);overflow:hidden;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-2);
  transition:color .3s ease,border-color .3s ease;-webkit-tap-highlight-color:transparent;
}
.tj-mini a svg{width:17px;height:17px;position:relative;z-index:1;}
.tj-mini a span{position:relative;z-index:1;}
.tj-mini a::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.6,.02,.2,1);}
.tj-mini a:hover::before,.tj-mini a:active::before{transform:scaleY(1);}
.tj-mini a:hover,.tj-mini a:active{color:#050506;border-color:var(--ink);}

/* ── Canales en texto plano, con copiado ───────────────────────────── */
.tj-canales{margin-top:34px;border-top:1px solid var(--edge);max-width:460px;}
.tj-canal{
  display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--edge);
}
.tj-canal .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-3);width:66px;flex:none;}
.tj-canal .v{flex:1;min-width:0;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tj-copy{
  flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-3);
  border:1px solid var(--edge);padding:6px 9px;transition:color .25s ease,border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.tj-copy:hover{color:var(--ink);border-color:var(--edge-2);}
.tj-copy.ok{color:#050506;background:var(--ink);border-color:var(--ink);}

/* ── Instrumento: la firma dinámica ────────────────────────────────── */
.tj-plate{border:1px solid var(--edge-2);position:relative;}
.tj-plate-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-3);
}
.tj-firma{position:relative;aspect-ratio:1/1;touch-action:none;cursor:grab;}
@media(max-width:900px){.tj-firma{aspect-ratio:4/3;}}
.tj-firma canvas{width:100%;height:100%;display:block;}
.tj-firma:active{cursor:grabbing;}
/* Pista de interacción: se apaga en cuanto tocas */
.tj-hint{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--ink-3);
  transition:opacity .6s ease;
}
.tj-firma.tocado .tj-hint{opacity:0;}
.tj-eqs{
  padding:14px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--ink-2);
  white-space:nowrap;overflow-x:auto;
}
.tj-eqs div{font-variant-numeric:tabular-nums;}
.tj-steps{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 14px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-3);
}
.tj-steps b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.06em;}

/* ── Placa QR: negro sobre blanco, para que lea siempre ────────────── */
.tj-pase{margin-top:14px;border:1px solid var(--edge-2);padding:18px;display:flex;align-items:center;gap:18px;}
.tj-pase .qr{width:96px;height:96px;flex:none;background:#fff;padding:8px;}
.tj-pase .qr img{width:100%;height:100%;}
.tj-pase .tx{min-width:0;}
.tj-pase .tx b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;font-weight:400;color:var(--ink);}
.tj-pase .tx p{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ink-3);font-weight:300;}
/* Blanco de toque real: 36px de alto mínimo. Esto se opera con el pulgar,
   en la calle, con una mano — un subrayado de 14px no es un botón. */
.tj-pase .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.tj-pase button.exp{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-2);
  border:1px solid var(--edge-2);transition:color .25s ease,border-color .25s ease,background-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.tj-pase button.exp:hover,.tj-pase button.exp:active{color:#050506;background:var(--ink);border-color:var(--ink);}

/* QR a pantalla completa: para pasar el contacto sin tarjeta en la mano */
.tj-full{
  position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.tj-full.on{opacity:1;visibility:visible;}
.tj-full .card{background:#fff;padding:clamp(14px,4vw,26px);}
.tj-full .card img{width:min(72vw,340px);height:auto;}
.tj-full .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-align:center;}
.tj-full .cerrar{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-2);border:1px solid var(--edge-2);padding:11px 18px;}
.tj-full .cerrar:hover{color:#050506;background:var(--ink);border-color:var(--ink);}

/* ── Directorio (hub) ──────────────────────────────────────────────── */
.tj-h1{font-size:clamp(34px,7vw,64px);font-weight:600;line-height:1;letter-spacing:-.03em;}
.tj-h1 b{font-weight:300;color:var(--ink-3);}
.tj-sub{margin-top:20px;max-width:52ch;font-size:15px;line-height:1.62;color:var(--ink-2);font-weight:300;}
/* Dos columnas fijas y no auto-fit: son cuatro integrantes y el auto-fit
   dejaba 3+1, con una tarjeta huérfana en la segunda fila. 2×2 cierra. */
.tj-dir{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:40px;}
@media(min-width:760px){.tj-dir{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tj-card{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(118px,24%,190px);border:1px solid var(--edge-2);
  transition:border-color .35s ease;position:relative;
}
.tj-card:hover{border-color:var(--edge-2);}
.tj-card .d{padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.tj-card .id{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--ink-3);}
.tj-card h3{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.15;}
.tj-card .r{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink-2);}
.tj-card .g{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;}
.tj-card .g a{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink-3);
  border:1px solid var(--edge);padding:6px 9px;transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.tj-card .g a:hover,.tj-card .g a:active{color:#050506;background:var(--ink);border-color:var(--ink);}
.tj-card .g a.ver{color:var(--ink-2);border-color:var(--edge-2);}
.tj-card .f{position:relative;border-left:1px solid var(--edge);}
.tj-card .f canvas{width:100%;height:100%;display:block;}
@media(max-width:400px){.tj-card{grid-template-columns:1fr;}.tj-card .f{border-left:0;border-top:1px solid var(--edge);aspect-ratio:16/7;}}

.tj-emp{margin-top:52px;border-top:1px solid var(--edge);padding-top:30px;}
.tj-emp h2{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-3);font-weight:400;}
.tj-emp .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin-top:18px;}

/* ── Reveal: escalonado, corto. Esto se abre desde una cámara. ─────── */
.rv{opacity:0;transform:translateY(14px);}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);}

.tj-foot{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-3);
}
.tj-foot a:hover{color:var(--ink);}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;}
  .tj-name{transition:none;}
  .tj-live i{animation:none;}
  *{transition-duration:.01ms!important;}
}