/* =========================================================
   UniTech — Link in bio
   Paleta e variáveis: mude aqui pra ajustar as cores do site
========================================================= */
:root{
  --bg-0:#040A24;
  --bg-1:#0A1554;
  --bg-2:#13278F;
  --cyan:#3FE0E8;
  --blue:#2F5BFF;
  --glass:rgba(60,95,220,0.10);
  --glass-strong:rgba(70,110,240,0.20);
  --border:rgba(140,170,255,0.18);
  --border-strong:rgba(150,180,255,0.36);
  --text:#F3F6FC;
  --text-dim:#9AAAD6;
  --radius:18px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(60,100,255,0.35), transparent 62%),
    radial-gradient(55% 45% at 85% 15%, rgba(63,224,232,0.10), transparent 60%),
    radial-gradient(70% 55% at 8% 90%, rgba(47,91,255,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1) 40%, var(--bg-0));
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed; inset:-14px; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10, 40, 145, 0.58), rgba(3, 12, 52, 0.86)),
    url("../assets/background-tecnologia.jpg") center / cover no-repeat,
    url("../assets/background-equipe.jpg") center / cover no-repeat;
  filter:blur(3px);
  transform:scale(1.03);
  opacity:0.92;
}

/* ---------- Fundo interativo ---------- */
#bg-canvas{
  position:fixed; inset:0; z-index:1; width:100%; height:100%; display:block;
}
.bg-grid{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(75% 60% at 50% 20%, black, transparent 85%);
}
.bg-grid::before, .bg-grid::after{
  content:""; position:fixed; width:60px; height:60px;
  background-image:radial-gradient(circle, rgba(150,190,255,0.45) 1.4px, transparent 1.6px);
  background-size:14px 14px; opacity:0.6;
}
.bg-grid::before{ top:26px; left:22px; }
.bg-grid::after{ bottom:34px; right:26px; }

/* ---------- Layout ---------- */
.page{
  position:relative; z-index:1;
  max-width:520px; margin:0 auto;
  padding:64px 22px 90px;
  display:flex; flex-direction:column; align-items:center;
}

.content-panel{
  --panel-width: 100%;
  --panel-padding:18px 20px 16px;
  width:var(--panel-width);
  background:linear-gradient(145deg, rgba(151, 169, 213, 0.25), rgba(20, 40, 94, 0.34));
  border:1px solid rgba(225, 233, 255, 0.34);
  border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(117, 151, 232, 0.12), 0 24px 60px rgba(4, 14, 46, 0.26);
  padding:var(--panel-padding);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  display:flex; flex-direction:column; align-items:center;
}

/* ---------- Avatar ---------- */
.avatar-wrap{
  --avatar-size: 180px;
  --avatar-image-scale: 0.82;
  width:var(--avatar-size); height:var(--avatar-size); margin-bottom:10px;
  position:relative; display:grid; place-items:center;
}
.avatar-wrap::before{
  content:"";
  position:absolute;
  inset:8% 6% 8% 6%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(117, 230, 255, 0.38) 0%, rgba(117, 230, 255, 0.14) 30%, rgba(117, 230, 255, 0.03) 60%, transparent 100%);
  filter:blur(20px);
  z-index:0;
}
.avatar-inner{
  position:relative; z-index:1;
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:transparent; display:flex; align-items:center; justify-content:center;
}
.avatar-inner img{
  width:calc(var(--avatar-size) * var(--avatar-image-scale));
  height:calc(var(--avatar-size) * var(--avatar-image-scale));
  object-fit:contain; display:block; border-radius:50%;
  filter:drop-shadow(0 0 12px rgba(122, 220, 255, 0.25));
}

/* ---------- Marca com imagem ---------- */
.brand-wordmark{
  --wordmark-width: 300px;
  width:var(--wordmark-width); max-width:100%; height:auto;
  display:block; margin:-150px auto -108px;
  filter:drop-shadow(0 0 18px rgba(102, 216, 255, 0.15));
}

.tagline{
  font-size:14.5px; color:var(--text-dim); text-align:center; line-height:1.5;
  margin:10px 0 0; max-width:360px; font-weight:500;
  letter-spacing:0.01em;
  color:rgba(232, 237, 255, 0.9);
  text-shadow:0 0 12px rgba(110, 184, 255, 0.18);
}

