/* ============================================================
   SendYa · Tarjeta personal (/alejandro-barazarte)
   Página tipo link-in-bio: columna única, glass, aurora de fondo.
   Regla de lima: lima SOLO en el CTA primario (clickeable).
   ============================================================ */

/* --- Top bar mínima --- */
.tj-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding: 18px var(--margin-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(13,6,24,0.85), transparent);
}
.tj-top .nav-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--blanco); text-decoration: none; }
.tj-top .nav-logo svg { width: 22px; height: 25px; }
.tj-top .nav-logo .word { font: 700 1.05rem/1 var(--f-display); letter-spacing: -0.01em; }
.tj-top .nav-logo .word .ya { color: var(--lila); }
.tj-top .btn { padding: 9px 18px; font-size: var(--fs-small); }

/* --- Columna central --- */
.tj-main {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(120px, 16vh, 170px) var(--margin-x) clamp(56px, 8vw, 90px);
  position: relative;
  z-index: 1;
}

/* --- Cabecera de perfil --- */
.tj-perfil { text-align: center; }
.tj-foto {
  width: clamp(120px, 18vw, 148px);
  height: clamp(120px, 18vw, 148px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-brd-2);
  box-shadow: var(--glow-morado);
  display: block;
  margin: 0 auto 22px;
}
.tj-perfil h1 {
  font: 800 clamp(1.9rem, 5.4vw, 2.6rem)/1.08 var(--f-display);
  letter-spacing: var(--track-display);
  color: var(--blanco);
}
.tj-rol {
  margin-top: 10px;
  font-size: var(--fs-body);
  color: var(--lila);
  font-weight: 500;
}
.tj-meta {
  margin-top: 14px;
  font: 500 var(--fs-mono)/1.6 var(--f-mono);
  letter-spacing: var(--track-label);
  color: var(--blanco-45);
  text-transform: uppercase;
}
.tj-bio {
  margin: 22px auto 0;
  max-width: 46ch;
  color: var(--blanco-70);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.tj-bio strong { color: var(--blanco); font-weight: 500; }

/* --- Pila de enlaces (el corazón link-in-bio) --- */
.tj-links { margin-top: 36px; display: grid; gap: 12px; }
.tj-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--blanco-92);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-body);
  transition: background var(--dur-senal) var(--ease-marca),
              border-color var(--dur-senal) var(--ease-marca),
              transform var(--dur-senal) var(--ease-marca);
}
.tj-link:hover { background: var(--glass-hover); border-color: var(--glass-brd-2); transform: translateY(-2px); }
.tj-link:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.tj-link svg { width: 21px; height: 21px; flex: none; color: var(--lila); }
.tj-link .tj-sub { display: block; font: 400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--blanco-70); margin-top: 2px; }
.tj-link .tj-flecha { margin-left: auto; color: var(--blanco-45); transition: transform var(--dur-senal) var(--ease-marca); }
.tj-link:hover .tj-flecha { transform: translateX(4px); color: var(--lila); }

/* CTA primario: el único lima de la página */
.tj-link.primario {
  background: var(--lima);
  border-color: var(--lima);
  color: #10210B;
  box-shadow: var(--glow-lima);
}
.tj-link.primario svg, .tj-link.primario .tj-flecha { color: #10210B; }
.tj-link.primario .tj-sub { color: rgba(16,33,11,0.65); }
.tj-link.primario:hover { background: #D4F95C; border-color: #D4F95C; }

/* --- Secciones de texto --- */
.tj-seccion { margin-top: clamp(48px, 7vw, 72px); }
.tj-seccion .mono-titulo {
  font: 500 var(--fs-mono)/1 var(--f-mono);
  letter-spacing: var(--track-label);
  color: var(--lila);
  text-transform: uppercase;
}
.tj-seccion h2 {
  margin-top: 12px;
  font: 700 clamp(1.35rem, 3vw, 1.7rem)/1.2 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--blanco);
}
.tj-lista { margin-top: 18px; display: grid; gap: 11px; padding: 0; list-style: none; }
.tj-lista li {
  position: relative;
  padding-left: 26px;
  color: var(--blanco-70);
  line-height: 1.55;
}
.tj-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--morado-vivo), var(--morado));
}
.tj-lista li strong { color: var(--blanco); font-weight: 500; }

/* --- Panel visión --- */
.tj-panel {
  margin-top: 18px;
  padding: clamp(22px, 4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--glass-brd-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tj-panel p { color: var(--blanco-70); line-height: 1.65; }
.tj-panel p + p { margin-top: 12px; }
.tj-panel strong { color: var(--blanco); font-weight: 500; }
.tj-panel .tj-etapas {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font: 500 var(--fs-mono)/1.5 var(--f-mono);
  letter-spacing: 0.05em;
  color: var(--blanco-70);
  text-transform: uppercase;
}
.tj-panel .tj-etapas .hoy { color: var(--blanco-92); }

/* --- Footer mínimo --- */
.tj-footer {
  text-align: center;
  padding: 0 var(--margin-x) 40px;
  position: relative;
  z-index: 1;
}
.tj-footer .mono { font: 400 var(--fs-mono)/1.7 var(--f-mono); letter-spacing: 0.05em; color: var(--blanco-70); }
.tj-footer a { color: var(--blanco-70); text-decoration: none; }
.tj-footer a:hover { color: var(--blanco); }

@media (max-width: 480px) {
  .tj-link { padding: 15px 18px; }
  .tj-top .btn { display: none; }
}