/* Sistema para BPO financeiro (/sistema-para-bpo-financeiro).
 *
 * Camada de cima. O esqueleto vem de /site/club/lp.css, que a rota carrega
 * antes desta: hero, seções, cartão escuro (.club-cycle), duo, ciclo, faixa de
 * conversa e formulário já vêm de lá.
 *
 * DUAS REGRAS QUE A v1 QUEBROU, e que é o que fazia a página parecer de outro
 * site:
 *
 *   1. O RITMO É ALTERNADO. Claro e escuro se revezam, como na /advisor. O
 *      escuro não é faixa de fundo: é cartão arredondado flutuando sobre o
 *      papel (.club-cycle, com margin 12px e radius 32px). Quatro seções
 *      claras seguidas achatam a página inteira.
 *
 *   2. O h2 É O DO ESQUELETO no desenho: peso 400, entreletra -.05em, e o
 *      <span> dentro dele em teal. Escrever h2 em peso 700, como a v1 fazia,
 *      faz a página falar outra língua. O TAMANHO é um só para toda seção,
 *      um degrau abaixo do h1 da hero (ver "Títulos de seção"). Não invente
 *      escala por seção.
 */

/* ── Âncoras sob o menu fixo ──────────────────────────────────────────── */
/* O menu da /club é fixo e nenhuma folha do esqueleto trata isso, porque as
   LPs de lá têm poucos links internos. Esta página tem quatro, e sem a margem
   o título da seção some atrás do menu em todo clique. */
