/* Ballibot, o assistente automatico do canto da tela (23/09/2026).

   O bloco logo abaixo e o desenho do dono, copiado byte a byte da spec. Os
   nomes sem o prefixo bl- (gato, cabeca, olhos, orelha-d, pupilas, pensando)
   sao dele e ficam como estao: todo seletor do bloco comeca em .gato, que so
   existe dentro do Ballibot, e por isso nada vaza para o resto do site. */
.gato .olhos,.gato .cabeca,.gato .orelha-d,.gato .pupilas{transform-box:fill-box}
.gato .olhos{transform-origin:center;animation:piscar 5.2s infinite}
.gato .orelha-d{transform-origin:30% 100%;animation:orelha 7s infinite}
.gato .pupilas{transform-origin:center;transition:transform 220ms ease-out}
.gato .cabeca{transform-origin:50% 100%}
@keyframes piscar{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@keyframes orelha{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(14deg)}90%{transform:rotate(0)}92%{transform:rotate(9deg)}94%{transform:rotate(0)}}
@keyframes inclinar{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
.pensando .gato .pupilas{transform:translate(1.2px,-1.4px)}
.pensando .gato .cabeca{animation:inclinar 2.6s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.gato *{animation:none}}

/* O atributo hidden tem de vencer o display das regras abaixo: sem esta
   guarda, painel, conversa e bloco do WhatsApp apareceriam todos juntos,
   porque cada um declara display flex. Por isso nenhum seletor de estado
   deste arquivo declara display. */
.bl-ballibot[hidden],
.bl-ballibot [hidden] { display: none; }

.bl-ballibot {
  --bl-ballibot-teclado: 0px;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 60px;
  height: 60px;
}
/* Com o painel aberto, a raiz sobe acima do cabecalho sticky do site
   (z-index 50), como o dono decidiu em 27/09/2026: em janela baixa o topo
   do painel cai em 32px, e o cabecalho, que vai ate 61px, cobria o nome e
   o papel da cabeca. Fica abaixo do link de pular (base.css, 100); o menu
   do celular e popover e passa por cima de tudo. Fechado, volta aos 40. */
.bl-ballibot.aberto { z-index: 60; }

/* So o gato (13/10/2026): o dono tirou o circulo branco e a borda, e o
   gato ocupa os 60 do botao, que segue sendo a area de toque. O raio fica
   so para o contorno do foco (base.css) seguir o circulo. */
.bl-ballibot__botao {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .14s ease-out;
}
.bl-ballibot__botao svg { display: block; width: 60px; height: 60px; }
.bl-ballibot__botao:active { transform: scale(.97); }

/* O gato no escuro (13/10/2026). O pelo e o grafite-900 do rodape e da
   secao escura de #investimento: sem o circulo, sumiria ali. O
   ballibot.js poe .bl-ballibot--no-escuro na raiz enquanto o meio do botao
   esta sobre um deles, e o pelo clareia. Os olhos, a pupila e o focinho
   nao mudam. A troca e seca: o fundo por baixo tambem muda de uma vez. */
.bl-ballibot--no-escuro .gato .pelo { fill: var(--bl-grafite-100); }
.bl-ballibot--no-escuro .gato .pelo-dentro { fill: var(--bl-grafite-300); }
.bl-ballibot--no-escuro .gato .bigodes { stroke: var(--bl-grafite-300); }

/* O botao espera (27/09/2026): o ballibot.js poe .bl-ballibot--espera na
   raiz enquanto o botao cobriria um link ou botao do #heroi. A raiz inteira
   some, e nao so o botao: a caixa fixa dela, de 60x60, seguiria recebendo
   o toque no lugar do convite. Com visibility, o botao sai do toque, do Tab
   e do leitor, mas guarda o lugar que o observador mede. A espera exige o
   painel fechado; o balao, se estiver a vista, some junto com o botao. */
.bl-ballibot--espera { visibility: hidden; }

.bl-ballibot__balao {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--bl-grafite-500);
  border-radius: 12px;
  background: var(--bl-branco);
}
.bl-ballibot__ponto {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bl-grafite-500);
  animation: bl-ballibot-ponto 1.2s ease-in-out infinite alternate;
}
@keyframes bl-ballibot-ponto { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bl-ballibot__ponto { animation: none; }
}

/* O painel sobe acima do botao (16 + 60 + 12). A variavel do teclado vem do
   ballibot.js: com o teclado virtual aberto, o painel sobe e encolhe junto.
   A linha em vh e a reserva de navegador sem dvh. */
