/* Bio versão 2 · Diogo Brito
   02/10/2026: nasceu como cópia da bio do Instagram (site principal, hub.css
   + o <style> do index.html). 03/10/2026: virou o desenho D2, escolhido pelo
   Diogo num canvas de propostas: botões escuros e finos em seções com rótulo,
   selo "Grátis", o Guia em dourado e o Acompanhamento preso no pé da tela.
   Ficaram da bio do Instagram o fundo escuro com os orbes, a logo de vidro,
   as fontes (Outfit e Plus Jakarta Sans) e a abertura em escada. Copiado, não
   importado: a bio do Instagram mora em outro repositório e não muda. */

:root {
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --verde: #80A422;
  --verde-claro: #D3DFA5;
  --ouro: #E2B04A;
  --ouro-claro: #F0D696;
  --fundo: #14130F;
  --stone-600: #55524A;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-abre: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); background: #0a0908; color: #fff; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
@media (min-width: 481px) {
  body { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #1a1916, #0a0908 70%); padding: 24px; }
}

/* A moldura. Coluna da altura da tela: a casca cresce e empurra o pé (faixa
   e Acompanhamento) pro fim da tela quando tudo cabe. Quando não cabe, a
   página rola e o pé vem logo depois do Guia: nada fica por cima de nada
   (06/10/2026, pedido do Diogo, depois de ver o Guia atrás das fotos na
   tela do Instagram; antes o pé era sticky). */
.bio {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--fundo);
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
}
@media (min-width: 481px) {
  .bio {
    max-width: 420px;
    min-height: min(820px, calc(100vh - 48px));
    border-radius: 36px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 60px 120px rgba(0,0,0,0.6), 0 30px 60px rgba(0,0,0,0.4);
  }
}
.bio::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 10%, rgba(128,164,34,0.40), transparent 44%),
    radial-gradient(circle at 86% 90%, rgba(154,35,35,0.30), transparent 46%),
    radial-gradient(circle at 50% 50%, rgba(94,122,22,0.12), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.bio::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 2px);
  pointer-events: none;
  z-index: 1;
}
.bio-orbes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* Sem filter: blur nos orbes (06/10/2026): o degradê já some sozinho na
   borda, e o desfoque refeito a cada quadro pesava no Android fraco. */
