/* /links — página de links da WOP. Usa os tokens e botões da LP (styles/base.css). */
body { min-height: 100vh; min-height: 100dvh; background: #f7f8fc; }

/* fita índigo no topo, a mesma "seda" do hero */
.lk__ribbon { position: fixed; inset: 0 0 auto; width: 100%; height: 280px; z-index: -1; pointer-events: none; }

.lk {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto;
  padding: 56px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 100vh; min-height: 100dvh;
}

/* ===== Perfil ===== */
.lk__head { text-align: center; margin-bottom: 40px; }
.lk__avatar {
  width: 68px; height: 68px; margin: 0 auto; padding: 3px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(10,37,64,.06), 0 18px 40px -16px rgba(59,43,255,.45);
}
.lk__avatar img { width: 100%; height: 100%; border-radius: 17px; display: block; }
.lk__name {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 20px; font-weight: 600; letter-spacing: -.025em; color: var(--ink);
}
.lk__verified { width: 18px; height: 18px; color: var(--brand-500); }
.lk__bio { margin: 6px auto 0; max-width: 330px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.lk__tags { display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px; margin-top: 10px; list-style: none; }
.lk__tags li { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; font-weight: 500; color: var(--brand-600); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }

/* ===== Ação principal (índigo, como os botões da LP) ===== */
.lk__cta {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 9px 18px 9px 9px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, var(--brand-600), var(--brand-500) 55%, #5b6dff);
  transition: transform .15s, box-shadow .2s;
}
/* brilho que passa devagar, chamando atenção sem gritar */
.lk__cta::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  animation: lk-sheen 5s ease-in-out 1.5s infinite;
}
@keyframes lk-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.lk__cta:hover { transform: translateY(-1px); }
.lk__cta:active { transform: scale(.99); }
.lk__cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lk__cta-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16); }
.lk__cta-icon svg { width: 24px; height: 24px; }
.lk__cta-text { flex: 1; min-width: 0; }
.lk__cta-text b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.lk__cta-text small { display: block; margin-top: 2px; font-size: 13px; opacity: .85; }

/* ===== Prévia de cases ===== */
.lk__case {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
  border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10,37,64,.04);
  transition: box-shadow .2s, transform .15s;
}
.lk__case:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--brand-200), 0 14px 30px -16px rgba(59,43,255,.35); }
.lk__case:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lk__case-media {
  display: block; height: 64px; overflow: hidden; border-radius: 10px; background: #0b1033;
  box-shadow: inset 0 0 0 1px rgba(10,37,64,.06);
}
.lk__case-media img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transform: scale(1.35); transform-origin: 0 0; transition: transform .5s ease; }
.lk__case:hover .lk__case-media img { transform: scale(1.45); }
.lk__eyebrow { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-500); }
.lk__case-text b { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lk__case-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* ===== Lista de canais (um bloco só, com divisórias finas) ===== */
.lk__list { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10,37,64,.04); overflow: hidden; }
.lk__item {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px 8px 10px;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.lk__item + .lk__item { border-top: 1px solid #eef0f5; }
.lk__item:hover { background: #fafbff; }
.lk__item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.lk__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand-500); }
.lk__icon svg { width: 18px; height: 18px; }
.lk__text { flex: 1; min-width: 0; }
.lk__label { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lk__desc { display: block; margin-top: 0; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk__go { flex: none; width: 16px; height: 16px; color: #a3acbd; transition: transform .2s, color .2s; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk__item:hover .lk__go { color: var(--brand-500); transform: translate(2px, -2px); }

/* ===== Rodapé ===== */
.lk__foot { margin-top: auto; padding-top: 10px; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

/* ===== Entrada em cascata (só o "de onde vem"; o estado final é o normal, então o hover funciona) ===== */
.lk__in, .lk__item { animation: lk-in .7s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes lk-in { from { opacity: 0; transform: translateY(12px); } }
.lk__head { animation-delay: .05s; }
.lk__cta { animation-delay: .15s; }
.lk__case { animation-delay: .25s; }
.lk__list .lk__item:nth-child(1) { animation-delay: .32s; }
.lk__list .lk__item:nth-child(2) { animation-delay: .38s; }
.lk__list .lk__item:nth-child(3) { animation-delay: .44s; }
.lk__list .lk__item:nth-child(4) { animation-delay: .5s; }
.lk__foot { animation-delay: .6s; }

@media (min-width: 761px) {
  .lk { padding-top: 72px; }
  .lk__ribbon { height: 300px; }
}
/* telas baixas (iPhone SE, mini): corta o que é secundário para tudo caber sem rolar */
@media (max-height: 740px) {
  .lk { padding-top: 48px; gap: 8px; }
  .lk__avatar { width: 58px; height: 58px; border-radius: 17px; }
  .lk__avatar img { border-radius: 14px; }
  .lk__name { margin-top: 8px; font-size: 19px; }
  .lk__head { margin-bottom: 22px; }
  .lk__tags { display: none; }
  .lk__case-text small { display: none; }
  .lk__case-media { height: 52px; }
  .lk__item { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .lk__in, .lk__item { animation: none; }
  .lk__cta::after { animation: none; }
}