/* ──────────────────────────────────────────────────────────────────────
   Template das landing pages de material gratuito — Me Poupe!
   04/08/2026 · revisão 2 (aproximado do modelo da /materiais/controle-de-gastos/)

   Layout: COLUNA TEXTO / COLUNA MOCKUP / COLUNA FORMULÁRIO + rodapé padrão.

   Este arquivo é o layout; `_form-mp.css` é o formulário. Os dois juntos são
   TUDO que uma LP precisa de CSS — nada de folha por página.

   O desenho é o das LPs que já estão no ar; o código é nosso: sem
   posicionamento absoluto, sem altura fixa, sem copy duplicada por breakpoint
   e sem bloco oculto. As formas geométricas do fundo são CSS (pseudo-elemento),
   não imagem — assim cada página só troca cor, sem novo asset.

   Cada página injeta apenas as suas cores:
     --lp-fundo · --lp-fundo-2 · --lp-texto · --lp-acento · --lp-forma
     --lp-eyebrow-bg · --lp-eyebrow-texto
     --lp-form-topo · --lp-form-topo-texto · --lp-botao · --lp-botao-texto
     --lp-rodape · --lp-rodape-texto
   ────────────────────────────────────────────────────────────────────── */

/* o rodapé vive em _rodape-mp.css — as páginas que mantêm o design antigo
   usam só ele, sem o layout desta folha */
@import url("/materiais/_rodape-mp.css");

:root {
  --lp-fundo: #0d0f14;
  --lp-fundo-2: #17202a;
  --lp-texto: #ffffff;
  --lp-acento: #4ede8a;
  --lp-forma: #4ede8a;
  --lp-eyebrow-bg: #6b73ff;
  --lp-eyebrow-texto: #ffffff;
  --lp-form-topo: #6b73ff;
  --lp-form-topo-texto: #ffffff;
  --lp-botao: #270b5e;
  --lp-botao-texto: #ffffff;
  --lp-rodape: #6b73ff;
  --lp-rodape-texto: #ffffff;
  /* realce do TEXTO (palavra colorida no h1, <strong> da copy). Sai do acento
     porque em página de fundo CLARO o acento costuma não ter contraste: o
     amarelo #ffc961 do acervo sobre o rosa #e880bf fica ilegível, enquanto o
     mesmo amarelo continua certo nas formas e na faixa de destaque. */
  --lp-realce-texto: var(--lp-acento);
  /* fundo dos cards: translúcido claro serve em página escura e SOME em página
     clara — por isso é variável, não valor fixo. */
  --lp-card-bg: rgba(255, 255, 255, 0.07);
  --lp-card-borda: rgba(255, 255, 255, 0.14);
  --lp-largura: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* A página ocupa a TELA INTEIRA em monitor grande: numa LP de uma seção só, o
   rodapé subia e sobrava fundo embaixo. Aqui o corpo é uma coluna flex, o herói
   estica para consumir a sobra e o rodapé fica ancorado no fim. Quando o
   conteúdo é maior que a tela (celular, ou página com seções extras) não há
   espaço livre para distribuir e nada muda — cresce natural.
   `svh` em vez de `vh` porque no celular o `vh` conta a barra de endereço
   retraída e gera um pulo de layout. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--lp-texto);
  background: var(--lp-fundo);
  line-height: 1.5;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ── herói ──
   As formas geométricas (o canto chanfrado em cima à esquerda e o arco grande à
   direita) são pseudo-elementos: acompanham a cor da página e não custam
   download. `overflow:hidden` impede que elas gerem rolagem lateral. */
.lp-hero {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--lp-fundo) 0%, var(--lp-fundo-2) 55%, var(--lp-fundo) 100%);
}
/* canto chanfrado: sangra pela borda de cima e da esquerda, como na arte */
.lp-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  /* medido: acima disto a diagonal invade a marca, e o logo branco sobre a cor
     clara perde contraste. Aqui ela passa ACIMA do logo, como no modelo. */
  width: clamp(120px, 15vw, 210px);
  height: clamp(120px, 15vw, 210px);
  background: var(--lp-forma);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