.bio-orbe { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
/* O atraso de 820 ms segura os orbes parados durante a abertura: três blurs
   em loop junto com o desfoque de entrada derrubam quadros no Safari de
   iPhone antigo (mesma decisão da bio do Instagram). */
.bio-orbe.o-verde    { width: 320px; height: 320px; background: radial-gradient(circle, rgba(140,180,40,0.62), transparent 66%); animation: orbe1 19s linear 820ms infinite backwards; }
.bio-orbe.o-vermelho { width: 300px; height: 300px; background: radial-gradient(circle, rgba(168,45,45,0.54), transparent 66%); animation: orbe2 23s linear 820ms infinite backwards; }
.bio-orbe.o-oliva    { width: 260px; height: 260px; background: radial-gradient(circle, rgba(150,180,50,0.44), transparent 68%); animation: orbe3 27s linear 820ms infinite backwards; }
@keyframes orbe1 { 0%{transform:translate(-60px,-40px)} 25%{transform:translate(200px,120px)} 50%{transform:translate(150px,440px)} 75%{transform:translate(-30px,280px)} 100%{transform:translate(-60px,-40px)} }
@keyframes orbe2 { 0%{transform:translate(240px,520px)} 25%{transform:translate(30px,360px)} 50%{transform:translate(90px,60px)} 75%{transform:translate(280px,240px)} 100%{transform:translate(240px,520px)} }
@keyframes orbe3 { 0%{transform:translate(110px,200px)} 33%{transform:translate(-40px,500px)} 66%{transform:translate(230px,360px)} 100%{transform:translate(110px,200px)} }

.bio-casca {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 18px 18px 8px;
  padding-top: max(18px, env(safe-area-inset-top));
}

/* TOPO: logo de vidro ao lado do nome, o par no centro (06/10/2026, opção 2
   da fileira L do canvas: com a logo em cima a página não cabia na tela do
   Instagram). O CRN subiu pra linha do "Nutricionista". */
.bio-topo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.bio-marca {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 6px rgba(0,0,0,0.18), 0 14px 30px rgba(0,0,0,0.5);
}
.bio-marca img { width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.40)); }
.bio-nome { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 4px; color: #fff; }
.bio-nome em { font-style: normal; color: var(--verde-claro); font-weight: 600; }
.bio-crn { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }

/* SEÇÕES e BOTÕES */
.bio-botoes { display: flex; flex-direction: column; gap: 12px; }
.bio-secao { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bio-secao[hidden] { display: none; }
.bio-rotulo { margin: 2px 0 0 4px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: rgba(211,223,165,0.78); }
.bio-secao--ouro .bio-rotulo { color: var(--ouro); }

.bio-bt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  /* 06/10/2026: a sobra da direita e o vão da foto encolheram 4 px e 2 px
     pra "Lista de alimentos para GLP-1" e o selo Grátis caberem numa linha
     em 390 px (antes o selo caía pra baixo do título). */
  padding: 7px 10px 7px 8px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  /* Sem backdrop-filter (06/10/2026): com os orbes andando atrás, o celular
     refazia o desfoque de cada botão a cada quadro e a faixa engasgava no
     Android fraco. Sobre o fundo escuro a diferença não aparece. */
  background: rgba(255,255,255,0.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  color: #fff;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.bio-bt[hidden] { display: none; }
.bio-bt:hover { background: rgba(255,255,255,0.09); }
.bio-bt:active { transform: scale(0.99); }
.bio-bt:focus-visible, .bio-zap:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 3px; }
.bio-bt__foto { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.10); }
.bio-bt__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bio-bt__linha { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bio-bt__titulo { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.15; }
.bio-bt__sub { font-size: 11px; line-height: 1.3; font-weight: 500; color: rgba(255,255,255,0.62); }
.bio-bt__seta { display: flex; flex-shrink: 0; opacity: 0.6; transition: transform 200ms var(--ease-out); }
.bio-bt__seta svg { width: 13px; height: 13px; }
.bio-bt:hover .bio-bt__seta { transform: translateX(3px); }
.bio-selo { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px; background: rgba(128,164,34,0.20); color: var(--verde-claro); }

/* A capa de suplementos junta whey e creatina com o fundo transparente:
   sem o quadrado claro atrás que as outras capas têm. */
.bio-bt[data-bio-botao="suplementos"] .bio-bt__foto { background: none; border-radius: 0; }

/* O REFLEXO (05/10/2026). Uma faixa de luz que corre pelo botão: uma vez em
   cada botão, em escada, logo depois da abertura (::before), e de novo a cada
   toque no celular (::after). No computador o mouse fica só com o destaque
   leve de antes: o reflexo na passada do mouse saiu, o Diogo achou rápido
   demais e desnecessário (05/10/2026). Só
   translate e opacidade, pra não pesar em celular fraco. */
.bio-bt::before, .bio-bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.20) 52%, transparent 68%);
  translate: -110% 0;
}
.bio-bt::before { animation: reflexo 1100ms var(--ease-standard) calc(900ms + var(--ordem, 0) * 140ms) both; }
.bt-ouro::before, .bt-ouro::after { background: linear-gradient(105deg, transparent 32%, rgba(240,214,150,0.26) 48%, rgba(255,240,200,0.40) 50%, rgba(240,214,150,0.26) 52%, transparent 68%); }
@keyframes reflexo { from { translate: -110% 0; } to { translate: 110% 0; } }
.bio-bt.tocou::after { animation: reflexo 560ms var(--ease-out); }
.bio-bt.tocou { transform: scale(0.97); border-color: rgba(211,223,165,0.50); background-color: rgba(255,255,255,0.10); }
.bio-bt.tocou .bio-bt__seta { transform: translateX(4px); opacity: 1; }
.bt-ouro.tocou { border-color: var(--ouro-claro); }
.bio-zap { transition: transform 200ms var(--ease-out); }
.bio-zap.tocou { transform: scale(0.97); }
.bio-lista a { transition: transform 200ms var(--ease-out), background 200ms var(--ease-standard); }
.bio-lista a.tocou { transform: scale(0.97); background: rgba(255,255,255,0.12); }

