/* ============================================================
   Réplica da página linktr.ee/georgepaulus — HTML + CSS apenas
   Tokens medidos na página original (25/08/2026):
   fundo #d0d1d4 · botão branco r8 · 64px · thumb 48px · gap 14px
   ============================================================ */

:root {
  --bg: #d0d1d4;
  --card: #ffffff;
  --text: #000000;
  --muted: rgba(0, 0, 0, 0.60);
  --rail: rgba(0, 0, 0, 0.30);
  --radius: 8px;
  --gap: 14px;       /* espaço entre itens de 1º nível */
  --gap-sub: 10px;   /* espaço entre subitens */
  --indent: 44px;    /* recuo de cada nível de subitem */
  --elbow: 20px;     /* posição x da linha-guia dentro do recuo */
  --subh: 56px;      /* altura mínima do botão de subitem */
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 556px;            /* 524px de conteúdo + 16px de cada lado */
  margin: 0 auto;
  padding: clamp(48px, 12vh, 128px) 16px 48px;
}

/* ---------- Cabeçalho do perfil ---------- */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.name {
  margin: 13px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.bio {
  margin: 3px 0 0;
  max-width: 496px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* ---------- Lista de links (árvore) ---------- */

.links { margin-top: 40px; }

.tree,
.children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.children {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sub);
  margin-top: var(--gap-sub);
  padding-left: var(--indent);
}

.children > li { position: relative; }

/* linha vertical da guia: desce até o próximo irmão… */
.children > li::before {
  content: "";
  position: absolute;
  left: calc(var(--elbow) - var(--indent));
  top: calc(-1 * var(--gap-sub));
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--rail);
}

/* …e no último irmão para na altura do cotovelo */
.children > li:last-child::before {
  bottom: auto;
  height: calc(var(--gap-sub) + var(--subh) / 2);
}

/* traço horizontal do cotovelo, apontando para o botão */
.children > li::after {
  content: "";
  position: absolute;
  left: calc(var(--elbow) - var(--indent));
  top: calc(var(--subh) / 2 - 1px);
  width: calc(var(--indent) - var(--elbow) - 6px);
  height: 2px;
  border-radius: 1px;
  background: var(--rail);
}

/* ---------- Botões ---------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 64px;
  background: var(--card);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.btn:active { transform: scale(0.98); }

.btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.thumb {
  position: absolute;
  left: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
}

/* subitem: botão um pouco menor */
.btn.sub {
  min-height: var(--subh);
  padding: 10px 56px;
  font-size: 15px;
}

.btn.sub .thumb {
  width: 40px;
  height: 40px;
}

/* ---------- Cartão de visitas (QR code) ---------- */

.vcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 20px 26px;
  background: var(--card);
  border-radius: var(--radius);
  text-align: center;
}

.vcard h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.vcard p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.qr {
  margin-top: 12px;
  width: min(232px, 64vw);
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 480px) {
  :root {
    --indent: 32px;
    --elbow: 14px;
  }

  .page { padding-top: clamp(40px, 8vh, 104px); }

  .btn { padding: 12px 58px; }

  .btn.sub { padding: 10px 50px; }
}