/* =====================================================================
   Bee Saúde — sistema de design
   Cores e tipografia da marca. As @font-face vivem em css/fonts.css.

   Referência normativa: docs/bee-plataforma-de-marca.pdf, §09 (Cores),
   §10 (Tipografia), §11 (Sistema gráfico), §14 (O que evitar).
   O sistema gráfico proprietário (favo, linha de voo, máscara hexagonal)
   vive em css/bee.css.
   ===================================================================== */

:root {
  /* ---- Paleta principal (§09) ---- *
     Os dois primeiros valores mudaram na revisão de 28/08/2026 da
     plataforma de marca, sob o critério que ela mesma declara: onde o
     arquivo divergir do documento, vence o arquivo. O amarelo passou de
     #F4B41A para #FBBF3A, que é o que TODOS os SVG coloridos do kit
     declaram, e o preto passou de #0A0A0A para #000000. */
  --amarelo:   #FBBF3A;   /* Amarelo Bee: acento, destaque, botão, preenchimento */
  --ambar:     #A86A00;   /* Âmbar Profundo: o amarelo quando precisa ser texto/ícone */
  --preto:     #000000;   /* Preto Absoluto: base, texto, comunicação corporativa */
  --branco:    #FFFFFF;   /* fundo predominante em produto digital */
  --off-white: #FAF9F5;   /* fundo alternativo, seções, cards */

  /* ---- Cores de apoio (§09) ---- *
     Diferenciam CATEGORIA de benefício. Uso restrito a infográfico e
     categorização: nenhuma delas é cor de marca, nenhuma vira fundo de
     seção nem cor de botão. */
  --verde-colmeia: #1F6F5C;  /* prevenção, bem-estar, saúde mental */
  --azul-profundo: #123A5C;  /* rede credenciada, exames, institucional */
  --terracota:     #B4552F;  /* urgência, atendimento imediato */

  /* ---- Semânticas (§09) ---- */
  --ok:      #2E7D5B;
  --atencao: #E8A317;
  --erro:    #C0392B;
  --info:    #2F6FED;

  /* ---- REGRA CRÍTICA DE CONTRASTE (§09) ---- *
     O amarelo #FBBF3A sobre branco dá 1,66:1 e reprova. Como o produto
     vive em fundo claro, a regra é fixa e não é negociável:

       preto sobre amarelo   12,62:1  APROVADO  <- é o par correto de botão
       amarelo sobre preto   12,62:1  APROVADO  <- combinação de maior força
       amarelo sobre branco   1,66:1  PROIBIDO
       branco sobre amarelo   1,66:1  PROIBIDO

     O amarelo novo é mais claro que o anterior, então os dois pares
     aprovados MELHORARAM (10,74 -> 12,62) e os dois proibidos PIORARAM
     (1,84 -> 1,66). A regra não muda de direção, só fica mais nítida.
     Preto absoluto também subiu o branco sobre preto de 19,80 para 21:1.

     Proporção de uso: 70% branco ou preto, 20% neutro, 10% amarelo.
     O amarelo é ACENTO, não superfície. Tela inteira amarela é erro.

     ⚠️ DESVIO CONSCIENTE DA PLATAFORMA DE MARCA, com medição:
     o documento manda usar Âmbar Profundo #A86A00 como "versão do amarelo
     para texto sobre fundo claro", mas #A86A00 dá 4,44:1 sobre branco e
     4,22:1 sobre off-white — reprova em AA (mínimo 4,5:1) nos dois.
     Como as seções alternam branco e off-white, e o público usa celular
     de entrada muitas vezes sob sol, texto pequeno em âmbar precisa passar
     no PIOR caso (off-white). --ambar-texto escurece o mesmo matiz em 2%
     de luminosidade: 4,91:1 no branco e 4,66:1 no off-white. A diferença é
     imperceptível ao lado do âmbar da marca.
     Levar esse ponto ao designer na Etapa 2 do brief (§15). */
  --ambar-texto: #9E6400;

  /* ---- Papéis semânticos ---- */
  --bg:         var(--branco);
  --bg-alt:     var(--off-white);
  --ink:        var(--preto);
  --ink-soft:   #5B5B57;   /* neutro quente de apoio: 6,82:1 no branco, 6,47:1 no off-white */
  --accent:     var(--amarelo);      /* SUPERFÍCIE de acento (botão, preenchimento) */
  --accent-ink: var(--ambar-texto);  /* o acento quando vira TEXTO sobre fundo claro */
  --line:       #E7E4DB;   /* hairline derivada do off-white */

  /* Sem gradiente estrutural: §14 lista "degradê estrutural" entre os itens
     a evitar. Onde havia gradiente de marca, agora há cor sólida. */

  /* ---- Tipografia ---- *
     GLANCYR no display. É a família em que o logotipo está composto — a
     revisão de 28/08/2026 corrige a versão anterior, que atribuía o
     logotipo à ABC Camera Plain. Com ela no H1 e no preço, o título da
     página passa a ser a mesma letra da marca em vez de uma parecida.

     INTER no corpo, e isso não é provisório por acaso: a Glancyr não tem
     numeral tabular, e esta página é construída sobre números em coluna
     (preço de cinco cards, R$ 250, 180 dias). §10 reserva texto e
     interface para a ABC Camera Plain, que segue sem chegar.

     A Sora saiu. Era provisória desde o rebranding e nunca teve relação
     com a marca. --logo aponta para o display porque o lockup do header
     agora é o arquivo do kit, e o texto ao redor dele acompanha.

     ⚠️ ESTAS SÃO AS ÚNICAS TRÊS LINHAS DO PROJETO QUE NOMEIAM UMA FONTE.
     Nenhuma regra de componente cita família diretamente — todas passam
     por estes tokens. Trocar o corpo para ABC Camera Plain quando ela
     chegar = trocar aqui + o @font-face em css/fonts.css + o preload no
     <head>. */
  --display: "Glancyr", -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo:    var(--display);

  /* ---- Métrica ---- *
     Raios menores que os da fase anterior (16/24px). §10 alerta que canto
     arredondado é "o caminho mais curto para o território infantil", que
     é exatamente o que a Bee Saúde precisa evitar. O registro é minimalismo
     premium: o hexágono do favo tem canto vivo, e a interface acompanha. */
  --maxw: 1280px;
  --radius: 8px;
  --radius-lg: 12px;
}