/* Verde: Receitas, o destaque grátis. 06/10/2026, pedido do Diogo: igual ao
   Guia, só que verde e só com a borda brilhando (antes era o botão inteiro
   verde, com pulso, e brigava com o Guia e o Acompanhamento). */
.bt-verde {
  background: linear-gradient(135deg, rgba(128,164,34,0.16), rgba(128,164,34,0.04));
  border: 1.5px solid #9CC23A;
  box-shadow: 0 0 18px rgba(154,196,52,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
}
.bt-verde:hover { background: linear-gradient(135deg, rgba(128,164,34,0.22), rgba(128,164,34,0.07)); }
.bt-verde .bio-bt__foto { box-sizing: border-box; border: 1px solid #9CC23A; }
.bt-verde .bio-bt__sub { color: rgba(211,223,165,0.92); }
.bt-verde .bio-bt__seta { opacity: 0.8; }
.bt-verde.tocou { border-color: #B5D65A; }

/* Ouro: o Guia, o único produto pago */
.bt-ouro {
  min-height: 66px;
  background: linear-gradient(135deg, rgba(226,176,74,0.16), rgba(226,176,74,0.05));
  border: 1.5px solid var(--ouro);
  box-shadow: 0 0 20px rgba(226,176,74,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.bt-ouro:hover { background: linear-gradient(135deg, rgba(226,176,74,0.22), rgba(226,176,74,0.08)); }
.bt-ouro .bio-bt__foto { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--ouro); }
.bt-ouro .bio-bt__sub { color: rgba(240,214,150,0.92); }

/* O PÉ: a faixa e o Acompanhamento no fim da tela, sem ficar por cima de
   nada (ver a moldura). A linha do CRN saiu daqui e foi pro topo. */
.bio-pe {
  position: relative;
  z-index: 3;
  padding: 4px 18px max(12px, env(safe-area-inset-bottom));
}

/* A FAIXA de antes e depois (06/10/2026, opção 1 da fileira K do canvas):
   os pares da página do online em moldura de polaroid, deslizando devagar em
   cima do Acompanhamento, de ponta a ponta da moldura. Copiada do faixa.css
   do site (lá 78 px, aqui 58), não importada. A cabeça do Diogo passa na
   frente da parte de baixo dela; o brilho vermelho fica atrás. Só transform,
   pra não pesar em celular fraco. */
.bio-faixa {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 -18px;
  padding: 6px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bio-faixa__trilho { display: flex; gap: 22px; width: max-content; animation: faixa-anda 60s linear infinite; }
@keyframes faixa-anda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bio-faixa__par { display: flex; align-items: flex-start; flex-shrink: 0; }
.bio-faixa__foto { display: block; padding: 3px; background: #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2); }
.bio-faixa__foto img { display: block; width: 50px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
/* o "antes" atrás, mais girado e com a cor puxada pra trás; o "depois" na frente */
.bio-faixa__foto--antes { transform: rotate(-5deg); filter: saturate(0.85); }
.bio-faixa__foto--depois { position: relative; z-index: 2; transform: rotate(3deg); margin-left: -12px; }
/* O Acompanhamento com a foto do Diogo saindo de dentro do botão, no canto
   direito, com um brilho vermelho atrás da cabeça (03/10/2026, opção 3 do
   canvas, depois do ajuste dele: a foto no canto pra o título caber numa
   linha). A foto se desfaz embaixo pra entrar no vermelho sem corte seco. A
   seta virou setinha depois da linha de baixo, porque a bolinha da seta
   ficava em cima da foto.
   06/10/2026: o botão cresceu (60 para 66 px de altura, foto de 104 para
   110 px), no limite de 5 a 10% que o Diogo deu pra nada quebrar linha. O
   título ficou do mesmo tamanho: maior, ele entraria na foto em 390 px. E
   ganhou um pulso de brilho vermelho, como o pulso verde que as Receitas
   tinham até 06/10/2026.
   19/10/2026: o logo do WhatsApp à esquerda, com borda branca e halo verde
   (opção 6 de 8 no grid que o Diogo escolheu), e o texto de baixo virou
   "Plano e suporte semanal". Pra caber o logo, a foto encolheu (110 pra
   100 px) e o título ficou em 13 px em toda largura. */
.bio-zap-caixa { position: relative; }
.bio-zap-caixa[hidden] { display: none; }
/* -10 px: a parte de baixo das fotos passa atrás do botão e da cabeça
   (06/10/2026, junto com as fotos de 58 pra 50 px, pra caber na tela). */
.bio-zap-lugar { position: relative; margin-top: -10px; }
.bio-zap__brilho { position: absolute; z-index: 0; top: -40px; right: -6px; width: 164px; height: 98px; border-radius: 50%; background: radial-gradient(closest-side, rgba(178,70,70,0.55), rgba(178,70,70,0)); pointer-events: none; }
.bio-zap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
  width: 100%;
  min-height: 66px;
  gap: 10px;
  padding: 0 0 0 12px;
  border-radius: 999px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(178,70,70,0.97), rgba(126,27,27,0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 26px rgba(126,27,27,0.42);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
/* O pulso: um brilho pronto que só acende e apaga (opacidade). Antes a
   animação mexia na sombra do botão, e o celular redesenhava o botão com a
   foto 60 vezes por segundo (06/10/2026). Fica atrás da foto e do texto. */
.bio-zap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 2px 4px rgba(126,27,27,0.10), 0 0 28px 2px rgba(214,80,80,0.55);
  opacity: 0;
  pointer-events: none;
  animation: pulso-zap 2.8s ease-in-out 1.2s infinite;
}
@keyframes pulso-zap { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.bio-zap__foto {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 100px;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.bio-zap__wpp { position: relative; z-index: 1; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 18px 4px rgba(37,211,102,0.75); }
.bio-zap__texto { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.bio-zap__titulo { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.15; white-space: nowrap; }
.bio-zap__sub { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,0.86); white-space: nowrap; }
.bio-zap__sub svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Celular estreito: foto e título um pouco menores, pra o título não entrar
   na foto. */
@media (max-width: 389px) {
  .bio-zap__foto { width: 90px; }
  .bio-zap__sub { font-size: 10.5px; }
  /* 06/10/2026: título dos botões 1 px menor, pra "Lista de alimentos para
     GLP-1" e o selo caberem numa linha em 375 px. Em 360 px o selo dela
     ainda cai pra baixo do título. */
  .bio-bt__titulo { font-size: 14px; }
}
/* 19/10/2026: com o logo do WhatsApp, abaixo de 375 px o título entrava no
   rosto do Diogo. Logo, espaço e título encolhem um pouco. */
@media (max-width: 374px) {
  .bio-zap { padding-left: 10px; gap: 8px; }
  .bio-zap__wpp { width: 32px; height: 32px; }
  .bio-zap__titulo { font-size: 12px; }
}
@media (max-width: 340px) {
  .bio-zap { padding-left: 9px; gap: 7px; }
  .bio-zap__wpp { width: 28px; height: 28px; }
  .bio-zap__foto { width: 70px; right: 2px; }
  .bio-zap__titulo { font-size: 11.5px; }
  .bio-zap__sub { font-size: 10px; }
}

/* ABERTURA em escada, saindo de desfoque. `translate` e `scale` separados
   pra não brigar com o transform do toque. O estado invisível mora só no
   `from`: se o CSS falhar, a página aparece inteira. A escada dos botões sai
   de --ordem (posto no HTML), porque o número de botões ligados muda. */
@keyframes abre {
  from { opacity: 0; translate: 0 10px; scale: 0.98; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}
.bio-topo, .bio-rotulo, .bio-bt { animation: abre 480ms var(--fx-abre) both; }
/* A abertura termina em filter: none, não blur(0): preso pelo fill both, o
   blur(0) deixava um filtro ligado em cada botão pra sempre (06/10/2026).
   O pé abre sem desfoque nenhum: com a faixa andando dentro, o celular
   refaria o filtro do pé inteiro a cada quadro. */
@keyframes abre-pe { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.bio-pe { animation: abre-pe 480ms var(--fx-abre) 380ms both; }
.bio-bt { animation-delay: calc(90ms + var(--ordem, 0) * 45ms); }
.bio-rotulo { animation-delay: 80ms; }

/* CELULAR FRACO (06/10/2026): o script do <head> marca `leve` no Android de
   até 4 GB. Os orbes param (andando, o celular redesenha a tela inteira a
   cada quadro; parados, só a faixa) e a abertura vem sem desfoque. A faixa,
   o pulso e o reflexo continuam. */
@keyframes abre-leve { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.leve .bio-orbe { animation: none; }
.leve .bio-orbe.o-verde { transform: translate(-60px, -40px); }
.leve .bio-orbe.o-vermelho { transform: translate(240px, 520px); }
.leve .bio-orbe.o-oliva { transform: translate(110px, 200px); }
.leve .bio-topo, .leve .bio-rotulo, .leve .bio-bt { animation-name: abre-leve; }

/* AS FOLHAS (lista de vitaminas e a escolha do WhatsApp). Sobem de baixo, no
   tom escuro da página, com as linhas em vidro como os botões. */
html.bio-travada, html.bio-travada body { overflow: hidden; }
.bio-folha { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.bio-folha[hidden] { display: none; }
.bio-folha__fundo { position: absolute; inset: 0; background: rgba(5,5,4,0.66); opacity: 0; transition: opacity 240ms var(--ease-standard); }
.bio-folha__caixa {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 20px max(20px, env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #1E1D18;
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
  translate: 0 100%;
  transition: translate 300ms var(--ease-out);
}
.bio-folha.aberta .bio-folha__fundo { opacity: 1; }
.bio-folha.aberta .bio-folha__caixa { translate: 0 0; }
@media (min-width: 481px) {
  .bio-folha { align-items: center; padding: 24px; }
  .bio-folha__caixa { max-width: 400px; border-radius: 26px; border-bottom: 1px solid rgba(255,255,255,0.10); translate: 0 24px; opacity: 0; transition: translate 300ms var(--ease-out), opacity 200ms var(--ease-standard); }
  .bio-folha.aberta .bio-folha__caixa { opacity: 1; }
}
.bio-folha__alca { display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.22); margin: 0 auto 16px; }
.bio-folha__titulo { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 4px; text-align: center; }
.bio-folha__sub { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.62); margin: 0 0 16px; text-align: center; }
.bio-lista--zap { margin-top: 14px; }
.bio-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bio-lista li[hidden] { display: none; }
.bio-lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 7px 14px 7px 8px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.bio-lista a:active { background: rgba(255,255,255,0.10); }
.bio-lista a:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 2px; }
.bio-lista img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.10); }
.bio-lista a > span { flex: 1; min-width: 0; }
.bio-lista svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
.bio-lista--zap a { padding: 12px 16px; }
.bio-opcao { display: flex; flex-direction: column; gap: 2px; }
.bio-opcao b { font-size: 17px; }
.bio-opcao small { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,0.62); }
.bio-folha__fechar { display: block; width: 100%; margin-top: 14px; padding: 13px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; background: transparent; color: rgba(255,255,255,0.78); font-weight: 600; font-size: 14px; cursor: pointer; }

/* Só na prévia do painel */
.bio-faixa-previa { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: #9A2323; color: #fff; font: 600 11px/1 system-ui, sans-serif; text-align: center; padding: 6px; letter-spacing: .08em; text-transform: uppercase; }
.bio-aviso { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 70; background: #fff; color: #14130F; font: 600 13px/1.3 system-ui, sans-serif; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space: nowrap; }
.bio-aviso[hidden] { display: none; }

/* Movimento reduzido: por último, porque as regras acima redeclaram
   `animation` inteira e religariam o pulso. */
@media (prefers-reduced-motion: reduce) {
  .bio-orbe { animation: none !important; }
  .bio-topo, .bio-rotulo, .bio-bt, .bio-pe { animation-name: none; }
  .bio-folha__caixa, .bio-folha__fundo { transition: none; }
  .bio-bt::before, .bio-bt::after { animation: none !important; display: none; }
  .bio-faixa__trilho, .bio-zap::after { animation: none; }
}