/* =============================================================
   ASEC LINKTREE — hub central de links (self-contained)
   -------------------------------------------------------------
   Dark institucional do grupo. Uma coluna, mobile-first. Cada
   botão brilha no acento (--a) da sua frente, comunicando o
   ecossistema multi-marca num relance.
   ============================================================= */

:root{
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --bg:#08080c;
  --bg-2:#0d0d13;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --text:#f4f5f8;
  --muted:#a2a4b2;
  --muted-2:#71727f;
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100svh;
}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#08080c}
h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1}

/* ---------- fundos ---------- */
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.bg-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 34% at 18% 8%,rgba(227,6,19,.16),transparent 70%),
    radial-gradient(38% 32% at 84% 14%,rgba(10,108,224,.18),transparent 70%),
    radial-gradient(44% 40% at 78% 88%,rgba(139,92,246,.16),transparent 72%),
    radial-gradient(40% 36% at 14% 92%,rgba(22,163,74,.14),transparent 72%);
  animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(0,-14px,0) scale(1.05)}}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 80% at 50% 0,#000 40%,transparent 82%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 40%,transparent 82%)}
.bg-spot{position:fixed;z-index:0;width:560px;height:560px;border-radius:50%;pointer-events:none;
  left:var(--mx,50%);top:var(--my,26%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 62%);opacity:0;transition:opacity .5s}
body.pointer .bg-spot{opacity:1}

/* ---------- container ---------- */
.lt{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;
  min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(40px,8vh,72px) 22px clamp(30px,5vh,48px)}

/* entrada em cascata */
.avatar,.lt-head h1,.tagline,.sub,.link,.wa-btn,.socials,.lt-foot{
  opacity:0;transform:translateY(16px);
  animation:rise .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i,0) * .06s + .1s)}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- cabeçalho ---------- */
.lt-head{text-align:center;margin-bottom:clamp(26px,4vh,38px)}
.avatar{position:relative;width:96px;height:96px;margin:0 auto 20px;display:grid;place-items:center}
.avatar-ring{position:absolute;inset:0;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 0deg,#E30613,#0A6CE0,#16A34A,#8B5CF6,#F59E0B,#E30613);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar-in{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,#1b1b24,#0b0b10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -18px #000}
.lt-head h1{font-size:2.4rem;margin-bottom:6px}
.tagline{font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--text);letter-spacing:-.01em}
.grad-360{background:linear-gradient(100deg,#4d9bff,#b69bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.sub .pin{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- links ---------- */
.links{display:flex;flex-direction:column;gap:13px}
.link{position:relative;display:flex;align-items:center;gap:15px;padding:15px 16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s}
.link::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120% 120% at 0 50%,color-mix(in srgb,var(--a) 22%,transparent),transparent 60%)}
.link:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 55%,transparent);
  background:var(--surface-2);box-shadow:0 20px 44px -22px color-mix(in srgb,var(--a) 70%,#000)}
.link:hover::before{opacity:1}
.link:active{transform:translateY(-1px)}

.lk-ic{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--a) 92%,#000),var(--a2));
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--a) 85%,#000),inset 0 1px 0 rgba(255,255,255,.25)}
.lk-ic svg{width:24px;height:24px}
.lk-tx{flex:1;min-width:0}
.lk-tx b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.lk-tx small{display:block;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-arrow{flex:none;width:20px;height:20px;color:var(--muted-2);transition:transform .3s,color .3s}
.link:hover .lk-arrow{color:var(--a2);transform:translateX(4px)}

/* botão de destaque (grupo) */
.link.feat{padding:19px 18px;
  background:linear-gradient(120deg,rgba(227,6,19,.14),rgba(255,255,255,.05) 60%);
  border-color:color-mix(in srgb,var(--a) 40%,transparent)}
.link.feat .lk-tx b{font-size:1.2rem}
.link.feat .lk-ic{width:54px;height:54px}

/* em breve */
.soon{cursor:pointer}
.soon .lk-ic{filter:saturate(.85)}
.soon-chip{flex:none;font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a2);background:color-mix(in srgb,var(--a) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 40%,transparent);padding:5px 9px;border-radius:100px}

/* ---------- whatsapp ---------- */
.wa-btn{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:20px;padding:16px;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;color:#04140b;
  background:linear-gradient(120deg,#1faa52,#25D366 60%,#4ce88a);
  box-shadow:0 16px 36px -16px rgba(37,211,102,.6),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s,box-shadow .3s}
.wa-btn svg{width:26px;height:26px}
.wa-btn:hover{transform:translateY(-3px);box-shadow:0 24px 50px -18px rgba(37,211,102,.65)}
.wa-btn:active{transform:translateY(-1px)}

/* ---------- redes ---------- */
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);transition:color .25s,border-color .25s,transform .25s,background .25s}
.socials a svg{width:17px;height:17px}
.socials a:hover{color:#fff;border-color:var(--line-2);background:var(--surface-2);transform:translateY(-2px)}

/* ---------- rodapé ---------- */
.lt-foot{margin-top:auto;padding-top:34px;text-align:center;display:flex;flex-direction:column;gap:3px}
.lt-foot small{font-size:.74rem;color:var(--muted-2)}

/* ---------- cursor (desktop) ---------- */
.cur-ring,.cur-dot{position:fixed;top:0;left:0;z-index:50;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .25s,height .25s}
.cur-ring{width:32px;height:32px;border:1.5px solid rgba(255,255,255,.5)}
.cur-dot{width:5px;height:5px;background:#fff}
.cur-ring.hover{width:50px;height:50px;background:rgba(255,255,255,.06);border-color:#fff}
body.pointer.cur-on .cur-ring,body.pointer.cur-on .cur-dot{opacity:1}
@media(hover:none),(pointer:coarse){.cur-ring,.cur-dot{display:none}}

/* ---------- fallback color-mix ---------- */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .link:hover{border-color:var(--a2)}
  .soon-chip{color:var(--a2);background:rgba(255,255,255,.06);border-color:var(--line-2)}
  .lk-ic{background:linear-gradient(150deg,var(--a),var(--a2))}
}

/* ---------- reduz movimento ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .avatar,.lt-head h1,.tagline,.sub,.link,.wa-btn,.socials,.lt-foot{opacity:1;transform:none}
}