/* ===== Skillcerto: hub de links da bio (/, /felipe, /skillcerto), VOPS-2632 =====
 * Mesmos tokens da /consultoria (verde escuro + branco). Mobile-first e sem animação de
 * entrada: é o único endereço da bio, então nada pode depender de JS pra aparecer.
 */
:root{
  --verde:#213424;
  --verde-fundo:#1a2a1d;
  --verde-vivo:#29be2c;
  --branco:#fff;
  --tinta:#1f2a21;
  --raio:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  font-family:"Montserrat",system-ui,sans-serif;
  line-height:1.45;
  color:var(--branco);
  background:radial-gradient(120% 60% at 50% 0%, #25402a 0%, var(--verde-fundo) 60%) fixed, var(--verde-fundo);
}
img{display:block;max-width:100%}

.hub{
  width:100%;max-width:460px;margin:0 auto;
  padding:36px 16px 28px;
  display:flex;flex-direction:column;align-items:center;
}

.hub__topo{text-align:center;display:flex;flex-direction:column;align-items:center}
.hub__logo{width:150px;height:auto}
.hub__foto{
  width:112px;height:112px;border-radius:50%;
  object-fit:cover;object-position:50% 18%;
  border:3px solid rgba(255,255,255,.9);
}
.hub__nome{
  font-family:"Kanit",system-ui,sans-serif;font-weight:600;font-size:22px;
  margin:12px 0 0;line-height:1.2;
}
.hub__bio{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.82);max-width:340px}

.hub__links{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:12px}

.botao{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:58px;padding:12px 18px;
  text-align:center;text-decoration:none;
  color:var(--branco);
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--raio);
  transition:background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.botao:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.botao:active{transform:scale(.985)}
.botao:focus-visible{outline:3px solid var(--verde-vivo);outline-offset:2px}
.botao__titulo{font-weight:700;font-size:16px}
.botao__sub{font-size:12.5px;font-weight:500;opacity:.78;margin-top:2px}

.botao--destaque{
  background:var(--branco);color:var(--verde);border-color:var(--branco);
  min-height:66px;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.botao--destaque:hover{background:#eef5ee;border-color:#eef5ee}
.botao--destaque .botao__sub{opacity:.72}

.hub__aviso{
  margin:26px 0 0;font-size:12.5px;text-align:center;
  color:rgba(255,255,255,.62);max-width:340px;
}
.hub__rodape{margin-top:26px;opacity:.55}
.hub__rodape img{width:84px;height:auto}