/* arco grande à direita: passa POR TRÁS do formulário e sangra nas três bordas,
   que é o que dá a moldura do modelo. Sem o `overflow:hidden` do herói ele
   criaria rolagem lateral. */
.lp-hero::after {
  content: "";
  position: absolute;
  /* no empilhado o arco tomava o topo inteiro e competia com a arte do
     material; menor aqui, grande a partir do desktop (regra abaixo). */
  top: -6%; right: -34%;
  width: 78vw; height: 78vw;
  max-width: 900px; max-height: 900px;
  background: var(--lp-forma);
  border-radius: 50%;
  pointer-events: none;
}

.lp-hero-inner {
  position: relative;
  z-index: 1;                       /* conteúdo sempre na frente das formas */
  max-width: var(--lp-largura);
  margin: 0 auto;
  padding: 34px 20px 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  flex: 1;                  /* consome a sobra vertical do herói */
  align-content: center;    /* e centraliza o conteúdo nela */
}

/* marca dentro da coluna, alinhada com a copy (como no modelo) */
.lp-topo {
  position: relative;
  z-index: 2;                       /* acima das formas do fundo */
  /* `width:100%` é obrigatório: como o herói virou coluna flex, um item com
     `margin:0 auto` encolhe até o conteúdo e a marca ia parar no CENTRO da
     tela. Com largura cheia ele respeita o max-width e a marca volta para a
     esquerda, alinhada com a copy. */
  width: 100%;
  max-width: var(--lp-largura);
  margin: 0 auto;
  padding: 30px 20px 4px;
}
.lp-topo img { width: 150px; }

.lp-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--lp-eyebrow-bg);
  color: var(--lp-eyebrow-texto);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lp-titulo {
  margin: 0 0 22px;
  font-size: clamp(1.95rem, 4.6vw, 3rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
/* no modelo o realce é a PALAVRA colorida, não uma tarja atrás dela */
.lp-titulo .lp-destaque { color: var(--lp-realce-texto); }

/* bloco de texto com a barra lateral do modelo */
.lp-copy-texto {
  border-left: 4px solid var(--lp-acento);
  padding-left: 18px;
}
.lp-copy-texto p { margin: 0 0 14px; font-size: 1rem; font-weight: 700; }
.lp-copy-texto p:last-child { margin-bottom: 0; }
.lp-copy-texto strong { color: var(--lp-realce-texto); font-weight: 700; }

/* CTA que rola até o formulário — só no empilhado, onde o formulário está longe
   da dobra. No desktop as três colunas dividem a mesma tela. */
.lp-cta-rolagem {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 26px;
  border-radius: 10px;
  background: var(--lp-acento);
  color: #161615;
  font-weight: 800;
  text-decoration: none;
}

/* No empilhado a ordem pedida por ele é IMAGEM → TEXTO → FORMULÁRIO: a arte
   entrega o material antes da leitura. O reset de `order` no desktop é
   obrigatório — sem ele a imagem volaria para a primeira coluna das três. */
.lp-mock { order: -1; }

.lp-mock img {
  margin: 0 auto;
  max-height: 400px;
  width: auto;
  transform: rotate(-6deg);          /* inclinação do modelo */
  filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.45));
}

/* ── card do formulário: cabeçalho colorido + corpo branco ── */
.lp-form {
  background: #fff;
  color: #1c1f2a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.32);
}
.lp-form-topo {
  background: var(--lp-form-topo);
  color: var(--lp-form-topo-texto);
  padding: 18px 22px;
  text-align: center;
}
.lp-form-titulo { margin: 0; font-size: 1.3rem; font-weight: 900; }
.lp-form-sub { margin: 4px 0 0; font-size: 0.92rem; font-weight: 700; }
.lp-form form { padding: 22px; }

