/* =====================================================================
   franquia.css — nova PELE VISUAL da LP de Franquias (carregado SÓ no
   index.html, depois de styles.css). TODO override é escopado em
   `.lp-franquia` para NÃO afetar o empresas.html (que usa `.lp-b2b`).

   Direção do time de marketing (Figma "DOBRA 0x" + Manual 2025):
   Roca Two (serif) em títulos E corpo, gradientes roxo/azul, branco-lilás
   (#F5F4FF), raio 5px, motivo de coração. O CONTEÚDO da franquia é mantido;
   aqui só muda o visual.

   PRIMEIRA FATIA: fundação (tokens/tipografia/botões) + hero. Header como
   pílula flutuante translúcida e o tratamento das seções internas ficam
   para os próximos passos (dependem das DOBRAS 02–08).
   ===================================================================== */

/* ---------- tokens da nova identidade (escopados) ---------- */
.lp-franquia {
  --grad-roxo: linear-gradient(180deg, #7C68F1 0%, #9C8BFF 100%);
  --grad-azul: linear-gradient(180deg, #72B5F9 0%, #9FCFFF 100%);
  --white-purple: #F5F4FF;
  --roxo-2: #9C8BFF;
  --azul-2: #9FCFFF;

  /* raios bem menores que o padrão antigo (16/24px) */
  --radius: 5px;
  --radius-lg: 8px;

  /* corpo em Roca Two (serif) — no Figma títulos e texto são serif */
  font-family: var(--display);
}

/* corpo serif também nos elementos que o styles.css força em sans */
.lp-franquia .header-nav .links a,
.lp-franquia .btn,
.lp-franquia .hero-trust .lbl { font-family: var(--display); }

/* ---------- sistema de botões (raio 5px + gradiente) ---------- */
.lp-franquia .btn {
  border-radius: 5px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.lp-franquia .btn-primary {
  background: var(--grad-roxo);
  color: var(--white-purple);
  box-shadow: 0 10px 26px -12px rgba(124, 104, 241, .55);
}
.lp-franquia .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(124, 104, 241, .7);
}
/* variante azul (equivalente ao "Já sou cliente" do Figma) */
.lp-franquia .btn-blue {
  background: var(--grad-azul);
  color: var(--white-purple);
}

/* =====================================================================
   HERO — DOBRA 01: fundo gradiente roxo, texto branco-lilás, headline
   serif grande, marca-d'água de coração, painel de imagem/vídeo à direita.
   ===================================================================== */
.lp-franquia .hero {
  background: var(--grad-roxo);
  color: var(--white-purple);
  margin-top: -80px;       /* puxa o roxo para trás do header: sem faixa branca */
  padding: 112px 0 84px;   /* folga abaixo da pílula flutuante */
}

/* sem marca-d'água no hero (o Figma não usa) */
.lp-franquia .hero-watermark { display: none; }

/* headline: Roca Two regular, grande, tracking fechado, branco-lilás */
.lp-franquia .hero h1 {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--white-purple);
}
/* o destaque itálico some como cor especial: headline é monocromática no Figma */
.lp-franquia .hero h1 .brand-accent { color: var(--white-purple); }

.lp-franquia .hero .lede {
  color: var(--white-purple);
  opacity: .92;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.02em;
  max-width: 44ch;
}

/* CTA principal DENTRO do hero: fundo branco-lilás com texto roxo (contraste
   sobre o roxo), em vez do preenchimento gradiente usado nas seções claras */
.lp-franquia .hero .btn-primary {
  background: var(--white-purple);
  color: var(--roxo);
  box-shadow: 0 1px 16px rgba(245, 244, 255, .35);
}
.lp-franquia .hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 244, 255, .45);
}
.lp-franquia .hero-cta .note { color: var(--white-purple); opacity: .8; }

/* faixa de confiança: números e rótulos em branco-lilás */
.lp-franquia .hero-trust .num { color: var(--white-purple); }
.lp-franquia .hero-trust .lbl { color: var(--white-purple); opacity: .8; }

/* eyebrow (se existir): pílula translúcida sobre o roxo */
.lp-franquia .hero-eyebrow {
  background: rgba(245, 244, 255, .14);
  color: var(--white-purple);
}

/* painel do vídeo do Semenzato: MOLDURA arredondada (raio 5px), como no Figma */
.lp-franquia .hero-video { border-radius: var(--radius); }