/* ---------- Reset enxuto ----------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Tipografia de display -------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;                /* Glancyr SemiBold nos displays */
  line-height: 1.1;
  letter-spacing: -0.02em;         /* fecha o tracking geométrico da Glancyr */
  color: var(--ink);
}

/* Destaque dentro do título. Nunca por itálico: o arquivo da Glancyr é o
   variável, que traz o eixo `ital`, mas inclinar um título geométrico deste
   corpo briga com o desenho da marca. O destaque é por COR, que é o que a
   marca faz.

   Sobre fundo CLARO o destaque é ÂMBAR, nunca amarelo: amarelo sobre branco
   dá 1,66:1 e a plataforma de marca (§09) proíbe. Sobre fundo PRETO ele vira
   amarelo cheio (12,62:1) — essa inversão vive em css/b2c.css. */
.brand-accent { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.brand-em { font-style: normal; font-weight: 600; color: var(--accent-ink); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--branco) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
/* ---------- LOCKUP ---------- *
   Agora é o arquivo do kit, inteiro: símbolo e nome vêm desenhados juntos,
   com o texto vetorizado em Glancyr. Não é mais montado em HTML.

   A montagem anterior existia por um bom motivo — o símbolo era provisório e
   trocá-lo tinha que ser barato. Com o definitivo na mão, o motivo inverte:
   remontar o lockup em CSS é a única forma de ele divergir do arquivo, em
   espaçamento, em peso ou em tracking. O nome segue anunciado pelo
   aria-label do link, então nada se perde em acessibilidade.

   Duas versões porque o arquivo do kit é feito para um fundo, e a troca é
   pela classe on-dark/on-light do header (js/b2c/header-theme.js).

   O descritor saiu. Ele dizia "CLUBE DE SAÚDE" e a revisão de 28/08 mudou o
   descritor para "Clube de Benefícios", justamente para não repetir a
   palavra saúde que já está no nome (§14). Ao lado de um lockup que já
   escreve "Bee Saúde", qualquer descritor ali seria a terceira leitura
   simultânea dentro da mesma marca, que §14 também evita. Ele vive na copy,
   onde tem espaço para significar alguma coisa. */
.brand { display: inline-flex; align-items: center; }
/* 36px numa pílula de 62px: sobra 13px em cima e embaixo. Foi para 36 a
   pedido, e o teto é este — a partir daí o lockup começa a encostar na
   borda do glass e o header fica apertado no mobile, onde a pílula é a
   mesma. Se precisar de mais presença, cresce a pílula antes da logo. */
.brand-logo { height: 36px; width: auto; }

.header-nav { display: flex; align-items: center; gap: 30px; }
.header-nav .links { display: flex; gap: 28px; }
.header-nav .links a { font-size: .95rem; color: var(--ink-soft); font-weight: 500; position: relative; padding-bottom: 3px; transition: color .2s ease; }
.header-nav .links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--amarelo); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.header-nav .links a:hover { color: var(--ink); }
.header-nav .links a:hover::after { transform: scaleX(1); }

