/* =====================================================================
   Bee Saúde — SISTEMA GRÁFICO PROPRIETÁRIO
   Carregado por último: depois de styles.css (design system) e b2c.css (pele).

   §11 da plataforma de marca é explícito sobre por que este arquivo existe:
   "É aqui que a marca ganha volume. A logo aparece pouco: o que faz a Bee Saúde
   ser reconhecida em qualquer peça é o favo e a linha de voo."

   Ou seja: o reconhecimento da marca NÃO depende do símbolo — que aliás
   ainda é provisório. Depende do que está aqui.

   Contém:
     1. Favo de canto  — marca d'água cortada pela borda
     2. Marcadores     — bullet e numerador hexagonais
     3. Marca-texto    — o grifo amarelo da marca

   ---------------------------------------------------------------------
   O QUE NÃO ESTÁ AQUI: A LINHA DE VOO
   ---------------------------------------------------------------------
   §11 define a linha de voo como "conector proprietário da marca, EM
   SUBSTITUIÇÃO À SETA CONVENCIONAL", com uso em "diagramas de jornada:
   EMPRESA, BENEFÍCIO, PESSOA, SAÚDE".

   Ela é FUNCIONAL: liga dois pontos que existem. Numa primeira versão ela
   entrou aqui como faixa entre a seção do passo a passo e a dos planos, e
   estava errada — uma linha pontilhada flutuando numa tira branca de 54 px
   não conecta nada, é seta sem origem e sem destino. Vira enfeite, que é
   exatamente o que o documento evita ao dizer que ela substitui a seta.

   Esta LP não oferece hoje um lugar honesto para ela: o passo a passo é um
   baralho de cards sticky que se cobrem, então um conector entre eles fica
   escondido. Ela volta quando houver diagrama de jornada de verdade — a
   apresentação comercial B2B (§13) e o onboarding do app são os candidatos
   naturais. Melhor não usar do que usar como decoração.

   Nada aqui usa amarelo como superfície: o favo entra como marca d'água em
   opacidade baixa, respeitando a proporção 70/20/10 de §09.
   ===================================================================== */


/* =====================================================================
   1. FAVO — MASSA QUE SE DISSOLVE A PARTIR DA BORDA (§11)
   ---------------------------------------------------------------------
   Hexágonos CHEIOS, densos na borda e soltando-se conforme entram na área
   de conteúdo, com falhas dentro da massa e variação entre células. O texto
   vive no vazio do lado oposto.

   Três versões erradas antes desta, e cada uma ensinou uma coisa:

     1. Ladrilho de hexágonos pequenos cobrindo a seção inteira. Lê como
        papel de parede: compete com o texto e deixa de assinar.
     2. Aglomerado de 25 hexágonos pequenos num canto. Melhor, mas ainda
        "muitos elementos pequenos" — a direção certa é o oposto.
     3. Poucos hexágonos grandes em CONTORNO FINO. Vira grade técnica, malha
        de arame. O favo precisa de MASSA para ler como colmeia; o que dá o
        favo é o respiro entre as células, não a linha.

   O que faz a composição funcionar não é o hexágono, são três outras
   coisas: o gradiente de densidade (sólido na borda, células isoladas
   longe dela), as falhas dentro da massa, e a variação entre células. Sem
   elas, sobra um retângulo texturizado.

   Na referência a variação é de COR. Aqui é de opacidade, porque §09
   restringe a paleta e não comporta vários amarelos — e porque o arquivo é
   usado como MÁSCARA, então a variação de alfa faz o mesmo trabalho e a cor
   vem do contexto (amarelo no claro, branco no escuro, um arquivo só).
   ===================================================================== */

.lp-b2c .whatis,
.lp-b2c .v-stack-sec,
.lp-b2c .section--preta,
.lp-b2c .site-footer { position: relative; isolation: isolate; }

