/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 02 2026 | 23:58:58 */
/* ============================================================================
   cp-pages-ia-app.css — Criminal Player IA (/ia/), a porta do teste da IA 2.0.
   Prefixo: cp-iap-

   ⚠️ NAO CONFUNDIR COM `cp-pages-ia.css`, QUE E OUTRA COISA E JA EXISTE: aquele
   e o COMPONENTE "IA Criminal Player" (glyph 15 + glass tech), usado na home e
   declarado dono do prefixo `cp-ia-*` no proprio cabecalho. Esta peca e a
   PAGINA que hospeda o app da v2. Dois arquivos, dois prefixos, de proposito —
   o componente diz que e "reutilizavel em paginas de tools no futuro", e uma
   colisao de prefixo so aparece no dia em que os dois se encontram na mesma
   tela.

   BuddyBoss tem especificidade global alta: color, margin, padding,
   line-height, font-weight, text-decoration e font-size pedem !important.
   Toda secao usa o breakout de largura total, inclusive as sem fundo — sem ele
   o container do WP corta as laterais.

   ⚠️ A zona do app NAO ganha estilo proprio de dentro: o `[cp-ai-app]` monta o
   bundle do parceiro, com o CSS dele. O que existe aqui e a moldura (largura,
   respiro e altura minima para a area nao pular enquanto o bundle carrega).
   ========================================================================== */

.cp-iap-hero,
.cp-iap-sec,
.cp-iap-app {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 42px 20px !important;
}
.cp-iap-hero { background: var(--cp-preto, #1A1A1A); padding: 56px 20px 46px !important; }
.cp-iap-sec { background: var(--cp-bg, #f4f4f6); }
.cp-iap-app { padding: 24px 20px 56px !important; min-height: 520px; }

.cp-iap-hero-in,
.cp-iap-in { max-width: var(--cp-page-max, 1100px); margin: 0 auto; }

.cp-iap-kicker {
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--cp-amarelo, #F7D44A) !important;
  margin-bottom: 10px !important;
}
.cp-iap-h1 {
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
}
.cp-iap-deck {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #d8d8de !important;
  margin: 0 !important;
  max-width: 780px;
}
.cp-iap-h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--cp-preto, #1A1A1A) !important;
  margin: 0 0 16px !important;
}
.cp-iap-p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #3a3a44 !important;
  margin: 0 0 12px !important;
  max-width: 860px;
}
.cp-iap-p strong { font-weight: 700 !important; color: var(--cp-preto, #1A1A1A) !important; }

.cp-iap-aviso {
  background: #fff8e1;
  border-left: 4px solid var(--cp-amarelo, #F7D44A);
  padding: 14px 16px !important;
  border-radius: 4px;
  margin: 18px 0 12px !important;
}
.cp-iap-aviso i { color: #9a7d10 !important; margin-right: 6px; }

/* Respiro entre a capa e a PRIMEIRA secao.
   ⚠️ `.cp-section` so tem `margin-bottom` (cp-pages-base.css): quem separa a capa
   da primeira secao nas paginas de ferramenta e a barra `cp-tool-actions`
   (`margin: 32px 0`), que esta pagina nao tem — sem ela o titulo encostava na
   faixa da capa (02/09).
   ⚠️ O seletor e proposital: nas paginas de ferramenta o `cp-wrap` seguinte a
   capa contem `cp-tool-actions`, NAO um `cp-section`, entao esta regra nao as
   alcanca. Escrever so `.cp-tool-hero + .cp-wrap` mexeria em todas elas. */
.cp-tool-hero + .cp-wrap > .cp-section { padding-top: 40px !important; }

/* Nota de FECHO de secao: vem DEPOIS da grade de cartoes, nao debaixo do titulo.
   ⚠️ Nao reusar `cp-section-subtitle` aqui, que foi o defeito de 02/09: aquela
   classe e compartilhada por todas as paginas de ferramenta e nasce colada ao
   titulo (sem margem superior), entao a nota encostava no ultimo cartao. Mexer
   nela para consertar esta pagina mudaria as outras. */
.cp-iap-nota {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #6b6b76 !important;
  margin: 28px 0 0 !important;
  max-width: 860px;
}
.cp-iap-nota a, .cp-iap-nota a:visited {
  color: var(--cp-preto, #1A1A1A) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.cp-iap-nota a i { margin-right: 5px; }

/* Respiro entre a grade de cartoes e o que vem depois dela. */
.cp-section > .cp-tool-features,
.cp-section > .cp-tool-steps { margin-bottom: 4px !important; }

.cp-iap-relato { font-size: 15px !important; margin: 14px 0 0 !important; }
a.cp-iap-relato-link,
a.cp-iap-relato-link:visited {
  color: var(--cp-preto, #1A1A1A) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
a.cp-iap-relato-link:hover { color: #5a5a66 !important; text-decoration: underline !important; }
a.cp-iap-relato-link i { margin-right: 5px; }

/* ==========================================================================
   ANTESSALA (02/09) — a pagina /ia/ passou a explicar e /ia-acesso/ a executar,
   porque o embed e position:fixed e cobre tudo em volta dele. Estas classes sao
   as secoes no padrao das paginas de ferramenta da 1.0: passos, elementos e CTA.
   ========================================================================== */

.cp-iap-passos { margin: 0 !important; padding-left: 20px !important; }
.cp-iap-passos li {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #2b2b33 !important;
  margin: 0 0 12px !important;
}
.cp-iap-passos li strong { font-weight: 700 !important; color: #1a1a1a !important; }

.cp-iap-elem { margin: 0 !important; padding-left: 20px !important; list-style: disc; }
.cp-iap-elem li {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #2b2b33 !important;
  margin: 0 0 12px !important;
}
.cp-iap-elem li strong { font-weight: 700 !important; color: #1a1a1a !important; }

/* O CTA. Fundo preto para separar da secao clara anterior; o botao usa o amarelo
   da marca, que e onde o olho para. */
.cp-iap-cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 42px 20px !important;
  background: var(--cp-preto, #1A1A1A);
  text-align: center;
}
a.cp-iap-btn,
a.cp-iap-btn:visited {
  display: inline-block;
  background: var(--cp-amarelo, #F7D44A) !important;
  color: var(--cp-preto, #1A1A1A) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  padding: 16px 34px !important;
  border-radius: 8px;
}
a.cp-iap-btn:hover { filter: brightness(1.06); }
.cp-iap-cta .cp-iap-nota { color: #b9b9c2 !important; margin: 16px 0 0 !important; }

/* O CTA de fecho. Faixa preta para separar da secao clara anterior; o respiro
   entre o botao e a nota estava faltando (02/09). */
.cp-iap-cta { text-align: center; padding: 46px 20px !important; }
.cp-iap-cta .cp-iap-nota { margin: 20px auto 0 !important; color: #b9b9c2 !important; }

/* A volta, na /ia-acesso/. Fica atras do app assim que ele monta — existe para
   quem chega por link direto com o bundle ainda carregando. */
.cp-iap-volta { padding: 14px 20px !important; }
a.cp-iap-volta-link,
a.cp-iap-volta-link:visited {
  font-size: 15px !important;
  color: #4b4b57 !important;
  text-decoration: none !important;
}
a.cp-iap-volta-link i { margin-right: 6px; }

@media (max-width: 768px) {
  .cp-iap-hero { padding: 40px 18px 34px !important; }
  .cp-iap-sec,
  .cp-iap-app { padding: 30px 18px !important; }
  .cp-iap-h1 { font-size: 30px !important; }
  .cp-iap-h2 { font-size: 21px !important; }
  .cp-iap-deck { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .cp-iap-h1 { font-size: 26px !important; }
  .cp-iap-p { font-size: 15px !important; }
}