/* Ponte entre a marcação do Elementor e o CSS da landing.
   Carregada só na página do Cadar 09, depois do kit global do cliente.
   O papel dela é um só: tornar o Elementor transparente, para que as classes
   da landing (eyebrow, h1, lead, hero__grid...) voltem a mandar no visual. */

/* ---- containers: viram caixas neutras; o layout é do nosso CSS ---- */
/* Só variáveis. Declarar max-width/display aqui faria a ponte vencer o
   style.css da landing, que carrega antes — foi exatamente o que quebrou o
   layout na primeira tentativa. */
body.cv9-pagina .e-con,
body.cv9-pagina .e-con-inner {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --width: 100%; --content-width: 100%; --min-height: 0;
}
body.cv9-pagina .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* A segunda linha do título do hero é um widget separado, para o cliente
   editar as duas frases sem mexer em HTML. */
body.cv9-pagina .line-2 { color: var(--green); display: block; }

/* O widget de botão é bloco por padrão e esticaria o nosso .btn. */
body.cv9-pagina .elementor-widget-button { display: inline-block; width: auto; align-self: flex-start; }
body.cv9-pagina .elementor-widget-button .elementor-button-wrapper { display: inline-flex; }

/* ---- tipografia: o widget herda do próprio wrapper, que leva a nossa classe ----
   Sem isto o kit do cliente pinta todo título de #1B1B1B. */
/* Só o MIOLO do widget herda. Incluir o invólucro aqui seria um tiro no pé:
   é nele que ficam as nossas classes (.price__now, .h2, .eyebrow...), e a ponte
   carrega depois do style.css — foi o que fez o preço sair em corpo de parágrafo. */
body.cv9-pagina .elementor-heading-title,
body.cv9-pagina .elementor-widget-text-editor > .elementor-widget-container,
body.cv9-pagina .elementor-widget-text-editor p {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit;
}
/* No estático o caixa-alta vinha do seletor de elemento h1..h5; aqui o título
   virou .elementor-heading-title e perdeu essa regra. */
body.cv9-pagina .elementor-heading-title { text-transform: uppercase; }
body.cv9-pagina .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---- imagens ---- */
body.cv9-pagina .elementor-widget-image,
body.cv9-pagina .elementor-widget-image figure,
body.cv9-pagina .elementor-widget-image a { display: block; line-height: 0; }
body.cv9-pagina .elementor-widget-image img { width: 100%; height: auto; display: block; }

/* ---- botões: o widget de botão do Elementor veste a nossa .btn ---- */
body.cv9-pagina .elementor-button,
body.cv9-pagina .elementor-button-wrapper .elementor-button {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit;
  background: none; color: inherit; padding: 0; border-radius: 0;
  fill: currentColor; line-height: inherit;
}
body.cv9-pagina .elementor-button-content-wrapper { gap: 10px; }

/* ---- decorações que no estático são <div> vazias ----
   Como widget elas só atrapalhariam o cliente; aqui viram pseudo-elementos. */
body.cv9-pagina .hero { position: relative; overflow: hidden; }
body.cv9-pagina .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to right, rgba(159,176,152,.055) 1px, transparent 1px) 0 0 / 96px 100%,
    linear-gradient(to bottom, rgba(159,176,152,.055) 1px, transparent 1px) 0 0 / 100% 96px;
  mask-image: radial-gradient(120% 90% at 30% 0%, #000 0%, transparent 70%);
}
body.cv9-pagina .hero::after {
  content: ''; position: absolute; width: 640px; height: 640px; left: -180px; top: -140px;
  pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(159,176,152,.16), transparent 62%);
  filter: blur(40px);
}
body.cv9-pagina .hero > * { position: relative; z-index: 1; }

/* ---- animações de entrada: só quando o JS carregou ----
   Sem a marca .cv9-js no <html>, nada é escondido. */
html:not(.cv9-js) body.cv9-pagina .reveal { opacity: 1; transform: none; }

/* ---- lista da oferta: o visto vem do CSS, para o cliente editar como lista comum ---- */
body.cv9-pagina .offer__list li { list-style: none; position: relative; padding-left: 26px; }
body.cv9-pagina .offer__list li::before {
  content: ''; position: absolute; left: 4px; top: .55em; width: 11px; height: 6px;
  border-left: 1.8px solid var(--green); border-bottom: 1.8px solid var(--green);
  transform: rotate(-45deg);
}

