/* Links da marca (pacote 5): página pública da bio. Tema/estilo/forma vêm do banco via data-attributes no <body>.
   Paleta: #000C08 preto, #F2F1EC off-white, #D6D6D6 cinza, #FF7F00 laranja SÓ nas manchas do fundo. */
@font-face{font-family:Inter;src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--preto:#000C08;--off:#F2F1EC;--cinza:#D6D6D6;--laranja:#FF7F00;
  --bg:var(--preto);--fg:var(--off);--fg-2:var(--cinza);--raio:999px;--logo-filtro:none;
  --texto:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--preto)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);font:400 16px/1.4 var(--texto);overflow-x:hidden}
body[data-tema=claro]{--bg:var(--off);--fg:var(--preto);--fg-2:#3C4541;--logo-filtro:invert(1)}
body[data-forma=reto]{--raio:10px}
a{color:inherit}
a:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

/* Manchas desfocadas (só no tema Vidro). Sem imagem, só CSS. */
.manchas{position:fixed;inset:0;overflow:hidden;pointer-events:none;display:none;z-index:0}
body[data-tema=vidro] .manchas{display:block}
.manchas i{position:absolute;border-radius:50%;filter:blur(40px)}
.manchas i:nth-child(1){top:-90px;right:-110px;width:360px;height:360px;background:radial-gradient(circle,var(--laranja) 0%,transparent 68%);opacity:.62}
.manchas i:nth-child(2){top:38%;left:-130px;width:340px;height:340px;background:radial-gradient(circle,var(--off) 0%,transparent 68%);opacity:.18}
.manchas i:nth-child(3){bottom:-100px;right:-60px;width:320px;height:320px;background:radial-gradient(circle,var(--laranja) 0%,transparent 68%);opacity:.34}

.coluna{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;padding:40px 20px 48px;display:flex;flex-direction:column;align-items:center;gap:14px}
.logo{width:170px;max-width:60%;height:auto;filter:var(--logo-filtro)}
.bio{margin:0;text-align:center;font-size:15px;line-height:1.45;color:var(--fg);max-width:34ch;overflow-wrap:anywhere}
.bio:empty{display:none}

/* Redes do topo */
.redes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:2px 0 8px}
.redes:empty{display:none}
.rede{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--fg);
  background:rgba(242,241,236,.10);border:1px solid rgba(242,241,236,.28)}
body[data-tema=claro] .rede{background:rgba(0,12,8,.06);border-color:rgba(0,12,8,.28)}
.rede img{width:26px;height:26px;object-fit:contain}
.rede svg{width:24px;height:24px}

/* Botões */
.lista{width:100%;display:flex;flex-direction:column;gap:12px}
.botao{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 12px;border-radius:var(--raio);text-decoration:none;
  font-weight:600;font-size:16px;color:var(--fg);border:1.5px solid var(--fg);background:transparent;
  transition:transform .12s ease,background-color .12s ease}
.botao:active{transform:scale(.985)}
.botao .titulo{flex:1 1 auto;text-align:center;overflow-wrap:anywhere;padding:8px 0}
.botao .seta{flex:0 0 auto;width:16px;height:16px;opacity:.75;margin-right:6px}
.chip{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(242,241,236,.14)}
.chip svg{width:20px;height:20px}
.chip img{width:100%;height:100%;object-fit:cover}
.chip .selo-ml{font:800 11px/1 var(--texto);color:var(--preto);background:#FFE600;border-radius:6px;padding:4px 4px}

/* Escuro e Claro: cheio inverte, contorno só borda */
body[data-tema=escuro][data-estilo=cheio] .botao,
body[data-tema=claro][data-estilo=cheio] .botao{background:var(--fg);color:var(--bg)}
body[data-tema=escuro][data-estilo=cheio] .chip{background:rgba(0,12,8,.10)}
body[data-tema=claro][data-estilo=cheio] .chip{background:rgba(242,241,236,.16)}
body[data-tema=claro][data-estilo=contorno] .chip{background:rgba(0,12,8,.08)}
@media (hover:hover){
  body[data-tema=escuro][data-estilo=contorno] .botao:hover{background:rgba(242,241,236,.10)}
  body[data-tema=claro][data-estilo=contorno] .botao:hover{background:rgba(0,12,8,.07)}
  body[data-tema=escuro][data-estilo=cheio] .botao:hover{background:var(--cinza)}
  body[data-tema=claro][data-estilo=cheio] .botao:hover{background:#26302C}
}

/* Vidro: translúcido, borda de 1px, brilho interno. A camada escura por baixo garante contraste do texto sobre as manchas. */
body[data-tema=vidro] .botao{border:1px solid rgba(242,241,236,.5);
  background:linear-gradient(rgba(0,12,8,.36),rgba(0,12,8,.36));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.25)}
body[data-tema=vidro][data-estilo=cheio] .botao{border-color:rgba(242,241,236,.24);
  background:linear-gradient(rgba(242,241,236,.10),rgba(242,241,236,.10)),linear-gradient(rgba(0,12,8,.36),rgba(0,12,8,.36))}
body[data-tema=vidro] .rede{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
@media (hover:hover){body[data-tema=vidro] .botao:hover{border-color:var(--off)}}
/* Sem backdrop-filter: cinza escuro sólido legível */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-tema=vidro] .botao,body[data-tema=vidro][data-estilo=cheio] .botao{background:#1A211E}
  body[data-tema=vidro] .rede{background:#1A211E}
}

/* Esqueleto enquanto a API responde */
.esqueleto{display:block;width:100%;height:56px;border-radius:var(--raio);background:rgba(242,241,236,.08);border:1px solid rgba(242,241,236,.14)}

/* Fallback / avisos */
.aviso{margin:0;text-align:center;font-size:15px;line-height:1.45;color:var(--fg);max-width:34ch}
.aviso a{font-weight:600}
.fallback{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}

@media (prefers-reduced-motion:reduce){.botao{transition:none}.botao:active{transform:none}}
@media (max-width:340px){.coluna{padding:32px 14px 40px}.botao{font-size:15px}}