/* ============================================================
   SITE RAIZ — cartão de links (config/site.php → 'cartao').
   Uma coluna no centro: foto, nome, papel e os botões do site.
   Nenhuma cor, medida ou fonte solta: tudo vem de tokens.css.
   ============================================================ */

.site--cartao {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, var(--s-poca-3), var(--s-transparente) 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--s-poca-quente), var(--s-transparente) 70%),
    var(--s-fundo);
}

.cartao {
  min-height: 100vh;
  min-height: 100svh;
  width: min(100% - 2 * var(--s-margem-cel), 440px);
  margin-inline: auto;
  padding-block: var(--gap-5) var(--gap-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cartao__foto {
  width: 136px;
  height: 136px;
  border-radius: var(--s-pilula);
  object-fit: cover;
  background: var(--s-foto-vazia);
  box-shadow: 0 0 0 1px var(--s-linha-forte), 0 0 0 6px var(--s-acento-lavado), var(--s-sombra-ativo);
}

.cartao__nome {
  margin-top: var(--gap-3);
  font-size: var(--s-h3-grande);
}

.cartao__papel {
  margin-top: 6px;
  font-size: var(--s-menor);
  color: var(--s-texto-3);
}

.cartao__links {
  width: 100%;
  margin-top: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cartao__links .botao { justify-content: flex-start; gap: 14px; }
.cartao__links .botao:hover .icone { transform: none; }

.cartao__direitos {
  margin-top: var(--gap-5);
  font-size: var(--s-micro);
  color: var(--s-texto-3);
}

/* entrada: um passo de cada vez, no ritmo da casa */
.cartao > * { animation: cartao-entra .7s var(--s-saida) both; }
.cartao > :nth-child(2) { animation-delay: .06s; }
.cartao > :nth-child(3) { animation-delay: .12s; }
.cartao > :nth-child(4) { animation-delay: .18s; }
.cartao > :nth-child(5) { animation-delay: .26s; }
@keyframes cartao-entra {
  from { opacity: 0; transform: translateY(10px); }
}