/* ═══════════════════════════════════════════════════════════════════════
   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{
  /* Toda tinta y todo fondo con alfa se derivan de estos dos triples: el tema
     claro se define cambiándolos. Mismo criterio que el home. */
  --ink-rgb:244 245 247;
  --bg-rgb:0 0 0;
  --bg:#000000;
  --ink:#f4f5f7;
  --ink-2:rgb(var(--ink-rgb)/.62);
  --ink-3:rgb(var(--ink-rgb)/.38);
  --edge:rgb(var(--ink-rgb)/.10);
  --edge-2:rgb(var(--ink-rgb)/.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:rgb(var(--ink-rgb)/.92);color:var(--bg);}
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(rgb(var(--ink-rgb)/.5) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--ink-rgb)/.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 rgb(var(--ink-rgb)/.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 rgb(var(--ink-rgb)/.35);}50%{opacity:.5;box-shadow:0 0 0 5px rgb(var(--ink-rgb)/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:var(--bg);border-color:var(--ink);}
.tj-btn:hover .arw,.tj-btn:active .arw{color:var(--bg);transform:translateX(4px);}
/* Primaria: guardar contacto. Nace en blanco — es la acción que importa. */
.tj-btn.prim{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:500;}
.tj-btn.prim::before{background:var(--bg);}
.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:var(--bg);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:var(--bg);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:var(--bg);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:rgb(var(--bg-rgb)/.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:var(--bg);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:var(--bg);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;}
}

/* ── Tema claro ──────────────────────────────────────────────────────────
   El modo va en data-mode: data-theme ya lo ocupa la paleta del lab.
   Sobre papel el acento deja de ser "más blanco" y pasa a ser el azul. */