.bl-ballibot__painel {
  position: absolute;
  right: 0;
  bottom: calc(72px + var(--bl-ballibot-teclado));
  display: flex;
  flex-direction: column;
  width: min(360px, 100vw - 32px);
  height: min(520px, 100vh - 120px - var(--bl-ballibot-teclado));
  height: min(520px, 100dvh - 120px - var(--bl-ballibot-teclado));
  overflow: hidden;
  border: 1px solid var(--bl-borda);
  border-radius: 12px;
  background: var(--bl-fundo);
  color: var(--bl-texto);
  font-size: 1rem;
  line-height: 1.5;
}

/* Respiro de cima e de baixo menor que o dos lados (27/09/2026): deitado,
   a 568x320, cada pixel da cabeca sai da area em que o aviso rola. */
.bl-ballibot__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-e1) var(--bl-e2);
  padding: var(--bl-e1) var(--bl-e2);
  border-bottom: 1px solid var(--bl-borda);
}
.bl-ballibot__nome {
  margin: 0;
  font-family: var(--bl-fonte-titulo);
  font-weight: var(--bl-peso-titulo);
}
.bl-ballibot__papel {
  margin: 0 auto 0 0;
  color: var(--bl-texto-fraco);
  font-size: .875rem;
}
.bl-ballibot__quieto,
.bl-ballibot__fechar {
  min-height: 2.75rem;
  padding: 0 var(--bl-e2);
  border: 1px solid var(--bl-texto-fraco);
  border-radius: 8px;
  background: transparent;
  color: var(--bl-texto);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.bl-ballibot__quieto[aria-pressed="true"] {
  border-color: var(--bl-texto);
  background: var(--bl-fundo-alt);
}

/* O aviso (spec 6.1; geometria escolhida pelo dono em 27/09/2026): o texto
   rola sozinho no primeiro paragrafo, e o link da politica e o Comecar
   ficam no pe do painel, fora da area que rola. Assim o aviso abre do
   comeco, com a primeira frase, o link e o Comecar a vista, e o foco no
   Comecar nao rola nada. Nenhuma frase e cortada: o que nao cabe rola. */
.bl-ballibot__aviso {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--bl-e2);
}
.bl-ballibot__aviso p { margin: 0; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); }
.bl-ballibot__aviso p:first-child {
  grid-column: 1 / -1;
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  padding: var(--bl-e1) var(--bl-e2);
  border-bottom: 1px solid var(--bl-borda);
}
.bl-ballibot__aviso p + p { padding: var(--bl-e1) 0 var(--bl-e1) var(--bl-e2); }
.bl-ballibot__aviso a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--bl-texto);
}
.bl-ballibot__comecar,
.bl-ballibot__enviar {
  min-height: 2.75rem;
  padding: 0 var(--bl-e3);
  border: 0;
  border-radius: 8px;
  background: var(--bl-texto);
  color: var(--bl-fundo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bl-ballibot__comecar { margin: var(--bl-e1) var(--bl-e2) var(--bl-e1) 0; }
.bl-ballibot__enviar { align-self: flex-end; }
.bl-ballibot__enviar:disabled {
  background: var(--bl-texto-fraco);
  cursor: not-allowed;
}

.bl-ballibot__conversa {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bl-e2);
  margin: 0;
  padding: var(--bl-e2);
  list-style: none;
}
.bl-ballibot__fala {
  max-width: 85%;
  padding: var(--bl-e1) var(--bl-e2);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bl-ballibot__fala--ballibot {
  align-self: flex-start;
  border: 1px solid var(--bl-borda);
}
.bl-ballibot__fala--visitante {
  align-self: flex-end;
  background: var(--bl-fundo-alt);
}
.bl-ballibot__link-pagina {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--bl-texto);
  font-weight: 600;
}

.bl-ballibot__whatsapp,
.bl-ballibot__form {
  display: flex;
  flex-direction: column;
  gap: var(--bl-e1);
  padding: var(--bl-e2);
  border-top: 1px solid var(--bl-borda);
}
.bl-ballibot__whatsapp label,
.bl-ballibot__form label {
  color: var(--bl-texto);
  font-size: .875rem;
  font-weight: 600;
}
.bl-ballibot__resumo,
.bl-ballibot__campo {
  width: 100%;
  min-height: 3.5rem;
  padding: var(--bl-e1) var(--bl-e2);
  border: 1px solid var(--bl-texto-fraco);
  border-radius: 8px;
  background: var(--bl-fundo);
  color: var(--bl-texto);
  font: inherit;
  font-size: 1rem;
  resize: none;
}
.bl-ballibot__campo:disabled {
  background: var(--bl-fundo-alt);
  cursor: not-allowed;
}
.bl-ballibot__abrir-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 8px;
  background: var(--bl-cta-fundo);
  color: var(--bl-cta-texto);
  font-weight: 600;
  text-decoration: none;
}