/* ---- acordeão do FAQ: o widget do Elementor veste o nosso visual ---- */
body.cv9-pagina .elementor-accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--line); }
body.cv9-pagina .elementor-accordion .elementor-tab-title {
  background: none; padding: 22px 0; font-family: inherit;
}
body.cv9-pagina .elementor-accordion .elementor-tab-title a { color: var(--text); }
body.cv9-pagina .elementor-accordion .elementor-tab-content {
  background: none; border: 0; padding: 0 0 22px; color: var(--text-mute);
}

/* ═══ classes que só existem na versão WordPress ═══
   O widget de imagem envolve a <img> numa div, então a classe cai no invólucro.
   Estas regras devolvem à imagem o que o estático aplicava direto nela. */
body.cv9-pagina .manifesto__photo {
  position: absolute; left: -4%; top: 0; height: 100%; width: 48%; z-index: 0;
}
body.cv9-pagina .manifesto__photo img {
  height: 100%; object-fit: cover; object-position: 55% 25%; opacity: .5;
  filter: grayscale(.4) contrast(1.06);
  mask-image: linear-gradient(90deg, #000 42%, transparent 92%), linear-gradient(#0000 0%, #000 14%, #000 82%, #0000 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 92%), linear-gradient(#0000 0%, #000 14%, #000 82%, #0000 100%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
body.cv9-pagina .final__photo { position: absolute; inset: 0; z-index: 0; }
body.cv9-pagina .final__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  opacity: .55; filter: grayscale(1) brightness(.28) contrast(1.25);
  mask-image: linear-gradient(#0000 0%, #000 22%, #000 74%, #0000 100%);
  -webkit-mask-image: linear-gradient(#0000 0%, #000 22%, #000 74%, #0000 100%);
}
body.cv9-pagina .career__img { position: absolute; inset: 0; z-index: 0; }
body.cv9-pagina .career__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: grayscale(.4) contrast(1.06) brightness(.88);
}
body.cv9-pagina .career__name, body.cv9-pagina .career__roles { position: relative; z-index: 1; }
body.cv9-pagina .card-aprovado__foto img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; }
body.cv9-pagina .card-prof__foto { position: absolute; inset: 0; }
body.cv9-pagina .card-prof__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
body.cv9-pagina .mock--retrato img { aspect-ratio: 4/5; }
body.cv9-pagina .video-card--retrato { aspect-ratio: 3/4; }

/* As grades substituem os carrosséis do estático: o cliente adiciona um card
   duplicando o anterior, e nada depende do Elementor Pro. */
body.cv9-pagina .grade { display: grid; gap: 18px; margin-top: 40px; }
body.cv9-pagina .grade--aprovados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.cv9-pagina .grade--professores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  body.cv9-pagina .grade--aprovados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.cv9-pagina .grade--professores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.cv9-pagina .grade--aprovados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cv9-pagina .grade--professores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Detalhes que no estático eram marcação e aqui viram classe. */
body.cv9-pagina .eyebrow--centro { justify-content: center; }
body.cv9-pagina .guarantee__num { font-size: 42px; font-weight: 400; line-height: 1; }
body.cv9-pagina .guarantee__dias { font-size: 12px; letter-spacing: .16em; color: var(--text-mute); }
body.cv9-pagina .fecho-carreiras { margin-top: 56px; max-width: 24ch; margin-inline: auto; }
body.cv9-pagina .fecho-profs { margin-top: 44px; max-width: 36ch; }
body.cv9-pagina .stack--oferta { margin-bottom: 56px; }
body.cv9-pagina .stack--faq { margin-bottom: 48px; }


/* A tarja escura dos cards de carreira era uma <div> vazia no estático. */
body.cv9-pagina .career::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(159,176,152,.05) 0 1px, transparent 1px 11px),
    linear-gradient(to top, rgba(8,9,8,.97) 26%, rgba(8,9,8,.62) 58%, rgba(8,9,8,.3));
}
/* A imagem precisa de altura em toda a cadeia do widget para preencher o card. */
body.cv9-pagina .career__img,
body.cv9-pagina .career__img .elementor-widget-container,
body.cv9-pagina .career__img figure { height: 100%; }
body.cv9-pagina .card-prof__foto,
body.cv9-pagina .card-prof__foto .elementor-widget-container,
body.cv9-pagina .card-prof__foto figure { height: 100%; }

