/* =====================================================================
   Bee Saúde — pele da LP B2C, escopada em `.lp-b2c`.
   Carregado depois de css/styles.css: reaproveita todo o design system e
   só sobrescreve o que é específico desta página.
   O sistema gráfico proprietário (favo, linha de voo) vive em css/bee.css,
   carregado depois deste.

   RITMO DE SEÇÃO (§13: "Site, home: fundo branco predominante, amarelo em
   botão e destaque, favo como textura de seção"). A página alterna branco e
   off-white, com DOIS blocos pretos que ancoram a leitura — as coberturas e
   o passo a passo — e fecha em preto no rodapé. O amarelo nunca é
   superfície: ele aparece em botão, número e marcador, e só. É a proporção
   70/20/10 de §09 aplicada ao scroll.
   ===================================================================== */

/* ---------- tokens escopados ---------- */
.lp-b2c {
  /* Sem gradiente de marca: §14 lista "degradê estrutural" entre os itens a
     evitar. Onde havia --grad-magenta agora há preto sólido, que é o que a
     plataforma chama de base (§09). */

  --radius: 5px;
  --radius-lg: 8px;

  /* corpo em Inter: a Glancyr do display não tem numeral tabular, e esta
     página é feita de número em coluna. Ver css/fonts.css. */
  font-family: var(--sans);
}

/* nav, botões e labels em Inter (corpo/CTA). Glancyr fica nos títulos. */
.lp-b2c .header-nav .links a,
.lp-b2c .btn,
.lp-b2c .hero-trust .lbl { font-family: var(--sans); }

/* ---------- sistema de botões ---------- *
   AMARELO SÓLIDO + PRETO, em toda a página, sobre qualquer fundo.

   Isso simplifica algo que antes era complicado: o botão magenta precisava
   INVERTER para pílula branca sempre que caía sobre uma seção magenta, e
   havia três regras só para isso. O par amarelo/preto da marca (§09) passa
   com folga nos dois contextos — 12,62:1 contra o branco e contra o preto —
   então o botão é UM só e não muda de roupa. Menos regra, menos jeito de
   quebrar.

   NUNCA trocar `color` por #fff: branco sobre amarelo dá 1,66:1 e §09
   proíbe explicitamente. */
