/* ═══════════════════════════════════════════════════════════════════════════
   Páginas de campanha no vocabulário do redesenho

   Carregado SÓ pelas páginas listadas em `resources/views/site/page.php`
   ($paginasV2). Todo seletor começa em `.lp-v2`, a classe que só essas
   páginas imprimem — nada aqui alcança a home nem as outras 22 páginas do
   construtor, mesmo que o arquivo acabe no cache de alguém.

   Faz duas coisas:
   1. desenha o hero da LP (`blocks_lp/hero.php`);
   2. harmoniza os blocos que AINDA não têm versão nova (`text`, `form`) com o
      resto da página — só aparência, sem tocar no HTML nem no JS deles. O
      formulário em especial tem 500 linhas de lógica de lead; aqui ele não é
      reescrito, só vestido.

   As variáveis (--ouro, --tinta, --linha…) vêm de `.hv2` em home_v2.css, que
   esta página também carrega, e já trocam sozinhas no tema claro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────
   Duas colunas: a promessa à esquerda, a arte à direita. Sem cartão em volta
   e sem gradiente por baixo de cada pedaço — o que separa o hero do resto da
   página é o espaço e o fio da próxima seção. */
.lp-v2 .lph {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
}

/* Clarão dourado atrás do texto. Fica no ::before e não no fundo da seção
   para não criar contexto de empilhamento que capture a imagem ao lado. */
.lp-v2 .lph::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 18% 0%, rgba(226,183,114,.10), transparent 70%);
}

/* ── Imagem ao fundo ───────────────────────────────────────────────────────
   Desfoque de 9px. Testado no minicurso: 16px vira mancha e a pessoa não
   reconhece o que está vendo; 9px lê como ambiente sem disputar com o texto.
   O `scale(1.06)` existe porque o desfoque come as bordas da imagem e
   deixaria uma faixa translúcida nos quatro cantos. */
.lp-v2 .lph.is-fundo { padding: clamp(84px, 11vw, 150px) 0 clamp(72px, 9vw, 124px); }
.lp-v2 .lph-fundo { position: absolute; inset: 0; overflow: hidden; }
.lp-v2 .lph-fundo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* A foto é noturna e já nasce escura; sob o véu ela sumia por completo e o
     fundo virava um cinza chapado. O brilho extra devolve o desenho da cena
     sem clarear a ponto de brigar com o texto. */
  filter: blur(9px) saturate(1.1) brightness(1.3);
  transform: scale(1.06);
}
/* Véu de legibilidade: mais fechado onde o texto começa, abrindo para a
   direita, para a imagem ainda aparecer. Sem ele o título branco encosta nas
   partes claras da foto e some em pedaços. */
.lp-v2 .lph-fundo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,9,12,.86) 0%, rgba(8,9,12,.66) 46%, rgba(8,9,12,.26) 100%),
    linear-gradient(180deg, rgba(8,9,12,.5) 0%, transparent 32%, rgba(8,9,12,.6) 100%);
}
/* Com fundo escuro, o clarão dourado do modo sem imagem só sujaria. */
.lp-v2 .lph.is-fundo::before { display: none; }

/* ⚠️ A hero com fundo é ESCURA NOS DOIS TEMAS — é uma superfície própria,
   como a tarja do minicurso, não a página. Por isso as variáveis são
   redeclaradas aqui e repetidas dentro de `.light-mode` logo abaixo: sem
   isso, no tema claro o texto viraria tinta escura sobre a foto escura. */
.lp-v2 .lph.is-fundo,
.light-mode .lp-v2 .lph.is-fundo {
  --tinta: #f4f6fa;
  --tinta-media: #c6ccd8;
  --tinta-fraca: #9aa3b2;
  --linha: rgba(255,255,255,.16);
  --linha-forte: rgba(255,255,255,.26);
  --ouro: #e2b772;
  --ouro-claro: #f0d2a0;
}

.lp-v2 .lph-grade {
  position: relative;
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
/* Uma coluna só: a imagem saiu do lado e devolveu a largura ao texto. Mesmo
   assim o texto não ocupa os 1240px — linha de 100 caracteres não se lê. */
@media (min-width: 900px) {
  .lp-v2 .lph-grade { grid-template-columns: minmax(0, 820px); }
}

.lp-v2 .lph-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* O selo da parceria é o único pedaço com moldura no hero — ele nomeia duas
   marcas, e sem a caixa ficaria indistinguível do sobretítulo ao lado. */
.lp-v2 .lph-badge {
  display: inline-flex; align-items: center;
  padding: 6px 13px;
  border: 1px solid rgba(226,183,114,.32); border-radius: 999px;
  background: rgba(226,183,114,.08);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro-claro);
}