html[data-mode="light"]{
  --ink-rgb:8 13 24;
  --bg-rgb:255 255 255;
  --bg:#f7f9fc;
  --ink:#080d18;
  --ink-2:rgb(23 36 61/.78);
  --ink-3:rgb(23 36 61/.52);
  --edge:rgb(8 13 24/.11);
  --edge-2:rgb(8 13 24/.24);
  --azul:#0a5cff;
  --azul-rgb:10 92 255;
  --metal:linear-gradient(105deg,#0a5cff 0%,#1d5bc4 34%,#0b3fa8 52%,#2f6fd6 72%,#0a5cff 100%);
  color-scheme:light;
}
html[data-mode="light"] body{
  background:
    radial-gradient(120% 80% at 50% -10%,#ffffff 0%,rgba(255,255,255,0) 60%),
    radial-gradient(90% 60% at 100% 0%,rgba(10,92,255,.045) 0%,rgba(10,92,255,0) 55%),
    var(--bg);
  background-attachment:fixed;
}
html[data-mode="light"] ::selection{background:rgb(var(--azul-rgb)/.16);color:var(--ink);}

/* Acento: en oscuro el remate del titular es "menos blanco"; sobre papel eso
   se lee como texto apagado, no como énfasis. Pasa al azul de marca. */
html[data-mode="light"] .tj-h1 b{color:var(--azul);}
/* La acción principal se rellena en azul, igual que en el home y en servicios. */
html[data-mode="light"] .tj-btn.prim{background:var(--azul);border-color:var(--azul);color:#fff;}
/* Hover del botón principal: el barrido lo rellena con el color del papel,
   así que el texto NO puede quedarse en blanco — desaparecía. Pasa a azul,
   que es justo la inversión del estado de reposo. */
html[data-mode="light"] .tj-btn.prim:hover,
html[data-mode="light"] .tj-btn.prim:active{
  color:var(--azul);
  box-shadow:0 14px 34px -14px rgb(var(--azul-rgb)/.55);
}
/* Los secundarios se rellenan con tinta oscura: ahí el texto sí va en claro. */
html[data-mode="light"] .tj-btn:hover,
html[data-mode="light"] .tj-btn:active{color:var(--bg);}
html[data-mode="light"] .tj-btn:hover .arw,
html[data-mode="light"] .tj-btn:active .arw{color:var(--bg);}
/* La flecha del botón principal estaba en un gris oscuro fijo: sobre el
   relleno azul quedaba sin contraste. */
html[data-mode="light"] .tj-btn.prim .arw{color:rgba(255,255,255,.75);}
html[data-mode="light"] .tj-btn.prim:hover .arw{color:var(--azul);}


/* ── Retrato con la firma en la esquina ───────────────────────────────
   Mismo tratamiento que las fichas del equipo en el home: el atractor no va
   de estampado sobre la foto —eso obliga a calibrar por encuadre y se pierde
   sobre ropa clara— sino en una esquina fija, encima de un velo diagonal que
   le fabrica su propio fondo. Quien no tiene foto no lleva este bloque. */
.tj-retrato{
  position:relative;overflow:hidden;container-type:size;
  aspect-ratio:1;border:1px solid var(--edge-2);margin-bottom:18px;
}
.tj-marco{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;                    /* respaldo si no hay unidades de contenedor */
  width:max(100cqw,100cqh);
  aspect-ratio:1;
}
.tj-marco img{display:block;width:100%;height:100%;object-fit:cover;}
/* Diagonal y no radial: cubre el triángulo donde vive la firma con densidad
   pareja y muere antes de llegar a la cara. */
.tj-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top left,
    rgb(0 0 0/.97) 0%, rgb(0 0 0/.93) 14%, rgb(0 0 0/.72) 25%,
    rgb(0 0 0/.3) 37%, rgb(0 0 0/0) 49%);
}
.tj-sello{
  position:absolute;right:3%;bottom:3%;
  /* Cuadrado contra el lado corto: misma escala relativa en móvil. */
  width:min(27cqw,27cqh);aspect-ratio:1;
  /* `screen` sobre el velo: el fondo del lienzo desaparece y queda el trazo. */
  mix-blend-mode:screen;pointer-events:none;transition:filter .4s ease;
}
.tj-sello canvas{width:100%;height:100%;display:block;}
@media(hover:hover) and (pointer:fine){
  .tj-retrato:hover .tj-sello{filter:drop-shadow(0 0 5px rgb(255 255 255/.42));}
}

/* ── Datos del atractor sin plato ─────────────────────────────────────
   En las tarjetas con foto la firma ya está en la esquina del retrato, así
   que el plato con borde y título sobraba: ocupaba una columna entera para
   repetir el mismo sistema. Quedan las ecuaciones y el contador como texto
   suelto, sin recuadro ni relleno lateral. */
.tj-firma-min{margin-bottom:18px;}
.tj-firma-min .tj-eqs{padding:0 0 12px;border-top:0;}
.tj-firma-min .tj-steps{padding:9px 0;}

/* ══ MÓVIL ═══════════════════════════════════════════════════════════
   La tarjeta se abre casi siempre desde un QR, o sea desde un teléfono y
   delante de otra persona. Acá manda el móvil, no el escritorio. */
@media(max-width:600px){

  /* El rol era un flex con tres ítems: la barrita, el rol y el nodo de texto
     suelto "· B&N SOLUTIONS". Un rol largo partía en dos líneas DENTRO de su
     ítem mientras la empresa seguía al lado, centrada contra el bloque: de ahí
     el amontonamiento bajo el nombre. Como texto corrido fluye y se lee. */
  .tj-rol{
    display:block;line-height:2;letter-spacing:.16em;
    margin-top:12px;text-wrap:pretty;
  }
  .tj-rol .bar{display:inline-block;vertical-align:middle;margin-right:9px;width:20px;}

  /* El nombre es lo primero que se lee de lejos: que respire y no se parta
     con guiones raros. */
  .tj-name{letter-spacing:-.01em;text-wrap:balance;}
  .tj-lede{margin-top:16px;}

  /* Cuatro canales entraban 3+1 y el cuarto quedaba huérfano al centro.
     En dos columnas siempre cierra parejo; si son impares, el último ocupa
     el ancho completo y se lee como decisión y no como sobra. */
  .tj-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .tj-mini a{flex:none;padding:15px 6px;}
  .tj-mini a:last-child:nth-child(odd){grid-column:1/-1;}
}

/* El reordenamiento va desde donde la tarjeta pasa a UNA columna (900px),
   no desde 600: si apila, apila en el orden bueno. */
@media(max-width:900px){
  /* Orden en el teléfono: primero quién es, después la cara, y recién ahí
     las acciones. La foto entra entre la descripción y los botones —a esa
     altura el que mira ya sabe a quién está viendo y decide si guarda el
     contacto—. Solo se reordena cuando hay foto; sin ella la columna derecha
     abre con el plato de la firma y ponerlo sobre el nombre sería peor.

     `align-items:start` viene de la grilla de escritorio y se hereda al flex.
     Con `container-type:size` el retrato no tiene tamaño propio, así que sin
     estirar colapsaba a 0 y la foto desaparecía.

     `gap` va en 0 a propósito: cada bloque ya trae su propio margen y un gap
     encima los separaría dos veces. */
  .tj-cols.con-foto{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .tj-cols.con-foto .tj-side,
  .tj-cols.con-foto .tj-id{display:contents;}
  .tj-cols.con-foto .tj-op{order:1;}
  .tj-cols.con-foto .tj-name{order:2;}
  .tj-cols.con-foto .tj-rol{order:3;}
  .tj-cols.con-foto .tj-lede{order:4;}
  .tj-cols.con-foto .tj-retrato{order:5;margin:26px 0 0;}
  /* Las ecuaciones son el pie de foto de la firma: van pegadas al retrato,
     como en escritorio. Si se van al final quedan huérfanas de lo que
     explican. */
  .tj-cols.con-foto .tj-firma-min{order:6;margin:16px 0 0;}
  .tj-cols.con-foto .tj-acts{order:7;}
  .tj-cols.con-foto .tj-mini{order:8;}
  .tj-cols.con-foto .tj-canales{order:9;}
  .tj-cols.con-foto .tj-pase{order:10;}
}