/* hambúrguer moderno assimétrico (dois traços maiores, um menor), só mobile */
.menu-toggle {
  display: none; flex-direction: column; gap: 5px; align-items: flex-end;
  width: 28px; padding: 6px 0; background: none; cursor: pointer;
}
.menu-toggle span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: width .25s ease, transform .25s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1) { width: 28px; }
.menu-toggle span:nth-child(2) { width: 28px; }
.menu-toggle span:nth-child(3) { width: 16px; }
/* estado aberto: vira um X */
.menu-toggle.open span:nth-child(1) { width: 26px; transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(-45deg); }

/* painel mobile */
.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 22px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--branco) 96%, transparent);
}
.mobile-menu a {
  padding: 13px 4px; font-size: 1.05rem; color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 14px; width: 100%; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: 1rem; padding: 14px 26px;
  border-radius: 999px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
  /* muitos .btn são <a> sem href (o JS intercepta o clique); âncora sem href
     não recebe o cursor de link, então força a mãozinha aqui. */
  cursor: pointer;
}
/* AMARELO + PRETO. É o par de botão que a plataforma de marca fixa (§09):
   12,62:1. Branco sobre amarelo dá 1,66:1 e é proibido — se algum dia alguém
   trocar este `color` por #fff, o botão reprova em acessibilidade. */
.btn-primary {
  background: var(--amarelo); color: var(--preto);
  box-shadow: 0 10px 26px -12px rgba(244,180,26,.75);
}
.btn-primary:hover {
  background: #FFC53D;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(244,180,26,.9);
}
.header-nav .btn { padding: 11px 22px; font-size: .95rem; }

/* =====================================================================
   HERO: headline à esquerda (alinhada ao wrap), vídeo VERTICAL contido à direita
   Vídeo retrato (9:16) em bloco com cantos arredondados, sem corte.
   Fundo claro. Corações da marca como textura sutil. Sem bloco de cor.
   ===================================================================== */
.hero { position: relative; overflow: hidden; padding: 64px 0 72px; }

/* marca d'água: símbolo da marca vazado, à esquerda, bem sutil (assinatura) */
.hero-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 0;
  width: 760px; height: 760px;
  transform: translate(-12%, -50%);
  opacity: .07;
  background-color: var(--amarelo);
  -webkit-mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
          mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px; align-items: stretch;
}

/* a coluna do vídeo não tem altura própria: ela é definida pela coluna de
   texto (a mais alta). O vídeo preenche essa altura por absolute, então
   nunca empurra a linha pra ficar mais alto que o texto. */
.hero-video-col { position: relative; }

/* coluna do texto: alinhada à margem do wrap (mesma das seções de baixo) */
.hero-copy { padding: 24px 0; }

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.55rem);
  margin-bottom: 20px;
}
.hero h1 .line { display: block; }

.hero .lede {
  font-size: 1.16rem; color: var(--ink-soft);
  max-width: 34ch; margin-bottom: 30px;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-cta .note { font-size: .85rem; color: var(--ink-soft); }

/* faixa de confiança curta abaixo do CTA */
.hero-trust {
  display: flex; gap: 30px; margin-top: 38px; flex-wrap: wrap;
}
.hero-trust .item { display: flex; flex-direction: column; }
.hero-trust .num {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  color: var(--ink); line-height: 1;
}
.hero-trust .lbl { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }

/* =====================================================================
   SEÇÃO divisor por espaçamento (NÃO por cor de fundo)
   ===================================================================== */
.section { padding: 96px 0; }
.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 18ch; margin-bottom: 18px;
}
.section-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; }