/* desktop: coluna de mídia um pouco maior + título em no máx. 3 linhas.
   A moldura preenche a coluna (contida, não sangra nem vai de ponta a ponta). */
@media (min-width: 980px) {
  .lp-franquia .hero .hero-grid { grid-template-columns: 1fr 430px; align-items: center; }
  .lp-franquia .hero-copy { max-width: 600px; }
  .lp-franquia .hero h1 .line { white-space: nowrap; }

  /* moldura RETRATO: casa com o vídeo vertical (9:16), então a pessoa aparece
     INTEIRA, sem cortar a cabeça (o "zoom out" que você pediu). Antes o painel
     largo forçava o vídeo a escalar demais e cortava o topo.
     Ajustes finos: aspect-ratio = quão retrato; object-position % = altura do corte. */
  .lp-franquia .hero-video {
    position: relative; inset: auto;
    width: 100%; height: auto;
    aspect-ratio: 4 / 5;
  }
  .lp-franquia .hero-video video,
  .lp-franquia .hero-video video.preview { object-position: center 20%; }
}

/* =====================================================================
   HEADER — pílula flutuante glass que "entende" o fundo de baixo.
   Estados on-dark (sobre roxo) e on-light (sobre claro) alternados por
   js/franquia/header-theme.js. Transição suave entre os dois.
   ===================================================================== */