/* ══════════════════════════════════════════════════════════════════════
   SEÇÕES DE CONTEÚDO

   Decisão dele (05/08): as páginas de material que tinham MAIS do que herói +
   mockup + formulário (listas do "o que você vai encontrar", cards, blocos
   sobre o autor, outros livros) vêm para o template SEM perder esse conteúdo.
   Antes o template só sabia fazer lista; aqui entram os quatro formatos que as
   páginas antigas usam de verdade. Todos herdam as cores da página — nenhum
   traz cor própria.
   ══════════════════════════════════════════════════════════════════════ */
.lp-secao {
  max-width: var(--lp-largura);
  margin: 0 auto;
  padding: 52px 20px;
  width: 100%;
}
.lp-secao h2 {
  margin: 0 0 22px;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}
.lp-secao h2 .lp-destaque { color: var(--lp-acento); }

/* lista com marcador — "o que você vai encontrar neste ebook" */
.lp-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.lp-lista li { padding-left: 30px; position: relative; font-size: 1.05rem; }
.lp-lista li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-weight: 900; color: var(--lp-acento);
}

/* texto corrido */
.lp-texto { display: grid; gap: 14px; max-width: 68ch; }
.lp-texto p { margin: 0; font-size: 1.05rem; }
.lp-texto strong { color: var(--lp-realce-texto); }

/* cards — o grid se ajusta sozinho ao número de cards, sem media query */
.lp-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lp-card {
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-card-borda);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-card img { border-radius: 10px; margin-bottom: 4px; }
.lp-card h3 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.lp-card p { margin: 0; font-size: 0.97rem; }
.lp-card .lp-card-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 9px;
  background: var(--lp-acento);
  color: #161615;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}

/* faixa de destaque — a promessa que a página antiga punha numa tarja */
.lp-destaque-faixa {
  background: var(--lp-acento);
  color: #161615;
}
.lp-destaque-faixa .lp-secao-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 20px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.lp-destaque-faixa h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}
.lp-destaque-faixa p { margin: 0; font-size: 1.05rem; font-weight: 700; }
.lp-destaque-faixa img { max-width: min(420px, 100%); }
/* bloco "sobre o autor": retrato + texto, empilhado no celular */
.lp-autor { display: grid; gap: 22px; align-items: start; }
.lp-autor-foto { border-radius: 16px; max-width: 320px; }
.lp-autor-texto { display: grid; gap: 14px; }
.lp-autor-texto p { margin: 0; font-size: 1rem; }
@media (min-width: 760px) {
  .lp-autor { grid-template-columns: 300px 1fr; gap: 32px; }
}