/* O X das negativas era um SVG inline. */
body.cv9-pagina .not { position: relative; padding-left: 30px; }
body.cv9-pagina .not::before {
  content: '×'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--green); font-size: 17px; line-height: 1;
}

/* Sem as setas do carrossel, o cabeçalho das grades é uma pilha simples. */
body.cv9-pagina .head-grade { display: block; margin-bottom: 8px; }
body.cv9-pagina .head-grade .h2 { margin-top: 16px; }
body.cv9-pagina .head-grade .lead { margin-top: 18px; }


/* mesma cadeia de altura das carreiras, para as fotos de fundo preencherem */
body.cv9-pagina .final__photo .elementor-widget-container,
body.cv9-pagina .final__photo figure,
body.cv9-pagina .manifesto__photo .elementor-widget-container,
body.cv9-pagina .manifesto__photo figure { height: 100%; }

/* a seção final é centralizada; o align-self dos botões a puxava para a esquerda */
body.cv9-pagina .final .elementor-widget-button,
body.cv9-pagina .center .elementor-widget-button { align-self: center; }

/* a tarja rolante é uma fila, não uma pilha — a caixa do Elementor nasce em coluna */
body.cv9-pagina .tarjeta__track { --flex-direction: row; --flex-wrap: nowrap; }
body.cv9-pagina .tarjeta__item { flex: none; }

/* ═══ correções pedidas em 19/09/2026 ═══ */

/* Fundo e links perdiam para o kit global do cliente por especificidade.
   Ficam aqui para sobreviver a uma regravação da página. */
/* O Elementor escreve `body.elementor-page-<id>:not(...)` para a configuração de
   fundo da página — especificidade 0,2,1, que ganhava do nosso `body.cv9-pagina`.
   Empatando em 0,2,1 e carregando depois, o plugin volta a mandar no fundo. */
body.cv9-pagina.elementor-page { background: var(--bg); }
/* O kit global do cliente pinta todo link de laranja com `.elementor-kit-4 a`
   (0,1,1). Isso alcanca a marca e o botao do cabecalho, que sao ancoras de
   verdade -- os botoes do Elementor nao, porque ali a classe .btn fica na caixa
   do widget e nao na ancora. Herdar resolve a marca e o menu. */
body.cv9-pagina a { color: inherit; }
body.cv9-pagina a:hover { color: inherit; }
/* Mas heranca deixaria o texto do botao branco sobre o verde claro. Com a
   classe no seletor (0,3,1) o botao volta a mandar na propria cor. */
body.cv9-pagina a.btn--primary { color: #0A0C0A; }
body.cv9-pagina a.btn--ghost { color: var(--text); }

/* O eyebrow vira item de uma caixa flex e passa a ocupar a linha inteira,
   perdendo o inline-flex que o mantinha junto do texto. */
body.cv9-pagina .eyebrow { display: inline-flex; width: auto; align-self: flex-start; }
body.cv9-pagina .center .eyebrow,
body.cv9-pagina .center.stack .eyebrow,
body.cv9-pagina .eyebrow--centro { align-self: center; }

/* O Elementor usa o ::before das caixas para a sobreposição de fundo e o deixa
   absoluto — o que jogava o número do passo por cima do título. */
body.cv9-pagina .step::before {
  position: static; inset: auto; width: auto; height: auto;
}

/* Na caixa de preço o botão ocupa a largura toda (como no estático). A regra
   geral de align-self dos botões o empurrava para a esquerda: sobravam 66px de
   um lado e 426px do outro. */
body.cv9-pagina .offer__box .elementor-widget-button {
  align-self: stretch; width: 100%;
}
body.cv9-pagina .offer__box .elementor-widget-button .elementor-button-wrapper { display: block; }
body.cv9-pagina .offer__box .btn { width: 100%; }