/* Janela baixa (28/09/2026), como o dono decidiu em 27/09/2026: deitado,
   o formulario em coluna tomava a altura da conversa. So ali o campo vira
   uma linha, com o Enviar ao lado e o rotulo a vista acima deles; o bloco
   do WhatsApp segue o mesmo desenho (ruling do controlador), com o resumo
   editavel numa linha e o link ao lado. A altura inclui as tres janelas
   deitadas (320, 375 e 390px) e deixa fora 568px, a 320x568. Mexe so no
   formulario e no bloco, e na rolagem do painel: a geometria do painel e
   a aprovada. */
@media (max-height: 500px) {
  /* A cabeca volta rolando (03/10/2026, ruling do controlador por
     delegacao do dono): em 568x320 com o bloco aberto, o painel passa 54px
     da altura, e o foco no campo o rola e tira a cabeca da vista. Em
     overflow hidden so o foco rolava (o do script ou o Tab ate o Fechar),
     nunca a roda nem o toque; aqui o visitante rola o painel e traz a
     cabeca de volta. Onde tudo cabe, nada muda, porque nada
     transborda. O contain segura a rolagem no painel, sem passar a pagina. */
  .bl-ballibot__painel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .bl-ballibot__whatsapp,
  .bl-ballibot__form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding-block: var(--bl-e1);
  }
  .bl-ballibot__form label { flex: 0 0 100%; }
  /* O rotulo do resumo fica so para o leitor de tela (28/09/2026,
     revisao I1): com o bloco aberto, a linha dele e o vao empurravam o
     campo e o Enviar para fora do pe do painel. O <label for> segue
     dando nome ao resumo, que continua editavel. E a caixa de
     .bl-so-leitor, de base.css. */
  .bl-ballibot__whatsapp label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .bl-ballibot__resumo,
  .bl-ballibot__campo {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    /* A linha ocupa a caixa inteira, sem respiro em cima e embaixo: o
       textarea rola pela caixa com o respiro, e a segunda linha do
       texto ou do placeholder apareceria cortada nele. */
    padding-block: 0;
    line-height: calc(2.75rem - 2px);
  }
  .bl-ballibot__enviar { align-self: stretch; }
  .bl-ballibot__abrir-wa { padding: 0 var(--bl-e2); }
}

/* Toque: o dedo aperta e o botao responde. O hover so em tela com ponteiro,
   para nao grudar no celular. */
.bl-ballibot__quieto:active,
.bl-ballibot__fechar:active,
.bl-ballibot__comecar:active,
.bl-ballibot__enviar:active,
.bl-ballibot__abrir-wa:active { transform: scale(.97); }
@media (hover: hover) {
  .bl-ballibot__quieto:hover,
  .bl-ballibot__fechar:hover { border-color: var(--bl-texto); }
  .bl-ballibot__abrir-wa:hover { text-decoration: underline; }
}

/* Na impressao o Ballibot fica fora (27/09/2026): o botao fixo e o painel
   cobririam o texto da pagina no papel. */
@media print {
  .bl-ballibot { display: none; }
}

/* Movimento reduzido de verdade (23/09/2026). O @media do bloco do dono,
   `.gato *`, pesa (0,1,0) e perde para `.gato .olhos` e `.gato .orelha-d`
   (0,2,0) e para `.pensando .gato .cabeca` (0,3,0): sozinho ele nao para
   nada. Estes seletores empatam com os do dono e vencem por virem depois.
   A transicao sai junto, para o olhar nao deslizar: e a transicao da pupila.
   O botao perde a dele tambem (27/09/2026): o aperto de .14s da tarefa 14
   fica seco, como o .bl-botao de base.css. A regra empata com a do botao
   e vence por vir depois. */
@media (prefers-reduced-motion: reduce) {
  .bl-ballibot .gato *,
  .bl-ballibot.pensando .gato * { animation: none; transition: none; }
  .bl-ballibot__botao { transition: none; }
}

/* Parar o gato (WCAG 2.2.2, 27/09/2026). Empata em especificidade com
   `.pensando .gato .cabeca` e por isso fica por ultimo: nada que mexa no
   gato vem depois. */
.bl-ballibot.quieto .gato *, .bl-ballibot.quieto .bl-ballibot__ponto { animation: none; }