/* =====================================================================
   OPORTUNIDADE mapa limpo + dados de mercado
   ===================================================================== */
.opportunity .opp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}

/* dados de mercado como números grandes em Sora Bold */
.market-stats { display: grid; gap: 28px; margin-top: 34px; }
.market-stat { display: flex; align-items: baseline; gap: 18px; }
.market-stat .big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
  color: var(--ambar); flex: none; min-width: 3.4ch;
}
.market-stat .txt { font-size: 1.02rem; color: var(--ink); max-width: 30ch; }

/* Mapa vazado em preto, estados atendidos preenchidos em amarelo. Segue a
   proporção da marca (§09): o preto conduz, o amarelo marca o dado. Os
   marcadores são HEXÁGONOS — cada um é um nó da rede (§03), não um alfinete
   genérico. */
.brazil-map { width: 100%; height: auto; }
.brazil-map .uf {
  fill: none;
  stroke: color-mix(in srgb, var(--preto) 28%, transparent);
  stroke-width: 0.7;
  stroke-linejoin: round;
  transition: fill .2s ease, stroke .2s ease;
}
/* estados com presença Bee Saúde: preenchimento amarelo leve + contorno preto */
.brazil-map .uf.present {
  fill: color-mix(in srgb, var(--amarelo) 32%, transparent);
  stroke: var(--preto);
}
/* marcadores: hexágono do favo sobre cada estado */
.brazil-map .pin-body { fill: var(--preto); }
.brazil-map .pin-hole { fill: var(--branco); }
.brazil-map .pin-ring { fill: none; stroke: var(--ambar); stroke-width: 1.6; opacity: 0; }
/* entrada: fade + scale em stagger (acionado quando a seção entra na viewport) */
.brazil-map .pin-mark {
  opacity: 0; transform: scale(.2);
  transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.brazil-map.pins-in .pin-mark { opacity: 1; transform: scale(1); }
/* pulse contínuo só nas âncoras */
.brazil-map.pins-in .anchor .pin-ring { animation: pin-pulse 2.4s ease-out infinite; }
@keyframes pin-pulse {
  0% { opacity: .5; r: 6; }
  70% { opacity: 0; r: 17; }
  100% { opacity: 0; r: 17; }
}
@media (prefers-reduced-motion: reduce) {
  .brazil-map .pin-mark { transition: none; opacity: 1; transform: none; }
  .brazil-map.pins-in .anchor .pin-ring { animation: none; }
}

.map-legend {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 14px; font-size: .85rem; color: var(--ink-soft);
}
.map-legend .legend-pin {
  width: 13px; height: 15px; display: inline-block;
  background: var(--preto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0 24 7v14L12 28 0 21V7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 0 24 7v14L12 28 0 21V7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 940px) {
  .section { padding: 64px 0; }
  .opportunity .opp-grid { grid-template-columns: 1fr; gap: 40px; }
  .opportunity .opp-map { order: -1; max-width: 420px; margin-inline: auto; }
}

/* =====================================================================
   PASSO A PASSO (.v-stack): cards empilhados sobre fundo escuro.
   Seção on-dark: fundo ameixa, numeração em turquesa. Turquesa como TEXTO
   só é permitido aqui, sobre a ameixa (~5.9:1). No claro, ele reprova.
   ===================================================================== */

/* Tokens do bloco escuro do passo a passo. O que sobrou aqui é só o que a
   seção viva usa: o restante (--max, --gap, --card-h, --header-h, --body-font)
   servia ao efeito GSAP hero->card de outra LP, removido junto com o bloco.

   ⚠️ Este :root NÃO pode voltar a declarar --radius: o bloco antigo o
   sobrescrevia para 24px e anulava o raio do design system. */
:root {
  --preto-stone: var(--preto);   /* fundo do bloco escuro */
  --text: #ffffff;
  --display-font: var(--display);
}

.stone-business {
  position: relative;
  isolation: isolate;
  background: var(--preto-stone);
  color: var(--text);
}

/* No mobile, centraliza os cabecalhos das secoes (titulo + lede) */
@media (max-width: 767px) {
  .opportunity .opp-copy,
  .app .app-copy,
  .proof .proof-head,
  .compare .compare-head {
    text-align: center;
  }

  .opportunity .opp-copy .section-title,
  .opportunity .opp-copy .section-lede,
  .app .app-copy .section-title,
  .app .app-copy .section-lede,
  .proof .proof-head .section-title,
  .proof .proof-head .section-lede,
  .compare .compare-head .section-title,
  .compare .compare-head .section-lede {
    margin-inline: auto;
  }
}


/* =====================================================================
   O QUE A Bee Saúde ENTREGA — coberturas em carrossel coverflow
   Nome sempre visível; detalhe sobe no hover/.tap. Foto de fundo por card,
   com scrim preto para o texto ler. Entrada uma a uma via reveal.
   ===================================================================== */
.whatis .whatis-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.whatis .whatis-head h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.08;
  color: var(--ink); margin-bottom: 18px;
}
.whatis .whatis-head p { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.55; max-width: 56ch; margin: 0 auto; }

.whatis .cobs-foot { text-align: center; margin-top: 34px; font-size: 1.08rem; color: var(--ink); }
.whatis .cobs-foot strong { color: var(--accent-ink); font-weight: 700; }
.whatis .cobs-disc { text-align: center; margin-top: 12px; font-size: .9rem; color: var(--ink-soft); }

/* =====================================================================
   PROVA DE MARCA: já funciona, não é aposta
   ===================================================================== */
.proof .proof-head { max-width: 56ch; margin-bottom: 56px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.proof-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--line);
  padding: 34px 36px;
  transition: transform .28s cubic-bezier(.25,.45,.45,.95), box-shadow .28s ease;
}
/* card claro: sombra neutra suave + lift (especificidade p/ vencer o reveal) */
.proof-grid.rv-in > .proof-card:not(.hero-card):hover,
.proof-card:not(.hero-card):hover { transform: translateY(-5px); box-shadow: 0 20px 44px -24px rgba(43,26,56,.22); }
.proof-card.hero-card {
  position: relative;
  background: var(--preto); color: #fff; border: 0;
  box-shadow: 0 36px 70px -34px rgba(10,10,10,.5);
}
/* card preto: o número salta em amarelo — é a combinação de maior força da
   marca (§09), 12,62:1. */