/* ---------- Mini ícones ---------- */
.mini-icons{
  --mini-icon-1-size: 128px;
  --mini-icon-2-size: 138px;
  --mini-icon-3-size: 138px;
  --mini-icon-gap: -6px;
  display:flex; align-items:center; justify-content:center; gap:var(--mini-icon-gap);
  margin:0 auto; width:100%;
  padding:0 6px;
}
.mini-icon{
  width:var(--mini-icon-size); height:var(--mini-icon-size);
  border-radius:18px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 var(--mini-icon-size);
  opacity:0.96;
}
.mini-icon:nth-child(1){ --mini-icon-size:var(--mini-icon-1-size); }
.mini-icon:nth-child(2){ --mini-icon-size:var(--mini-icon-2-size); }
.mini-icon:nth-child(3){ --mini-icon-size:var(--mini-icon-3-size); }
.mini-icon:nth-child(4){ --mini-icon-size:var(--mini-icon-4-size); }
.mini-icon img{
  width:100%; height:100%; object-fit:contain; display:block;
  padding:0; filter:drop-shadow(0 0 10px rgba(110, 204, 255, 0.15));
}

/* ---------- Links ---------- */
.links{ width:100%; display:flex; flex-direction:column; gap:14px; margin-top:20px; }

.link-card{
  display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--text);
  background:rgba(145, 164, 211, 0.22); border:1px solid rgba(221, 230, 255, 0.38); border-radius:15px;
  padding:16px 18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px rgba(4, 12, 45, 0.12);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.link-card:hover{
  background:rgba(167, 185, 228, 0.29);
  border-color:rgba(235, 241, 255, 0.52);
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 30px -12px rgba(47,91,255,0.42);
}
.link-card:active{ transform:translateY(-1px) scale(0.98); }

.link-icon{
  --icon-box-size: 32px;
  --icon-size: 25px;
  order:2; margin-left:auto;
  width:var(--icon-box-size); height:var(--icon-box-size); border-radius:0; flex:none;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
.link-card:hover .link-icon{ transform:scale(1.08); }
.link-icon svg{
  width:var(--icon-size); height:var(--icon-size); color:var(--text);
}

.link-label{
  font-weight:600; font-size:16px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* efeito "ripple" ao clicar (o círculo é criado via JS) */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,0.35);
  transform:scale(0); opacity:0.6;
  animation:ripple-anim .55s ease-out forwards;
}
@keyframes ripple-anim{
  to{ transform:scale(2.6); opacity:0; }
}

/* ---------- Redes sociais ---------- */
.socials{ display:flex; gap:10px; margin-top:30px; align-items:center; flex-wrap:wrap; justify-content:center; }
.social-btn{
  width:44px; height:44px; border-radius:50%; position:relative;
  background:var(--glass); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--text); text-decoration:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-btn:hover{
  background:var(--glass-strong); border-color:var(--border-strong);
  transform:translateY(-3px) rotate(-6deg);
}
.social-btn:active{ transform:scale(0.94); }
.social-btn svg{ width:18px; height:18px; }

/* ---------- Carrossel de marcas ---------- */
.brand-carousel{
  --brand-size: 52px;
  width:calc(100% + 40px); margin:26px -20px 0; overflow:hidden;
  padding:14px 0 8px;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brand-carousel-track{
  display:flex; width:max-content; align-items:center; gap:32px;
  animation:brand-scroll 20s linear infinite;
}
.brand-carousel-track img{
  width:var(--brand-size); height:var(--brand-size); object-fit:contain;
  flex:none; filter:brightness(0) invert(1); opacity:.9;
}
.brands-caption{
  margin:12px 20px 0; text-align:center; color:rgba(243,246,252,.88);
  font-size:15px; line-height:1.35; font-weight:500;
}
.brands-caption strong{ font-weight:700; }
@keyframes brand-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Rodapé ---------- */
.footer-note{
  margin-top:18px; font-size:11.5px; color:var(--text-dim);
  text-align:center; letter-spacing:.02em;
}

/* ---------- Responsivo ---------- */
@media (max-width:380px){
  .page{ padding:56px 16px 80px; }
}

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .link-card, .social-btn, .link-icon{ transition:none; }
  .brand-carousel-track{ animation:none; }
  .ripple{ display:none; }
}