/* ============================================================================
   AS DUAS PÁGINAS QUE FALTAVAM NA IDENTIDADE v5 — 12/09/2026
   /produto/<slug>  (produto.html)  e  /agentes  (agentes.html)

   O Pedro: *"as páginas de produto e de agentes ainda usam o desenho antigo"*.

   A estrutura delas NÃO mudou — só a roupa. O grid próprio de cada uma continua
   no <style> da página; aqui a gente só troca cor, fonte, botão e cartão para a
   língua do v5. A única colisão real era a classe `.hero`, que existe nos dois
   mundos: no HTML dessas duas páginas ela virou `.topo-pag`.

   Ordem: lucrei.css → v5.css → v5-site.css → ESTE arquivo.
   ========================================================================== */

body.v5-produto, body.v5-agentes { background: var(--paper); color: var(--text); }

/* ---------------------------------------------------------------- TIPOGRAFIA */
/* o v5 traz a Inter e um aperto maior nos títulos */
/* só o aperto do v5 — a COR fica por conta de quem já pintava o título.
   Se a gente pintar aqui, esta folha (que carrega depois do <style> da página)
   ganha o empate e mata coisas como `.ponte h3{color:#fff}`: título branco
   vira preto dentro do bloco escuro. */
body.v5-produto h1, body.v5-agentes h1,
body.v5-produto h2, body.v5-agentes h2,
body.v5-produto h3, body.v5-agentes h3 { letter-spacing: -.04em; }
body.v5-produto .topo-pag h1, body.v5-agentes .topo-pag h1 {
  font-size: clamp(32px, 4vw, 50px); line-height: 1.06;
}
body.v5-produto .mudo, body.v5-agentes .mudo,
body.v5-produto .peq, body.v5-agentes .peq { color: var(--muted); }

/* o "olho" (rótulo acima do título) fala a língua do kicker do v5 */
body.v5-produto .olho, body.v5-agentes .olho {
  display: inline-block; color: var(--blue); background: none; padding: 0;
  font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ BOTÕES */
body.v5-produto .btn, body.v5-agentes .btn {
  border-radius: 13px; font-weight: 780; box-shadow: none;
  background: var(--blue); color: #fff;
}
body.v5-produto .btn:hover, body.v5-agentes .btn:hover {
  background: #49E8C8; transform: none; box-shadow: 0 10px 24px rgba(110,237,212,.24);
}
/* o botão principal do site v5 é preto; o lima fica para a chamada final */
body.v5-produto .btn.verde, body.v5-agentes .btn.verde {
  background: var(--ink); color: #fff; box-shadow: none;
}
body.v5-produto .btn.verde:hover, body.v5-agentes .btn.verde:hover {
  background: #1B2C33; color: #fff; box-shadow: 0 10px 24px rgba(9,11,18,.22);
}
body.v5-produto .btn.fantasma, body.v5-agentes .btn.fantasma {
  background: #fff; color: var(--ink); border: 1px solid rgba(9,11,18,.14);
}
body.v5-produto .btn.fantasma:hover, body.v5-agentes .btn.fantasma:hover {
  background: #fff; border-color: var(--ink);
}
body.v5-produto .btn.claro, body.v5-agentes .btn.claro {
  background: #EFFDFA; color: #35D6B6;
}
body.v5-produto .btn.grande, body.v5-agentes .btn.grande { border-radius: 14px; }

/* -------------------------------------------------------- CARTÕES E SEÇÕES */
body.v5-produto .card, body.v5-agentes .card {
  background: #fff; border: 1px solid rgba(9,11,18,.1);
  border-radius: 20px; box-shadow: 0 10px 30px rgba(9,11,18,.06);
}
body.v5-produto .card.suave, body.v5-agentes .card.suave {
  background: #F7F8FB; border-color: rgba(9,11,18,.07); box-shadow: none;
}
body.v5-produto .secao.clara, body.v5-agentes .secao.clara { background: #fff; }
body.v5-produto .secao.escura, body.v5-agentes .secao.escura { background: var(--ink); color: #CDD3E4; }
body.v5-produto .secao.escura .card, body.v5-agentes .secao.escura .card {
  background: #142126; border-color: #22373F; box-shadow: none; color: #CDD3E4;
}
body.v5-produto .secao.escura h1, body.v5-agentes .secao.escura h1,
body.v5-produto .secao.escura h2, body.v5-agentes .secao.escura h2,
body.v5-produto .secao.escura h3, body.v5-agentes .secao.escura h3 { color: #fff; }
body.v5-produto .secao.escura .olho, body.v5-agentes .secao.escura .olho { color: var(--lime); }

/* dentro dos blocos escuros desta página o botão principal é lima, não preto */
body.v5-agentes .ponte .btn.verde,
body.v5-agentes .como-forte .btn.verde,
body.v5-produto .secao.escura .btn.verde,
body.v5-agentes .secao.escura .btn.verde {
  background: var(--lime); color: var(--ink);
}
body.v5-agentes .ponte .btn.verde:hover,
body.v5-agentes .como-forte .btn.verde:hover,
body.v5-produto .secao.escura .btn.verde:hover,
body.v5-agentes .secao.escura .btn.verde:hover { background: #73EED5; color: var(--ink); }

/* rótulo (o "olho") dentro de qualquer bloco escuro destas páginas */
body.v5-agentes .ponte .olho,
body.v5-agentes .como-forte .olho { color: var(--lime); }

/* o selo ao lado da trilha */
body.v5-produto .selo, body.v5-agentes .selo {
  border-radius: 999px; font-weight: 800; font-size: 11px; letter-spacing: .06em;
  background: #EFFDFA; color: #35D6B6; border: 0; padding: 5px 10px;
  text-transform: uppercase;
  /* dentro dos cartões de plano o pai é um grid/flex em coluna: sem isto o
     selo estica de ponta a ponta e vira uma barra roxa */
  width: fit-content; justify-self: start; align-self: start;
}
body.v5-produto .selo.verde, body.v5-agentes .selo.verde { background: #E9F8F5; color: #167F6A; }

/* o preço em destaque no topo */
body.v5-produto .linha-preco .v { letter-spacing: -.04em; color: var(--ink); }
body.v5-produto .linha-preco .v.gratis { color: #167F6A; }

/* a lista de "o que você recebe" com o tique do v5 */
body.v5-produto .lista li, body.v5-agentes .lista li { color: #314F5A; }

/* o plano em destaque usa o roxo do v5 */
body.v5-produto .plano.destaque {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(110,237,212,.14), 0 14px 40px rgba(9,11,18,.1);
}

/* o passo a passo numerado */
body.v5-produto .proximo, body.v5-agentes .proximo {
  background: #fff; border-color: rgba(9,11,18,.1); border-radius: 22px;
}
body.v5-produto .proximo .n, body.v5-agentes .proximo .n {
  background: var(--lime); color: var(--ink); font-family: inherit; font-weight: 900;
}

/* ---------------------------------------------- a faixa escura do "como usar"
   (essa já foi desenhada na língua do v5 na rodada anterior; aqui só garante
   que os títulos dela não herdem a tinta clara) */
body.v5-agentes .como-forte h2, body.v5-agentes .como-forte b { color: #fff; }

/* ------------------------------------------------------------------- FAQ */
body.v5-produto .faq, body.v5-agentes .faq {
  border-radius: 14px; border: 1px solid rgba(9,11,18,.1); background: #fff;
}
body.v5-produto .faq summary, body.v5-agentes .faq summary { color: var(--ink); font-weight: 750; }