.proof-card.hero-card::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -16px; width: 90%; height: 90%;
  transform: translateX(-50%); border-radius: var(--radius-lg);
  background: var(--amarelo); filter: blur(26px); opacity: 0;
  transition: opacity .28s ease, bottom .28s ease;
}
.proof-grid.rv-in > .proof-card.hero-card:hover,
.proof-card.hero-card:hover { transform: translateY(-6px) scale(1.01); }
.proof-card.hero-card:hover::before { opacity: .5; bottom: -22px; }
.proof-card .big {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 4vw, 3rem); color: var(--ink); margin-bottom: 12px;
}
.proof-card.hero-card .big { color: var(--amarelo); }
.proof-card .desc {
  position: relative; z-index: 1;
  font-size: 1.02rem; color: var(--ink-soft); max-width: 26ch;
}
.proof-card.hero-card .desc { color: rgba(255,255,255,.85); }
/* marca d'água do símbolo: cortada na borda em repouso; no hover dá um
   pequeno salto pra fora e vira turquesa (acento) p/ manter contraste fora do card */
.proof-wm-clip {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: var(--radius-lg); overflow: hidden;
}
.proof-card.hero-card:hover .proof-wm-clip { overflow: visible; }
/* O card que abre a seção "A rede" mostra o FAVO CONECTADO POR LINHAS, e não
   mais o símbolo. O card fala de rede e o arquivo desenha rede: hexágonos de
   tamanhos diferentes ligados por fio fino, que é o estado "esparso" que §11
   descreve como "hexágonos conectados por linha fina, ilustrando a rede".
   É o único lugar da página onde esse estado do favo tem trabalho a fazer. */