/* O RECORTE ACONTECE NA MÁSCARA, NÃO NA CAIXA.

   O caminho óbvio seria posicionar o pseudo-elemento maior que a seção, com
   offset negativo, e cortar com `overflow: hidden`. Não dá, por dois
   motivos que só aparecem testando:

     1. Sem `overflow: hidden` o pseudo-elemento estoura a largura do
        documento e cria barra de rolagem horizontal — aconteceu: 90 px de
        excesso vindos do rodapé.
     2. Com `overflow: hidden` no passo a passo, os cards `position: sticky`
        param de funcionar. Overflow diferente de `visible` transforma o
        elemento em contêiner de rolagem dos filhos sticky, e o baralho
        empilhado morre.

   Solução: o pseudo-elemento ocupa exatamente a seção (`inset: 0`) e quem
   transborda é a MÁSCARA. Background e máscara nunca estouram a caixa — são
   recortados pela geometria do elemento, sem criar overflow e sem tocar em
   sticky. */
.lp-b2c .whatis::before,
.lp-b2c .v-stack-sec::before,
.lp-b2c .section--preta::before,
.lp-b2c .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #fff;
}

.lp-b2c .whatis::before,
.lp-b2c .v-stack-sec::before,
.lp-b2c .section--preta::before,
.lp-b2c .site-footer::before,
.lp-b2c .hero-watermark {
  -webkit-mask-image: url("../assets/marca/favo-massa.svg");
          mask-image: url("../assets/marca/favo-massa.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: right center;  mask-position: right center;
}

/* A REGRA DE COMPOSIÇÃO: a massa preenche o lado VAZIO, o conteúdo respira
   no oposto. É o que faz a referência funcionar, e é fácil de inverter por
   engano — massa atrás do texto anula os dois.

   A peça nasce ancorada à DIREITA; espelhar inverte a composição inteira
   sem precisar de um segundo arquivo. Só o passo a passo é espelhado: ali a
   imagem de cada card fica à esquerda e a cópia à direita, então a massa
   entra pela esquerda, por trás das fotos. Nas outras três o conteúdo pende
   para a esquerda e a massa fica à direita. */
.lp-b2c .v-stack-sec::before,
.lp-b2c .hero-watermark { transform: scaleX(-1); }

/* ⚠️ GEOMETRIA CALIBRADA. Só a OPACIDADE é ajuste livre.

   Houve uma tentativa de deixar "maior e mais apagado" mexendo em três
   eixos ao mesmo tempo: escala (para ~3400px), deslocamento negativo do
   `mask-position` (para empurrar o núcleo denso para fora) e queda de
   densidade no gerador (1.7 -> 2.8). O resultado quebrou.

   Por quê: a peça é densa à direita e ancorada pela direita, então crescer
   a escala empurra a parte RALA para fora pela esquerda — e empurrar por
   `mask-position` cortava a parte densa pela direita. Somado à queda mais
   íngreme, sobrou na tela só um punhado de hexágonos ISOLADOS. E favo
   isolado não lê como favo: lê como mancha sem significado.

   A regra por trás disso: a malha só é reconhecível quando as células
   COMPARTILHAM ARESTA. Escala e deslocamento mexem em quantas células
   aparecem juntas — a opacidade não. Por isso o ajuste de sutileza é na
   opacidade, e o resto fica quieto.

   Tamanhos abaixo = os aprovados. Se precisar de mais discrição, baixe a
   opacidade; não aumente a escala.

   ---------------------------------------------------------------------
   22/08/2026 — AS OPACIDADES CAÍRAM 27% JUNTO COM A TROCA DE GEOMETRIA
   ---------------------------------------------------------------------
   O favo passou para a construção B (silhueta em degraus, variação de
   célula 0,72–1,00). Ela tem 46 células contra 31, e alfa médio 0,87 contra
   0,685: no total, 1,88x a TINTA da anterior (47,8% da área do viewBox
   contra 25,4%). Manter as opacidades de antes deixaria a marca d'água mais
   pesada do que a que foi aprovada, e "quase invisível" é requisito.

   Por que 0,73 e não 0,53 (a correção integral pela tinta): tinta integrada
   e pico de contraste são medidas diferentes, e o olho registra a segunda.
   O pico não mudou — a célula mais forte está em 1,00 nas duas versões. O
   que mudou foi a COBERTURA. Corrigir integralmente pela tinta jogaria as
   células de volta abaixo do limiar de visibilidade, desfazendo exatamente
   a correção que motivou a troca. 0,73 é a média geométrica entre não
   corrigir nada e corrigir tudo.

   Se mexer no gerador de novo: recalcular a tinta (ele imprime o número) e
   ajustar aqui na mesma proporção. */

/* O PRETO É O QUE MAIS DENUNCIA, e por uma margem grande.

   Branco sobre preto parte de 21:1; amarelo sobre branco parte de 1,66:1.
   São mais de dez vezes de diferença no contraste do substrato, então a
   MESMA opacidade rende leituras completamente diferentes: 3% de branco
   sobre preto ainda se vê, enquanto 6% de amarelo sobre branco mal existe.

   Por isso as seções escuras ficam num patamar próprio, bem abaixo do piso
   da faixa recomendada para textura sobre cor (0,03–0,10) — que foi escrita
   pensando em fundo claro. Aqui, faixa e fundo não combinam.

   Ao ajustar: claro e escuro NÃO andam juntos. Mexer nos dois com o mesmo
   número desequilibra na hora. */
.lp-b2c .whatis::before {
  -webkit-mask-size: 1400px auto;  mask-size: 1400px auto;
  opacity: .012;
}
.lp-b2c .v-stack-sec::before {
  -webkit-mask-size: 1550px auto;  mask-size: 1550px auto;
  opacity: .010;
}
.lp-b2c .site-footer::before {
  -webkit-mask-size: 1400px auto;  mask-size: 1400px auto;
  opacity: .018;
}
/* O manifesto tem coluna estreita e sobra área escura livre, o que dá a
   impressão de que o favo pode ser mais presente. Não pode: a mesma marca
   d'água precisa ter o mesmo peso em qualquer seção preta do site, senão o
   sistema deixa de ser sistema. Fica na faixa das escuras da LP. */
.lp-b2c .section--preta::before {
  -webkit-mask-size: 1500px auto;  mask-size: 1500px auto;
  opacity: .015;
}


/* ---------------------------------------------------------------------
   O HERO — a marca d'água por excelência
   ---------------------------------------------------------------------
   Numa versão anterior o hero ficou sem favo, para não competir com a
   headline. Errado: marca d'água é justamente o que o hero pede, e §11
   trata o favo como marca d'água antes de qualquer outra coisa.

   O que muda é o QUE está lá. O elemento .hero-watermark existia com o
   símbolo da marca vazado — mas esse símbolo é PROVISÓRIO, e §11 diz que
   o reconhecimento vem do favo, não da logo. Então a marca d'água do hero
   passa a ser o favo, e o símbolo sai de cena até a logo definitiva
   chegar. Uma marca d'água por tela.

   Sobre branco, linha amarela precisa de mais opacidade que área sólida:
   um traço de 1,5 px cobre pouquíssimo pixel, então .07 (o valor de antes,
   pensado para um símbolo cheio) simplesmente sumiria.
   --------------------------------------------------------------------- */
.lp-b2c .hero-watermark {
  /* Ocupa o hero inteiro e é espelhado (regra acima): a massa fica ancorada
     à ESQUERDA e se dissolve para a direita.

     Houve uma tentativa de mudar para a direita, pelo argumento de que a
     massa deve preencher o lado vazio e o texto respirar no oposto. O
     argumento é bom em tese e ruim aqui: o lado direito do hero é da foto
     em retrato, e a marca d'água vive atrás dela (z-index -1). Ancorada à
     direita, o que sobra visível são as bordas em volta da foto — pedaços
     de célula sem vizinhança, que não leem como favo.

     À esquerda a massa tem campo contínuo e as células aparecem coladas.
     Passar por trás da headline não atrapalha: amarelo a 6% sobre branco
     fica em torno de #FEFBF3, e preto sobre isso segue acima de 19:1. O que
     não pode é amarelo virar TEXTO, não amarelo virar papel. */
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto; height: auto;
  -webkit-mask-size: 1500px auto;  mask-size: 1500px auto;
  /* Sobre branco o amarelo aguenta um pouco mais que o branco sobre preto:
     amarelo sobre branco é 1,66:1 de partida, então a mesma opacidade pesa
     bem menos aqui do que nas seções escuras. */
  opacity: .044;
  background-color: var(--amarelo);
}
@media (max-width: 979px) {
  /* No mobile a foto desce para baixo do texto e a coluna direita some:
     a massa encolhe para não virar fundo do parágrafo. */
  .lp-b2c .hero-watermark {
    -webkit-mask-size: 1150px auto;  mask-size: 1150px auto;
    opacity: .037;
  }
}

/* Uma marca d'água por tela. O símbolo saiu do hero justamente para o favo
   poder entrar sem empilhar dois gestos na mesma dobra. */


/* =====================================================================
   2. MARCADORES DE INTERFACE (§12)
   ---------------------------------------------------------------------
   "Cada ícone precisa aceitar ser inscrito em hexágono, para funcionar como
   marcador de lista" e "numeradores de 01 a 06 dentro de hexágono".

   ---------------------------------------------------------------------
   .bee-ic-hex VOLTOU, E O MOTIVO IMPORTA
   ---------------------------------------------------------------------
   Ela e .bee-hex-foto foram removidas daqui por não terem uso em página
   nenhuma, sob a regra de que elemento de sistema só entra no CSS quando
   tem lugar de verdade — a mesma que manteve a linha de voo fora.

   O diagrama da /conceito/ deu esse lugar a .bee-ic-hex: os três nós
   (abelha, favo, mel) são ícones inscritos em hexágono, que é exatamente
   o que §12 descreve. Voltou com uso, não por precaução.

   .bee-hex-foto (máscara hexagonal para foto, §11) segue fora: continua
   sem lugar. Volta quando tiver um.
   ===================================================================== */

/* Numerador hexagonal (§12: "numeradores de 01 a 06 dentro de hexágono").

   Único usuário hoje: o passo a passo da LP, via `.vsc-num .bee-num`, onde
   a numeração é sequência de verdade.

   Saiu dos pilares do /conceito/ de propósito: Rede, Acesso, Continuidade e
   Coletivo são princípios PARALELOS, e numerar o que não é sequência é
   decoração fingindo ser estrutura.

   Agora é o ARQUIVO do kit, um por número, e não mais hexágono desenhado em
   `clip-path` com o dígito por cima. O ganho não é estético: o número
   deixa de depender da fonte carregada. Antes, se a Glancyr falhasse ou
   trocasse, o "01" mudava de desenho junto; agora ele é o mesmo traço em
   toda peça, do site à carteirinha. O dígito continua no HTML para leitor
   de tela e para os extratores que leem o HTML bruto. */
.bee-num {
  display: block;
  width: 52px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* O dígito vive no SVG. O texto segue no DOM, fora da tela. */
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
}
/* Só 01 a 03: a LP tem três passos. O kit entrega até 06 e os arquivos
   ficam lá, para quando houver um quarto. Regra do topo deste arquivo:
   elemento de sistema só entra no CSS quando tem lugar de verdade. */
.bee-num--01 { background-image: url("../assets/marca/num-01.svg"); }
.bee-num--02 { background-image: url("../assets/marca/num-02.svg"); }
.bee-num--03 { background-image: url("../assets/marca/num-03.svg"); }

/* ⚠️ NÃO trocar pela versão negativa olhando só a cor da SEÇÃO.
   O passo a passo roda numa seção preta, mas o numerador não fica sobre o
   preto: ele fica dentro do card BRANCO, ao lado do texto. Uma regra
   `.v-stack-sec .bee-num--01 { url(num-01-negativo.svg) }` parece certa,
   compila, carrega o arquivo certo e produz um hexágono amarelo vazio,
   porque o número branco desaparece no card branco. Aconteceu.
   Quem decide a variante é o fundo IMEDIATO, não o da seção. */

/* Ícone inscrito em hexágono. §12: "cada ícone precisa aceitar ser inscrito
   em hexágono, para funcionar como marcador de lista".

   Campo de amarelo diluído em vez de contorno: hexágono vazado exige dois
   hexágonos concêntricos para simular a borda, e o anel fino compete com o
   próprio ícone no tamanho em que este componente vive.

   O ícone entra como MÁSCARA no filho, então a cor vem daqui e um arquivo
   serve a qualquer contexto. Mesma convenção do ícone do eyebrow na LP. */
/* O hexágono agora é o ARQUIVO do kit, não mais `clip-path`.

   Duas razões, e a segunda foi medida:

   1. ORIENTAÇÃO. O hexágono do kit é pontudo nas LATERAIS (viewBox
      958,57 x 830,15, mais largo que alto). O desenhado em clip-path era
      pontudo em CIMA. Como os numeradores, os checks e o marcador do
      eyebrow já vêm do kit, a página tinha duas orientações de hexágono
      convivendo — o mesmo elemento de sistema em duas geometrias.

   2. VISIBILIDADE. O fundo de 18% de amarelo dava 1,09:1 contra a página,
      ou seja, o hexágono praticamente não existia: via-se o glifo dentro
      de um vazio. O contorno do kit dá 1,58:1. Continua discreto, que é o
      papel dele, mas passa a ter forma.

   A proporção 67x58 é a do arquivo (1,155). Mudar um dos dois sem o outro
   achata o hexágono. */
.bee-ic-hex {
  display: grid;
  place-items: center;
  width: 67px;
  height: 58px;
  background: url("../assets/marca/hex-contorno.svg") no-repeat center / contain;
}
.bee-ic-hex > i {
  display: block;
  width: 26px;
  height: 26px;
  background: var(--ambar-texto);
  -webkit-mask: var(--glifo) no-repeat center / contain;
          mask: var(--glifo) no-repeat center / contain;
}
/* O nó da ABELHA usa o símbolo da marca, e não um glifo desenhado.
   Naquele lugar não cabe outra abelha: a seção se chama "A abelha, o favo e
   o mel" e existe para explicar a marca — mostrar ali um desenho que não é
   o símbolo é contar a história errada. O favo e o mel seguem desenhados,
   porque são conceitos e não o símbolo.

   Como MÁSCARA o arquivo funciona: os cinco caminhos são formas separadas,
   e os vãos entre as faixas do abdômen continuam vãos. Conferido em raster
   a 26, 40, 64 e 96 px.

   Caixa mais alta que a dos outros dois (30 contra 26) porque a abelha é
   mais alta que larga (693,93 x 848,38): na mesma altura ela pareceria
   menor que o favo e o mel, que são largos. É correção óptica, não erro. */
.bee-ic-hex > i.glifo-abelha { height: 30px; }

/* Variante cheia: para o item que é o resultado, não mais um passo. Sobre
   amarelo cheio o ícone vira preto, 12,62:1. */
.bee-ic-hex--cheio { background-image: url("../assets/marca/hex-cheio.svg"); }
.bee-ic-hex--cheio > i { background: var(--preto); }


/* =====================================================================
   3. MARCA-TEXTO — o destaque da marca dentro de um parágrafo
   ---------------------------------------------------------------------
   Fundo amarelo CHEIO atrás da frase. Não é caixa, não é fio lateral, não é
   balão de aviso: é grifo.

   Por que grifo e não borda: fio vertical à esquerda é recurso datado e
   transforma qualquer parágrafo em "caixinha de observação". O grifo dá o
   mesmo peso sem criar um contêiner — o texto continua sendo texto corrido
   da página, que é o que a ressalva jurídica precisa ser.

   ⚠️ POR QUE CHEIO, E NÃO MEIA-ALTURA. A primeira versão usava um gradiente
   cobrindo os 46% de baixo da linha, imitando caneta marca-texto. Ficou
   ambíguo: naquela altura a faixa corta exatamente no meio dos glifos, e o
   resultado lê como defeito de renderização, não como efeito. Marcador de
   meia-altura só funciona quando a borda cai na LINHA DE BASE — e com
   line-height 1,65 isso exigiria calibrar a porcentagem por contexto, o que
   quebraria no primeiro tamanho de fonte diferente. Cobertura total é
   inequívoca e não depende de calibragem.

   É também o único lugar em que o amarelo pode tocar texto, porque o texto
   por cima é PRETO: 12,62:1. Texto amarelo continua proibido (§09).

   box-decoration-break: clone faz o grifo se repetir em cada linha quando a
   frase quebra. Sem isso, o marcador some da segunda linha em diante.
   ===================================================================== */

.bee-grifo,
.lp-b2c .cmp-disclaimer strong,
.lp-b2c .app-kicker strong {
  color: var(--ink);
  font-weight: 700;
  padding: .1em .24em;
  margin: 0 -.08em;
  background-color: color-mix(in srgb, var(--amarelo) 88%, transparent);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* A ressalva continua CENTRALIZADA e com o corpo do resto da copy, como já
   era. O rebranding não mexeu nisso de propósito: a decisão original está
   comentada em b2c.css e continua valendo — não diminuir o corpo, não
   esconder atrás de "leia mais", não mandar para o rodapé. */