.lp-b2c .btn {
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lp-b2c .btn-primary {
  background: var(--amarelo);
  color: var(--preto);
  box-shadow: 0 10px 26px -12px rgba(251, 191, 58, .6);
}
.lp-b2c .btn-primary:hover {
  background: #FFC53D;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(251, 191, 58, .8);
}
/* variante secundária: contorno preto sobre claro. Serve para ação de apoio
   (copiar código Pix), onde um segundo amarelo competiria com o CTA. */
.lp-b2c .btn-blue {
  background: var(--preto);
  color: #fff;
  font-weight: 600;
}
.lp-b2c .btn-blue:hover { background: #262626; }

/* =====================================================================
   HERO — DOBRA 01: fundo BRANCO, texto preto, headline grande, foto em
   retrato à direita.

   Era um bloco de gradiente magenta com texto branco. Virou claro por regra
   de marca, não por gosto: §13 define a home como "fundo branco
   predominante, amarelo em botão e destaque". Uma primeira dobra inteira
   preenchida de cor contraria a proporção 70/20/10 de §09 — e no caso do
   amarelo seria pior ainda, porque "tela inteira amarela é erro".
   ===================================================================== */
.lp-b2c .hero {
  background: var(--branco);
  color: var(--ink);
  margin-top: -80px;       /* puxa o fundo para trás do header: sem emenda */
  padding: 112px 0 84px;   /* folga abaixo da pílula flutuante */
}

/* A marca d'água do hero estava DESLIGADA (display:none) desde a versão
   anterior — o layout de referência não usava. Voltou a existir no
   rebranding, agora com o favo em vez do símbolo: §11 é explícito que o
   reconhecimento da marca vem do favo, e o hero é o lugar por excelência de
   uma marca d'água. A regra de aparência vive em css/bee.css. */

/* headline: Glancyr SemiBold, grande, tracking fechado */
.lp-b2c .hero h1 {
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
/* Destaque na headline, sobre fundo branco: ÂMBAR, nunca amarelo.
   Amarelo #FBBF3A sobre branco dá 1,66:1 e §09 proíbe como texto. O âmbar
   entrega 4,91:1 e, num título deste corpo, lê como o mesmo acento. */
.lp-b2c .hero h1 .brand-accent { color: var(--accent-ink); }

.lp-b2c .hero .lede {
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.02em;
  max-width: 44ch;
}

/* O CTA do hero não precisa mais de regra própria: com o hero claro, o
   botão amarelo/preto padrão já é a combinação certa. As três regras de
   inversão que existiam aqui foram removidas junto com o fundo magenta. */
.lp-b2c .hero-cta .note { color: var(--ink-soft); }

/* faixa de confiança: número em preto, rótulo em neutro */
.lp-b2c .hero-trust .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-b2c .hero-trust .lbl { color: var(--ink-soft); }

@media (min-width: 980px) {
  .lp-b2c .hero .hero-grid { grid-template-columns: 1fr 430px; align-items: center; }
  .lp-b2c .hero-copy { max-width: 600px; }
  .lp-b2c .hero h1 .line { white-space: nowrap; }
}

/* =====================================================================
   HEADER — pílula flutuante glass que "entende" o fundo de baixo. Estados
   on-dark (sobre as seções pretas) e on-light (sobre claro) alternados por
   js/b2c/header-theme.js.

   Diferente da versão anterior, o glass agora TROCA de cor junto com o
   estado: antes ele era sempre magenta translúcido, o que funcionava porque
   o hero também era magenta. Com o hero claro e as seções escuras em preto,
   um glass só não serve os dois — claro sobre preto vira mancha, escuro
   sobre branco vira sujeira. Então são dois.
   ===================================================================== */
.lp-b2c .site-header {
  position: sticky; top: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: none;
  padding: 18px 16px 0;   /* padding lateral: o pill nunca encosta nas bordas (mobile) */
}
.lp-b2c .site-header .wrap {
  height: 62px;
  padding: 0 24px;
  border-radius: 12px;
  background: rgba(250, 249, 245, .82);
  border: 1px solid rgba(10, 10, 10, .08);
  box-shadow: 0 14px 34px -22px rgba(10, 10, 10, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .3s ease, border-color .3s ease;
}
.lp-b2c .site-header.on-dark .wrap {
  background: rgba(10, 10, 10, .58);
  border-color: rgba(255, 255, 255, .16);
}
.lp-b2c .header-nav .links a { font-weight: 400; transition: color .3s ease; }
.lp-b2c .header-nav .links a::after { transition: transform .28s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.lp-b2c .menu-toggle span { transition: background .3s ease; }

/* --- sobre fundo PRETO (seções data-header-theme="dark") --- */
.lp-b2c .site-header.on-dark .header-nav .links a { color: rgba(255, 255, 255, .88); }
.lp-b2c .site-header.on-dark .header-nav .links a:hover { color: #fff; }
.lp-b2c .site-header.on-dark .menu-toggle span { background: #fff; }

/* O CTA "Ver planos" NÃO inverte mais. Amarelo com texto preto é legível
   sobre o glass claro e sobre o glass escuro (12,62:1 contra os dois), então
   as duas regras de inversão que existiam aqui saíram. O sublinhado do nav
   segue amarelo nos dois estados, herdado de styles.css. */
.lp-b2c .header-cta { transition: background .3s ease, box-shadow .3s ease; }

/* --- sobre fundo CLARO (padrão) --- */
.lp-b2c .site-header.on-light .header-nav .links a { color: var(--ink-soft); }
.lp-b2c .site-header.on-light .header-nav .links a:hover { color: var(--ink); }
.lp-b2c .site-header.on-light .menu-toggle span { background: var(--ink); }

/* Troca de lockup por estado. O nome deixou de ser texto e passou a fazer
   parte do arquivo do kit, então não há mais cor a trocar: o que muda é
   qual dos dois arquivos aparece. O de fundo claro escreve "Saúde" em
   preto, o de fundo escuro escreve em branco. */
.lp-b2c .brand-logo--on-light { display: none; }
.lp-b2c .site-header.on-light .brand-logo--on-dark { display: none; }
.lp-b2c .site-header.on-light .brand-logo--on-light { display: inline-block; }

/* =====================================================================
   LINGUAGEM DE SEÇÃO — o ritmo branco / off-white / preto.

   A versão anterior pintava TODAS as seções da mesma lavanda, e o contraste
   entre blocos vinha só do espaçamento. Aqui o fundo volta a trabalhar: as
   seções alternam para o olho saber onde um assunto termina, e dois blocos
   pretos (coberturas e passo a passo) ancoram o meio da página.

   Nenhuma seção é amarela. §09 é explícito: "o amarelo é acento, não
   superfície. Tela inteira amarela é erro".
   ===================================================================== */
.lp-b2c .section { background: var(--branco); }

/* alternância. Os seletores são nominais de propósito: a ordem das seções é
   uma decisão de página, não um efeito colateral de :nth-child — inserir uma
   seção nova no meio não deve reembaralhar o ritmo inteiro sozinho. */
.lp-b2c .plans,
.lp-b2c .proof,
.lp-b2c .depoimentos,
.lp-b2c .final { background: var(--off-white); }

/* seção preta: base e autoridade (§09) */
.lp-b2c .section--preta {
  background: var(--preto);
  color: #fff;
}

/* eyebrow: símbolo da marca + pílula, uppercase e espaçado */
.lp-b2c .fr-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 6px; margin-bottom: 20px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: color-mix(in srgb, var(--amarelo) 18%, var(--branco));
  color: var(--accent-ink);
}
/* Marcador do eyebrow: HEXÁGONO, não a abelha.
   Ele aparece no topo de sete seções. §11 é explícito que "a logo aparece
   pouco: o que faz a Bee Saúde ser reconhecida em qualquer peça é o favo e
   a linha de voo" — sete abelhas miúdas descendo a página é o oposto disso,
   e ainda gasta o símbolo num tamanho onde ele não se lê. O hexágono é o
   "bullet hexagonal" que §12 pede, e a 15 px ele funciona. */
.lp-b2c .fr-eyebrow .ic {
  width: 15px; height: 17px; background: currentColor;
  -webkit-mask: url("../assets/marca/hex-cheio.svg") no-repeat center / contain;
          mask: url("../assets/marca/hex-cheio.svg") no-repeat center / contain;
}
.lp-b2c .section--preta .fr-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; }

/* título de seção: preto de base, ÂMBAR no <span brand-em>. Sobre preto o
   mesmo destaque vira amarelo cheio — é a inversão de §09. */
.lp-b2c .section-title { color: var(--ink); font-weight: 600; }
.lp-b2c .section-title .brand-em { color: var(--accent-ink); font-style: normal; font-weight: 600; }
.lp-b2c .section--preta .section-title { color: #fff; }
.lp-b2c .section--preta .section-title .brand-em { color: var(--amarelo); }
.lp-b2c .section--preta .section-lede { color: rgba(255, 255, 255, .82); }

/* Marcadores do mapa = ABELHA, ancorada pela ponta da cauda. É um <image>
   com width/height próprios; aqui só reforça o tamanho. A justificativa da
   âncora está no comentário do bloco em index.html. */
.lp-b2c .brazil-map .pin-mark-abelha { width: 11px; height: 13px; }

/* legenda do mapa: o mesmo marcador do mapa */
.lp-b2c .map-legend .legend-pin {
  width: 13px; height: 16px;
  -webkit-mask: none; mask: none;
  background: url("../assets/marca/abdomen.svg") no-repeat center / contain;
}

/* =====================================================================
   "O QUE VOCÊ RECEBE" (coberturas) — cabeçalho da seção:
   centralizado, com eyebrow e título. O corpo da seção é o carrossel
   coverflow, cuja pele fica mais abaixo neste arquivo.
   ===================================================================== */
.lp-b2c .whatis-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.lp-b2c .whatis-head h2 { color: var(--ink); font-weight: 600; }
.lp-b2c .whatis-head h2 .brand-em { color: var(--accent-ink); font-style: normal; }



/* =====================================================================
   PASSO A PASSO — seção PRETA com efeito "baralho empilhado": os cards
   ficam sticky em tops incrementais; ao rolar, cada um cobre o anterior
   deixando uma faixa de topo à mostra (deck). CSS puro (sem GSAP).

   O fundo vem de --preto-stone, definido em styles.css. A LP não precisa
   mais redefinir a variável: antes ela trocava o ameixa da franquia pelo
   magenta da marca, e agora o valor base já é o preto da Bee Saúde.
   ===================================================================== */
.lp-b2c .v-stack-sec { padding: 84px 0 96px; }

.lp-b2c .v-stack-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.lp-b2c .v-stack-head .fr-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-b2c .v-stack-head .section-title { color: #fff; font-weight: 600; max-width: none; margin: 0 auto; }
.lp-b2c .v-stack-head .section-title .brand-em { color: var(--amarelo); }

.lp-b2c .v-stack { position: relative; }
.lp-b2c .v-stack-card {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 36px 72px -34px rgba(0, 0, 0, .85);
  margin-bottom: 26px;
}
.lp-b2c .vsc-media { position: relative; min-height: 260px; background: var(--preto); }
.lp-b2c .vsc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-b2c .vsc-copy { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; }
/* Numerador dentro de hexágono: §12 pede "numeradores de 01 a 06 dentro de
   hexágono" como marcador de interface da marca. */
/* Numerador dos passos: a construção (hexágono amarelo, texto preto,
   tabular-nums) vive em .bee-num, no sistema. Aqui ficam só os desvios
   deste contexto.

   Antes esta regra era uma cópia byte a byte do .bee-num com outro nome, o
   que dava duas implementações do mesmo elemento de §12 para divergirem na
   primeira alteração. É o mesmo motivo pelo qual comparativo e planos usam
   um único check.svg. */
.lp-b2c .vsc-num {
  width: 54px; height: 62px;
  margin-bottom: 16px;
  font-size: 1.35rem;
}
.lp-b2c .vsc-copy h3 { font-size: 1.6rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.lp-b2c .vsc-copy p { color: var(--ink-soft); line-height: 1.55; margin-bottom: 24px; }
.lp-b2c .vsc-copy .btn { align-self: flex-start; }

/* empilhamento sticky só no desktop; no mobile os cards ficam em fluxo normal */
@media (min-width: 900px) {
  .lp-b2c .v-stack-card {
    position: sticky;
    top: calc(96px + var(--i) * 22px);
    min-height: 360px;
  }
}
@media (max-width: 899px) {
  .lp-b2c .v-stack-card { grid-template-columns: 1fr; }
}

/* =====================================================================
   PROVA DE MARCA (#marca) — seção CLARA (após a Vantagens magenta). Cabeçalho
   centralizado (eyebrow + título bicolor) e os 3 cards de número em
   GRADIENTE MAGENTA (linguagem DOBRA 05).
   ===================================================================== */
.lp-b2c .proof-head { text-align: center; max-width: 860px; margin: 0 auto 46px; }
.lp-b2c .proof-head .section-title { max-width: none; margin: 0 auto; }
.lp-b2c .proof-head .section-lede { margin: 0 auto; }

/* Antes os TRÊS cards eram magenta cheio, o que anulava a hierarquia: o card
   do número principal ficava igual aos outros dois. Agora só ele é preto — os
   de apoio são brancos com fio. É o card preto que carrega o amarelo. */
.lp-b2c .proof-card {
  background: var(--branco); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -32px rgba(10, 10, 10, .25);
}
.lp-b2c .proof-card .big { color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-b2c .proof-card .desc { color: var(--ink-soft); }
.lp-b2c .proof-card.hero-card {
  background: var(--preto); color: #fff; border-color: transparent;
  box-shadow: 0 30px 60px -32px rgba(10, 10, 10, .6);
}
.lp-b2c .proof-card.hero-card .big { color: var(--amarelo); }
.lp-b2c .proof-card.hero-card .desc { color: rgba(255, 255, 255, .82); }

/* CTA flutuante: o botão amarelo/preto já contrasta com claro e com preto,
   então a inversão que existia aqui (fundo branco sobre seção magenta) não é
   mais necessária. Só a sombra muda, para não sumir sobre o preto. */
.lp-b2c .float-cta.inverted .btn {
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7);
}

/* FOOTER — preto. O fundo já vem de styles.css; aqui só os tons de texto. */
.lp-b2c .site-footer h3 { color: #fff; }
.lp-b2c .site-footer a:hover { color: var(--amarelo); }

/* =====================================================================
   COMPARATIVO — TABELA premium (subgrid), coluna Bee Saúde destacada em PRETO,
   check hexagonal como "sim", empilha em 2 cards no mobile.
   ===================================================================== */
.lp-b2c .compare-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.lp-b2c .compare-head .section-title { max-width: none; margin: 0 auto; }
.lp-b2c .compare-head .section-lede { margin: 0 auto; }

.lp-b2c .cmp-wrap { overflow-x: auto; padding: 22px 0; }
.lp-b2c .cmp {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: auto repeat(4, 1fr);
  min-width: 660px; max-width: 900px; margin: 0 auto;
  /* container unificado: tabela-card branca com a coluna Bee Saúde destacada dentro */
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 62px -36px rgba(10, 10, 10, .22);
  padding: 6px;
}
/* cada COLUNA "assina" as linhas do pai (subgrid): texto que quebra continua alinhado */
.lp-b2c .cmp-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }

.lp-b2c .cmp-h, .lp-b2c .cmp-c { padding: 16px 24px; }
.lp-b2c .cmp-c {
  display: flex; align-items: center; gap: 12px; font-size: 1rem;
  border-top: 1px solid var(--line);
}
.lp-b2c .cmp-h {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 4px; padding-top: 26px; padding-bottom: 18px;
}
.lp-b2c .cmp-h strong { font-family: var(--display); font-weight: 600; font-size: 1.18rem; }
.lp-b2c .cmp-h em { font-style: normal; font-size: .82rem; opacity: .72; }

.lp-b2c .cmp-col--crit .cmp-c { color: var(--ink-soft); font-weight: 700; }

/* COLUNA Bee Saúde = card PRETO flutuando entre as duas colunas de texto. É a
   coluna que ganha a comparação, e o preto é o que lhe dá peso sem gritar. */
.lp-b2c .cmp-col--bene {
  background: var(--preto);
  color: #fff; border-radius: 10px;
  box-shadow: 0 24px 50px -26px rgba(10, 10, 10, .6);
}
.lp-b2c .cmp-col--bene .cmp-c { border-top-color: rgba(255, 255, 255, .16); }
.lp-b2c .cmp-badge {
  align-self: flex-start; font-family: var(--sans); font-weight: 700;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--amarelo); color: var(--preto);
  padding: 5px 11px; border-radius: 4px;
}
.lp-b2c .cmp-col--trad { color: var(--ink-soft); }

/* Marcador de "sim": CHECK INSCRITO EM HEXÁGONO (§12).

   É o MESMO elemento das listas dos cards de plano — mesmo significado
   ("está incluso"), mesmo marcador.

   Agora é o arquivo do kit (Check 1), e por isso deixou de ser máscara e
   virou imagem. A peça é de DUAS cores: hexágono amarelo em contorno com o
   check dentro. Máscara achataria as duas numa silhueta só e o check
   sumiria dentro do hexágono. Como o arquivo é feito para um fundo, o kit
   entrega as duas versões e aqui, sobre o card preto, entra a de check
   branco. */
.lp-b2c .cmp-yes {
  width: 21px; height: 24px; flex: none;
  background: url("../assets/marca/check-negativo.svg") center / contain no-repeat;
}
.lp-b2c .cmp-no {
  width: 16px; height: 2px; flex: none; border-radius: 2px;
  background: color-mix(in srgb, var(--ink-soft) 45%, transparent);
}

/* Efeito: a coluna VENCEDORA (Bee Saúde) "cresce" ao revelar. */
.lp-b2c .cmp-col--bene {
  transform: translateY(8px) scale(.985); opacity: .96;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease, box-shadow .35s ease;
}
.lp-b2c .cmp-wrap.rv-in .cmp-col--bene { transform: none; opacity: 1; }

/* =====================================================================
   RODAPÉ DA COMPARAÇÃO: A NOTA DE FONTE E O CTA
   ---------------------------------------------------------------------
   ⚠️ Estas duas classes existiam no HTML e NÃO existiam em CSS nenhum.
   O bloco vinha sem estilo: a nota de rodapé legal saía com o corpo de
   texto normal, largura inteira, competindo com a tabela; e o botão e o
   "Cancele quando quiser" ficavam colados um no outro, encostados à
   esquerda, porque nada os alinhava.

   Não quebrou só no celular, quebrava em qualquer largura. A varredura
   não pegou porque ela procura o defeito inverso: seletor de CSS sem
   HTML que o use. Classe no HTML sem CSS que a estile passava batido.

   A nota herda a régua de `.plans-legal`, que é a outra letra miúda
   jurídica da página: as duas precisam ler como o mesmo tipo de texto. */
.lp-b2c .cmp-src {
  max-width: 92ch;
  margin: 26px auto 0;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lp-b2c .cmp-src sup { font-weight: 700; color: var(--ink); }

.lp-b2c .cmp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.lp-b2c .cmp-cta .note { font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 480px) {
  /* No celular o botão ocupa a largura toda, como os outros da página. */
  .lp-b2c .cmp-cta { align-self: stretch; }
  .lp-b2c .cmp-cta .btn { width: 100%; }   /* ver a nota do .btn no carrossel */
}

/* MOBILE: a tabela vira DOIS CARDS empilhados. Bee Saúde primeiro (destacado),
   tradicional abaixo (apagado). A coluna de critérios some e cada valor mostra
   seu rótulo inline (data-label). */
@media (max-width: 680px) {
  .lp-b2c .cmp-wrap { overflow-x: visible; padding: 8px 0; }
  .lp-b2c .cmp {
    display: block; min-width: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  .lp-b2c .cmp-col {
    display: block; margin-bottom: 16px; border-radius: 16px; overflow: hidden;
  }
  .lp-b2c .cmp-col--crit { display: none; }              /* rótulos vêm inline */
  .lp-b2c .cmp-col--bene {
    transform: none; opacity: 1;                          /* zera o "pop" no mobile */
    box-shadow: 0 24px 50px -26px rgba(10, 10, 10, .55);
  }
  .lp-b2c .cmp-col--trad {
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 20px 44px -30px rgba(10, 10, 10, .2);
  }
  .lp-b2c .cmp-h { padding: 20px 22px 14px; }
  .lp-b2c .cmp-c {
    justify-content: flex-start; align-items: flex-start;
    gap: 10px; padding: 13px 22px; font-size: .98rem;
  }
  .lp-b2c .cmp-c .cmp-yes { order: -1; margin-top: 1px; }
  .lp-b2c .cmp-c .cmp-no { order: -1; margin-top: 9px; }
  .lp-b2c .cmp-c::before {
    content: attr(data-label) ": "; font-weight: 700; font-size: .95rem;
  }
  .lp-b2c .cmp-col--bene .cmp-c::before { color: rgba(255, 255, 255, .85); }
  .lp-b2c .cmp-col--trad .cmp-c::before { color: var(--ink-soft); }
}

/* =====================================================================
   DEPOIMENTOS — seção clara; o CARD ATIVO é preto. O depoimento em foco
   ganha peso pelo contraste, não por mais uma cor, e as estrelas viram
   amarelo cheio (que sobre preto é a combinação de maior força, §09).
   ===================================================================== */
.lp-b2c .depoimentos .dep-head h2 { color: var(--ink); font-weight: 600; }
.lp-b2c .depoimentos .dep-head h2 .brand-em { color: var(--accent-ink); font-style: normal; }

.lp-b2c .carousel .slide.is-active .quote {
  background: var(--preto);
  border: 1px solid transparent;
  box-shadow: 0 30px 64px -32px rgba(10, 10, 10, .7);
}
.lp-b2c .carousel .slide.is-active .quote .text,
.lp-b2c .carousel .slide.is-active .quote .name { color: #fff; }
.lp-b2c .carousel .slide.is-active .quote .meta { color: rgba(255, 255, 255, .78); }
.lp-b2c .carousel .slide.is-active .quote .stars { color: var(--amarelo); }
/* símbolo da marca vazado no canto do card ativo, como assinatura */
.lp-b2c .carousel .quote::before {
  right: 14px; top: 14px; bottom: auto; left: auto;
  width: 30px; height: 35px; opacity: 0;
  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;
}
.lp-b2c .carousel .slide.is-active .quote::before { opacity: .9; }
.lp-b2c .dep-dots button.on { background: var(--ambar); }
.lp-b2c .dep-arrow svg { stroke: var(--preto); }
.lp-b2c .dep-arrow:hover { border-color: var(--preto); background: var(--off-white); }

/* =====================================================================
   FECHAMENTO (.final) — seção CLARA (o footer magenta fecha a página, então aqui
   fica claro pra não empilhar magenta). Título bicolor, CTA gradiente magenta.
   ===================================================================== */
.lp-b2c .final h2 { color: var(--ink); }
.lp-b2c .final h2 em { color: var(--accent-ink); font-style: normal; font-weight: 600; }

/* Fonte dos números da seção Oportunidade (credibilidade: número sem fonte
   é chute, e o público desta página desconfia por padrão) */
.lp-b2c .market-src {
  margin-top: 16px; font-size: .78rem; color: var(--ink-soft);
}

/* =====================================================================
   ▼▼▼ ESPECÍFICO DA LP B2C (pessoa física) ▼▼▼
   Seções que só existem aqui: hero com IMAGEM (sem vídeo), carrossel
   infinito de coberturas (DOBRA 04), cards de preço/modalidades com
   toggle Individual/Familiar (CSS puro, sem JS) e FAQ (details/summary).
   ===================================================================== */

/* ---------- HERO: imagem estática no lugar do vídeo ---------- */
.lp-b2c .hero-media {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -32px rgba(10, 10, 10, .4);
  background: var(--off-white);
}
.lp-b2c .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%; display: block;
}
@media (max-width: 979px) {
  /* neutraliza o aspect-ratio 9/16 que o styles.css impõe à coluna no mobile */
  .lp-b2c .hero-video-col { max-width: 520px; margin: 0 auto; aspect-ratio: auto; width: 100%; }
  /* A moldura era 16/10 no mobile: virava paisagem e o object-fit:cover comia a
     foto no eixo vertical, cortando a filha e deixando só a mãe. A cena é o
     argumento (quem você ama não pode esperar), então a moldura acompanha a
     foto (4:5) em vez de recortá-la. O mobile é onde está o tráfego. */
  .lp-b2c .hero-media { aspect-ratio: 4 / 5; max-width: 340px; margin: 10px auto 0; }
}

/* ---------- CARROSSEL INFINITO DE PARCEIROS ----------
   Sem faixa e sem fio. A primeira versão tinha fundo off-white e um fio em
   cima e outro embaixo, para "ler como tira". O efeito real foi o oposto do
   pretendido: três marcações concorrentes (mudança de cor, fio superior, fio
   inferior) para delimitar um conteúdo que já se delimita sozinho, porque uma
   linha de logos rolando não se confunde com nada. Lia como bloco cinza
   colado entre duas seções brancas.

   Agora o fundo é o mesmo das seções vizinhas e quem separa é o ESPAÇO. É a
   regra editorial de conter a cor e deixar o intervalo trabalhar: menos
   marcação, mesma leitura.

   Os logos seguem em grayscale e ganham cor no hover: são parceiros, não a
   marca. Sobre branco eles precisam de um pouco mais de opacidade do que
   precisavam sobre off-white, senão somem. */
/* logos SEM moldura, cor natural, sobre a faixa clara */
/* tom neutro (grayscale) para não roubar a atenção; ganha cor no hover */
@keyframes b2c-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
}

/* ---------- CARDS DE PREÇO / MODALIDADES (5 cards: 3 brancos + 2 saúde mental magentas) ---------- */
.lp-b2c .plans-head { text-align: center; max-width: 860px; margin: 0 auto; }
.lp-b2c .plans-head .section-title { max-width: none; margin: 0 auto; }

/* toggle Individual/Familiar — CSS puro (um só, controla os 5 cards) */
.lp-b2c .plans-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lp-b2c .plans-toggle {
  display: flex; gap: 4px; width: fit-content; margin: 26px auto 0;
  padding: 5px; border-radius: 8px;
  background: var(--branco);
  border: 1px solid var(--line);
}
.lp-b2c .plans-toggle-opt {
  padding: 9px 26px; border-radius: 5px; cursor: pointer;
  font-family: var(--display); font-size: .98rem; color: var(--ink-soft);
  transition: background .25s ease, color .25s ease;
}
.lp-b2c #pm-ind:checked ~ .plans-toggle label[for="pm-ind"],
.lp-b2c #pm-fam:checked ~ .plans-toggle label[for="pm-fam"] {
  background: var(--amarelo); color: var(--preto); font-weight: 600;
}
.lp-b2c .plans-fam-note { text-align: center; color: var(--ink-soft); font-size: .92rem; margin: 16px auto 0; max-width: 60ch; }

/* alternância de conteúdo por modo (default = Individual) */
.lp-b2c .m-fam { display: none; }
.lp-b2c #pm-fam:checked ~ .plans-grid .m-ind { display: none; }
.lp-b2c #pm-fam:checked ~ .plans-grid .m-fam { display: block; }
.lp-b2c #pm-fam:checked ~ .plans-fam-note.m-fam { display: block; }

/* grade de 5 cards; no desktop cabem os 5, abaixo vira rolagem horizontal */
.lp-b2c .plans-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; align-items: stretch; }
@media (max-width: 1120px) {
  .lp-b2c .plans-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* padding-top dá espaço p/ o selo "Mais popular" (top:-13px) não ser cortado pelo scroll */
    padding: 22px 4px 14px;
  }
  .lp-b2c .plans-grid > .plan { scroll-snap-align: center; }
}

/* CARD BASE = BRANCO (as 3 modalidades principais) */
.lp-b2c .plan {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 16px;
  box-shadow: 0 22px 46px -34px rgba(10, 10, 10, .3);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-b2c .plan:hover { transform: translateY(-8px); border-color: var(--amarelo); box-shadow: 0 34px 62px -32px rgba(10, 10, 10, .35); }
.lp-b2c .plan h3 { font-family: var(--display); font-weight: 600; font-size: 1.16rem; color: var(--ink); }
.lp-b2c .plan-desc { color: var(--ink-soft); font-size: .9rem; line-height: 1.35; margin: 8px 0 12px; min-height: 2.7em; }
.lp-b2c .plan-price { margin: 2px 0 16px; line-height: 1; }
/* O preço fica PRETO, não amarelo. §10 trata dado como nível próprio de
   hierarquia ("Dado: Medium, numeral tabular") e §09 reserva o amarelo para
   acento. Quem chama a atenção no card é o botão; o preço é informação, e
   informação se lê melhor em preto. */
.lp-b2c .plan-price .cur { font-size: 1rem; color: var(--ink-soft); }
.lp-b2c .plan-price strong {
  font-family: var(--display); font-weight: 700; font-size: 2.1rem;
  color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.lp-b2c .plan-price .per { font-size: .82rem; color: var(--ink-soft); }
/* `align-content: start` porque a lista é um grid que ESTICA (flex: 1 1 auto)
   para o botão de todos os cards ficar na mesma linha. Sem isso, as linhas se
   distribuem pela altura sobrada e o card mais curto — o Atendimento, que tem
   dois itens contra sete do Nutrição — abre um vão enorme entre os dois. O
   card precisa parecer mais curto, e não esparramado. */
.lp-b2c .plan-list { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: grid; gap: 7px; flex: 1 1 auto; align-content: start; }
.lp-b2c .plan-list li { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink); line-height: 1.28; }
/* Check inscrito em hexágono (§12) — o MESMO marcador da coluna Bee Saúde do
   comparativo, e agora o mesmo ARQUIVO. Imagem e não máscara pelo motivo
   explicado em .cmp-yes: a peça tem duas cores e achatá-la apaga o check.

   16px e não 13px: o hexágono do kit é de contorno fino, e abaixo disso o
   traço amarelo desaparece antes do check. Quem carrega o significado é o
   check, que é preto sobre o card branco; o anel amarelo é acento. */
.lp-b2c .plan-list li::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 18px; margin-top: 1px;
  background: url("../assets/marca/check.svg") no-repeat center / contain;
}
/* Card preto: o check vira branco dentro do mesmo hexágono amarelo. */
.lp-b2c .plan--preto .plan-list li::before {
  background-image: url("../assets/marca/check-negativo.svg");
}
.lp-b2c .plan-list li.hl { font-weight: 700; color: var(--accent-ink); }
.lp-b2c .plan .btn { width: 100%; order: 2; margin-top: 0; padding-left: 12px; padding-right: 12px; }

/* CARD PRETO = o topo da escada.
   Era `.plan--mental`, quando saúde mental era um ramo separado da linha.
   Com os cinco planos virando uma escada única, "mental" deixou de nomear
   um estado visual e passou a nomear um conteúdo — e conteúdo muda, cor de
   card não. O nome do seletor agora diz o que ele faz.

   Preto e não Verde Colmeia: a cor de apoio designada para saúde mental
   (§09) está restrita no mesmo parágrafo a "infográfico e categorização,
   nunca como cor de marca". Um card de venda é superfície comercial, não
   infográfico. Preto conduz, e o amarelo faz o destaque. */
.lp-b2c .plan--preto {
  background: var(--preto); color: #fff; border-color: transparent;
  box-shadow: 0 26px 54px -32px rgba(10, 10, 10, .7);
}
.lp-b2c .plan--preto:hover { border-color: var(--amarelo); box-shadow: 0 38px 70px -30px rgba(10, 10, 10, .8); }
.lp-b2c .plan--preto h3 { color: #fff; }
.lp-b2c .plan--preto .plan-desc { color: rgba(255, 255, 255, .8); }
.lp-b2c .plan--preto .plan-price .cur { color: rgba(255, 255, 255, .7); }
.lp-b2c .plan--preto .plan-price strong { color: #fff; }
.lp-b2c .plan--preto .plan-price .per { color: rgba(255, 255, 255, .7); }
.lp-b2c .plan--preto .plan-list li { color: rgba(255, 255, 255, .92); }
.lp-b2c .plan--preto .plan-list li.hl { color: var(--amarelo); }
/* o botão NÃO inverte: amarelo/preto já é o par de maior contraste sobre
   preto (12,62:1), o mesmo que usa sobre branco */

/* "Mais popular" — contorno AMARELO (por último, para vencer o card preto) */
.lp-b2c .plan--featured { border-color: var(--amarelo); box-shadow: 0 0 0 2px var(--amarelo), 0 30px 60px -30px rgba(10, 10, 10, .6); }
.lp-b2c .plan--featured:hover { box-shadow: 0 0 0 2px var(--amarelo), 0 40px 74px -28px rgba(10, 10, 10, .75); }
.lp-b2c .plan-pop {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--amarelo); color: var(--preto); font-weight: 700;
  padding: 5px 16px; border-radius: 4px; font-size: .74rem; white-space: nowrap;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px rgba(10, 10, 10, .5);
}

/* nota legal consolidada abaixo da grade */
.lp-b2c .plans-legal { text-align: center; max-width: 92ch; margin: 24px auto 0; font-size: .74rem; color: var(--ink-soft); line-height: 1.5; }
/* ---------- comparativo: 7 linhas (override do padrão de 4) ---------- */
.lp-b2c .cmp { grid-template-rows: auto repeat(7, 1fr); }


/* ---------- FAQ (details/summary, sem JS) ---------- *
   Card branco sobre a seção, com o "+" em âmbar. Aberto, o fio vira amarelo:
   é o único lugar onde o amarelo marca ESTADO, e funciona porque ele é
   contorno, não texto.

   A versão anterior usava turquesa lavado como superfície do card. Com o
   amarelo isso não se repete: um card amarelo lavado sobre off-white some, e
   um card amarelo cheio quebra a proporção de §09. */
.lp-b2c .faq-list { max-width: 820px; margin: 34px auto 0; display: grid; gap: 12px; }
.lp-b2c .faq-item {
  background: var(--branco);
  border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px -24px rgba(10, 10, 10, .3);
  transition: border-color .25s ease;
}
.lp-b2c .faq-item[open] { border-color: var(--amarelo); }
.lp-b2c .faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.lp-b2c .faq-item summary::-webkit-details-marker { display: none; }
.lp-b2c .faq-item summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.6rem; line-height: 1;
  color: var(--accent-ink); transition: transform .3s ease;
}
.lp-b2c .faq-item[open] summary::after { content: "−"; }
/* Resposta: painel off-white dentro do card branco. Separa pergunta de
   resposta sem precisar de linha divisória. */
.lp-b2c .faq-item .faq-a {
  margin: 0 14px 14px; padding: 16px 18px;
  background: var(--off-white);
  border: none;
  border-radius: 6px;
  color: var(--ink); line-height: 1.62; font-size: .98rem;
}
.lp-b2c .faq-item .faq-a p { margin: 0 0 10px; }
.lp-b2c .faq-item .faq-a p:last-child { margin-bottom: 0; }

/* ---------- app: mídia dentro do mockup ---------- */
.lp-b2c .iphone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- botões das lojas (App Store / Google Play) ---------- */
.lp-b2c .app-stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* no mobile a seção do app centraliza (≤767); os badges das lojas acompanham */
@media (max-width: 767px) { .lp-b2c .app-stores { justify-content: center; } }
.lp-b2c .store-badge { display: inline-flex; align-items: center; height: 52px; transition: transform .2s ease; }
.lp-b2c .store-badge:hover { transform: translateY(-2px); }
.lp-b2c .store-badge img { height: 52px; width: auto; display: block; }
.lp-b2c .store-badge-fb { display: none; }
/* fallback (enquanto não há a arte oficial): pílula escura, sem usar os logos oficiais */
.lp-b2c .store-badge--fallback .store-badge-fb {
  display: inline-flex; flex-direction: column; justify-content: center;
  height: 52px; padding: 0 22px; border-radius: 8px;
  background: var(--preto); color: #fff; text-align: left; line-height: 1.12;
}
.lp-b2c .store-badge-fb .sb-sub { font-size: .66rem; opacity: .85; letter-spacing: .02em; }
.lp-b2c .store-badge-fb .sb-main { font-size: 1.06rem; font-family: var(--display); }

/* ---------- rolagem suave + offset do header sticky para âncoras (CTAs → #modalidades) ---------- */
html { scroll-behavior: smooth; }
.lp-b2c [id] { scroll-margin-top: 96px; }

/* ---------- CTA flutuante ---------- *
   Era o ícone do WhatsApp; virou o botão que leva aos planos, porque é lá que
   a venda acontece (o checkout é o do Hubvita, não uma conversa). Mantém a
   inversão de cor sobre seção escura, para não sumir no fundo. */
.lp-b2c .float-cta { left: auto; right: 20px; }

/* =====================================================================
   CARROSSEL COVERFLOW — seção "O que você recebe" (#o-que-e)
   Componente "3D Parallax Glassmorphic Carousel Slider", de MOZZARELLA
   (codepen.io/TheMOZZARELLA). Motor em js/carrossel.js.

   Primeiro dos dois blocos PRETOS da página. Preto chapado, sem degradê:
   §14 lista "degradê estrutural" entre os itens a evitar. A textura de
   favo entra por cima, em css/bee.css.

   ---------------------------------------------------------------------
   O QUE MUDOU DA FONTE, E POR QUÊ
   ---------------------------------------------------------------------
   1. SAIU A TELA CHEIA. O original é uma demo: `html, body { height:100%;
      overflow:hidden }`, `.mzaCarousel { height:100vh }` e a barra de
      progresso em `position: fixed; bottom: 0; z-index: 9999`. Isso aqui
      travaria a rolagem da página inteira e grudaria uma barra no rodapé
      do navegador. Tudo virou altura de componente, em fluxo.

   2. `touch-action: pan-y` no lugar de `none`. Com `none` o carrossel
      engole o gesto vertical e a página para de rolar no celular quando
      o dedo encosta nele.

   3. PELE DA MARCA. As cores do original são glassmorphic escuro com
      menta e azul. Aqui é preto e amarelo (§09). O botão perdeu o
      degradê de doze paradas: §14 veta degradê estrutural, e o par de
      botão da marca é preto sobre amarelo, 12,62:1.

   4. `backdrop-filter` do card saiu. Ele existia para o vidro sobre um
      fundo colorido; sobre preto chapado não faz nada e custa uma camada
      de composição em celular de entrada, que é o aparelho do público.

   5. O card aceita NÃO ter foto. Duas coberturas (seguro de acidentes e
      assistência funeral) não têm cena fotografável honesta, e nesses o
      fundo cai para o favo em vez de ficar vazio.
   ===================================================================== */
.lp-b2c .whatis {
  position: relative; overflow: hidden;
  background: var(--preto);
  padding-bottom: clamp(30px, 4vw, 54px);
}
.lp-b2c .whatis .whatis-head h2 { color: #fff; }
.lp-b2c .whatis .whatis-head h2 .brand-em { color: var(--amarelo); }
.lp-b2c .whatis .fr-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-b2c .whatis .cobs-foot { color: rgba(255, 255, 255, .9); margin-top: 30px; text-align: center; }
.lp-b2c .whatis .cobs-foot strong { color: var(--amarelo); }

.lp-b2c .mzaCarousel {
  --mzaC-slideW: min(880px, 90vw);
  --mzaC-peek: 0.15;
  --mzaPagH: 64px;
  --mzaCardH: clamp(360px, 62vh, 600px);

  position: relative; z-index: 1;
  height: clamp(460px, 68vh, 660px);
  max-width: 100vw; margin: 0 auto; padding: 0 18px;
  overflow: hidden;
  contain: layout paint;
  /* MUDANÇA 2: o eixo vertical continua sendo da página. */
  touch-action: pan-y;
}
.lp-b2c .mzaCarousel-viewport {
  position: relative; outline: none; overflow: hidden; height: 100%;
}
.lp-b2c .mzaCarousel-viewport:focus-visible { outline: 2px solid var(--amarelo); outline-offset: -4px; }
.lp-b2c .mzaCarousel-track {
  position: relative;
  height: calc(100% - var(--mzaPagH));
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: hidden;
}

/* SEM JS a faixa vira scroll horizontal com snap: os sete cards continuam
   legíveis e o texto já está no HTML. `is-ativo` é posta pelo script
   depois de medir, e só então o modo 3D entra. */
.lp-b2c .mzaCarousel:not(.is-ativo) .mzaCarousel-track {
  display: flex; gap: 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; perspective: none;
}
.lp-b2c .mzaCarousel:not(.is-ativo) .mzaCarousel-slide {
  position: relative; flex: 0 0 min(880px, 90%); top: auto; left: auto;
  scroll-snap-align: center; height: 100%;
}

.lp-b2c .mzaCarousel-slide {
  position: absolute;
  top: calc(50% + 5px);
  left: 50%;
  width: var(--mzaC-slideW);
  height: min(var(--mzaCardH), calc(100% - 50px));
  transform-style: preserve-3d;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  will-change: transform, filter;
}

.lp-b2c .mzaCard {
  position: relative; width: 100%; height: 100%;
  border-radius: inherit; overflow: hidden;
  background: var(--preto);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transform: translateZ(0);
  cursor: grab;
}
.lp-b2c .mzaCard:active { cursor: grabbing; }

/* Camada de fundo com o paralaxe. `--mzaCard-bg` vem do style inline do
   card; quando a cobertura não tem foto, o fallback é `none` e fica só o
   favo da camada de trás. */
.lp-b2c .mzaCard::before {
  content: ""; position: absolute; inset: -2%;
  background-image: var(--mzaCard-bg, none);
  background-size: cover; background-position: center;
  filter: contrast(1.02) saturate(1.08) brightness(.9);
  transform: translateZ(-60px) scale(1.18)
    translate3d(var(--mzaParBgX, 0px), var(--mzaParBgY, 0px), 0);
  transition: transform 800ms cubic-bezier(.2, .7, 0, 1),
              filter 800ms cubic-bezier(.2, .7, 0, 1);
}
/* Favo atrás de tudo. No card com foto ele não aparece; no card sem foto
   ele é o fundo. Máscara e não imagem: o arquivo é alfa puro. */
.lp-b2c .mzaCard {
  background-image: none;
}
.lp-b2c .mzaCard > .mzaCard-favo {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--amarelo); opacity: .06;
  -webkit-mask: url("../assets/marca/favo-massa.svg") no-repeat right center / 760px;
          mask: url("../assets/marca/favo-massa.svg") no-repeat right center / 760px;
}

/* Véu de contraste: é o que faz o texto aguentar QUALQUER foto. Escuro nas
   duas pontas e leve no meio, porque em cima mora o título e embaixo o
   texto e o botão. */
.lp-b2c .mzaCard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .45) 0%,
    rgba(0, 0, 0, .30) 45%,
    rgba(0, 0, 0, .78) 100%);
}

.lp-b2c .mzaCard-head { position: absolute; inset: 24px auto auto 26px; z-index: 2; max-width: 72%; }
.lp-b2c .mzaCard-title {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(22px, 3.1vw, 38px);
  color: #fff;
  text-shadow: 0 2px 15px rgba(0, 0, 0, .6);
}
/* O kicker carrega o DADO do benefício ("sem limite", "duas por mês"), que
   é o que a pessoa compara entre os cards. Pílula OPACA e não texto solto
   sobre a foto: sobre pílula o contraste é fixo (preto sobre amarelo,
   12,62:1) e não depende da imagem que estiver atrás. */
.lp-b2c .mzaCard-kicker {
  display: inline-block; margin: 12px 0 0;
  background: var(--amarelo); color: var(--preto);
  font-weight: 700; font-size: clamp(10px, 1.5vw, 12px);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 4px;
}
.lp-b2c .mzaCard-text {
  position: absolute; inset: auto 26px 92px 26px; z-index: 2;
  margin: 0; max-width: min(52ch, 74%);
  color: rgba(255, 255, 255, .96);
  font-size: clamp(.9rem, 1.3vw, 1rem); line-height: 1.5;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 15px 18px; border-radius: 10px;
  text-wrap: balance;
}
.lp-b2c .mzaCard-actions { position: absolute; inset: auto auto 24px 26px; z-index: 2; }
.lp-b2c .mzaCard-actions .btn { padding: 12px 22px; font-size: .92rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }

.lp-b2c .mzaCarousel-slide[data-state="active"] .mzaCard::before {
  filter: contrast(1.06) saturate(1.12) brightness(1.02);
}
.lp-b2c .mzaCarousel-slide[data-state="active"] .mzaCard {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

/* ---------- as três camadas de paralaxe ---------- */
.lp-b2c .mzaPar-1,
.lp-b2c .mzaPar-2,
.lp-b2c .mzaPar-3 { will-change: transform; transition: transform 500ms cubic-bezier(.2, .7, 0, 1); }
.lp-b2c .mzaPar-1 { transform: translate3d(calc(var(--mzaParX, 0px) * .35), calc(var(--mzaParY, 0px) * .35), 0); }
.lp-b2c .mzaPar-2 { transform: translate3d(calc(var(--mzaParX, 0px) * .25), calc(var(--mzaParY, 0px) * .25), 0); }
.lp-b2c .mzaPar-3 { transform: translate3d(calc(var(--mzaParX, 0px) * .18), calc(var(--mzaParY, 0px) * .18), 0); }

/* ---------- controles ---------- */
.lp-b2c .mzaCarousel-controls {
  position: absolute; inset: 0 18px var(--mzaPagH) 18px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; z-index: 30;
}
.lp-b2c .mzaCarousel-prev,
.lp-b2c .mzaCarousel-next {
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.lp-b2c .mzaCarousel-prev:hover,
.lp-b2c .mzaCarousel-next:hover {
  background: var(--amarelo); color: var(--preto); border-color: var(--amarelo);
}
.lp-b2c .mzaCarousel-prev:active,
.lp-b2c .mzaCarousel-next:active { transform: scale(.98); }
.lp-b2c .mzaCarousel-prev:focus-visible,
.lp-b2c .mzaCarousel-next:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }

.lp-b2c .mzaCarousel-pagination {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; gap: 10px; justify-content: center; align-items: center;
  z-index: 30;
}
.lp-b2c .mzaCarousel-dot {
  width: 10px; height: 10px; border-radius: 999px; padding: 0;
  background: rgba(255, 255, 255, .26);
  transition: transform .2s ease, background .2s ease;
}
.lp-b2c .mzaCarousel-dot[aria-selected="true"] { background: var(--amarelo); transform: scale(1.35); }
.lp-b2c .mzaCarousel-dot:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }

/* MUDANÇA 1: era `position: fixed` no rodapé da janela. Aqui é a base do
   próprio componente. */
.lp-b2c .mzaCarousel-progress {
  position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, .10); overflow: hidden; z-index: 30;
}
.lp-b2c .mzaCarousel-progressBar {
  display: block; height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(0); will-change: transform;
  background: var(--amarelo);
}

@media (max-width: 1000px) {
  .lp-b2c .mzaCarousel { --mzaC-slideW: min(92vw, 620px); }
  .lp-b2c .mzaCard-head { inset: 18px auto auto 18px; }
  .lp-b2c .mzaCard-text { inset: auto 18px 78px 18px; max-width: none; }
  .lp-b2c .mzaCard-actions { inset: auto auto 20px 18px; }
}
@media (max-width: 768px) {
  .lp-b2c .mzaCarousel { --mzaC-slideW: min(94vw, 560px); }
  .lp-b2c .mzaCarousel-prev, .lp-b2c .mzaCarousel-next { display: none; }


  /* ===================================================================
     ALTURA VEM DO CONTEÚDO, NÃO DE UM NÚMERO ESCOLHIDO A DEDO.
     -------------------------------------------------------------------
     A causa de todos os defeitos deste bloco era a mesma: um card de
     ALTURA FIXA, feito para a projeção 3D, segurando conteúdo de altura
     variável numa tela estreita. Foto cortada, assunto fora do centro e
     texto decepado eram sintomas de uma coisa só. Calibrar a altura na
     mão corre atrás do sintoma e quebra de novo no primeiro texto mais
     longo, ou num aparelho de outra proporção.

     Aqui a altura simplesmente segue o conteúdo, em cascata: carrossel,
     viewport, slide e card todos em `auto`. Nada para calibrar. */
  .lp-b2c .mzaCarousel,
  .lp-b2c .mzaCarousel-viewport,
  .lp-b2c .mzaCard { height: auto; }

  /* ⚠️ O `:not(.is-ativo)` aqui NÃO é enfeite, é o que faz a regra valer.
     A regra de degradação lá em cima é `.lp-b2c .mzaCarousel:not(.is-ativo)
     .mzaCarousel-slide` — quatro classes — e fixa `height: 100%`. Escrita
     com duas classes, esta regra perdia e o `auto` nunca chegava a valer.
     E o seletor também diz a verdade: estas medidas descrevem o estado
     degradado, que é o único em que o slide existe em fluxo. */
  .lp-b2c .mzaCarousel:not(.is-ativo) .mzaCarousel-slide {
    height: auto;
    flex: 0 0 var(--mzaC-slideW);
  }

  /* ===================================================================
     NO CELULAR O CARD SE PARTE EM DOIS: FOTO EM CIMA, TEXTO EMBAIXO.
     -------------------------------------------------------------------
     O card fica RETRATO no celular (374x460 num iPhone) e as fotos são
     16:9. Com `cover`, sobrava 45% da largura, e o scale(1.18) do
     paralaxe derrubava para 38%. As sete fotos são cenas largas com duas
     pessoas: na farmácia sumia a cliente, no pronto atendimento sumia o
     celular, no seguro sumia a criança. Não era corte, era a cena
     inteira indo embora.

     Mudar `background-position` não resolve: com 38% da largura, toda
     posição perde metade da cena. Só troca qual metade.

     Aqui a foto vira uma faixa 16:9 do tamanho exato dela, sem corte
     nenhum, e o texto desce para o preto. Três ganhos de uma vez:
     a cena aparece inteira, o texto sai de cima da imagem (21:1 em preto
     sólido, contra os 4,5 exigidos) e o véu deixa de ser necessário.

     O paralaxe morre aqui de propósito: ele existe para dar profundidade
     a uma foto de fundo, e aqui não há foto de fundo. Além disso ele
     deslocaria texto que agora é conteúdo em fluxo, não camada. */
  .lp-b2c .mzaCard { display: flex; flex-direction: column; }
  .lp-b2c .mzaCard::before {
    position: relative; inset: auto; flex: none;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    /* ⚠️ NÃO TENTAR CENTRALIZAR O ASSUNTO POR CORTE. Já tentei com 3:2 e
       `background-position: 60%` e não funciona: o assunto está a ~72% da
       largura da foto, e para trazê-lo ao meio recortando, a faixa teria que
       ficar quase QUADRADA (374px de altura num celular). Aí a cena some de
       novo, que é o bug que este bloco existe para consertar. O 3:2 ainda
       roubava 39px de altura do texto, e o card é `overflow: hidden`: o
       texto era decepado.
       A foto é 16:9 e entra 16:9, inteira. O assunto fica onde o fotógrafo
       pôs. Centralizar de verdade só reenquadrando o arquivo. */
    background-position: center;
    transform: none;               /* mata translateZ, scale e paralaxe */
    filter: none;                  /* a foto entra como foi entregue */
  }
  .lp-b2c .mzaCard::after { content: none; }   /* sem véu: não há texto sobre a foto */
  .lp-b2c .mzaPar-1,
  .lp-b2c .mzaPar-2,
  .lp-b2c .mzaPar-3 { transform: none; }

  .lp-b2c .mzaCard-head,
  .lp-b2c .mzaCard-text,
  .lp-b2c .mzaCard-actions { position: static; inset: auto; max-width: none; }
  .lp-b2c .mzaCard-head { margin: 18px 18px 0; }
  .lp-b2c .mzaCard-title { font-size: clamp(21px, 5.6vw, 30px); text-shadow: none; }
  .lp-b2c .mzaCard-kicker { margin-top: 10px; }
  .lp-b2c .mzaCard-text {
    margin: 12px 18px 0; padding: 0;
    background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .86);
  }
  /* `auto` no topo empurra o botão para o rodapé do card, então os sete
     alinham entre si mesmo com textos de alturas diferentes. */
  .lp-b2c .mzaCard-actions { margin: auto 18px 18px; }
  /* ⚠️ NUNCA `display: block` num .btn: ele é `inline-flex` justamente para
     centralizar o próprio conteúdo. Trocar o display derruba o
     `justify-content` e o texto encosta à esquerda. Largura se resolve com
     `width`, que não mexe no modelo de caixa interno. */
  .lp-b2c .mzaCard-actions .btn { width: 100%; }
}
@media (max-width: 560px) { .lp-b2c .mzaCarousel { --mzaC-slideW: min(96vw, 520px); } }