.proof-wm {
  position: absolute; pointer-events: none;
  width: 250px; height: 250px; right: -30px; top: -20px; opacity: .16;
  background-color: #fff;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease, background-color .35s ease;
  -webkit-mask: url("../assets/marca/favo-rede.svg") no-repeat center / contain;
          mask: url("../assets/marca/favo-rede.svg") no-repeat center / contain;
}
.proof-card.hero-card:hover .proof-wm {
  transform: translate(8px, -8px) scale(1.08);
  background-color: var(--amarelo); opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
  .proof-card.hero-card:hover .proof-wm { transform: none; }
}

@media (max-width: 820px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   FACILIDADE PRO CLIENTE FINAL (o app)
   Enquadramento: não "veja o app", mas "o cliente usa fácil = ele renova
   = você fatura". O app é prova de que o produto do franqueado vende fácil.
   ===================================================================== */
.app .app-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center;
}
.app .app-mock { display: flex; justify-content: center; }

/* mockup iPhone 17 Pro Max: moldura titânio, Dynamic Island, botões.
   A tela recebe assets/img/app-beesaude.webp (retrato ~9:19,5) ou
   assets/video/app-beesaude.mp4 (vertical, mudo, loop). */
.app .iphone {
  position: relative; width: 300px; aspect-ratio: 1320 / 2868;
  background: linear-gradient(145deg, #3a3a3c, #1d1d1f 40%, #2c2c2e);
  border-radius: 18% / 8.3%; padding: 3.2%;
  box-shadow: 0 40px 80px -36px rgba(43,26,56,.55), inset 0 0 0 1.5px rgba(255,255,255,.10);
}
.app .iphone::before {
  content: ""; position: absolute; inset: 2.2%; border-radius: 15.5% / 7.4%;
  background: #000; z-index: 1;
}
.app .iphone-screen {
  position: absolute; inset: 3.4%; z-index: 2;
  border-radius: 14% / 6.8%; overflow: hidden; background: #000;
}
.app .iphone-screen video,
.app .iphone-screen img,
.app .iphone-screen .mock-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.app .iphone-screen .mock-fallback {
  display: grid; place-items: center; color: #fff; text-align: center;
  font-size: .8rem; opacity: .6; padding: 20px; background: var(--preto);
}
.app .dynamic-island {
  position: absolute; z-index: 3; top: 2.4%; left: 50%; transform: translateX(-50%);
  width: 34%; height: 3.6%; background: #000; border-radius: 999px;
}
.app .btn-side { position: absolute; z-index: 0; background: linear-gradient(180deg, #2c2c2e, #48484a); border-radius: 2px; }
.app .btn-action { left: -1.3%; top: 17%; width: 1.4%; height: 4%; }
.app .btn-volup  { left: -1.3%; top: 25%; width: 1.4%; height: 7%; }
.app .btn-voldn  { left: -1.3%; top: 34%; width: 1.4%; height: 7%; }
.app .btn-power  { right: -1.3%; top: 24%; width: 1.4%; height: 11%; }

.app .app-points { list-style: none; display: grid; gap: 22px; margin-top: 30px; }
.app .app-points li { display: flex; gap: 14px; align-items: flex-start; }
/* O desenho dentro do hexágono deixou de ser SVG inline de biblioteca
   genérica e passou a ser ícone da biblioteca da marca. Não é preciosismo:
   §14 lista "ícone de biblioteca genérica" entre o que evitar, e eram três
   deles (um celular, um raio e um coração) no meio da página.

   ⚠️ AQUI ENTRA A VARIANTE TODA PRETA DO KIT, não a de preto e amarelo.
   O hexágono de fundo já é amarelo claro (20% de amarelo sobre branco), e
   as partes amarelas do ícone somem dentro dele: amarelo sobre amarelo
   claro não tem contraste nenhum. O ícone fica pela metade e lê como
   desenho quebrado. Traço todo preto sobre esse fundo passa com folga.

   A regra vale para todo lugar em que o ícone cair sobre superfície de
   acento: quem escolhe a variante é o fundo IMEDIATO, e amarelo sobre
   amarelo não é par. */
.app .app-points .ic {
  flex: none; width: 46px; height: 50px;
  background: color-mix(in srgb, var(--amarelo) 20%, var(--branco));
  /* marcador hexagonal: §12 pede que todo ícone aceite ser inscrito em
     hexágono, e é isso que o transforma em bullet da marca. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.app .app-points li:hover .ic { transform: translateY(-3px) scale(1.06); background: color-mix(in srgb, var(--amarelo) 40%, var(--branco)); }
.app .app-points .ic img { width: 28px; height: 28px; object-fit: contain; }
.app .app-points .tt { font-weight: 700; color: var(--ink); display: block; margin-bottom: 2px; }
.app .app-points .dd { font-size: .98rem; color: var(--ink-soft); }

.app .app-kicker {
  /* Sem fio lateral: bloco off-white e ponto. O destaque do preço fica por
     conta do marca-texto (.bee-grifo, em css/bee.css), não de uma borda. */
  margin-top: 30px; padding: 18px 22px; border-radius: var(--radius);
  background: var(--off-white);
  font-size: 1rem; color: var(--ink);
}

@media (max-width: 860px) {
  .app .app-grid { grid-template-columns: 1fr; gap: 40px; }
  .app .app-copy { order: 1; }
  .app .app-mock { order: 2; }
  .app .iphone { width: 248px; }
}


/* =====================================================================
   SEÇÃO 7: DEPOIMENTOS (carrossel com peek, autoplay gentil)
   ===================================================================== */
.depoimentos .dep-head { text-align: center; max-width: 48ch; margin: 0 auto 50px; }
.depoimentos .dep-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }

.carousel { position: relative; }
.carousel .viewport { overflow: hidden; }
.carousel .track { display: flex; gap: 24px; will-change: transform; transition: transform .55s cubic-bezier(.22,.61,.36,1); cursor: grab; }
.carousel .track.dragging { transition: none; cursor: grabbing; }
.carousel .slide { flex: 0 0 auto; }

.carousel .quote {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 36px 32px; height: 100%;
  box-shadow: 0 20px 50px -36px rgba(14,20,48,.3);
  transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease;
  opacity: .45; transform: scale(.94);
}
.carousel .slide.is-active .quote {
  opacity: 1; transform: scale(1);
  box-shadow: 0 30px 64px -34px rgba(176,37,142,.4);
}
/* marca d'água do símbolo, cortada na borda inferior direita */
.carousel .quote::before {
  content: ""; position: absolute; right: -40px; bottom: -44px;
  width: 180px; height: 180px; opacity: .10; pointer-events: none;
  background-color: var(--amarelo);
  -webkit-mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
          mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
}
.carousel .quote .stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--ambar); }
.carousel .quote .stars svg { width: 17px; height: 17px; }
.carousel .quote .text { font-family: var(--display-font); font-size: 1.12rem; color: var(--ink); line-height: 1.5; margin-bottom: 24px; min-height: 3em; }
.carousel .quote .who { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.carousel .quote .name { font-weight: 700; color: var(--ink); }
.carousel .quote .meta { font-size: .88rem; color: var(--ink-soft); }
.carousel .quote .who .stars { margin-top: 10px; margin-bottom: 0; }

.dep-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; }
.dep-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.dep-arrow:hover { background: var(--off-white); border-color: var(--preto); }
.dep-arrow:active { transform: scale(.94); }
.dep-arrow svg { width: 20px; height: 20px; stroke: var(--preto); }
.dep-dots { display: flex; gap: 9px; }
.dep-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 0; cursor: pointer; transition: background .2s, width .2s; padding: 0; }
.dep-dots button.on { background: var(--ambar); width: 24px; border-radius: 6px; }

