/* Página de links: foto em tela cheia com scrim, mini bio lateral e bento em vidro. */

.lk { background: #05070c; min-height: 100svh; }

/* Fundo: foto fixa + scrim em camadas (escurece e puxa para o azul da marca) */
.lk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.lk-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.9); }
.lk-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(5 7 12 / 0.55) 0%, rgb(5 7 12 / 0.78) 45%, rgb(5 7 12 / 0.94) 100%),
    radial-gradient(80% 60% at 85% 10%, rgb(10 132 255 / 0.22), transparent 70%),
    rgb(5 7 12 / 0.25); }

.lk-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 20px 48px; display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }

/* ---------- mini bio ---------- */
.lk-bio { position: sticky; top: 40px; padding: 24px; border-radius: 28px; display: grid; gap: 12px; justify-items: start; color: #fff; }
.lk-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 6px rgb(10 132 255 / 0.55), 0 12px 30px -8px rgb(0 0 0 / 0.6); }
.lk-sig { width: 170px; margin-top: 4px; }
.lk-role { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7cc0ff; }
.lk-text { font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / 0.85); }
.lk-facts { list-style: none; margin: 4px 0; padding: 0; display: flex; gap: 16px; font-size: 12px; color: rgb(255 255 255 / 0.65); }
.lk-facts .mono { display: block; font-size: 20px; color: #fff; line-height: 1.1; }
.lk-social { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.lk-social .btn { width: 100%; height: 44px; font-size: 14px; }
.lk-social .btn-glass { color: #fff; }

/* ---------- seções ---------- */
.lk-main { display: grid; gap: 28px; min-width: 0; }
.lk-sec { display: grid; gap: 12px; }
.lk-sec-t { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 4px; font: 600 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }
.lk-sec-t svg { width: 14px; height: 14px; color: #7cc0ff; }
.lk-sec-t::after { content: ""; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, rgb(255 255 255 / 0.18), transparent); }
.lk-span { grid-column: 1 / -1; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 178px; grid-auto-flow: row dense; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 26px; color: #fff; overflow: hidden;
  transition-property: translate, background-color, scale, box-shadow; transition-duration: .2s; transition-timing-function: var(--ease); }
a.tile:hover { translate: 0 -3px; background-color: rgb(255 255 255 / 0.08); }
a.tile:active { scale: .97; }
.t-wide { grid-column: span 2; }
.lk-site { padding: 16px 20px; border-radius: 22px; }
/* tile horizontal: ícone ao lado do texto */
.t-row { flex-direction: row; align-items: center; gap: 16px; }
.t-row .t-ico { margin: 0; }
.t-row-body { display: grid; gap: 2px; }

/* ícones: squircle preenchido com gradiente, glifo branco em traço 2 */
.t-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: auto; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -2px 6px rgb(0 0 0 / 0.18), 0 10px 24px -10px var(--glow, rgb(0 0 0 / 0.6)); }
.t-ico svg { width: 24px; height: 24px; }
.ico-blue   { background: linear-gradient(145deg, #3ea2ff, #0a5fd8); --glow: rgb(10 132 255 / 0.8); }
.ico-violet { background: linear-gradient(145deg, #b79cff, #6d4ee6); --glow: rgb(139 92 246 / 0.8); }
.ico-cyan   { background: linear-gradient(145deg, #4fe0f0, #0a8fb8); --glow: rgb(6 182 212 / 0.7); }
.ico-amber  { background: linear-gradient(145deg, #ffcc5c, #e88a12); --glow: rgb(245 158 11 / 0.7); }
.ico-rose   { background: linear-gradient(145deg, #ff8fa8, #e0365f); --glow: rgb(244 63 94 / 0.7); }
.ico-slate  { background: linear-gradient(145deg, #7b8496, #3c4352); --glow: rgb(0 0 0 / 0.6); }
.ico-ig     { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --glow: rgb(214 36 159 / 0.7); }
.ico-green  { background: linear-gradient(145deg, #4ade80, #16a34a); --glow: rgb(34 197 94 / 0.7); }
.ico-red    { background: linear-gradient(145deg, #ff5a5a, #c4111b); --glow: rgb(239 68 68 / 0.7); }
.ico-white  { background: #fff; color: var(--brand); --glow: rgb(0 0 0 / 0.35); }

.t-title { font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.t-text { font-size: 13px; line-height: 1.4; color: rgb(255 255 255 / 0.68); }
.t-kicker { font-size: 10px; letter-spacing: .14em; color: #7cc0ff; margin-bottom: 2px; }
.k-amber { color: #ffcc5c; }
.k-green { color: #6ee7a0; display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6); animation: live 1.8s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); } }
.t-comunidade { background: radial-gradient(120% 140% at 100% 0%, rgb(34 197 94 / 0.25), transparent 60%), linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)); }
.t-comunidade .t-title { font-size: 19px; }

/* último vídeo da CF (playlist de uploads: sempre o mais recente) */
.lk-video { padding: 14px; border-radius: 26px; display: grid; gap: 12px; color: #fff; }
.lk-video-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 0; }
.lk-video-head .t-ico { margin: 0; width: 40px; height: 40px; border-radius: 13px; }
.lk-video-head .t-ico svg { width: 20px; height: 20px; }
.lk-video-head > div { flex: 1; min-width: 0; }
.lk-video-link { flex: none; height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: #e11d24; transition: background-color .15s; }
.lk-video-link:hover { background: #ff2a32; }
.lk-player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
.lk-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.t-out { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; color: rgb(255 255 255 / 0.5); transition: translate .2s var(--ease), color .2s; }
a.tile:hover .t-out { translate: 2px -2px; color: #fff; }

.t-feature { background: radial-gradient(120% 140% at 100% 0%, rgb(10 132 255 / 0.45), transparent 60%), linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)); }
.t-feature .t-title { font-size: 21px; }
.t-feature .t-ico { width: 56px; height: 56px; border-radius: 17px; }
.t-feature .t-ico svg { width: 28px; height: 28px; }
.t-direct { background: var(--brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 18px 40px -16px var(--brand); }
.t-direct .t-text, .t-direct .t-out { color: rgb(255 255 255 / 0.85); }
a.t-direct:hover { background-color: var(--brand-hover); }

/* produtos (Hotmart): capa + preço + compra */
.t-prod { padding: 0; flex-direction: row; gap: 0; }
.t-prod-capa { width: 42%; height: 100%; object-fit: cover; flex: none; border-radius: 22px 0 0 22px; outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
.t-prod-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px; min-width: 0; }
.t-prod .t-title { font-size: 19px; }
.t-buy { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; background: var(--brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 8px 20px -10px var(--brand); transition: background-color .15s; }
a.t-prod:hover .t-buy { background: var(--brand-hover); }
/* versão vertical (1 coluna): capa no fundo com scrim */
.t-prod-v { flex-direction: column; justify-content: flex-end; isolation: isolate; }
.t-prod-v .t-prod-capa { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -2; object-position: 50% 40%; }
.t-prod-v::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(0deg, rgb(5 7 12 / 0.95) 10%, rgb(5 7 12 / 0.55) 55%, rgb(5 7 12 / 0.1)); }
.t-prod-v .t-prod-body { padding: 18px; }
.t-prod-v .t-text { display: none; }
.t-prod-v .t-buy { margin-top: 8px; }

/* entrada */
.js .lk-bio[data-reveal] { opacity: 0; translate: 0 12px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.js .lk-bio.in { opacity: 1; translate: 0 0; }
.js .bento > * { opacity: 0; translate: 0 12px; transition: opacity .45s var(--ease), translate .45s var(--ease), background-color .2s, scale .2s; transition-delay: var(--d, 0s); }
.js .bento.in > * { opacity: 1; translate: 0 0; }
.js .bento.in > a.tile:hover { translate: 0 -3px; transition-delay: 0s; }

@media (max-width: 860px) {
  .lk-wrap { grid-template-columns: 1fr; max-width: 560px; padding-top: 20px; }
  .lk-bio { position: static; grid-template-columns: 72px 1fr; column-gap: 14px; align-items: center; }
  .lk-avatar { width: 72px; height: 72px; grid-row: span 2; }
  .lk-sig { width: 140px; margin: 0; }
  .lk-role { margin-top: -6px; }
  .lk-text, .lk-facts, .lk-social { grid-column: 1 / -1; }
  .lk-social { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; }
  .t-wide-m { grid-column: span 2; }
  .t-prod .t-text { display: none; }
  .t-prod-capa { width: 40%; }
  .tile { padding: 16px; border-radius: 22px; }
  .t-ico, .t-feature .t-ico { width: 44px; height: 44px; border-radius: 14px; }
  .t-feature .t-ico svg { width: 24px; height: 24px; }
  .lk-main { gap: 24px; }
  .t-out { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .js .bento > *, .js .lk-bio[data-reveal] { opacity: 1; translate: none; transition: none; }
}

.t-text.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }