/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 21 2026 | 01:15:52 */
/* ═══════════════════════════════════════════════════════════════════
   cp-pages-home-mkt.css — Home v2 anônimo, variação direção marketing
   Aplicada via PageHomeAnonimoMktHelper na URL /home-v2-anon-mkt/.
   Inicial: portado da demo src-web/dev/demos/demo-home-v2-anon-mkt.html
   em 2026-05-20.

   Convenção: todas as classes prefixadas .cp-home-mkt-* pra evitar conflito
   com .cp-home-* já em uso pela home v2 atual (PageHomeAnonimoHelper).
   Reusa cp-pages-base.css (tokens --cp-amarelo, --cp-dourado, etc) e
   cp-pages-ia.css (componente IA embedded no hero).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   HOME V2 ANON — DIREÇÃO MARKETING
   Variação do PageHomeAnonimoHelper baseada no mockup de marketing
   (LP - Versão com interação.pdf, 2026-05-20).
   Mudanças-chave em relação à versão atual:
   - Stats em strip dourado SEPARADO (sai do ticker do hero)
   - Bloco "O que é a Criminal Player" + experts featured (novo)
   - Manifesto "qualifica/conduz" virou bloco visual de fluxo 01/02/03
   - Faixa diagonal "também faz parte" como motif divisor entre IA
     headline e os pilares de suporte
   - Bloco "Quem ensina" como mosaico (padrão de PageExpertsHubHelper)
     substituindo a Prova Social marquee de UFs+Experts
   - Bloco "Imersão" novo (aula ao vivo + presencial)
   - Notícias com grid de imagens grandes em fundo claro
   - CTA final único de planos no fim (sem strip de planos no meio)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Reuso de tokens do design system + locais pra modo dark */
  --mkt-dark:        #0a0b14;
  --mkt-dark-2:      #12131e;
  --mkt-dark-3:      #1a1c2a;
  --mkt-light:       #f7f6f3;
  --mkt-light-2:     #ffffff;
  --mkt-text-onlight-strong: #1a1a1a;
  --mkt-text-onlight-body:   rgba(26,26,26,.72);
  --mkt-text-onlight-mute:   rgba(26,26,26,.48);
  --mkt-text-ondark-strong:  #ffffff;
  --mkt-text-ondark-body:    rgba(255,255,255,.78);
  --mkt-text-ondark-mute:    rgba(255,255,255,.5);
  --mkt-bord-onlight: rgba(26,26,26,.10);
  --mkt-bord-ondark:  rgba(255,255,255,.10);
  --mkt-radius-xl: 40px;   /* cards "também faz parte" */
  --mkt-radius-lg: 28px;   /* cards principais */
  --mkt-radius-md: 16px;   /* IA cards, news cards */
  --mkt-radius-sm: 10px;
}

/* ── Reset escopado na zona da home mkt ── */
main.cp-ds:has(.cp-home-mkt-hero) { display: block; }
main.cp-ds:has(.cp-home-mkt-hero) * { box-sizing: border-box; }

/* Bg dark cascateado nos containers ancestrais (mesmo trick do
   PageHomeAnonimoHelper original) — cobre a faixa branca residual
   do BuddyBoss .content-area entre o main e o footer. */
body:has(.cp-home-mkt-hero) .content-area {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html:has(.cp-home-mkt-hero),
body:has(.cp-home-mkt-hero),
body:has(.cp-home-mkt-hero) #content,
body:has(.cp-home-mkt-hero) .content-area,
body:has(.cp-home-mkt-hero) .site-main,
body:has(.cp-home-mkt-hero) .entry-content,
body:has(.cp-home-mkt-hero) .bb-template-v2-content,
body:has(.cp-home-mkt-hero) main,
.cp-ds:has(.cp-home-mkt-hero) {
  background-color: var(--mkt-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — dark, eyebrow chip + H1 + CTA pill amarelo + IA component
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: radial-gradient(ellipse at top, #161827 0%, var(--mkt-dark) 60%);
  padding: 88px 24px 96px;
  position: relative;
  overflow: hidden;
  /* Encaixe sobre a zona amarela seguinte — borda inferior arredondada.
     z-index: 2 garante que o hero fique acima da zona amarela; os cantos
     vazios (clipados pelo border-radius) revelam o amarelo da zona embaixo. */
  z-index: 2;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
}

.cp-home-mkt-hero::before {
  /* Glow ambiente amarelo sutil ao redor do componente IA */
  content: "";
  position: absolute;
  left: 50%; top: 62%;
  width: 720px; height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(247,212,74,.10) 0%, transparent 65%);
  pointer-events: none;
}

.cp-home-mkt-hero-inner {
  /* 980px espelha .cp-home-hero-anon-inner do PageHomeAnonimoHelper —
     concentração visual da v2 original (mais focado que --cp-page-max 1100). */
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Eyebrow — mesmo tratamento do PageHomeAnonimoHelper original:
   retângulo radius 4px + dot amarelo pulsante (6s), sem ★. Frente 3 do
   briefing de identidade (sinais de vida em frequência baixa). */
.cp-home-mkt-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cp-amarelo, #F7D44A) !important;
  background: rgba(247,212,74,.08);
  border: 1px solid rgba(247,212,74,.2);
  padding: 6px 14px !important;
  border-radius: 4px;
  margin: 0 0 32px 0 !important;
  line-height: 1.2 !important;
}
.cp-home-mkt-hero-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cp-amarelo);
  box-shadow: 0 0 8px rgba(247,212,74,.6);
  flex-shrink: 0;
  animation: cp-home-mkt-eyebrow-dot-pulse 6s ease-in-out infinite;
}
@keyframes cp-home-mkt-eyebrow-dot-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(247,212,74,.6); }
  50%      { box-shadow: 0 0 14px rgba(247,212,74,.95); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-home-mkt-hero-eyebrow-dot { animation: none !important; }
}

/* Title — espelha .cp-home-hero-anon-title da v2 original (56px / 700 /
   line-height 1.05 / letter-spacing -1.5px). Centralizado via margin auto
   já que o hero usa text-align: center. */
.cp-home-mkt-hero-title {
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px;
  color: var(--cp-white, #fff) !important;
  margin: 0 auto 28px auto !important;
  padding: 0 !important;
  max-width: 820px;
}
.cp-home-mkt-hero-title-accent {
  background: linear-gradient(135deg, var(--cp-amarelo) 0%, var(--cp-dourado) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* CTA — elemento-chave de conversão. 3 camadas de vida sutil:
   (1) breathing shadow amarelo (4.5s, low intensity)
   (2) sheen sweep diagonal periódica (5.5s, com pausa)
   (3) hover state: lift + glow forte + arrow desliza
   Frequência baixa coerente com identidade (eyebrow-dot 6s, cp-ia 9s). */
.cp-home-mkt-hero-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cp-amarelo, #F7D44A);
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 16px;
  padding: 16px 36px !important;
  border-radius: 14px;
  text-decoration: none !important;
  margin-bottom: 56px !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  box-shadow: 0 8px 24px rgba(247,212,74,.25);
  animation: cp-home-mkt-cta-breathe 4.5s ease-in-out infinite;
}
/* Sheen — gradient diagonal varrendo o botão em loop com pausa.
   Pseudoelemento separado pra coexistir com transição de hover. */
.cp-home-mkt-hero-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,.45) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  animation: cp-home-mkt-cta-sheen 5.5s ease-in-out infinite;
  animation-delay: 1.4s;
  pointer-events: none;
  z-index: 1;
}
/* Conteúdo do botão acima do sheen */
.cp-home-mkt-hero-cta > span,
.cp-home-mkt-hero-cta {
  /* texto direto + a tag arrow ficam acima do ::before */
}
.cp-home-mkt-hero-cta > * { position: relative; z-index: 2; }

.cp-home-mkt-hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(247,212,74,.45);
  animation-play-state: paused;
}
.cp-home-mkt-hero-cta:hover::before { animation-play-state: paused; }
.cp-home-mkt-hero-cta:active { transform: translateY(-1px) scale(.99); }

.cp-home-mkt-hero-cta-arrow {
  display: inline-flex; width: 22px; height: 22px;
  background: rgba(26,26,26,.16); border-radius: 50%;
  align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.cp-home-mkt-hero-cta:hover .cp-home-mkt-hero-cta-arrow {
  background: rgba(26,26,26,.28);
  transform: translateX(4px);
}
.cp-home-mkt-hero-cta-arrow svg { width: 12px; height: 12px; }

@keyframes cp-home-mkt-cta-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(247,212,74,.25); }
  50%      { box-shadow: 0 12px 36px rgba(247,212,74,.42); }
}
@keyframes cp-home-mkt-cta-sheen {
  0%   { transform: translateX(-110%); }
  40%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }  /* segura no fim — pausa entre sweeps */
}
@media (prefers-reduced-motion: reduce) {
  .cp-home-mkt-hero-cta { animation: none !important; }
  .cp-home-mkt-hero-cta::before { animation: none !important; display: none; }
}

/* Wrapper do componente IA dentro do hero — .cp-ia ocupa os 980px do
   hero-inner, mesmo comportamento do PageHomeAnonimoHelper. O conteúdo
   interno do card é left-aligned (sobrepõe text-align:center do hero). */
.cp-home-mkt-hero-ia { margin: 0 auto; }
.cp-home-mkt-hero-ia .cp-ia { text-align: left !important; }

/* Chips "tries" — espelha .cp-home-hero-anon-tries: ficam FORA do .cp-ia
   como sibling, ocupando a largura do hero-inner. Centralizados via
   justify-content (hero é center-aligned). */
.cp-home-mkt-hero-tries {
  margin: 22px auto 0 auto !important;
  padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  position: relative; z-index: 1;
}
.cp-home-mkt-hero-tries-label {
  width: 100%;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.35) !important;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-align: center;
}
.cp-home-mkt-hero-try {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78) !important;
  border-radius: 4px;
  padding: 6px 12px !important;
  cursor: pointer;
  transition: all .15s;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.cp-home-mkt-hero-try:hover {
  background: rgba(247,212,74,.08);
  border-color: rgba(247,212,74,.3);
  color: var(--cp-amarelo) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS STRIP — banda dourada com pill preta interna (3 KPIs)
   ═══════════════════════════════════════════════════════════════════ */

/* Yellow zone — wrapper que abraça stats + about com gradient único.
   Tons globalmente mais escuros (bronze profundo nas pontas, ouro velho
   no centro) e transição mais gradual — espalha a degradação por uma
   faixa maior em vez de concentrar nas bordas. */
.cp-home-mkt-yellow {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -56px;
  background: linear-gradient(180deg,
    #4a3006 0%,
    #94640f 12%,
    #e6c43e 30%,
    #e6c43e 70%,
    #94640f 88%,
    #4a3006 100%
  );
}

.cp-home-mkt-stats {
  background: transparent;
  padding: 112px 24px 32px;
  position: relative;
}

.cp-home-mkt-stats-pill {
  /* 980px alinha com a largura do hero-inner / componente IA. 4 colunas
     com gap menor (24px) e num ligeiramente menor (40px) pra acomodar
     o item extra sem apertar. */
  max-width: 980px; margin: 0 auto;
  background: var(--mkt-dark);
  border-radius: 22px;
  padding: 28px 36px !important;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items: center;
  gap: 24px;
  box-shadow: 0 12px 32px rgba(26,26,26,.15);
}
.cp-home-mkt-stats-item { text-align: center; }
.cp-home-mkt-stats-num {
  font-size: 40px; font-weight: 800 !important;
  line-height: 1 !important; color: var(--cp-amarelo) !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px !important;
}
.cp-home-mkt-stats-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600 !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-ondark-body) !important;
  line-height: 1.3 !important;
}
.cp-home-mkt-stats-sep {
  width: 1px; height: 48px;
  background: rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT — "O que é a Criminal Player?" + experts featured
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-about {
  /* Continuação direta do stats dentro do mesmo wrapper amarelo (gradient). */
  background: transparent;
  padding: 64px 24px 152px;
}
.cp-home-mkt-about-inner {
  /* 880px — um pouco mais estreito que o stats-pill (980px) pra criar
     hierarquia visível dentro da zona amarela. align-items: start (em
     vez de center) pra que título à esquerda e eyebrow à direita
     fiquem na MESMA linha horizontal, não centralizados. */
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.cp-home-mkt-about-title {
  font-size: 32px; font-weight: 700 !important;
  line-height: 1.18 !important; letter-spacing: -.01em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 0 20px !important;
}
.cp-home-mkt-about-text {
  font-size: 18px; line-height: 1.65 !important;
  font-weight: 500 !important;
  color: var(--mkt-text-onlight-body) !important;
  margin: 0 !important;
}
.cp-home-mkt-about-experts {
  display: flex; flex-direction: column; gap: 12px;
}
.cp-home-mkt-about-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-strong) !important;
  margin-bottom: 4px !important;
}

/* ── Expert deck — volta ao modelo pill ↔ card.
   Estado base (inativo) = pill outline; estado ATIVO = card dark expandido
   com foto + descrição. Sem `order` swap — posição é estável conforme
   HTML (Aury sempre slot 1, Alexandre sempre slot 2). O morph acontece
   IN PLACE no slot do clicado, sem "dark area sumindo em um lugar e
   remontando em outro". ── */
.cp-home-mkt-expdeck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.cp-home-mkt-expdeck-card {
  /* Base = INATIVO (pill outline sobre o amarelo) */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 22px;
  background: transparent;
  border: 1.5px solid rgba(26,26,26,.85);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--mkt-text-onlight-strong);
  width: 100%;
  /* overflow: visible necessário pra foto extender pra cima do card */
  overflow: visible;
  /* height FIXA (transicionável) — chave pra não ter layout shift.
     min-height não transiciona suavemente, gerando salto instantâneo
     na altura do card que recebe a classe .active. */
  height: 50px;
  transition:
    background .5s cubic-bezier(.4,0,.2,1),
    border-color .5s cubic-bezier(.4,0,.2,1),
    border-radius .5s cubic-bezier(.4,0,.2,1),
    color .5s cubic-bezier(.4,0,.2,1),
    padding .5s cubic-bezier(.4,0,.2,1),
    height .5s cubic-bezier(.4,0,.2,1),
    box-shadow .4s ease;
  outline: none;
}
.cp-home-mkt-expdeck-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(247,212,74,.45);
}
.cp-home-mkt-expdeck-card:hover:not(.cp-home-mkt-expdeck-active) {
  background: rgba(26,26,26,.04);
}
.cp-home-mkt-expdeck-active {
  /* ATIVO — card dark expandido, presença grande (Aury e Alexandre são
     2 referências centrais da comunidade — merecem dominância visual).
     height FIXA pra layout não-shift, line-clamp:2 no name + height fixa
     no desc garantem que conteúdo cabe dentro dos 230px independente
     do tamanho do nome. */
  background: var(--mkt-dark);
  border-color: rgba(247,212,74,.22);
  border-radius: 24px;
  padding: 32px 240px 32px 36px;
  color: var(--mkt-text-ondark-strong);
  cursor: default;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  gap: 28px;
  height: 230px;
}

.cp-home-mkt-expdeck-card-content {
  flex: 1; min-width: 0;
  transition: padding .3s ease;
}
.cp-home-mkt-expdeck-card-name {
  font-size: 15px;
  font-weight: 700 !important;
  color: inherit !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  transition: font-size .5s cubic-bezier(.4,0,.2,1);
}
.cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-name {
  font-size: 22px;
  letter-spacing: -.005em;
  /* Cap em 2 linhas — Alex "Alexandre Morais da Rosa" não pula pra 3 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-home-mkt-expdeck-card-desc {
  font-size: 13px;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.78) !important;
  margin: 0 !important;
  /* height fixa (não max-height) — garante MESMA altura nos 2 cards
     mesmo que os textos tenham tamanhos diferentes. Sem isso, o desc
     do Aury (3 linhas) e do Alex (2 linhas) fazem a altura total do
     deck flutuar durante o swap, deslocando o conteúdo abaixo. */
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    height .5s cubic-bezier(.4,0,.2,1),
    opacity .35s ease,
    margin-top .5s cubic-bezier(.4,0,.2,1);
}
.cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-desc {
  /* ~4 linhas × 14px × 1.6 line-height ≈ 90px. Acomoda bem as bios
     mais longas (Aury) sem cortar. Line-clamp:4 cobre se passar. */
  height: 90px;
  opacity: 1;
  margin-top: 12px !important;
  font-size: 14px;
  -webkit-line-clamp: 4;
}

/* Photo — usa PNG com fundo transparente (Aury / Alexandre). Posicionada
   ABSOLUTE pra ultrapassar o topo do card (efeito "personagem em
   destaque"). Bottom-anchored: a base da foto alinha com a base do card,
   topo extende ~100px acima do card. Sem crop circular nem borda — a
   silhueta do recorte transparente já define o contorno. */
.cp-home-mkt-expdeck-card-photo {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
  transition:
    width .5s cubic-bezier(.4,0,.2,1),
    height .5s cubic-bezier(.4,0,.2,1),
    opacity .35s ease .1s;
}
.cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-photo {
  /* 200×320 — foto bem grande, dominante. Extende ~90px acima do card
     (card height fixa 230, foto 320). 200 wide cabe no padding-right
     reservado de 240 (200 + 40 gap from text). */
  width: 200px;
  height: 320px;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   TOOLS GRID — "Cada IA resolve uma tarefa real"
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-tools {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-dark);
  /* Encaixe sobre a zona amarela — borda superior arredondada simétrica
     ao hero. Mesma técnica: margin-top negativo + z-index + radius. */
  margin-top: -56px;
  padding: 144px 24px 88px;
  position: relative;
  z-index: 2;
  border-top-left-radius: 56px;
  border-top-right-radius: 56px;
}
.cp-home-mkt-tools-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
}
.cp-home-mkt-tools-head { max-width: 760px; margin-bottom: 56px; }
.cp-home-mkt-tools-title {
  font-size: 36px; font-weight: 700 !important;
  line-height: 1.18 !important; letter-spacing: -.01em;
  color: var(--mkt-text-ondark-strong) !important;
  margin: 0 0 16px !important;
}
.cp-home-mkt-tools-title em {
  color: var(--cp-amarelo) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.cp-home-mkt-tools-sub {
  font-size: 16px; line-height: 1.6 !important;
  color: var(--mkt-text-ondark-body) !important;
  margin: 0 !important;
}
.cp-home-mkt-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cp-home-mkt-tool {
  background: var(--mkt-dark-2);
  border: 1px solid var(--mkt-bord-ondark);
  border-radius: var(--mkt-radius-lg);
  padding: 28px !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s ease, transform .25s ease;
}
.cp-home-mkt-tool:hover {
  border-color: rgba(247,212,74,.30);
  transform: translateY(-2px);
}
.cp-home-mkt-tool-glyph {
  width: 44px; height: 44px;
  background: rgba(247,212,74,.10);
  border: 1px solid rgba(247,212,74,.20);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cp-amarelo);
}
.cp-home-mkt-tool-glyph svg { width: 22px; height: 22px; stroke: currentColor; }
.cp-home-mkt-tool-name {
  font-size: 17px; font-weight: 700 !important;
  color: var(--mkt-text-ondark-strong) !important;
  line-height: 1.3 !important; margin: 0 !important;
}
.cp-home-mkt-tool-desc {
  font-size: 14px; line-height: 1.55 !important;
  color: var(--mkt-text-ondark-body) !important;
  margin: 0 !important;
  flex: 1;
}
.cp-home-mkt-tool-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cp-amarelo) !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   FLOW — manifesto "IA qualifica, você conduz" + steps 01/02/03
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-flow {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-dark);
  padding: 96px 24px 140px;
}
.cp-home-mkt-flow-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
  /* Title/sub agora left-aligned (igual ao bloco Tools acima);
     timeline embaixo segue centralizada via .cp-home-mkt-flow-steps */
}
.cp-home-mkt-flow-title {
  font-size: 38px; font-weight: 700 !important;
  line-height: 1.18 !important; letter-spacing: -.01em;
  color: var(--mkt-text-ondark-strong) !important;
  margin: 0 0 14px !important;
  max-width: 720px;
}
.cp-home-mkt-flow-sub {
  font-size: 16px; line-height: 1.6 !important;
  color: var(--mkt-text-ondark-body) !important;
  max-width: 640px; margin: 0 0 64px !important;
}
.cp-home-mkt-flow-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.cp-home-mkt-flow-steps::before {
  /* Linha horizontal conectora atrás dos circles */
  content: "";
  position: absolute;
  top: 28px; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(247,212,74,.25) 15%,
    rgba(247,212,74,.25) 85%, transparent 100%);
  z-index: 0;
}
/* Spark traveling — ponto de luz amarelo percorre a linha conectora
   em 12s. Vibe: "fluxo de informação" da timeline. Padrão portado da
   home v2 atual (cp-pages-home.css .cp-home-flow::after). */
.cp-home-mkt-flow-steps::after {
  content: '';
  position: absolute;
  top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cp-amarelo);
  box-shadow: 0 0 16px rgba(247,212,74,.9), 0 0 32px rgba(247,212,74,.5);
  animation: cp-home-mkt-flow-spark 12s linear infinite;
  z-index: 0;
}
@keyframes cp-home-mkt-flow-spark {
  0%   { left: 12%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 88%; opacity: 0; }
}
.cp-home-mkt-flow-step {
  position: relative; z-index: 1;
  text-align: center;
  /* opacity .55 base — anima pra 1 quando o spark passa pelo step,
     criando ritmo de leitura sequencial 01 → 02 → 03 */
  opacity: .55;
}
.cp-home-mkt-flow-step:nth-child(1) { animation: cp-home-mkt-flow-glow-1 12s linear infinite; }
.cp-home-mkt-flow-step:nth-child(2) { animation: cp-home-mkt-flow-glow-2 12s linear infinite; }
.cp-home-mkt-flow-step:nth-child(3) { animation: cp-home-mkt-flow-glow-3 12s linear infinite; }
@keyframes cp-home-mkt-flow-glow-1 {
  0%, 5%, 30%, 100% { opacity: .55; }
  8%, 25% { opacity: 1; }
}
@keyframes cp-home-mkt-flow-glow-2 {
  0%, 38%, 65%, 100% { opacity: .55; }
  42%, 60% { opacity: 1; }
}
@keyframes cp-home-mkt-flow-glow-3 {
  0%, 70%, 100% { opacity: .55; }
  75%, 95% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-home-mkt-flow-steps::after { animation: none !important; opacity: 0 !important; }
  .cp-home-mkt-flow-step { animation: none !important; opacity: 1 !important; }
}
.cp-home-mkt-flow-num {
  display: inline-flex; width: 56px; height: 56px;
  align-items: center; justify-content: center;
  background: var(--mkt-dark-2);
  border: 1.5px solid rgba(247,212,74,.30);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  color: var(--cp-amarelo) !important;
  margin-bottom: 20px !important;
}
.cp-home-mkt-flow-step-title {
  font-size: 17px; font-weight: 700 !important;
  color: var(--mkt-text-ondark-strong) !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
}
.cp-home-mkt-flow-step-desc {
  font-size: 14px; line-height: 1.55 !important;
  color: var(--mkt-text-ondark-body) !important;
  margin: 0 !important;
  max-width: 240px; margin-left: auto !important; margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOTIF "TAMBÉM FAZ PARTE" — faixa dourada diagonal entre seções
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-motif {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--cp-amarelo, #F7D44A);
  padding: 16px 0;
  overflow: hidden;
  transform: rotate(-1.2deg);
  margin-top: -20px;
  margin-bottom: -20px;
  /* z-index 3 mantém a faixa acima da imersão (z:2) e dos folders (z:0)
     nos overlaps de 20px em cima e embaixo. */
  position: relative; z-index: 3;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.cp-home-mkt-motif-track {
  display: flex; align-items: center; gap: 32px;
  white-space: nowrap;
  animation: cp-mkt-motif-scroll 38s linear infinite;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700 !important;
  letter-spacing: .16em; text-transform: uppercase;
  color: #1a1a1a !important;
}
.cp-home-mkt-motif-item { display: inline-flex; align-items: center; gap: 32px; }
.cp-home-mkt-motif-item::after {
  content: "•";
  color: rgba(26,26,26,.55);
  font-size: 16px;
}
@keyframes cp-mkt-motif-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   FOLDERS — Acervo / Comunidade / Quem ensina (padrão STAIRCASE).
   3 cards independentes em coluna, com offset horizontal progressivo
   (esquerda → centro → direita) e overlap vertical sutil (-16px).
   Folder 1 (Acervo) na frente à esquerda; Folder 3 (Quem ensina) atrás
   à direita. Sensação de "deck escalonado" via margin + box-shadow;
   sem aba, sem pseudo-elementos.
   Decisão definida na demo isolada `demo-home-v2-anon-mkt-folders.html`
   (Direção A — Staircase).
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-folders {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-light);
  padding: 80px 24px 100px;
}
.cp-home-mkt-folders-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.cp-home-mkt-folder {
  background: var(--mkt-light-2);
  border-radius: 22px;
  padding: 32px 36px;
  /* Two-layer shadow — sombra próxima delimita a borda do card, sombra
     distante dá "elevation" off the page. Total mais pronunciado pra
     separar bem os 3 folders na staircase. */
  box-shadow:
    0 2px 8px rgba(0,0,0,.07),
    0 16px 40px rgba(0,0,0,.14);
  position: relative;
}
.cp-home-mkt-folder + .cp-home-mkt-folder {
  margin-top: -16px;
}

/* Offsets horizontais + z-index decrescente. Folder 1 (Acervo) fica
   colado à esquerda e na frente; folder 3 (Quem ensina) colado à
   direita e atrás. Cria a "escada" diagonal vista de cima. */
.cp-home-mkt-folder-1 { z-index: 3; margin-left: 0;   margin-right: 80px; }
.cp-home-mkt-folder-2 { z-index: 2; margin-left: 40px; margin-right: 40px; }
.cp-home-mkt-folder-3 { z-index: 1; margin-left: 80px; margin-right: 0; }

/* Head — label uppercase mono no topo do card */
.cp-home-mkt-folder-head { margin-bottom: 6px; }
.cp-home-mkt-folder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-dourado, #d89818) !important;
}

/* Title */
.cp-home-mkt-folder-title {
  font-size: 24px;
  font-weight: 700 !important;
  color: var(--mkt-text-onlight-strong) !important;
  line-height: 1.2 !important;
  letter-spacing: -.005em;
  margin: 4px 0 18px !important;
}

/* Content — 2 colunas (texto + stats) padrão; `content-wide` força 1 col (folder 3) */
.cp-home-mkt-folder-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.cp-home-mkt-folder-content-wide {
  grid-template-columns: 1fr;
  gap: 20px;
}

.cp-home-mkt-folder-text { min-width: 0; }
.cp-home-mkt-folder-desc {
  font-size: 15px;
  line-height: 1.6 !important;
  color: var(--mkt-text-onlight-body) !important;
  margin: 0 0 22px !important;
}
.cp-home-mkt-folder-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-strong) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--mkt-text-onlight-strong);
  padding-bottom: 4px;
}

/* Stats pill — dark, mesma família do hero stats */
.cp-home-mkt-folder-stats {
  background: var(--mkt-dark);
  border-radius: 18px;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.cp-home-mkt-folder-stats .stat { text-align: center; }
.cp-home-mkt-folder-stats .num {
  font-size: 26px; font-weight: 800 !important;
  color: var(--cp-amarelo) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px !important;
}
.cp-home-mkt-folder-stats .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mkt-text-ondark-body) !important;
  line-height: 1.3 !important;
}
.cp-home-mkt-folder-stats .sep {
  width: 1px; height: 32px;
  background: rgba(255,255,255,.12);
}

/* Responsivo — em telas estreitas, os offsets horizontais sumem
   pra cards ocuparem largura toda (mesma carta sem escada). */
@media (max-width: 880px) {
  .cp-home-mkt-folder-1,
  .cp-home-mkt-folder-2,
  .cp-home-mkt-folder-3 {
    margin-left: 0;
    margin-right: 0;
  }
  .cp-home-mkt-folder-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ALSO — cards "Acervo" + "Comunidade" em fundo claro
   (LEGACY — substituído pelo bloco FOLDERS acima, CSS mantido caso
   precise reverter)
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-also {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-light);
  padding: 100px 24px 80px;
}
.cp-home-mkt-also-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cp-home-mkt-also-card {
  background: var(--mkt-light-2);
  border-radius: var(--mkt-radius-xl);
  padding: 40px !important;
  display: flex; flex-direction: column;
  gap: 24px;
  position: relative;
  box-shadow: 0 4px 24px rgba(26,26,26,.04);
}
.cp-home-mkt-also-head { display: flex; flex-direction: column; gap: 8px; }
.cp-home-mkt-also-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-mute) !important;
}
.cp-home-mkt-also-title {
  font-size: 28px; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.01em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 !important;
}
.cp-home-mkt-also-desc {
  font-size: 15px; line-height: 1.6 !important;
  color: var(--mkt-text-onlight-body) !important;
  margin: 0 !important;
}
.cp-home-mkt-also-stats {
  background: var(--mkt-dark);
  border-radius: 18px;
  padding: 22px 28px !important;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center;
  gap: 18px;
}
.cp-home-mkt-also-stats-item { text-align: center; }
.cp-home-mkt-also-stats-num {
  font-size: 26px; font-weight: 800 !important;
  color: var(--cp-amarelo) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px !important;
}
.cp-home-mkt-also-stats-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mkt-text-ondark-body) !important;
  line-height: 1.3 !important;
}
.cp-home-mkt-also-stats-sep {
  width: 1px; height: 32px;
  background: rgba(255,255,255,.12);
}
.cp-home-mkt-also-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-strong) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--mkt-text-onlight-strong);
  padding-bottom: 4px;
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   TEACHES — "Quem ensina" mosaico (padrão experts hub adaptado)
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-teaches {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-light);
  padding: 24px 24px 100px;
}
.cp-home-mkt-teaches-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
  background: var(--mkt-light-2);
  border-radius: var(--mkt-radius-xl);
  padding: 56px 56px 64px !important;
  box-shadow: 0 4px 24px rgba(26,26,26,.04);
  position: relative;
  overflow: hidden;
}
.cp-home-mkt-teaches-head {
  text-align: center; max-width: 720px;
  margin: 0 auto 48px !important;
}
.cp-home-mkt-teaches-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-mute) !important;
  margin: 0 0 14px !important;
}
.cp-home-mkt-teaches-title {
  font-size: 32px; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.01em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 0 14px !important;
}
.cp-home-mkt-teaches-sub {
  font-size: 15px; line-height: 1.6 !important;
  color: var(--mkt-text-onlight-body) !important;
  margin: 0 !important;
}
/* Mosaico — 8 cols × 4 rows = 32 cells. Layout retângulo compacto
   (~280×140px) que cabe na coluna direita do folder 3 ao lado do texto.
   Mesma identidade visual (perspective + tilt + featured/near) em
   escala reduzida. */
.cp-home-mkt-teaches-mosaic {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  grid-template-rows: repeat(4, 32px);
  gap: 4px;
  justify-content: center;
  perspective: 1000px;
  transform: perspective(1200px) rotateX(2deg);
  position: relative;
  z-index: 1;
}
.cp-home-mkt-teaches-cell {
  width: 32px; height: 32px;
  border-radius: 7px;
  overflow: hidden;
  opacity: .4;
  transform: scale(.92);
  transition: all .6s cubic-bezier(.23,1,.32,1);
  background: linear-gradient(135deg, #c8c4ba, #b0aca0);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.35);
  font-weight: 700; font-size: 10px;
  font-family: 'Inter', sans-serif;
  border: 1px solid rgba(0,0,0,.05);
  position: relative;
}
.cp-home-mkt-teaches-cell.featured {
  opacity: 1;
  transform: scale(1.04);
  z-index: 5;
  border: 2px solid var(--cp-amarelo);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 4px rgba(247,212,74,.18);
  color: #1a1a1a;
}
.cp-home-mkt-teaches-cell.near {
  opacity: .75; transform: scale(.98);
}
.cp-home-mkt-teaches-curatoria {
  margin-top: 48px !important;
  text-align: center;
  font-size: 14px; line-height: 1.65 !important;
  color: var(--mkt-text-onlight-body) !important;
  max-width: 640px; margin-left: auto !important; margin-right: auto !important;
}
.cp-home-mkt-teaches-curatoria strong {
  color: var(--mkt-text-onlight-strong) !important;
  font-weight: 600 !important;
}
.cp-home-mkt-teaches-cta-wrap { text-align: center; margin-top: 32px !important; }
.cp-home-mkt-teaches-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-strong) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--mkt-text-onlight-strong);
  padding-bottom: 4px;
}

/* Avatares mockados (gradient + iniciais) — featured tem cor mais viva */
.cp-home-mkt-mock-av-1 { background: linear-gradient(135deg, #3a4a6e, #5a6a8c); color: #fff !important; }
.cp-home-mkt-mock-av-2 { background: linear-gradient(135deg, #6b3a48, #8c5a6e); color: #fff !important; }
.cp-home-mkt-mock-av-3 { background: linear-gradient(135deg, #3a6e4a, #5a8c6b); color: #fff !important; }
.cp-home-mkt-mock-av-4 { background: linear-gradient(135deg, #6e5a3a, #8c7a4a); color: #fff !important; }
.cp-home-mkt-mock-av-5 { background: linear-gradient(135deg, #4a3a6e, #6e5a8c); color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════
   IMERSAO — bloco preto, aula ao vivo + presencial
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-imersao {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--mkt-dark);
  /* padding-top maior (140) cria respiro entre a faixa amarela "Também
     faz parte" acima e o conteúdo da imersão. Espelha o padding-bottom
     do flow block. */
  padding: 140px 24px 96px;
  /* Mesma técnica do hero: bottom-radius + z-index pra que a news abaixo
     mostre seu fundo claro através dos cantos curvos. SEM overflow:hidden
     — o background-color sozinho já respeita o border-radius, e a presença
     de overflow:hidden quebraria position:sticky no .cp-home-mkt-imersao-head. */
  position: relative;
  z-index: 2;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
}
.cp-home-mkt-imersao-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}
.cp-home-mkt-imersao-head {
  position: sticky; top: 24px;
}
.cp-home-mkt-imersao-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cp-amarelo) !important;
  margin: 0 0 14px !important;
}
.cp-home-mkt-imersao-title {
  font-size: 38px; font-weight: 700 !important;
  line-height: 1.18 !important; letter-spacing: -.01em;
  color: var(--mkt-text-ondark-strong) !important;
  margin: 0 0 16px !important;
}
.cp-home-mkt-imersao-sub {
  font-size: 16px; line-height: 1.6 !important;
  color: var(--mkt-text-ondark-body) !important;
  margin: 0 0 28px !important; max-width: 460px;
}
.cp-home-mkt-imersao-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cp-amarelo) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--cp-amarelo);
  padding-bottom: 4px;
}
.cp-home-mkt-imersao-cards { display: flex; flex-direction: column; gap: 16px; }
.cp-home-mkt-imersao-card {
  background: var(--mkt-dark-2);
  border: 1px solid var(--mkt-bord-ondark);
  border-radius: var(--mkt-radius-md);
  padding: 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  transition: border-color .25s ease;
}
.cp-home-mkt-imersao-card:hover { border-color: rgba(247,212,74,.30); }
.cp-home-mkt-imersao-card-date {
  background: var(--mkt-dark-3);
  border-radius: 12px;
  padding: 14px 18px !important;
  text-align: center;
  align-self: start;
  min-width: 76px;
}
.cp-home-mkt-imersao-card-day {
  font-size: 26px; font-weight: 800 !important;
  color: var(--cp-amarelo) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
.cp-home-mkt-imersao-card-mon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-ondark-body) !important;
  margin-top: 4px;
}
.cp-home-mkt-imersao-card-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #1a1a1a !important;
  background: var(--cp-amarelo);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.cp-home-mkt-imersao-card-tag-soft {
  background: rgba(247,212,74,.16);
  color: var(--cp-amarelo) !important;
  border: 1px solid rgba(247,212,74,.30);
}
.cp-home-mkt-imersao-card-title {
  font-size: 17px; font-weight: 700 !important;
  color: var(--mkt-text-ondark-strong) !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
}
.cp-home-mkt-imersao-card-meta {
  font-size: 13px; line-height: 1.5 !important;
  color: var(--mkt-text-ondark-body) !important;
  margin: 0 !important;
}
.cp-home-mkt-imersao-card-live .cp-home-mkt-imersao-card-day {
  font-size: 14px; color: var(--mkt-text-ondark-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWS — grid de notícias com fotos grandes, fundo claro
   ═══════════════════════════════════════════════════════════════════ */

.cp-home-mkt-news {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* Gradient cream → white. Topo bem tingido (cream warm visível) e
     base branca pura pra emendar limpa com o CTA final. */
  background: linear-gradient(180deg, #ece4d4 0%, #ffffff 100%);
  /* margin-top negativo "sobe" a news pra abraçar os cantos curvos da
     imersão. padding-top compensa pra manter a respiração interna. */
  margin-top: -56px;
  padding: 152px 24px 96px;
}
.cp-home-mkt-news-inner {
  max-width: var(--cp-page-max, 1100px);
  margin: 0 auto;
}
.cp-home-mkt-news-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px !important;
  flex-wrap: wrap; gap: 16px;
}
.cp-home-mkt-news-title {
  font-size: 36px; font-weight: 700 !important;
  line-height: 1.18 !important; letter-spacing: -.01em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 !important;
}
.cp-home-mkt-news-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mkt-text-onlight-strong) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--mkt-text-onlight-strong);
  padding-bottom: 4px;
}
/* Grid: featured grande à esquerda (1.35fr) + coluna de thumbs à direita (1fr).
   Sem fundo de card — estilo editorial direto sobre o light bg da seção. */
.cp-home-mkt-news-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 36px;
  /* stretch faz a coluna direita (thumbs) crescer pra altura do featured.
     Combinado com flex:1 em cada thumb, os 4 cards se distribuem
     igualmente, encaixando perfeitamente na altura do featured. */
  align-items: stretch;
}

/* Cores das imagens placeholder (compartilhadas entre featured e thumbs) */
.cp-home-mkt-news-img-1 { background: linear-gradient(135deg, #2c4a6b, #4a6b8c); }
.cp-home-mkt-news-img-2 { background: linear-gradient(135deg, #6b4a2c, #8c6b4a); }
.cp-home-mkt-news-img-3 { background: linear-gradient(135deg, #4a6b2c, #6b8c4a); }
.cp-home-mkt-news-img-4 { background: linear-gradient(135deg, #4a2c6b, #6b4a8c); }

/* ── Featured (imagem grande no topo, conteúdo abaixo) ── */
.cp-home-mkt-news-featured {
  display: flex; flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(26,26,26,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.cp-home-mkt-news-featured:hover {
  box-shadow: 0 8px 24px rgba(26,26,26,.10);
  transform: translateY(-2px);
}
.cp-home-mkt-news-featured-img {
  aspect-ratio: 5 / 2;  /* banner editorial — wide e compacta verticalmente */
  /* border-radius removida: o card pai com overflow:hidden + radius 18 já clipa */
}
.cp-home-mkt-news-featured-body { padding: 24px 28px 28px; }
.cp-home-mkt-news-featured-title {
  font-size: 24px;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.005em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 4px 0 10px !important;
}
.cp-home-mkt-news-featured-summary {
  font-size: 14px;
  line-height: 1.6 !important;
  color: var(--mkt-text-onlight-body) !important;
  margin: 0 0 14px !important;
  max-width: 560px;
}
.cp-home-mkt-news-featured-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mkt-text-onlight-mute) !important;
  background: rgba(26,26,26,.05);
  padding: 5px 10px;
  border-radius: 4px;
}

/* ── Thumbs (coluna direita: imagem quadrada à esquerda + meta+título à direita) ── */
.cp-home-mkt-news-thumbs {
  display: flex; flex-direction: column;
  gap: 14px;
}
.cp-home-mkt-news-thumb {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  align-items: stretch;
  text-decoration: none !important;
  color: inherit !important;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26,26,26,.05);
  transition: box-shadow .25s ease, transform .25s ease;
  /* flex:1 distribui o espaço da coluna direita igualmente entre os 4
     thumbs, fazendo cada um crescer pra que a soma dos 4 = altura do
     featured à esquerda (grid align-items:stretch faz a coluna esticar). */
  flex: 1;
  min-height: 0;
}
.cp-home-mkt-news-thumb:hover {
  box-shadow: 0 6px 18px rgba(26,26,26,.09);
  transform: translateY(-1px);
}
.cp-home-mkt-news-thumb-img {
  /* aspect-ratio removida: imagem ocupa altura total via align-items:stretch
     no parent. border-radius removida: card pai com overflow:hidden clipa. */
}
/* Content do thumb com padding interno (image é fullbleed esquerda) */
.cp-home-mkt-news-thumb > div:nth-child(2) {
  padding: 14px 18px;
}

/* Meta row — • SOURCE · TIME  (mesma estrutura no featured e nos thumbs) */
.cp-home-mkt-news-thumb-meta {
  display: flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--mkt-text-onlight-mute) !important;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cp-home-mkt-news-thumb-meta::before {
  content: "•";
  color: var(--cp-amarelo, #F7D44A);
  font-size: 14px;
  line-height: 1;
  margin-right: 7px;
}
.cp-home-mkt-news-thumb-src {
  color: var(--mkt-text-onlight-strong) !important;
}
.cp-home-mkt-news-thumb-time::before {
  content: "·"; margin: 0 5px;
  color: var(--mkt-text-onlight-mute);
}
.cp-home-mkt-news-thumb-title {
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   CTA FINAL — bloco preto único de planos no rodapé
   ═══════════════════════════════════════════════════════════════════ */

/* CTA final — bg LIGHT espelhando .cp-home-plans-strip da v2 original
   (decisão 2026-05-14 da home v2). Mesma família visual: eyebrow dourado +
   title 32/700 com accent gradient + sub + footnote mono caps + 2 botões
   (primário amarelo, secundário outline dark). */
.cp-home-mkt-cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #ffffff;
  padding: 72px 24px 80px;
  text-align: center;
}
.cp-home-mkt-cta-inner {
  max-width: 760px; margin: 0 auto;
}
.cp-home-mkt-cta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cp-dourado, #d89818) !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}
.cp-home-mkt-cta-title {
  font-size: 32px;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.6px;
  color: var(--mkt-text-onlight-strong) !important;
  margin: 0 0 16px !important;
}
/* Accent gradient amarelo→dourado (mesmo padrão do hero title) */
.cp-home-mkt-cta-title-accent {
  background: linear-gradient(135deg, var(--cp-amarelo) 0%, var(--cp-dourado) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}
.cp-home-mkt-cta-sub {
  font-size: 15px;
  /* Cor mais escura que --mkt-text-onlight-body (72% opacity) — pra ganhar
     contraste já que o fundo do CTA é o trecho mais claro/branco da página. */
  color: rgba(26,26,26,.85) !important;
  line-height: 1.6 !important;
  max-width: 600px;
  margin: 0 auto 0 !important;
  font-weight: 400 !important;
}
/* Footnote — vem ENTRE sub e buttons (padrão v2). Margin negativo top
   pra ficar próximo do sub; margin bottom dá respiro pros buttons. */
.cp-home-mkt-cta-footnote {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  /* Cinza mais escuro (#555 vs #888 anterior) — texto fica mais visível
     contra o branco puro do CTA. */
  color: #555 !important;
  margin: 8px 0 32px !important;
  line-height: 1.4;
}
.cp-home-mkt-cta-buttons {
  display: flex; gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cp-home-mkt-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px;
  line-height: 1.2 !important;
  transition: background .15s ease, border-color .15s ease;
}
.cp-home-mkt-cta-btn-primary {
  background: var(--cp-amarelo, #F7D44A);
  color: #0a0b14 !important;
}
.cp-home-mkt-cta-btn-primary:hover {
  background: var(--cp-dourado, #d89818);
}
.cp-home-mkt-cta-btn-secondary {
  background: transparent;
  color: var(--mkt-text-onlight-strong) !important;
  border: 1px solid rgba(0,0,0,.18);
  font-weight: 500 !important;
}
.cp-home-mkt-cta-btn-secondary:hover {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .cp-home-mkt-about-inner { gap: 48px; }
  .cp-home-mkt-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-home-mkt-teaches-mosaic { grid-template-columns: repeat(8, 30px); grid-template-rows: repeat(4, 30px); gap: 4px; }
  .cp-home-mkt-teaches-cell { width: 30px; height: 30px; font-size: 10px; }
  .cp-home-mkt-imersao-inner { grid-template-columns: 1fr; gap: 40px; }
  .cp-home-mkt-imersao-head { position: static; }
}

@media (max-width: 768px) {
  .cp-home-mkt-hero { padding: 64px 20px 72px; }
  .cp-home-mkt-hero-title {
    font-size: 28px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 18px !important;
  }
  .cp-home-mkt-stats-pill {
    grid-template-columns: 1fr; gap: 16px; padding: 24px 28px !important;
  }
  .cp-home-mkt-stats-sep { display: none; }
  .cp-home-mkt-about-inner { grid-template-columns: 1fr; gap: 32px; }
  .cp-home-mkt-about-title { font-size: 24px !important; line-height: 1.22 !important; }
  .cp-home-mkt-tools { padding: 64px 20px; }
  .cp-home-mkt-tools-title { font-size: 28px !important; }
  .cp-home-mkt-tools-grid { grid-template-columns: 1fr; }
  .cp-home-mkt-flow { padding: 64px 20px; }
  .cp-home-mkt-flow-title { font-size: 28px !important; }
  .cp-home-mkt-flow-steps {
    grid-template-columns: 1fr; gap: 36px;
  }
  .cp-home-mkt-flow-steps::before { display: none; }
  /* Mobile: desliga o spark (linha conectora não existe em 1-col) e
     retira a opacity .55 base dos steps (steps no full opacity sempre) */
  .cp-home-mkt-flow-steps::after { display: none; }
  .cp-home-mkt-flow-step {
    animation: none !important;
    opacity: 1 !important;
  }
  .cp-home-mkt-also-inner { grid-template-columns: 1fr; }
  .cp-home-mkt-also-card { padding: 32px !important; }
  .cp-home-mkt-also-stats {
    grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  }
  .cp-home-mkt-also-stats-sep { display: none; }
  .cp-home-mkt-teaches-inner { padding: 40px 24px 48px !important; }
  .cp-home-mkt-teaches-title { font-size: 24px !important; }
  .cp-home-mkt-teaches-mosaic { grid-template-columns: repeat(8, 28px); grid-template-rows: repeat(4, 28px); gap: 3px; }
  .cp-home-mkt-teaches-cell { width: 28px; height: 28px; font-size: 10px; }
  .cp-home-mkt-imersao { padding: 64px 20px; }
  .cp-home-mkt-imersao-title { font-size: 28px !important; }
  .cp-home-mkt-news { padding: 64px 20px; }
  .cp-home-mkt-news-grid { grid-template-columns: 1fr; }
  .cp-home-mkt-news-title { font-size: 26px !important; }
  .cp-home-mkt-news-featured-title { font-size: 20px !important; line-height: 1.3 !important; }
  .cp-home-mkt-cta { padding: 72px 20px 88px; }
  .cp-home-mkt-cta-title { font-size: 24px !important; line-height: 1.25 !important; }
  /* Folders — reduzir padding interno (cards mais respiráveis em telas estreitas) */
  .cp-home-mkt-folder { padding: 24px 22px !important; }
  .cp-home-mkt-folder-title { font-size: 20px !important; line-height: 1.25 !important; margin: 4px 0 14px !important; }

  /* Expert deck — em desktop a foto reserva 240px de padding-right, deixando
     90px pro texto em viewport de 414. Reduz photo + padding-right pra dar
     espaço pro nome "Alexandre Morais da Rosa" (22px) caber em 2 linhas. */
  .cp-home-mkt-expdeck-active {
    padding: 24px 140px 24px 24px;
    gap: 16px;
    height: 210px;
  }
  .cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-name {
    font-size: 19px;
  }
  .cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-desc {
    height: 86px;
    font-size: 13px;
  }
  .cp-home-mkt-expdeck-card-photo {
    right: 12px;
  }
  .cp-home-mkt-expdeck-active .cp-home-mkt-expdeck-card-photo {
    width: 120px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .cp-home-mkt-hero-title { font-size: 24px !important; }
  .cp-home-mkt-hero-cta { padding: 14px 28px !important; font-size: 15px; }
  .cp-home-mkt-stats-num { font-size: 36px; }
  .cp-home-mkt-teaches-mosaic { grid-template-columns: repeat(8, 24px); grid-template-rows: repeat(4, 24px); gap: 3px; }
  .cp-home-mkt-teaches-cell { width: 24px; height: 24px; font-size: 9px; }
  .cp-home-mkt-imersao-card { grid-template-columns: 1fr; }
  .cp-home-mkt-cta-buttons { flex-direction: column; }
  .cp-home-mkt-cta-btn { width: 100%; justify-content: center; }
}