/* Links da bio - Tatiane Dib
   Mesma identidade das LPs: fundo #161F24, dourado #FBD19E,
   Playfair Display no nome e Lato no resto. Mobile-first: a coluna
   nunca passa de 440px, nem no desktop. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; color: #F4F4F4; font-family: Lato, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 70% at 50% 0%, #273740 0%, #161F24 62%);
}
img { display: block; max-width: 100%; }

.pagina { width: 100%; max-width: 440px; margin: 0 auto; padding: 32px 20px 40px; }

/* ---------- PERFIL ---------- */
.perfil { text-align: center; }
/* A foto tem fundo claro de estúdio. A máscara apaga a base para ela sumir
   no escuro em vez de terminar numa linha reta. */
.foto {
  width: 220px; height: auto; margin: 0 auto; border-radius: 120px 120px 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.perfil h1 {
  font-family: "Playfair Display", serif; font-size: 34px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.3px; margin: -18px 0 8px; position: relative;
}
.perfil h1 b { color: #FBD19E; font-style: italic; }
.papel { margin: 0; font-size: 15px; line-height: 1.4; color: #C9CED1; text-wrap: balance; }
.prova { margin: 10px 0 0; font-size: 14px; color: #C9CED1; }
.prova b { color: #FBD19E; font-weight: 900; }

/* ---------- BOTÕES ---------- */
.links { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.botao {
  display: block; text-decoration: none; text-align: center; padding: 16px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(251, 209, 158, 0.35); color: #F4F4F4;
  transition: background .15s, border-color .15s, transform .15s;
}
/* Botão com foto: a miniatura entra inteira (contain, sem recorte) numa caixa
   de tamanho fixo, para o texto dos botões começar na mesma linha mesmo com
   fotos de proporções diferentes. */
.botao:has(.mini) { display: flex; align-items: center; gap: 16px; text-align: left; padding: 12px 16px 12px 12px; }
.mini { width: 92px; height: 112px; object-fit: contain; flex: none; border-radius: 10px; }
.botao .txt { display: block; }
.botao:hover { background: rgba(251, 209, 158, 0.08); border-color: #FBD19E; transform: translateY(-1px); }
.botao:focus-visible { outline: 2px solid #FBD19E; outline-offset: 3px; }
.botao .tit { display: block; font-size: 17px; font-weight: 900; line-height: 1.25; }
.botao .sub { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: #C9CED1; text-wrap: balance; }
/* Faixa de ação dentro do cartão: deixa claro que o cartão inteiro é clicável. */
.botao .cta {
  display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 999px;
  background: #FBD19E; color: #141C21; font-size: 13.5px; font-weight: 900; line-height: 1.2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.botao:hover .cta { background: #FDE0BA; }
/* A aula é a porta de entrada: botão cheio, dourado. */
.botao.destaque { background: #FBD19E; border-color: #FBD19E; color: #141C21; }
.botao.destaque .sub { color: #5E4524; }
.botao.destaque:hover { background: #FDE0BA; }
.botao.destaque .cta { background: #141C21; color: #FBD19E; }
.botao.destaque:hover .cta { background: #273740; }

.rodape { display: flex; justify-content: center; margin-top: 36px; opacity: .6; }