/* ==========================================================================
   Igui Print — página /links (formato link-in-bio)

   Complementa o style.css. Página escura de propósito: é o único lugar do
   site onde o logotipo branco sobre preto é a aplicação principal, e o
   brandbook autoriza exatamente isso (logotipo horizontal branco sobre preto
   ou cinza-800). A espiral CMY entra só como fio, nunca como fundo chapado
   atrás da escrita.

   Feita para celular. Quem abre esta página está com o telefone na mão.
   ========================================================================== */

.pagina-links {
  background: var(--preto);
  color: var(--branco);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bio {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 20px 40px;
  flex: 1;
}

/* ---------- Cabeçalho ---------- */
.bio__topo { text-align: center; margin-bottom: 32px; }

.bio__marca {
  width: 108px;
  height: 108px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--preto);
  /* O fio da marca: gradiente CMY como anel, não como fundo. */
  box-shadow: 0 0 0 3px var(--preto), 0 0 0 6px transparent;
  position: relative;
}
.bio__marca::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--gradiente-marca);
  z-index: 0;
}
.bio__marca::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--preto);
  z-index: 1;
}
.bio__marca img {
  position: relative;
  z-index: 2;
  width: 74px;
  height: auto;
}

.bio__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  margin: 0 0 8px;
  color: var(--branco);
}
.bio__frase {
  margin: 0 auto;
  max-width: 380px;
  font-size: 0.98rem;
  color: var(--cinza-400);
}

/* ---------- Botões ---------- */
.bio__lista { display: grid; gap: 12px; }

.link-bio {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--raio-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--branco);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  /* alvo de toque confortável: dedo em pé, andando pela feira */
  min-height: 62px;
}
.link-bio:hover,
.link-bio:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.34);
}
.link-bio:active { transform: translateY(0); }

.link-bio--destaque {
  background: var(--branco);
  color: var(--preto);
  border-color: var(--branco);
}
.link-bio--destaque:hover,
.link-bio--destaque:focus-visible {
  background: var(--cinza-100);
  border-color: var(--cinza-100);
}

.link-bio__icone { display: grid; place-items: center; }
.link-bio__icone svg { width: 26px; height: 26px; }

.link-bio__texto { min-width: 0; }
.link-bio__texto strong {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
  /* título longo não pode empurrar a seta para fora da tela */
  overflow-wrap: anywhere;
}
.link-bio__texto small {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--cinza-400);
}
.link-bio--destaque .link-bio__texto small { color: var(--cinza-600); }

.link-bio__seta { opacity: 0.5; }
.link-bio__seta svg { width: 18px; height: 18px; display: block; }

/* ---------- Página do NFC Tools ---------- */
.bio--estreita { max-width: 440px; }
.bio__nota {
  margin-top: 26px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--cinza-400);
}
.bio__nota a { color: var(--branco); text-decoration: underline; }

/* ---------- Rodapé ---------- */
.bio__rodape {
  text-align: center;
  padding: 8px 20px 36px;
  font-size: 0.8rem;
  color: var(--cinza-600);
}
.bio__rodape a { text-decoration: underline; }
.bio__rodape p { margin: 4px 0; }

/* Ícones pequenos dos canais de contato */
.bio__redes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
}
.rede-bio {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cinza-400);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rede-bio svg { width: 19px; height: 19px; }
.rede-bio:hover,
.rede-bio:focus-visible {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}