/* TI & Afins — página de links (links.tieafins.com.br)
   Tokens, fontes e regras de cor vêm de docs/identidade-visual.md.
   Mobile-first: quase todo acesso chega pelo link da bio do Instagram. */

@font-face{font-family:Orbitron;src:url(fonts/Orbitron-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/Rajdhani-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/Rajdhani-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/Rajdhani-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/Rajdhani-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/SpaceMono-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/SpaceMono-700.woff2)format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#020617; --surface:#0f172a; --border:#1e293b;
  --cyan:#22d3ee; --cyan-dark:#06b6d4; --cyan-light:#67e8f9; --purple:#c084fc;
  --brand-a:#0891b2; --brand-b:#06d6a0;
  --t1:#f1f5f9; --t2:#cbd5e1; --t3:#94a3b8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--t2);
  font-family:Rajdhani,system-ui,sans-serif;font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* nenhuma largura pode gerar rolagem lateral */
  min-height:100vh;
}

/* Rede de partículas: SVG estático gerado no build (gerar.py), não canvas.
   A CSP do vhost é default-src 'none', então a página não roda JavaScript.
   A máscara apaga a rede no miolo, onde ficam os botões. */
.rede{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(rede.svg) center/cover no-repeat;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 74% 46% at 50% 44%,transparent 0%,rgba(0,0,0,.45) 58%,#000 100%);
  mask-image:radial-gradient(ellipse 74% 46% at 50% 44%,transparent 0%,rgba(0,0,0,.45) 58%,#000 100%);
}

.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:44px 20px 40px}

/* ---------- cabeçalho ---------- */
.marca{display:flex;align-items:center;justify-content:center;gap:14px}
.marca img{width:52px;height:52px;display:block;flex-shrink:0}
.marca span{font-family:Orbitron,sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.13em;color:var(--t1)}
.marca i{font-style:normal;color:var(--cyan)}

/* linha do gradiente da logo: é o que assina a peça (ver identidade-visual.md) */
.linha{height:3px;margin:22px 0 20px;
  background:linear-gradient(90deg,transparent 0%,var(--brand-a) 18%,var(--brand-b) 62%,transparent 100%)}

.tag{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);text-align:center}
.sub{font-size:18px;color:var(--t2);text-align:center;margin-top:14px;
  max-width:34ch;margin-left:auto;margin-right:auto}

/* ---------- lista de links ---------- */
ul.links{list-style:none;margin:34px 0 0}
ul.links li{margin-bottom:12px}

a.lnk{
  display:flex;align-items:center;gap:15px;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cyan);
  padding:16px 18px;text-decoration:none;color:inherit;
  transition:background .15s,border-color .15s;
}
a.lnk:hover,a.lnk:focus-visible{background:#111d33;border-color:var(--cyan)}
a.lnk:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

a.lnk .ico{flex-shrink:0;width:26px;height:26px;color:var(--cyan)}
a.lnk .ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

a.lnk .txt{flex:1;min-width:0}         /* min-width:0 evita estouro de texto longo */
a.lnk .nome{display:block;font-size:20px;font-weight:700;color:var(--t1);line-height:1.2}
a.lnk .desc{display:block;font-family:'Space Mono',monospace;font-size:11.5px;color:var(--t3);
  letter-spacing:.04em;margin-top:5px;overflow-wrap:anywhere}

a.lnk .seta{flex-shrink:0;color:var(--t3);font-size:20px;line-height:1}
a.lnk:hover .seta,a.lnk:focus-visible .seta{color:var(--cyan)}

/* ---------- rodapé ---------- */
/* Siga nossas redes: as redes sociais saem da lista principal e viram uma
   fileira de ícones. A lista fica só com o que é destino de conteúdo (site,
   news, ferramentas, e-mail), e as redes ganham um bloco próprio. */
.redes{margin-top:34px;text-align:center}
.redes h2{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t3);font-weight:400;margin-bottom:14px}
.redes ul{list-style:none;display:flex;justify-content:center;gap:12px}
.redes a{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);color:var(--t3);
  transition:border-color .18s,color .18s,background .18s}
.redes a:hover,.redes a:focus-visible{background:#111d33;border-color:var(--cyan);color:var(--cyan)}
.redes a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.redes svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

footer{margin-top:38px;padding-top:22px;border-top:1px solid var(--border);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--t3);text-align:center}
footer a{color:var(--t3);text-decoration:none;border-bottom:1px solid rgba(148,163,184,.35)}
footer a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
footer a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media (min-width:560px){
  .wrap{padding-top:64px}
  .marca img{width:62px;height:62px}
  .marca span{font-size:27px}
  a.lnk{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  a.lnk{transition:none}
}