/* =====================================================================
   FECHAMENTO + footer
   ===================================================================== */
.final { position: relative; overflow: hidden; text-align: center; padding: 140px 0 148px; }
.final .wrap { position: relative; z-index: 1; }
.final .final-inner { max-width: 760px; margin: 0 auto; }
.final h2 {
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.06; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 22px;
}
.final h2 em { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.final p { font-size: 1.18rem; color: var(--ink-soft); max-width: 42ch; margin: 0 auto 34px; }
/* marca d'água do símbolo à direita, cortada, espelhando o hero */
.final-wm {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: 0;
  width: 760px; height: 760px;
  transform: translate(12%, -50%);
  opacity: .07;
  background-color: var(--amarelo);
  -webkit-mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
          mask: url("../assets/marca/bee-simbolo.svg") no-repeat center / contain;
}

/* footer: bloco PRETO. É a âncora de autoridade da marca (§09) e o lugar
   onde o amarelo aparece com força total, sem competir com o conteúdo. */
.site-footer { background: var(--preto); color: #B5B2A9; padding: 60px 0 34px; }
/* TRÊS colunas, porque são três: marca, Navegação e Empresa.
   A declaração anterior pedia QUATRO (1.6fr 1fr 1fr 1fr) e sobrava uma
   coluna vazia à direita. O efeito era Navegação e Empresa encostadas à
   esquerda com um vão de 240px no fim, que lê como desalinhamento e não
   como respiro. Sobrou de uma versão em que havia uma quarta coluna.
   Se um dia entrar outra (atendimento, jurídico), voltar o 1fr junto com
   o conteúdo, não antes dele. */
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.site-footer .f-brand img { height: 42px; }
/* `.site-footer a { display: block }` (logo abaixo) vence o inline-flex do
   lockup por especificidade. Restaura a linha só aqui. */
.site-footer .f-brand .brand { display: inline-flex; align-items: center; }
.site-footer .f-brand p { margin-top: 14px; max-width: 34ch; font-size: .92rem; line-height: 1.7; }
.site-footer h3 { color: #fff; font-size: .95rem; margin-bottom: 16px; font-family: var(--sans); font-weight: 700; }
.site-footer a { color: #B5B2A9; font-size: .92rem; display: block; margin-bottom: 10px; }
.site-footer a:hover { color: #fff; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; font-size: .82rem; line-height: 1.8; color: #8E8B83; }


/* redes sociais sob a marca (mesma grade), formato em ícone */
.f-social { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.f-social a {
  display: grid; place-items: center; margin: 0;
  width: 38px; height: 38px; border-radius: 50%; color: #B5B2A9;
  border: 1px solid rgba(255,255,255,.14);
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.f-social a:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.f-social svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

.float-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.float-cta .btn { box-shadow: 0 14px 34px -10px rgba(10,10,10,.4); }
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }

/* No celular a pílula do canto vira botão de largura inteira, encostado no
   rodapé da tela e dentro da zona do polegar. Sem faixa, sem fundo, sem
   preço: é o botão, e só. A sombra que ele já tinha basta para separá-lo
   do que estiver rolando por baixo.

   `env(safe-area-inset-bottom)` é obrigatório: sem ele o botão fica embaixo
   da barra de gestos do iPhone e o toque não chega nele. */
@media (max-width: 768px) {
  .float-cta {
    left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .float-cta .btn { width: 100%; }
}
/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 940px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-video-col { max-width: 320px; margin: 0 auto; aspect-ratio: 9 / 16; width: 100%; }
  .header-nav .links { display: none; }
  .header-nav .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu.open { display: flex; }
}
@media (max-width: 560px) {
  .hero { padding: 48px 0 64px; }
  .hero-trust { gap: 22px; }
  .float-cta { left: 16px; right: 16px; }
  .float-cta .btn { width: 100%; }
}


/* =====================================================================
   REVEAL ON SCROLL + stagger
   Ativado por js/reveal.js (classe .rv-on no <html>). Sem JS, tudo
   permanece visivel (nada escondido). Respeita prefers-reduced-motion.
   ===================================================================== */
:root {
  --rv-dist: 20px;
  --rv-dur: .7s;
  --rv-ease: cubic-bezier(.22,.61,.36,1);
}

.rv-on [data-rv] {
  opacity: 0; transform: translateY(var(--rv-dist));
  transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
}
.rv-on [data-rv].rv-in { opacity: 1; transform: none; }

/* grupos: filhos entram em sequencia */
.rv-on [data-rv-stagger] > * {
  opacity: 0; transform: translateY(var(--rv-dist));
  transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
}
.rv-on [data-rv-stagger].rv-in > * { opacity: 1; transform: none; }
.rv-on [data-rv-stagger].rv-in > *:nth-child(2) { transition-delay: .08s; }
.rv-on [data-rv-stagger].rv-in > *:nth-child(3) { transition-delay: .16s; }
.rv-on [data-rv-stagger].rv-in > *:nth-child(4) { transition-delay: .24s; }