.lp-v2 .lph-h1 {
  margin: 22px 0 0;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.04;
  color: var(--tinta);
}
/* Mesmo tratamento do <em> no resto do redesenho: itálico dourado, sem
   sublinhado nem peso extra — o destaque é a cor, não o grito. */
.lp-v2 .lph-h1 em { font-style: italic; font-weight: 700; color: var(--ouro); }
.lp-v2 .lph-h1 strong { font-weight: 800; color: var(--ouro-claro); }

.lp-v2 .lph-lede {
  margin: 20px 0 0; max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.68; color: var(--tinta-media);
}

.lp-v2 .lph-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }

/* Provas: um fio dourado curto ABRE cada item, em vez de um separador entre
   eles. Separador entre itens parece certo até a lista quebrar de linha — aí
   o fio aparece sozinho no começo da linha de baixo, separando o item da
   margem. Marcador de abertura quebra onde quiser e continua lendo. */
.lp-v2 .lph-provas {
  display: flex; flex-wrap: wrap; gap: 11px 26px;
  margin: clamp(30px, 3.5vw, 44px) 0 0; padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--linha);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.lp-v2 .lph-provas li { display: flex; align-items: center; gap: 10px; }
.lp-v2 .lph-provas li::before {
  content: ''; flex: none; width: 14px; height: 1px; background: var(--ouro); opacity: .55;
}
@media (max-width: 560px) {
  .lp-v2 .lph-provas { flex-direction: column; gap: 9px; }
}

/* ── Blocos ainda sem versão nova ──────────────────────────────────────────
   `text` e `form` continuam vindo de `site/blocks/`. Aqui eles só recebem a
   tipografia e as cores da página; a marcação é a de sempre. */

/* O bloco `text` fixa `text-white` no título e usa a escala do Tailwind. */
.lp-v2 .prose-invert { color: var(--tinta-media); }
.lp-v2 .prose-invert strong { color: var(--tinta); }
.lp-v2 section > div > h2 { letter-spacing: -.03em; }

/* Formulário: o cartão ganha o mesmo raio e fio das outras superfícies, e o
   botão de envio o mesmo dourado dos botões do redesenho. Nada além de pele —
   nenhum seletor aqui mexe em campo, rótulo, obrigatoriedade ou envio. */
.lp-v2 .pgf-card { border-radius: 20px; }
.lp-v2 .pgf-card-h { letter-spacing: -.02em; }

/* ── Tema claro ────────────────────────────────────────────────────────────
   `.light-mode .hv2` (em home_v2.css) já troca as variáveis; o que precisa de
   regra própria é o que não as usa. */
.light-mode .lp-v2 .lph::before {
  background: radial-gradient(70% 55% at 18% 0%, rgba(138,106,51,.10), transparent 70%);
}
/* `:not(.is-fundo)` porque a hero com imagem continua escura no tema claro —
   o bronze do modo claro sumiria sobre a foto. */
.light-mode .lp-v2 .lph:not(.is-fundo) .lph-badge {
  border-color: rgba(138,106,51,.34);
  background: rgba(138,106,51,.07);
  color: #6f5426;
}
/* O título do bloco `text` vem com `text-white` do Tailwind, que no tema
   claro some no fundo. É o preço de o bloco ainda não ter versão nova. */
.light-mode .lp-v2 .text-white { color: var(--tinta) !important; }

/* ── Hero institucional: sem imagem e sem botões ──────────────────────────
   O respiro do hero (104px em cima, 88px embaixo) foi calibrado para a LP de
   campanha, que tem selo, manchete, lede, DOIS botões e a lista de provas.
   Uma página institucional como /compliance traz só sobretítulo, título e
   três linhas de texto — e aí o mesmo respiro vira buraco: medido, 179px de
   nada entre o fim do texto e o começo da seção seguinte.

   `:not(.is-fundo)` restringe isto às heroes SEM imagem. A de campanha tem
   `.is-fundo` e não é tocada — o espaço lá está ocupado por conteúdo. */
.lp-v2 .lph:not(.is-fundo):not(:has(.lph-acoes)) {
  padding-bottom: clamp(20px, 2.5vw, 34px);
}
.lp-v2 .lph:not(.is-fundo):not(:has(.lph-acoes)) + .hv2-sec {
  padding-top: clamp(36px, 4.5vw, 60px);
}