/* Central de links da bio — mobile-first (a esmagadora maioria do tráfego do
   Instagram é celular). Identidade do perfil: fundo escuro, rosa da Duo Academy. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --fundo: #0B0B14;
  --fundo-card: #16162B;
  --fundo-card-alto: #1D1D38;
  --texto: #F4F5FF;
  --texto-fraco: #9AA4C7;
  --rosa: #FF2E93;
  --lavanda: #93A0F0;
  --borda: rgba(147, 160, 240, 0.16);
  --raio: 18px;
  --largura: 480px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* brilho rosa/lavanda no topo, como nas LPs */
  background-image:
    radial-gradient(80% 50% at 50% -10%, rgba(255, 46, 147, 0.22), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(147, 160, 240, 0.16), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pagina {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100dvh;
}

/* ── Perfil ─────────────────────────────────────────────────────────── */
.perfil { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }

.perfil-foto {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--rosa), var(--lavanda));
  margin-bottom: 8px;
}

.perfil-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--fundo-card); }

.perfil-nome { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.perfil-handle { margin: 0; color: var(--rosa); font-weight: 700; font-size: 0.9rem; }

.perfil-bio { margin: 8px 0 0; color: var(--texto); font-size: 0.98rem; max-width: 36ch; }

.perfil-autoridade { margin: 2px 0 0; color: var(--texto-fraco); font-size: 0.82rem; }

/* ── Cards de destino ───────────────────────────────────────────────── */
.links { display: flex; flex-direction: column; gap: 14px; }

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo-card);
  color: var(--texto);
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  animation: entrar 0.5s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.card:active { transform: scale(0.985); background: var(--fundo-card-alto); }
.card:focus-visible { outline: 2px solid var(--lavanda); outline-offset: 3px; }

.card-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(147, 160, 240, 0.12);
  color: var(--lavanda);
}

.card-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.card-titulo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; }

.card-subtitulo { color: var(--texto-fraco); font-size: 0.83rem; }

.card-seta { flex: none; color: var(--texto-fraco); display: grid; place-items: center; }

/* Card em destaque: rosa, com pulso suave no anel externo. */
.card--destaque {
  background: linear-gradient(135deg, #FF2E93, #C4006B);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(255, 46, 147, 0.32);
  animation: entrar 0.5s ease-out backwards, pulso 2.8s ease-in-out 0.6s infinite;
  animation-delay: calc(var(--i, 0) * 90ms), 0.6s;
}

.card--destaque .card-icone { background: rgba(255, 255, 255, 0.18); color: #fff; }
.card--destaque .card-subtitulo { color: rgba(255, 255, 255, 0.9); }
.card--destaque .card-seta { color: #fff; }
.card--destaque:active { background: linear-gradient(135deg, #E61F82, #A80060); }

@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes pulso {
  0%, 100% { box-shadow: 0 12px 30px rgba(255, 46, 147, 0.32), 0 0 0 0 rgba(255, 46, 147, 0.35); }
  70% { box-shadow: 0 12px 30px rgba(255, 46, 147, 0.32), 0 0 0 16px rgba(255, 46, 147, 0); }
}

/* ── Rodapé ─────────────────────────────────────────────────────────── */
.rodape { margin-top: auto; padding-top: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.85; }

.rodape-logo { height: 26px; width: auto; }

.rodape-texto { margin: 0; color: var(--texto-fraco); font-size: 0.76rem; }

.aviso-noscript { max-width: var(--largura); margin: 0 auto 24px; padding: 0 20px; color: var(--texto-fraco); font-size: 0.85rem; text-align: center; }
.aviso-noscript a { color: var(--lavanda); }

/* Acessibilidade: respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .card, .card--destaque { animation: none; transition: none; }
}

/* Tablet/desktop: um pouco mais de respiro. */
@media (min-width: 640px) {
  .pagina { padding-top: 48px; gap: 26px; }
  .perfil-nome { font-size: 1.7rem; }
  .card { padding: 18px; }
}