/* CSS da página de links (links.html). Arquivo externo de propósito: a CSP
   do site (_headers) fecha style-src 'self', sem 'unsafe-inline', então um
   <style> dentro do HTML fica bloqueado e a página cai pro CSS padrão do
   navegador (foi exatamente o que aconteceu na 1ª versão, corrigido aqui). */

:root{
  --paper:       #FFFFFF;
  --espresso-ink:#0F1B32;
  --espresso-2:  #2A3F68;
  --gold:        #D0AD39;
  --gold-deep:   #7E641B;
  --gold-soft:   #D8BF64;
  --cream-dark:  #D7DEEA;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --script:  "Parisienne", "Playfair Display", cursive;
  --body:    "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0; min-height: 100dvh;
  background:
    radial-gradient(900px 520px at 50% -12%, var(--espresso-2), transparent 60%),
    var(--espresso-ink);
  color: var(--cream-dark);
  font-family: var(--body);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.3rem;
}
@media (max-width: 600px){
  /* Centralizado vertical (align-items:center) sobra muito vazio em cima
     num celular alto: o cartão é baixo, então metade da tela ficava em
     branco antes do conteúdo começar. Sobe pro topo com um respiro fixo
     em vez de centralizar (pedido do Ryan). */
  body{ align-items: flex-start; padding-top: 3.2rem; }
}
a{ color: inherit; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }

.cartao{ width: 100%; max-width: 420px; text-align: center; }
.logo{ width: 84px; height: 84px; border-radius: 20px; margin-bottom: 1.1rem; }
.wordmark{
  font-family: var(--script); font-weight: 400; font-size: 2.6rem; color: var(--paper);
  line-height: 1; margin-bottom: .5rem;
}
.eyebrow{
  font-family: var(--body); font-weight: 600; font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 2.2rem;
}

.lista{ display: flex; flex-direction: column; gap: .9rem; }
.link{
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem; border-radius: 14px; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 1.02rem;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.link:hover{ transform: translateY(-2px); }
.link .icone{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.link .icone svg{ width: 20px; height: 20px; display: block; }
.link .rotulo{ flex: 1; text-align: left; }
.link .rotulo small{ display: block; font-weight: 500; font-size: .78rem; opacity: .72; margin-top: .1rem; }

/* Primeiro link (site oficial): dourado preenchido, é a ação principal. */
.link-primario{ background: var(--gold); color: var(--espresso-ink); }
.link-primario:hover{ background: var(--gold-soft); }
.link-primario .icone{ background: rgba(15,27,50,.14); color: var(--espresso-ink); }

/* WhatsApp Brasil / Espanha: contorno dourado sobre o navy. */
.link-secundario{ background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--gold-soft) 42%, transparent); color: var(--paper); }
.link-secundario:hover{ border-color: var(--gold); background: rgba(255,255,255,.08); }
.link-secundario .icone{ background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-soft); }

.rodape{ margin-top: 2.4rem; font-size: .8rem; color: var(--cream-dark); opacity: .68; }