.bpo-page [id] { scroll-margin-top: clamp(92px, 9vw, 116px); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* O .club-hero-grid do esqueleto é coluna única centrada. A prova entra abaixo
   da copy, como a /lp-crm-com-ia faz com o vídeo. */
.bpo-hero .club-hero-copy { max-width: 900px; margin-inline: auto; }
.bpo-hero h1 { font-size: clamp(40px, 4.4vw, 64px); }
.bpo-hero-line { display: block; color: #fff; }
.bpo-hero-accent { color: #9ddbd8; }
.bpo-hero .club-hero-lede { max-width: 640px; }

/* ── Títulos de seção ─────────────────────────────────────────────────── */
/* Um tamanho só para todo h2, um degrau abaixo do h1 da hero: a hero é o maior
   título da página. Vence os tamanhos que o esqueleto e as seções abaixo dão
   a cada h2, em todas as larguras. */
.bpo-page section:not(.bpo-hero) h2 { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.08; }

/* Dois números, não três cartões: a prova é da empresa, e cartão demais no
   hero rouba o peso da headline. */
.bpo-hero-prova {
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(24px, 4vw, 54px); flex-wrap: wrap;
  margin: clamp(40px, 4.5vw, 62px) auto 0;
}
.bpo-hero-prova p {
  display: grid; gap: 6px; margin: 0; max-width: 260px; text-align: left;
}
.bpo-hero-prova strong {
  font: 400 clamp(38px, 4vw, 54px)/1 "Manrope", sans-serif;
  letter-spacing: -.04em; color: #9ddbd8; font-variant-numeric: tabular-nums;
}
.bpo-hero-prova span { font: 400 15px/1.55 "Manrope", sans-serif; color: rgba(255,255,255,.66); text-wrap: pretty; }
.bpo-prova-risco { width: 1px; align-self: stretch; background: rgba(255,255,255,.16); }

/* ── A separação dos dois públicos ────────────────────────────────────── */
/* Sem padding próprio: herda o do .club-section, o mesmo respiro das outras
   seções claras. */
.bpo-separa-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 6vw, 86px); align-items: center;
}
.bpo-separa-grid h2 {
  margin: 0; color: var(--club-ink);
  font: 400 clamp(36px, 3.6vw, 56px)/1.05 "Manrope", sans-serif;
  letter-spacing: -.05em; text-wrap: balance;
}
.bpo-separa-grid h2 span { color: var(--club-teal-ink); }
.bpo-separa-copy p { margin: 0 0 16px; color: var(--club-copy); font: 400 18px/1.7 "Manrope", sans-serif; text-wrap: pretty; }
.bpo-separa-copy p:last-child { margin-bottom: 0; }
.bpo-separa-saida {
  padding-top: 18px; border-top: 1px solid rgba(11,21,48,.1);
  font-size: 17px !important;
}
.bpo-separa-saida a { color: var(--club-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(11,21,48,.28); }
.bpo-separa-saida a:hover { text-decoration-color: var(--club-ink); }

/* ── Cabeça das seções escuras ────────────────────────────────────────── */
/* O .club-cycle traz o cartão escuro e o h2 certo; só falta a lede abaixo. */
.bpo-dores-head { max-width: 980px; }
.bpo-dores-head h2 { margin: 0; }
.bpo-dores-head > p { margin: 20px 0 0; max-width: 62ch; color: #9eacc3; font: 400 clamp(17px, 1.4vw, 20px)/1.65 "Manrope", sans-serif; text-wrap: pretty; }

/* ── Dores, dentro do cartão escuro ───────────────────────────────────── */
.bpo-dores-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(44px, 5vw, 68px);
}
.bpo-dor { display: grid; align-content: start; gap: 12px; }
.bpo-dor i {
  display: block; width: 26px; height: 26px; background: #9ddbd8;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.bpo-dor h3 { margin: 4px 0 0; color: #fff; font: 500 19px/1.3 "Manrope", sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.bpo-dor p { margin: 0; color: #9eacc3; font: 400 15.5px/1.65 "Manrope", sans-serif; text-wrap: pretty; }

/* ── Os dois lados ────────────────────────────────────────────────────── */
.bpo-lados-head { margin-bottom: clamp(40px, 5vw, 62px); }
.bpo-lados-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 34px); }
.bpo-lado {
  display: grid; align-content: start; gap: 14px;
  padding: clamp(28px, 3.2vw, 44px); border-radius: 26px;
  background: #fff; border: 1px solid rgba(11,21,48,.08);
  box-shadow: 0 24px 48px -36px rgba(11,21,48,.4);
}
/* O traço no topo separa os dois lados sem precisar de rótulo colorido: teal
   para a casa do escritório, azul para a operação do cliente. */
.bpo-lado { position: relative; overflow: hidden; }
.bpo-lado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.bpo-lado-casa::before { background: #5bc0be; }
.bpo-lado-cliente::before { background: #3972fd; }
/* 13px, que é o piso do .club-kicker do esqueleto. Não inventar um menor. */
.bpo-lado-rotulo { margin: 0; font: 600 13px/1.5 "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--club-teal-ink); }
.bpo-lado-cliente .bpo-lado-rotulo { color: #3972fd; }
.bpo-lado h3 { margin: 0; color: var(--club-ink); font: 400 clamp(23px, 2.1vw, 30px)/1.2 "Manrope", sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.bpo-lado-lede { margin: 0; color: var(--club-copy); font: 400 17px/1.7 "Manrope", sans-serif; text-wrap: pretty; }

.bpo-apps { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.bpo-apps li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 14px 0; border-top: 1px solid rgba(11,21,48,.07);
}
/* Altura fixa e largura automática, como o .mm-ic do site.css. Travar 28x28
   esmaga o desenho: o viewBox destes ícones é 1049x1000, e o do tasks é
   208x208. Por isso também não vale um aspect-ratio único. Quem reserva o
   espaço antes de a imagem chegar é a coluna de 30px da grade. */
.bpo-apps li img { height: 28px; width: auto; max-width: 30px; display: block; margin-top: 1px; justify-self: center; }
.bpo-apps strong { display: block; color: var(--club-ink); font: 600 16px/1.4 "Manrope", sans-serif; }
.bpo-apps span { display: block; margin-top: 3px; color: var(--club-copy); font: 400 15px/1.6 "Manrope", sans-serif; text-wrap: pretty; }
.bpo-lado-nota { margin: 6px 0 0; color: #7b8699; font: 400 14px/1.6 "Manrope", sans-serif; text-wrap: pretty; }

/* ── Capacidades, dentro do cartão escuro ─────────────────────────────── */
/* Lista curta, e não cartões: a página já tem cartão demais, e uma linha por
   item deixa a dobra baixa. Título centrado no topo, como nas seções claras,
   e a lista centrada abaixo dele. O destaque vem do ícone na pastilha teal
   (o mesmo desenho do número do .club-cycle-step) e do véu teal na linha sob
   o mouse. Abaixo de 860px o texto desce para baixo do nome. */
.bpo-operacao-grid { display: grid; justify-items: center; gap: clamp(32px, 4vw, 52px); }
.bpo-operacao .bpo-dores-head { text-align: center; }
/* A lista tem a largura do conteúdo e fica centrada: as duas colunas são do
   <dl> (auto, sem esticar) e cada linha herda as duas por subgrid, então
   nome e texto alinham entre as linhas sem vão no meio. */
.bpo-cap-lista {
  width: 100%; margin: 0; display: grid; grid-template-columns: auto auto;
  justify-content: center; column-gap: 56px;
}
.bpo-cap-lista > div {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.bpo-cap-lista > div:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.bpo-cap-lista > div::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(91,192,190,.14), rgba(91,192,190,0) 75%);
  transition: opacity 220ms cubic-bezier(.22,1,.36,1);
}
.bpo-cap-lista > div:hover::before { opacity: 1; }
.bpo-cap-lista dt, .bpo-cap-lista dd { position: relative; }
.bpo-cap-lista dt {
  display: flex; align-items: center; gap: 16px;
  color: #fff; font: 500 17px/1.4 "Manrope", sans-serif; letter-spacing: -.015em;
}
.bpo-cap-lista dt i {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: rgba(91,192,190,.14);
}
.bpo-cap-lista dt i::before {
  content: ""; width: 20px; height: 20px; background: #9ddbd8;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.bpo-cap-lista dd { margin: 0; color: #9eacc3; font: 400 15px/1.6 "Manrope", sans-serif; text-wrap: pretty; }

/* ── A conciliação ────────────────────────────────────────────────────── */
.bpo-conc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 70px); align-items: start;
  margin-top: clamp(44px, 5vw, 68px);
}
.bpo-duo-copy { display: grid; gap: clamp(26px, 3vw, 38px); align-content: start; }
.bpo-duo-copy article { display: grid; gap: 9px; }
.bpo-duo-copy h3 { margin: 0; color: var(--club-ink); font: 500 21px/1.3 "Manrope", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.bpo-duo-copy p { margin: 0; color: var(--club-copy); font: 400 16.5px/1.7 "Manrope", sans-serif; text-wrap: pretty; }

.bpo-fila {
  display: grid; gap: 12px; padding: clamp(20px, 2.2vw, 26px);
  border-radius: 24px; background: linear-gradient(145deg, #06102a, #0b1c44);
  box-shadow: 0 30px 60px -40px rgba(6,16,42,.9);
}
.bpo-fila-cab { margin: 0; font: 600 13px/1.5 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bpo-linha { display: grid; gap: 6px; padding: 15px 17px; border-radius: 14px; background: rgba(255,255,255,.05); border-left: 3px solid rgba(255,255,255,.2); }
.bpo-linha-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bpo-linha-desc { font: 600 14px/1.4 "Manrope", sans-serif; color: #fff; letter-spacing: .01em; }
.bpo-linha-v { font: 600 14px/1.4 "Manrope", sans-serif; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpo-linha-tag { margin: 0; font: 400 14px/1.5 "Manrope", sans-serif; color: rgba(255,255,255,.58); }
.bpo-linha-ok, .bpo-linha-ia, .bpo-linha-rev { margin: 0; font: 600 14px/1.5 "Manrope", sans-serif; }
/* Verde para o que fechou sozinho, teal para o que a IA sustentou, âmbar para
   o que ainda é decisão de gente: a cor conta em que pilha a linha caiu. */
.bpo-linha.is-ok { border-left-color: #34d399; }
.bpo-linha-ok { color: #34d399; }
.bpo-linha.is-ia { border-left-color: #5bc0be; }
.bpo-linha-ia { color: #9ddbd8; }
.bpo-linha.is-rev { border-left-color: #fbbf24; }
.bpo-linha-rev { color: #fbbf24; }
/* 13px aqui e no cabeçalho, igual ao .club-kicker do esqueleto: é cromo da
   tela de exemplo, não texto de leitura. O que se lê está em 14px. */
.bpo-fila-nota { margin: 0; font: 400 13px/1.5 "Manrope", sans-serif; color: rgba(255,255,255,.4); text-align: right; }

/* ── Entrada ──────────────────────────────────────────────────────────── */
.bpo-cycle-cta { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* ── A prova, com foto ────────────────────────────────────────────────── */
.bpo-case-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
.bpo-case-copy h2 {
  margin: 0 0 24px; color: var(--club-ink);
  font: 400 clamp(36px, 3.6vw, 56px)/1.05 "Manrope", sans-serif;
  letter-spacing: -.05em; text-wrap: balance;
}
.bpo-case-copy h2 span { color: var(--club-teal-ink); }
.bpo-case-copy p { margin: 0 0 16px; color: var(--club-copy); font: 400 17.5px/1.7 "Manrope", sans-serif; text-wrap: pretty; }
.bpo-case-copy p:last-child { margin-bottom: 0; }
.bpo-case-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bpo-case-fotos figure { margin: 0; }
/* A segunda foto desce um pouco: duas imagens no mesmo eixo viram colagem de
   banco de imagem, e o desencontro dá ritmo sem custo nenhum. */
.bpo-case-fotos figure:last-child { margin-top: clamp(24px, 4vw, 52px); }
.bpo-case-fotos img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; display: block; }

/* ── Conversa ─────────────────────────────────────────────────────────── */
/* Cartão escuro, no desenho do .club-cycle. Clara, logo depois do case (que
   também é claro), a conversa colava nele e as duas viravam uma dobra só. O
   escuro devolve a alternância e destaca o formulário.
   Texto centrado em cima e formulário embaixo, e não lado a lado: o
   formulário é mais alto que o texto e, lado a lado, sobrava um vão vazio
   sob o texto. No desktop os campos vão em duas colunas e o cartão fica
   baixo. */
.bpo-page .club-conversation {
  margin: 0 12px; padding: clamp(72px, 8vw, 120px) 0; border-radius: 32px;
  color: #fff; background: linear-gradient(145deg, #06102a, #0b1c44);
}
.bpo-page .club-conversation-card {
  grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(36px, 4vw, 52px);
}
.bpo-page .club-conversation-copy { max-width: 720px; text-align: center; }
.bpo-page .club-conversation-copy h2 { max-width: none; color: #fff; }
.bpo-page .club-conversation-copy > p { margin-inline: auto; color: #9eacc3; }
.bpo-page .club-conversation .club-fit-note {
  justify-content: center; color: rgba(255,255,255,.66); border-top-color: rgba(255,255,255,.12);
}
.bpo-page .club-form-card { width: 100%; max-width: 760px; }
.bpo-page .club-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.bpo-page .club-form > :not(.club-form-campo), .bpo-page .club-form-campo:has(select) { grid-column: 1 / -1; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.bpo-faq { padding-block: clamp(56px, 7vw, 100px); background: #eef2f4; }
.bpo-faq-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.bpo-faq-grid h2 {
  margin: 0; color: var(--club-ink);
  font: 400 clamp(34px, 3.4vw, 52px)/1.06 "Manrope", sans-serif;
  letter-spacing: -.05em; text-wrap: balance;
}
.bpo-faq-grid h2 span { color: var(--club-teal-ink); }
.bpo-faq-list { display: grid; gap: 10px; }
.bpo-faq-list details { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid rgba(11,21,48,.07); }
.bpo-faq-list summary { cursor: pointer; display: flex; justify-content: space-between; align-items: start; gap: 16px; color: var(--club-ink); font: 500 17.5px/1.45 "Manrope", sans-serif; letter-spacing: -.015em; list-style: none; text-wrap: pretty; }
.bpo-faq-list summary::-webkit-details-marker { display: none; }
.bpo-faq-list summary::after {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 4px;
  background: var(--club-teal-ink); transition: transform .22s;
  -webkit-mask: url(/site/icons/ui/chevron-down.svg) center / contain no-repeat;
  mask: url(/site/icons/ui/chevron-down.svg) center / contain no-repeat;
}
.bpo-faq-list details[open] summary::after { transform: rotate(180deg); }
.bpo-faq-list details p { margin: 14px 0 0; color: var(--club-copy); font: 400 16px/1.7 "Manrope", sans-serif; text-wrap: pretty; }
.bpo-faq-list summary:focus-visible { outline: 2px solid var(--club-teal); outline-offset: 4px; border-radius: 6px; }

/* ── CTA fixo no celular ──────────────────────────────────────────────── */
.bpo-mobile-cta { display: none; }

@media (max-width: 1040px) {
  .bpo-separa-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bpo-dores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpo-lados-grid { grid-template-columns: minmax(0, 1fr); }
  .bpo-conc-grid { grid-template-columns: minmax(0, 1fr); }
  .bpo-case-grid { grid-template-columns: minmax(0, 1fr); }
  .bpo-faq-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .bpo-cap-lista { grid-template-columns: minmax(0, 1fr); }
  .bpo-cap-lista > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 12px; }
  .bpo-cap-lista dd { padding-left: 56px; }
}

@media (max-width: 720px) {
  .bpo-dores-grid { grid-template-columns: minmax(0, 1fr); }
  .bpo-page .club-form { grid-template-columns: minmax(0, 1fr); }
  .bpo-page .club-conversation { margin-inline: 6px; padding: 56px 0; border-radius: 24px; }
  .bpo-hero-prova { gap: 22px; }
  .bpo-hero-prova p { max-width: none; }
  .bpo-prova-risco { display: none; }
  .bpo-case-fotos figure:last-child { margin-top: 0; }
  /* O CTA fixo libera o fim da página: sem ele o visitante do celular rola
     dez seções até achar o formulário. O padding de baixo evita que a barra
     cubra a última linha. */
  .bpo-page { padding-bottom: 76px; }
  .bpo-mobile-cta {
    display: block; position: fixed; left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    padding: 15px 20px; border-radius: 999px; text-align: center;
    font: 600 16px/1.2 "Manrope", sans-serif; color: #fff; text-decoration: none;
    background: #11294b; box-shadow: 0 10px 28px -12px rgba(17,41,75,.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bpo-page * { animation: none !important; transition: none !important; }
}