/* ============================================================
   vitória kauer — link de bio · marca v2

   NOTA DE PROCEDÊNCIA DAS CORES — não "corrija" de volta.
   O laranja e o oliva foram lidos byte a byte nos PNGs do designer,
   que são cor chapada, sem gradiente nem compressão com perda:

     logo-horizontal-laranja.png  →  #F98F07   (131.167 px)
     logo-horizontal-verde.png    →  #718055   ( 11.174 px)

   Outros hex de laranja e oliva circularam em documentos por mais de
   um ano e não existem em asset nenhum. Documento não é fonte de
   verdade sobre cor; o arquivo do designer é.

   O fundo é o creme oficial #F6F2E8. A referência do Claude Design
   trazia outro tom, que é drift da ferramenta — não existe na marca.
   Detalhes: branding/identity/brand.md §3
   ============================================================ */

:root {
  --color-orange:        #F98F07;
  --color-orange-hover:  #ED8705;
  --color-olive:         #718055;
  --color-green:         #3C4429;
  --color-green-dark:    #262D1B;
  --color-green-darkest: #1A1F12;
  --color-cream:         #F6F2E8;
  --color-surface:       #FFFDF8;
  --color-text-inverse:  #F3EFE4;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, sans-serif;

  --radius-lg:    8px;
  --radius-circle: 50%;

  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 200ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--color-cream);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--color-green);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

a { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

/* halo de ambiente. gradiente é permitido aqui porque é fundo, não superfície
   de conteúdo — e fica fraco o bastante para não disputar o olho com o CTA. */
.glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 420px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(249, 143, 7, 0.10), transparent 70%);
  pointer-events: none;
}

.bio {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 44px 22px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- cabeçalho de perfil --- */

.avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-circle);
  padding: 4px;
  background: var(--color-orange);
  box-shadow: 0 12px 30px rgba(38, 45, 27, 0.35);
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-circle);
  object-fit: cover;
  display: block;
}

.rule {
  width: 34px;
  height: 2px;
  background: var(--color-orange);
  margin-top: 18px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.01em;
  color: var(--color-green-dark);
  margin-top: 14px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-top: 6px;
}

.bio__text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(60, 68, 41, 0.78);
  margin-top: 12px;
  text-align: center;
  max-width: 300px;
}

/* --- links --- */

.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 30px;
}

.link {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  color: var(--color-green-dark);
  border: 1px solid rgba(60, 68, 41, 0.14);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(38, 45, 27, 0.06);
  transition: border-color var(--duration-hover) var(--ease),
              background   var(--duration-hover) var(--ease),
              transform    var(--duration-hover) var(--ease);
}

.link:hover { border-color: var(--color-orange); transform: translateY(-2px); }
.link:active { transform: translateY(0) scale(0.985); }

/* CTA ainda sem destino (o número de WhatsApp não vive no repo — sai de env var).
   visual idêntico de propósito: a página é revisada pela Vitória e o design precisa
   aparecer inteiro. só não leva a lugar nenhum, em vez de levar ao lugar errado. */
.link--disabled { cursor: default; pointer-events: none; }

.link__icon {
  flex-shrink: 0;
  width: 26px;
  display: flex;
  justify-content: center;
  color: var(--color-olive);
}

.link__body { flex: 1; }

.link__title {
  display: block;
  font-weight: 700;
  font-size: 15px;
}

.link__sub {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(60, 68, 41, 0.6);
  margin-top: 1px;
}

.link__chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: rgba(60, 68, 41, 0.35);
}

/* o card de maior prioridade de negócio — escuro, sombra mais funda, título em display */
.link--featured {
  background: var(--color-green-dark);
  color: var(--color-text-inverse);
  border-color: transparent;
  padding: 17px 18px;
  box-shadow: 0 12px 28px rgba(38, 45, 27, 0.22);
}

.link--featured:hover {
  background: var(--color-green-darkest);
  border-color: transparent;
}

.link--featured .link__icon { color: var(--color-orange); }

.link--featured .link__title {
  font-family: var(--font-display);
  font-size: 16px;
}

.link--featured .link__sub {
  color: inherit;
  opacity: 0.75;
}

.link--featured .link__chevron {
  color: inherit;
  opacity: 0.7;
}

/* --- redes sociais --- */

.social {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.social a {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-circle);
  border: 1px solid rgba(60, 68, 41, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange);
  background: var(--color-surface);
  transition: border-color var(--duration-hover) var(--ease),
              transform    var(--duration-hover) var(--ease);
}

.social a:hover { border-color: var(--color-orange); transform: translateY(-2px); }
.social a:active { transform: translateY(0) scale(0.94); }

.handle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(60, 68, 41, 0.55);
  margin-top: 14px;
}

.footer {
  margin-top: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(60, 68, 41, 0.45);
}

/* o crédito fica um degrau abaixo do copyright: é assinatura de quem fez,
   não informação que a visitante veio buscar */
.footer__credit {
  margin-top: 6px;
  color: rgba(60, 68, 41, 0.38);
}

.footer__credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(249, 143, 7, 0.45);
  text-underline-offset: 3px;
  transition: color var(--duration-hover) var(--ease),
              text-decoration-color var(--duration-hover) var(--ease);
}

.footer__credit a:hover {
  color: var(--color-orange);
  text-decoration-color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}