.lp-franquia .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-franquia .site-header .wrap {
  height: 62px;
  padding: 0 24px;
  border-radius: 12px;
  /* MESMO glass sempre (cor do hero), sobre roxo ou sobre branco */
  background: rgba(124, 104, 241, .28);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 14px 34px -20px rgba(22, 18, 43, .5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lp-franquia .header-nav .links a { font-weight: 400; transition: color .3s ease; }
.lp-franquia .header-nav .links a::after { transition: transform .28s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.lp-franquia .menu-toggle span { transition: background .3s ease; }

/* estados: o glass é o mesmo; só o TEXTO e a LOGO trocam de cor --------- */
/* --- sobre fundo ROXO (hero / seções data-header-theme="dark") --- */
.lp-franquia .site-header.on-dark .header-nav .links a { color: var(--white-purple); }
.lp-franquia .site-header.on-dark .header-nav .links a:hover { color: #fff; }
.lp-franquia .site-header.on-dark .header-nav .links a::after { background: var(--white-purple); }
.lp-franquia .site-header.on-dark .menu-toggle span { background: var(--white-purple); }

/* --- sobre fundo CLARO (padrão): fonte roxa + logo colorida --- */
.lp-franquia .site-header.on-light .header-nav .links a { color: var(--roxo); }
.lp-franquia .site-header.on-light .header-nav .links a:hover { color: var(--roxo-escuro); }
.lp-franquia .site-header.on-light .header-nav .links a::after { background: var(--roxo); }
.lp-franquia .site-header.on-light .menu-toggle span { background: var(--roxo); }

/* troca de logo por estado (clara sobre roxo, colorida sobre claro) */
.lp-franquia .brand-logo--on-light { display: none; }
.lp-franquia .site-header.on-light .brand-logo--on-dark { display: none; }
.lp-franquia .site-header.on-light .brand-logo--on-light { display: inline-block; }

/* =====================================================================
   LINGUAGEM DE SEÇÃO (nova pele) — reutilizável nas seções internas.
   Seções alternam CLARA (lavanda, padrão) e ROXA (.section--roxo). Cada
   uma tem eyebrow (coração + pílula) e título serif bicolor (DOBRA 02/05).
   ===================================================================== */
.lp-franquia .section { background: #F4F2FF; }              /* clara: lavanda */
.lp-franquia .section--roxo {                                /* roxa */
  background: var(--grad-roxo);
  color: var(--white-purple);
}

/* eyebrow: coração (símbolo da marca) + pílula, uppercase e espaçado */
.lp-franquia .fr-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 8px; margin-bottom: 20px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(124, 104, 241, .09); color: var(--roxo);
}
.lp-franquia .fr-eyebrow .ic {
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("../assets/logos/simbolo-benemed.svg") no-repeat center / contain;
          mask: url("../assets/logos/simbolo-benemed.svg") no-repeat center / contain;
}
.lp-franquia .section--roxo .fr-eyebrow { background: rgba(245, 244, 255, .14); color: var(--white-purple); }

/* título de seção: serif bicolor — indigo base + roxo claro no <span brand-em> */
.lp-franquia .section-title { color: #5B4FCF; font-weight: 400; }
.lp-franquia .section-title .brand-em { color: var(--roxo-2); font-style: normal; font-weight: 400; }
.lp-franquia .section--roxo .section-title { color: var(--white-purple); }
.lp-franquia .section--roxo .section-title .brand-em { color: var(--white-purple); opacity: .82; }
.lp-franquia .section--roxo .section-lede { color: var(--white-purple); opacity: .9; }

/* números de mercado sobre roxo */
.lp-franquia .section--roxo .market-stat .big { color: var(--white-purple); }
.lp-franquia .section--roxo .market-stat .txt { color: var(--white-purple); opacity: .88; }

/* pins do mapa = CORAÇÃO da marca (asset SVG: contorno gradiente roxo +
   moldura branca + sombra). É um <image>, então o visual vem do próprio
   arquivo; aqui só o tamanho (ajuste fino do pin). */
.lp-franquia .brazil-map .pin-heart { width: 13px; height: 13px; }

/* legenda do mapa: mesmo coração no lugar do alfinete antigo */
.lp-franquia .map-legend .legend-pin {
  width: 16px; height: 16px;
  -webkit-mask: none; mask: none;
  background: url("../assets/img/coracao-pin.svg") no-repeat center / contain;
}

/* mapa do Brasil sobre roxo: claro/translúcido (DOBRA 05) — reservado p/ quando
   uma seção roxa tiver o mapa. O pin claro sobre roxo será um asset/variação à parte. */
.lp-franquia .section--roxo .brazil-map .uf { stroke: rgba(245, 244, 255, .32); }
.lp-franquia .section--roxo .brazil-map .uf.present {
  fill: rgba(245, 244, 255, .16); stroke: rgba(245, 244, 255, .55);
}
.lp-franquia .section--roxo .brazil-map .pin-ring { stroke: var(--white-purple); }

/* =====================================================================
   "O QUE É A BENEMED" (coberturas) — estilo DOBRA 02 (seção clara):
   cabeçalho centralizado (eyebrow + título bicolor) e cards com FOTO em
   cima + bloco GRADIENTE ROXO embaixo (sempre visível, não mais hover).
   ===================================================================== */
.lp-franquia .whatis-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.lp-franquia .whatis-head h2 { color: #5B4FCF; font-weight: 400; }
.lp-franquia .whatis-head h2 .brand-em { color: var(--roxo-2); font-style: normal; }

/* grid dos cards */
.lp-franquia .cobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 940px) { .lp-franquia .cobs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-franquia .cobs { grid-template-columns: 1fr; } }

/* card: coluna foto + bloco gradiente, cantos arredondados */
.lp-franquia .whatis .cob-card {
  height: auto; background: transparent; border-radius: 10px; overflow: hidden;
  box-shadow: 0 22px 44px -26px rgba(22, 18, 43, .35);
}
.lp-franquia .whatis .cob-cover { position: relative; height: 188px; }
/* película sutil da marca: leve no topo, um pouco mais forte na base (funde a
   foto no bloco gradiente). No hover clareia e revela mais cor. Tunável nas % */
.lp-franquia .whatis .cob-cover::after {
  display: block;
  background: linear-gradient(180deg, rgba(124, 104, 241, .06) 0%, rgba(124, 104, 241, .34) 100%);
  transition: opacity .4s ease;
}
@media (hover: hover) {
  .lp-franquia .whatis .cob-card:hover .cob-cover::after { opacity: .55; }
}
.lp-franquia .whatis .cob-base { display: none; }           /* nome vai pro bloco de baixo */
.lp-franquia .whatis .cob-extra {
  position: relative; inset: auto; transform: none; height: auto;
  background: var(--grad-roxo); color: var(--white-purple);
  padding: 20px 20px 24px; justify-content: flex-start;
}
.lp-franquia .whatis .cob-extra h4 { color: var(--white-purple); font-size: 1.12rem; margin-bottom: 8px; }
.lp-franquia .whatis .cob-extra p { color: var(--white-purple); opacity: .9; font-size: .9rem; line-height: 1.45; }
/* ícone do card: MESMO coração do mapa (asset com moldura branca, da dobra) */
.lp-franquia .whatis .cob-extra-wm {
  position: static; width: 30px; height: 30px; right: auto; bottom: auto;
  opacity: 1; margin-bottom: 12px;
  -webkit-mask: none; mask: none; background-color: transparent;
  background: url("../assets/img/coracao-pin.svg") no-repeat center / contain;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}

/* desliga o movie-block antigo (o hover que "abria pela metade sem nada") */
.lp-franquia .whatis .cob-card:hover .cob-cover,
.lp-franquia .whatis .cob-card.tap .cob-cover,
.lp-franquia .whatis .cob-card:hover .cob-base,
.lp-franquia .whatis .cob-card.tap .cob-base { transform: none; }

/* EFEITO novo (além do scroll reveal): no hover a foto dá um zoom suave e o
   coração cresce/gira de leve. Nos elementos-filhos, então não interfere na
   entrada escalonada dos cards. */
.lp-franquia .whatis .cob-cover img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
  .lp-franquia .whatis .cob-card:hover .cob-cover img { transform: scale(1.07); }
  .lp-franquia .whatis .cob-card:hover .cob-extra-wm { transform: scale(1.12) rotate(-6deg); }
}

/* =====================================================================
   VANTAGENS DA FRANQUIA — seção ROXA com efeito "BARALHO EMPILHADO":
   os 4 cards ficam sticky em tops incrementais; ao rolar, cada um cobre o
   anterior deixando uma faixa de topo à mostra (deck). CSS puro (sem GSAP).
   ===================================================================== */
.lp-franquia { --stone-dark: var(--roxo); }        /* navy → roxo da marca */
.lp-franquia .v-stack-sec { padding: 84px 0 96px; }

.lp-franquia .v-stack-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.lp-franquia .v-stack-head .fr-eyebrow { background: rgba(245, 244, 255, .14); color: var(--white-purple); }
.lp-franquia .v-stack-head .section-title { color: var(--white-purple); font-weight: 400; max-width: none; margin: 0 auto; }

.lp-franquia .v-stack { position: relative; }
.lp-franquia .v-stack-card {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 36px 72px -34px rgba(22, 18, 43, .7);
  margin-bottom: 26px;
}
.lp-franquia .vsc-media { position: relative; min-height: 260px; background: var(--grad-roxo); }
.lp-franquia .vsc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-franquia .vsc-copy { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; }
.lp-franquia .vsc-num { font-size: 2.4rem; line-height: 1; color: var(--roxo-2); margin-bottom: 14px; }
.lp-franquia .vsc-copy h3 { font-size: 1.6rem; font-weight: 400; color: #5B4FCF; margin-bottom: 12px; }
.lp-franquia .vsc-copy p { color: var(--ink-soft); line-height: 1.55; margin-bottom: 24px; }
.lp-franquia .vsc-copy .btn { align-self: flex-start; }

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

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

.lp-franquia .proof-card {
  background: var(--grad-roxo); color: var(--white-purple); border: 0;
  box-shadow: 0 26px 52px -30px rgba(124, 104, 241, .55);
}
.lp-franquia .proof-card .big { color: var(--white-purple); }
.lp-franquia .proof-card .desc { color: var(--white-purple); opacity: .9; }

/* =====================================================================
   COMPARATIVO (#modelo) — TABELA limpa (sem foto), coluna BeneMed
   destacada em roxo. Padrão das melhores LPs (nós × a alternativa).
   ===================================================================== */
.lp-franquia .compare-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.lp-franquia .compare-head .section-title { max-width: none; margin: 0 auto; }
.lp-franquia .compare-head .section-lede { margin: 0 auto; }

.lp-franquia .cmp-wrap { overflow-x: auto; padding: 22px 0; }
.lp-franquia .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 BeneMed destacada dentro */
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 62px -34px rgba(22, 18, 43, .26);
  padding: 6px;
}
/* cada COLUNA "assina" as linhas do pai (subgrid): o texto que quebra continua
   alinhado entre as três colunas */
.lp-franquia .cmp-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }

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

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

/* COLUNA BENEMED = card destaque em gradiente ROXO→AZUL (o azul das dobras),
   flutuando com sombra "sticker" entre as duas colunas de texto */
.lp-franquia .cmp-col--bene {
  background: linear-gradient(165deg, #7C68F1 0%, #72B5F9 100%);
  color: #fff; border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(90, 100, 220, .55);
}
.lp-franquia .cmp-col--bene .cmp-c { border-top-color: rgba(255, 255, 255, .18); }
.lp-franquia .cmp-badge {
  align-self: flex-start; font-family: var(--sans); font-weight: 700; color: #fff;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .22); padding: 5px 9px; border-radius: 5px;
}

.lp-franquia .cmp-col--trad { color: var(--ink-soft); }

/* marcadores: CORAÇÃO branco (sim) do lado BeneMed; traço apagado (não) no tradicional */
.lp-franquia .cmp-yes {
  width: 20px; height: 20px; flex: none;
  background: url("../assets/img/coracao-pin.svg") center/contain no-repeat;
}
.lp-franquia .cmp-no {
  width: 16px; height: 2px; flex: none; border-radius: 2px;
  background: color-mix(in srgb, var(--ink-soft) 45%, transparent);
}

/* CTA flutuante: inverte (branco-lilás + texto roxo) quando está sobre uma
   seção roxa (mesma cor do botão), para não sumir. Toggle em header-theme.js. */
.lp-franquia .float-cta.inverted .btn {
  background: var(--white-purple); color: var(--roxo);
  box-shadow: 0 16px 36px -14px rgba(22, 18, 43, .45);
}

/* Efeito no comparativo: a coluna VENCEDORA (BeneMed) "cresce" ao revelar. */
.lp-franquia .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-franquia .cmp-wrap.rv-in .cmp-col--bene { transform: none; opacity: 1; }

/* CTA flutuante: transição suave ao inverter (o btn base não anima a cor) */
.lp-franquia .float-cta .btn {
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .15s ease;
}

/* =====================================================================
   COMPARATIVO no MOBILE: a tabela vira DOIS CARDS empilhados. BeneMed vem
   primeiro (largura total, 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-franquia .cmp-wrap { overflow-x: visible; padding: 8px 0; }
  .lp-franquia .cmp {
    display: block; min-width: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  .lp-franquia .cmp-col {
    display: block; margin-bottom: 16px; border-radius: 16px; overflow: hidden;
  }
  .lp-franquia .cmp-col--crit { display: none; }              /* rótulos vêm inline */
  .lp-franquia .cmp-col--bene {
    transform: none; opacity: 1;                                /* zera o "pop" no mobile */
    box-shadow: 0 24px 50px -24px rgba(90, 100, 220, .5);
  }
  .lp-franquia .cmp-col--trad {
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 20px 44px -30px rgba(22, 18, 43, .22);
  }
  .lp-franquia .cmp-h { padding: 20px 22px 14px; }
  .lp-franquia .cmp-c {
    justify-content: flex-start; align-items: flex-start;
    gap: 10px; padding: 13px 22px; font-size: .98rem;
  }
  /* marcador à ESQUERDA (coluna alinhada); depois rótulo em negrito + valor */
  .lp-franquia .cmp-c .cmp-yes { order: -1; margin-top: 1px; }
  .lp-franquia .cmp-c .cmp-no { order: -1; margin-top: 9px; }
  .lp-franquia .cmp-c::before {
    content: attr(data-label) ": "; font-weight: 700; font-size: .95rem;
  }
  .lp-franquia .cmp-col--bene .cmp-c::before { color: rgba(255, 255, 255, .85); }
  .lp-franquia .cmp-col--trad .cmp-c::before { color: var(--ink-soft); }
}

/* =====================================================================
   PERFIL (#perfil) — card "Indicado" em destaque (gradiente ROXO→AZUL) com
   CORAÇÃO como marcador de "sim"; "Não é pra você" claro/apagado. Cabeçalho
   centralizado (eyebrow + título bicolor).
   ===================================================================== */
.lp-franquia .profile .profile-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.lp-franquia .profile-head .section-title { max-width: none; margin: 0 auto; }
.lp-franquia .profile-head .section-lede { margin: 0 auto; }

.lp-franquia .profile-col.yes {
  background: linear-gradient(165deg, #7C68F1 0%, #72B5F9 100%);
}
/* marcador de "sim" = coração da marca (asset) */
.lp-franquia .profile-heart {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  background: url("../assets/img/coracao-pin.svg") center/contain no-repeat;
}

/* =====================================================================
   DEPOIMENTOS (#depoimentos) — seção clara: eyebrow + título bicolor.
   Carrossel já on-brand (Roca, estrelas/setas/dots roxos).
   ===================================================================== */
.lp-franquia .depoimentos .dep-head h2 { color: #5B4FCF; font-weight: 400; }
.lp-franquia .depoimentos .dep-head h2 .brand-em { color: #72B5F9; font-style: normal; }  /* destaque no azul da seção */

/* =====================================================================
   FECHAMENTO (.final) — seção CLARA (o footer roxo fecha a página, então aqui
   fica claro pra não empilhar roxo-com-roxo). Título bicolor, CTA gradiente roxo.
   ===================================================================== */
.lp-franquia .final h2 { color: #5B4FCF; }
.lp-franquia .final h2 em { color: var(--roxo-2); font-style: normal; }

/* =====================================================================
   FOOTER (DOBRA 07) — roxo gradiente, texto claro.
   ===================================================================== */
.lp-franquia .site-footer { background: var(--grad-roxo); color: rgba(255, 255, 255, .9); }
.lp-franquia .site-footer h4 { color: #fff; }
.lp-franquia .site-footer a { color: rgba(255, 255, 255, .85); }
.lp-franquia .site-footer a:hover { color: #fff; }
.lp-franquia .site-footer .f-brand p { color: rgba(255, 255, 255, .9); }
.lp-franquia .footer-legal { color: rgba(255, 255, 255, .78); border-top-color: rgba(255, 255, 255, .2); }

/* Depoimentos: o CARD ATIVO usa o AZUL CLARO (o "Já sou cliente") — o card em si
   fica azul, com texto escuro pra contraste e CORAÇÃO BRANCO no canto superior
   direito. Dots/setas acompanham o azul. Layout (coverflow) mantido. */
.lp-franquia .carousel .slide.is-active .quote {
  background: linear-gradient(180deg, #72B5F9 0%, #9FCFFF 100%);   /* azul degradê (css.txt / DOBRA 4) */
  border: 1.5px solid rgba(255, 255, 255, .6);                     /* linha branca (DOBRA 4) */
  box-shadow: 0 30px 64px -30px rgba(114, 181, 249, .6);
}
/* fonte clara sobre o azul */
.lp-franquia .carousel .slide.is-active .quote .text,
.lp-franquia .carousel .slide.is-active .quote .name { color: #fff; }
.lp-franquia .carousel .slide.is-active .quote .meta { color: rgba(255, 255, 255, .85); }
.lp-franquia .carousel .slide.is-active .quote .stars { color: #fff; }
/* CORAÇÃO SÓLIDO (o mesmo asset dos marcadores), coladinho na borda sup. direita */
.lp-franquia .carousel .quote::before {
  right: 12px; top: 12px; bottom: auto; left: auto;
  width: 34px; height: 34px; opacity: 0;
  background: url("../assets/img/coracao-pin-azul.svg") center/contain no-repeat;
  -webkit-mask: none; mask: none;
}
.lp-franquia .carousel .slide.is-active .quote::before { opacity: 1; }
/* dots e setas no azul */
.lp-franquia .dep-dots button.on { background: #72B5F9; }
.lp-franquia .dep-arrow svg { stroke: #72B5F9; }
.lp-franquia .dep-arrow:hover { border-color: #72B5F9; background: #eef6ff; }

/* =====================================================================
   FORMULÁRIO (overlay) — linguagem da página: painel esquerdo em GRADIENTE
   ROXO (sem o azul-marinho), CORAÇÃO com moldura branca como marcador (no
   lugar do ✓), e campos com raio um pouco menor.
   ===================================================================== */
.lp-franquia .form-aside { background: var(--grad-roxo); }
.lp-franquia .form-aside p { color: rgba(255, 255, 255, .9); }
.lp-franquia .form-aside .aside-trust div { color: rgba(255, 255, 255, .95); }
/* marcador = coração da marca (asset com moldura branca) no lugar do ✓ */
.lp-franquia .form-aside .aside-trust .mk {
  background: url("../assets/img/coracao-pin.svg") center/contain no-repeat;
  width: 26px; height: 26px; border-radius: 0; color: transparent; font-size: 0;
}
/* campos: raio coerente com o resto da página */
.lp-franquia .field input, .lp-franquia .field select { border-radius: 8px; }