.lp-destaque-cta {
  padding: 13px 28px;
  border-radius: 10px;
  background: #161615;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

/* ── três colunas a partir do desktop ──
   1150px, não 980: entre 980 e 1149 as três colunas ficam estreitas demais e o
   h1 (que vai até 3.3rem) ESTOURA a coluna — medido em 1024px, a palavra
   "EMERGÊNCIA" passava por baixo do mockup. Abaixo disso vale a faixa de duas
   colunas logo adiante. */
@media (min-width: 1150px) {
  .lp-hero::after { top: -12%; right: -20%; width: 64vw; height: 64vw; }
  .lp-hero-inner {
    /* a coluna do meio cresceu: na referência o livro é o elemento DOMINANTE,
       maior que a copy e que o formulário. */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(340px, 0.92fr);
    gap: 22px;
    padding: 0 20px 70px;
    align-items: center;
  }
  .lp-mock { order: 0; }   /* desfaz a inversão do empilhado */
  .lp-cta-rolagem { display: none; }
  .lp-mock img { max-height: min(70vh, 660px); margin-left: -6%; }
  /* material sem mockup próprio (existe: a planilha-aposentadoria nunca teve
     capa, só logo e fundo) — duas colunas, a copy fica com o espaço do livro */
  .lp-hero-inner.lp-sem-mock {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    max-width: 1080px;
  }
}

/* faixa intermediária (tablet e celular dobrável aberto): texto e mockup lado a
   lado, formulário embaixo — CENTRADO e com largura de leitura. Sem o
   `max-width` ele virava um card da largura inteira da tela, que foi o que ele
   viu como "layout estranho" no Z Fold. */
@media (min-width: 640px) and (max-width: 1149px) {
  .lp-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    max-width: 900px;
  }
  .lp-hero-inner.lp-sem-mock { grid-template-columns: 1fr; max-width: 620px; }
  .lp-form { grid-column: 1 / -1; max-width: 560px; width: 100%; margin: 0 auto; }
  .lp-mock img { max-height: 340px; margin: 0 auto; }
  /* o h1 desta faixa é menor: a coluna tem ~440px e o título é caixa-alta */
  .lp-titulo { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
}
/* nenhuma palavra longa pode furar a coluna — mas `anywhere` quebrava no meio
   de palavra que caberia na linha seguinte ("CERTIFICAÇÕE / S" no guia das
   certificações). `break-word` só parte quando a palavra sozinha nao cabe. */
.lp-titulo { overflow-wrap: break-word; hyphens: auto; }

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA DE OBRIGADO (TY)
   Decisão dele (04/08): a TY atual gastava a página inteira mandando baixar
   um PDF que já vai por e-mail, e tratava o Me Poupe!+ como um link solto no
   rodapé. Aqui a confirmação é UM bloco curto (resolve a ansiedade de quem
   quer o material na hora) e a OFERTA é o corpo da página — que é onde o
   lead está mais quente que em qualquer outro momento do funil.
   ══════════════════════════════════════════════════════════════════════ */

/* Na TY o conteúdo é CENTRALIZADO, então o arco grande do fundo passava por
   trás do título — e como o destaque do h1 usa a mesma cor do arco, a palavra
   sumia. Aqui fica só o canto chanfrado; a área branca da oferta é que carrega
   o peso visual da página. */
.lp-hero-ty::after { display: none; }

/* ── bloco 1: confirmação, curto de propósito ── */
.ty-confirma { position: relative; z-index: 1; text-align: center; padding: 10px 20px 44px; }
.ty-confirma .lp-eyebrow { margin-bottom: 16px; }
.ty-confirma h1 {
  margin: 0 auto 14px;
  max-width: 20ch;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.06;
  font-weight: 900;
  text-transform: uppercase;
}
.ty-confirma h1 .lp-destaque { color: var(--lp-acento); }
.ty-confirma p { margin: 0 auto 22px; max-width: 52ch; font-size: 1.05rem; }
.ty-baixar {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid var(--lp-acento);
  border-radius: 10px;
  color: var(--lp-acento);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ty-baixar:hover { background: var(--lp-acento); color: #161615; }

/* ── bloco 2: a oferta ──
   Enxuto de propósito (decisão dele, 04/08): a TY existe para GERAR O CLIQUE,
   não para vender. Um gancho, três sinais e o botão. Coluna única centralizada
   — a versão em duas colunas com tabela de valor ficava longa e o desenho
   perdia a mão. */
.ty-oferta { background: #fff; color: #1c1f2a; padding: 54px 20px 60px; }
.ty-oferta-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.ty-antes {
  margin: 0 0 12px; font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-form-topo);
}
.ty-oferta h2 {
  margin: 0 0 14px;
  font-size: clamp(1.45rem, 4vw, 2.05rem);
  line-height: 1.18; font-weight: 900;
}
.ty-oferta h2 em { font-style: normal; color: var(--lp-form-topo); }
.ty-frase { margin: 0 auto 20px; max-width: 46ch; font-size: 1.02rem; color: #3d4256; }
.ty-sinais { margin: 0 0 24px; font-size: 0.9rem; font-weight: 800; color: #1c1f2a; }
.ty-cta {
  display: inline-block; padding: 17px 34px;
  border-radius: 12px; background: var(--lp-botao, #270b5e); color: #fff;
  font-size: 1rem; font-weight: 900; text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.ty-cta:hover { filter: brightness(1.14); }
.ty-cta:active { transform: translateY(1px); }
.ty-micro { margin: 14px 0 0; font-size: 0.86rem; font-weight: 700; color: #3d4256; }