:root {
  --fundo: #0a0d0b;
  --fundo-externo: #070908;
  --brilho: #16241e;
  --verde: #24463a;
  --verde-borda: #3b6353;
  --verde-suave: #7fa392;
  --marfim: #eeece6;
  --tinta: #0d110f;
  --ouro: #c8a45c;
  --alta: #6fbf9c;
  --baixa: #d9796f;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--fundo-externo); -webkit-text-size-adjust: 100%; }
body { font-family: 'Jost', system-ui, sans-serif; color: var(--marfim); line-height: 1.35; -webkit-font-smoothing: antialiased; }
img { display: block; }

.pagina { position: relative; overflow: hidden; min-height: 100vh; padding: 3.5rem 1.25rem 2rem; text-align: center; background: radial-gradient(80% 38% at 50% 0%, var(--brilho) 0%, transparent 100%), var(--fundo); }

.pagina > :not(.fundo) { position: relative; z-index: 1; }
.fundo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.35) 75%, transparent); mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.35) 75%, transparent); }

.redes { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; }
.rede { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: rgba(10, 13, 11, .7); box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .55); transition: transform .15s ease, box-shadow .15s ease; }
.rede::after { content: ""; position: absolute; inset: .72rem; background: var(--marfim); -webkit-mask: var(--svg) center / contain no-repeat; mask: var(--svg) center / contain no-repeat; }
.rede:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ouro), 0 0 14px rgba(200, 164, 92, .4); }
.rede:focus-visible { outline: 2px solid var(--verde-suave); outline-offset: 3px; }

.avatar-caixa { width: 7.5rem; margin: 0 auto; border-radius: 50%; }
.selo { position: absolute; left: -.15rem; bottom: .1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--fundo); box-shadow: 0 0 0 1px var(--ouro); }
.selo::after { content: ''; position: absolute; inset: .3rem; background: var(--ouro); -webkit-mask: url(img/bitcoin.svg) center / contain no-repeat; mask: url(img/bitcoin.svg) center / contain no-repeat; }
.avatar { width: 7.5rem; height: 7.5rem; margin: 0 auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 60% 35%, #33493f, #121a16 78%); box-shadow: 0 0 0 1px var(--verde-borda), 0 0 0 5px var(--fundo), 0 0 0 6px rgba(127, 163, 146, .22), 0 14px 34px rgba(0, 0, 0, .6); }
.avatar img { width: 100%; max-width: none; margin: 5% 0 0 -9%; }

h1 { margin-top: 1.5rem; font-size: clamp(1.35rem, 6.2vw, 1.75rem); font-weight: 500; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; }
.bio { margin-top: .55rem; font-size: 1.05rem; font-weight: 400; color: var(--verde-suave); }

.mercado { display: inline-block; margin-top: .9rem; padding: .3rem .85rem; border: 1px solid rgba(127, 163, 146, .28); border-radius: 999px; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--verde-suave); background: rgba(10, 13, 11, .6); }
.mercado b { font-weight: 500; color: var(--marfim); }
.mercado .sobe { color: var(--alta); }
.mercado .desce { color: var(--baixa); }

.links { display: grid; gap: 1rem; margin-top: 1.8rem; }
.botao { --cor-pulso: 238, 236, 230; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 4.4rem; padding: .8rem 3.4rem; border-radius: 16px; background: linear-gradient(180deg, #f7f5ef 0%, #e6e2d6 100%); color: var(--tinta); font-size: 1.08rem; font-weight: 500; letter-spacing: .01em; text-wrap: balance; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(0, 0, 0, .45); transition: transform .15s ease, box-shadow .15s ease; animation: pulsar 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.botao::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: brilho 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s + 1s); pointer-events: none; }
.botao::after { content: ''; position: absolute; right: 1.2rem; width: .55rem; height: .55rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .45; transition: transform .15s ease, opacity .15s ease; }
.botao:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.015); }
.botao:hover::after { opacity: .9; transform: translateX(3px) rotate(45deg); }
.botao:active { transform: scale(.985); }
.botao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
@keyframes pulsar {
  0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 0 rgba(var(--cor-pulso), .45); }
  50% { transform: scale(1.022); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 9px rgba(var(--cor-pulso), 0); }
}
@keyframes brilho { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

.botao:first-child { --cor-pulso: 111, 191, 156; background: linear-gradient(180deg, #2c5546 0%, #1d3a30 100%); color: var(--marfim); }
.botao:first-child::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); }

.botao.destaque { --cor-pulso: 200, 164, 92; flex-direction: column; justify-content: flex-end; min-height: 9.8rem; padding: 1.1rem 1.4rem 1.25rem; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, #1d3329 0%, #0c120f 70%); color: var(--marfim); font-size: 1.12rem; font-weight: 600; letter-spacing: .05em; line-height: 1.25; animation-duration: 1.8s; }
.botao.destaque { border: 1px solid var(--ouro); }
.botao.destaque::before { background: linear-gradient(100deg, transparent, rgba(232, 201, 126, .28), transparent); }
.botao.destaque::after { display: none; }
.botao.destaque > span:last-child { position: relative; background: linear-gradient(90deg, #f3dc9a, #fff6dc 50%, #f3dc9a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8)); }
.botao.destaque .grafico { position: absolute; inset: .6rem .6rem 2.6rem; background: url(img/grafico-lucro.svg) center / contain no-repeat; opacity: .95; }
.icone { position: absolute; left: 1.15rem; width: 1.45rem; height: 1.45rem; background: currentColor; -webkit-mask: var(--svg) center / contain no-repeat; mask: var(--svg) center / contain no-repeat; }

/* acabamentos */
.avatar-caixa::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(200, 164, 92, .9) 75%, #f3dc9a 82%, transparent 90%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: girar 5s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
h1 { background: linear-gradient(90deg, var(--marfim) 0%, var(--marfim) 40%, #f3dc9a 50%, var(--marfim) 60%, var(--marfim) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reluz 6s ease-in-out infinite; }
@keyframes reluz { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.rede { animation: flutuar 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); }
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.rodape { margin-top: 2.2rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(127, 163, 146, .55); }


@media (min-width: 760px) {
  body { padding: .6rem 0; }
  .pagina { max-width: 45rem; min-height: calc(100vh - 1.2rem); margin: 0 auto; padding: 4.5rem 2.3rem 2.2rem; border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .botao:hover, .botao:active { transform: none; }
}