/* Alcateia Digital · página de links para as redes sociais (/bio): o endereço que vai na bio do LinkedIn e do Instagram.
   Folha própria e sem JavaScript: abre rápido dentro do navegador do aplicativo. Cores, fontes e botões seguem o design system do site. */
:root {
  --bg: #0d0d0d; --bg2: #0a1a0a; --g: #33ff33; --amber: #ffb000;
  --txt: rgba(51, 255, 51, 0.84); --mut: rgba(51, 255, 51, 0.62); --line: rgba(51, 255, 51, 0.2);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(0.875rem, 4.2vw, 1.0625rem); background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); overflow-x: hidden; color: var(--txt); background: var(--bg); font: 400 1rem/1.6 'Fira Code', ui-monospace, Menlo, Consolas, monospace; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(51, 255, 51, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 255, 51, 0.045) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 75%); }
::selection { background: var(--g); color: var(--bg); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
p, h1 { margin: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.bio { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 26rem; text-align: center; }
.mk { width: 7.5rem; height: auto; margin-bottom: 0.6rem; filter: drop-shadow(0 0 32px rgba(51, 255, 51, 0.28)); transform: rotateY(-14deg) rotateX(6deg); transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) { .mk { animation: tilt 7s ease-in-out infinite alternate; } }
@keyframes tilt { from { transform: rotateY(-16deg) rotateX(7deg) translateY(0); } to { transform: rotateY(8deg) rotateX(2deg) translateY(-6px); } }
.mk-facets polygon { stroke-width: 0.5; }
.mk-facets polygon:nth-child(1), .mk-facets polygon:nth-child(2) { fill: #6dffa0; stroke: #6dffa0; }
.mk-facets polygon:nth-child(3), .mk-facets polygon:nth-child(12) { fill: #52f88d; stroke: #52f88d; }
.mk-facets polygon:nth-child(4), .mk-facets polygon:nth-child(5) { fill: #3dff7a; stroke: #3dff7a; }
.mk-facets polygon:nth-child(6), .mk-facets polygon:nth-child(11) { fill: #2fe066; stroke: #2fe066; }
.mk-facets polygon:nth-child(7), .mk-facets polygon:nth-child(10) { fill: #22b850; stroke: #22b850; }
.mk-facets polygon:nth-child(8), .mk-facets polygon:nth-child(9) { fill: #17903d; stroke: #17903d; }
.mk-ear-l { fill: #0d5a2c; opacity: 0.85; }
.mk-ear-r { fill: #1f9c4b; opacity: 0.85; }
.mk-eye { fill: none; stroke: var(--bg); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mk-cut { fill: var(--bg); }

/* título no formato do wordmark da logo, em uma linha só e abaixo do lobo: "alcateia" em Space Grotesk 700 e "digital_" em JetBrains Mono espaçada a 55% de verde
   (as mesmas proporções do cabeçalho do site: 24 px e 16 px, espaçamento de .26em); o tamanho acompanha a largura da tela para caber numa linha até em 320 px */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wm { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3em 0.4em; font-size: clamp(1.7rem, 9.2vw, 2.7rem); line-height: 1; }
.wm-a { font: 700 1em/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.04em; color: var(--g); white-space: nowrap; }
.wm-d { margin-right: -0.26em; font: 500 0.667em/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.26em; color: rgba(51, 255, 51, 0.55); }
.lead { max-width: 21rem; margin-top: 1rem; font-size: 0.95rem; line-height: 1.6; color: var(--txt); }
.status { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.links { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; margin-top: 1.7rem; }
.btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.1rem; overflow: hidden; text-align: left; color: var(--g); background: rgba(10, 26, 10, 0.55); border: 1px solid rgba(51, 255, 51, 0.3); transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.btn:hover, .btn:focus-visible { border-color: var(--g); box-shadow: 0 0 30px rgba(51, 255, 51, 0.15); }
.btn-fill { position: absolute; inset: 0; z-index: 0; background: var(--g); transform: translateY(101%); transition: transform 0.5s var(--ease); }
.btn:hover .btn-fill, .btn:focus-visible .btn-fill { transform: translateY(0); }
.btn-t, .btn svg { position: relative; z-index: 1; transition: color 0.3s, transform 0.3s; }
.btn-t { display: flex; flex-direction: column; min-width: 0; }
.btn b { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.btn small { font-size: 0.74rem; line-height: 1.4; color: var(--mut); overflow-wrap: anywhere; transition: color 0.3s; }
.btn svg { flex: none; width: 1.15rem; height: 1.15rem; }
.btn:hover b, .btn:hover small, .btn:hover svg, .btn:focus-visible b, .btn:focus-visible small, .btn:focus-visible svg { color: var(--bg); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(0.4rem); }
/* o WhatsApp é o caminho principal: já nasce preenchido */
.btn-main { background: var(--g); border-color: var(--g); }
.btn-main .btn-fill { background: var(--bg); }
.btn-main b, .btn-main small, .btn-main svg { color: var(--bg); }
.btn-main small { color: rgba(13, 13, 13, 0.75); }
.btn-main:hover b, .btn-main:hover small, .btn-main:hover svg, .btn-main:focus-visible b, .btn-main:focus-visible small, .btn-main:focus-visible svg { color: var(--g); }

.rodape { margin-top: 2rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(51, 255, 51, 0.45); }
.rodape a { transition: color 0.15s; }
.rodape a:hover { color: var(--g); }

/* O texto e os botões vêm do painel. Enquanto ele responde (no máximo 2,5 s) ficam transparentes, para a página não "pular" quando há mudança;
   sem JavaScript (ou se ele não terminar) aparecem sozinhos depois de 3 s. */
.bio > * { transition: opacity 0.25s; }
.carregando .bio > :not(.mk):not(.rodape) { opacity: 0; animation: revela 0.01s linear 3s forwards; }
@keyframes revela { to { opacity: 1; } }