@media (prefers-reduced-motion: reduce) {
  .lp-b2c .mzaCard::before,
  .lp-b2c .mzaPar-1, .lp-b2c .mzaPar-2, .lp-b2c .mzaPar-3 { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------
   FOTO DOS CARDS
   Fica AQUI e não em style inline, por um motivo concreto que já custou
   um bug neste projeto: `url()` dentro de custom property NÃO resolve
   contra o documento, e sim contra a folha que consome o var(). No
   inline, "assets/img/x.webp" virava "css/assets/img/x.webp" e os cards
   davam 404.

   webp primeiro, jpg de reserva. Browser sem image-set ignora a linha
   inteira e o card cai para o favo, que já é legível.

   ⚠️ SÓ TRÊS DAS SETE COBERTURAS TÊM FOTO.
   Das oito fotos anteriores, cinco mostravam o produto que saiu. Sobraram
   as três abaixo, que continuam verdadeiras para o produto por vídeo.

   Faltam quatro, e o que cada uma precisa mostrar:
     · Especialistas  — a mesma cena de videochamada, com outra pessoa e
                        outro ambiente, para não repetir o card 1
     · Nutrição       — refeição comum em casa, cozinha real, luz natural
     · Seguro         — família em casa, situação cotidiana, sem drama
     · Funeral        — não tem cena honesta. Provavelmente fica sem foto.

   Enquanto não chegam, esses quatro rodam com o favo. Está visível de
   propósito: seção inconsistente é mais fácil de resolver do que foto
   errada que ninguém percebe. As antigas estão em .arquivo/coberturas/.
   --------------------------------------------------------------------- */
.lp-b2c .mzaCard--pa { --mzaCard-bg: image-set(url("../assets/img/cobertura-telemedicina.webp") type("image/webp"), url("../assets/img/cobertura-telemedicina.jpg") type("image/jpeg")); }
.lp-b2c .mzaCard--psico { --mzaCard-bg: image-set(url("../assets/img/cobertura-mental.webp") type("image/webp"), url("../assets/img/cobertura-mental.jpg") type("image/jpeg")); }
.lp-b2c .mzaCard--farmacia { --mzaCard-bg: image-set(url("../assets/img/cobertura-medicamentos.webp") type("image/webp"), url("../assets/img/cobertura-medicamentos.jpg") type("image/jpeg")); }
.lp-b2c .mzaCard--especialistas { --mzaCard-bg: image-set(url("../assets/img/cobertura-especialistas.webp") type("image/webp"), url("../assets/img/cobertura-especialistas.jpg") type("image/jpeg")); }
.lp-b2c .mzaCard--nutricao      { --mzaCard-bg: image-set(url("../assets/img/cobertura-nutricao.webp")      type("image/webp"), url("../assets/img/cobertura-nutricao.jpg")      type("image/jpeg")); }
.lp-b2c .mzaCard--acidentes     { --mzaCard-bg: image-set(url("../assets/img/cobertura-acidentes.webp")     type("image/webp"), url("../assets/img/cobertura-acidentes.jpg")     type("image/jpeg")); }
.lp-b2c .mzaCard--funeral       { --mzaCard-bg: image-set(url("../assets/img/cobertura-funeral.webp")       type("image/webp"), url("../assets/img/cobertura-funeral.jpg")       type("image/jpeg")); }

/* ---------------------------------------------------------------------
   ESQUELETO DO PREÇO
   O preço vem da API (docs/LP_AUTOCONTRATACAO.md): até ela responder, os
   ganchos estão VAZIOS, e "A partir de  por mês" fica com um buraco no meio
   da frase. Um traço discreto segura o espaço.
   O que ele NUNCA faz é mostrar um número: preço errado é pior que preço
   ausente, ainda mais para um público cuja objeção nº1 é "isso é golpe?".
   --------------------------------------------------------------------- */
.lp-b2c [data-preco-min]:empty,
.lp-b2c [data-preco-dia]:empty,
.lp-b2c .plan-price strong:empty {
  display: inline-block;
  width: 4.5ch; height: .62em;
  vertical-align: baseline;
  border-radius: 3px;
  background: currentColor;
  opacity: .16;
}
.lp-b2c .plan-price strong:empty { width: 5.5ch; height: .72em; }

/* =====================================================================
   CHECKOUT (docs/INTEGRACAO_LP.md)
   Caixa que abre por cima da página. Três telas na mesma moldura:
   formulário, Pix e confirmação.

   O público está em celular de entrada: campos grandes, teclado numérico no
   CPF, e o código copia-e-cola com o MESMO peso do QR (muita gente paga
   colando o código, não lendo o QR, principalmente quem usa um aparelho só).
   ===================================================================== */
.lp-b2c .ck {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.lp-b2c .ck[hidden] { display: none; }
body.ck-aberto { overflow: hidden; }

.lp-b2c .ck-caixa {
  position: relative;
  width: 100%; max-width: 440px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 28px 26px;
  box-shadow: 0 40px 90px -30px rgba(10, 10, 10, .55);
}

.lp-b2c .ck-fechar {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; color: var(--ink-soft);
  display: grid; place-items: center;
}
.lp-b2c .ck-fechar:hover { background: var(--off-white); color: var(--ink); }

/* ---- topo: o que está sendo comprado ---- */
.lp-b2c .ck-topo { text-align: center; margin-bottom: 22px; }
.lp-b2c .ck-eyebrow {
  display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 6px;
}
.lp-b2c .ck-plano {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); margin: 0;
}
.lp-b2c .ck-valor {
  display: block; margin-top: 4px;
  font-family: var(--display); font-weight: 700; font-size: 2rem;
  color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.lp-b2c .ck-lede {
  text-align: center; color: var(--ink-soft);
  font-size: .95rem; line-height: 1.5; margin: 0 0 20px;
}

/* ---- formulário ---- */
.lp-b2c .ck-campo { display: block; margin-bottom: 14px; }
.lp-b2c .ck-campo > span {
  display: block; margin-bottom: 6px;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.lp-b2c .ck-campo em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.lp-b2c .ck-campo input {
  width: 100%;
  /* 16px é o mínimo: abaixo disso o Safari do iPhone dá zoom sozinho ao focar
     o campo, e a pessoa perde o contexto da tela no meio do checkout */
  font: inherit; font-size: 16px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-b2c .ck-campo input:focus {
  outline: none;
  border-color: var(--amarelo);
  box-shadow: 0 0 0 3px rgba(244, 180, 26, .3);
}

.lp-b2c .ck-captcha:not(:empty) { margin: 14px 0; display: flex; justify-content: center; }

.lp-b2c .ck-erro {
  margin: 12px 0 0; padding: 11px 14px;
  background: #FCEDEA; border-radius: 8px;
  color: #96271B; font-size: .9rem; line-height: 1.45;
}

.lp-b2c .ck-enviar { width: 100%; margin-top: 18px; padding: 15px; font-size: 1.02rem; }
.lp-b2c .ck-enviar:disabled { opacity: .6; cursor: progress; transform: none; }

.lp-b2c .ck-nota {
  margin: 12px 0 0; text-align: center;
  font-size: .82rem; color: var(--ink-soft); line-height: 1.5;
}

/* ---- o Pix ---- */
.lp-b2c .ck-qr {
  display: block; margin: 0 auto 18px;
  width: 220px; height: 220px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  background: #fff;
}
.lp-b2c .ck-copia { display: flex; gap: 8px; }
.lp-b2c .ck-copiacola {
  flex: 1; min-width: 0;
  font: inherit; font-size: 14px;
  padding: 12px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--off-white); color: var(--ink-soft);
  text-overflow: ellipsis;
}
.lp-b2c .ck-copia .btn { flex: none; padding: 12px 16px; font-size: .9rem; }

.lp-b2c .ck-aguardando {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 18px 0 0; text-align: center;
  font-size: .9rem; color: var(--ink-soft); line-height: 1.5;
}
.lp-b2c .ck-spin {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--amarelo);
  animation: ck-gira .9s linear infinite;
}
@keyframes ck-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lp-b2c .ck-spin { animation: none; border-top-color: var(--line); }
}

/* ---- confirmado ----
   A pessoa só vê esta tela porque o BANCO confirmou (passo [4] do contrato),
   nunca porque ela clicou em "já paguei". */
.lp-b2c .ck-confirmado { text-align: center; padding: 6px 0 4px; }
/* O selo de confirmado passou a ser o CHECK do kit, e não mais o símbolo da
   marca dentro de um hexágono desenhado em clip-path. Nesta tela a pessoa
   acabou de transferir dinheiro e precisa de uma coisa só: a confirmação.
   Um check diz isso; a abelha diz "Bee Saúde", que ela já sabe. */
.lp-b2c .ck-ok {
  display: block; width: 66px; height: 58px; margin: 0 auto 18px;
  background: url("../assets/marca/check.svg") center / contain no-repeat;
}
.lp-b2c .ck-confirmado h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  color: var(--ink); margin-bottom: 10px;
}
.lp-b2c .ck-confirmado p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 8px; }

@media (max-width: 480px) {
  .lp-b2c .ck { padding: 0; place-items: stretch; }
  .lp-b2c .ck-caixa { max-width: none; min-height: 100%; border-radius: 0; padding: 54px 20px 28px; }
  .lp-b2c .ck-copia { flex-direction: column; }
  .lp-b2c .ck-copia .btn { width: 100%; }
}