/* ===========================================================================
   LANDING DE VENDA

   Folha própria, carregada só nesta rota. O app.css veste a ferramenta
   (editor, painel) e tem outra paleta; misturar as duas faria a landing puxar
   estilo de formulário e o editor puxar o terracota da venda.

   A paleta abaixo é a do design. Fica em variáveis com escopo em `.lp-body`
   para não vazar para o :root e colidir com o app.css, que já define --tinta,
   --destaque e companhia com OUTROS valores.
   =========================================================================== */

.lp-body {
  --lp-fundo: #faf6f0;
  --lp-fundo-alt: #f5eee3;
  --lp-cartao: #fffdf9;
  --lp-borda: #ede2d2;
  --lp-borda-forte: #e4d7c3;

  --lp-tinta: #2a211a;
  --lp-tinta-media: #5b4c3d;
  --lp-tinta-suave: #8a7a64;
  --lp-tinta-fraca: #a89579;

  --lp-terracota: #b4643f;
  --lp-terracota-escuro: #8f4c2d;
  --lp-ouro: #b08a4f;
  --lp-ouro-claro: #c9a96a;
  --lp-ouro-brilho: #e8c687;
  --lp-verde: #6c8a66;
  --lp-escuro: #2e2620;
  --lp-preto: #241c15;

  --lp-serif: 'Playfair Display', Georgia, serif;
  --lp-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --lp-larg: 1060px;

  margin: 0;
  background: var(--lp-fundo);
  color: var(--lp-tinta);
  font-family: var(--lp-sans);
  -webkit-font-smoothing: antialiased;
  /* O celular do protótipo e o carrossel estouram a viewport de propósito;
     sem isto o corpo inteiro ganha rolagem horizontal no mobile. */
  overflow-x: hidden;
}

/* ATENÇÃO À ESPECIFICIDADE DESTAS DUAS LINHAS.
   `.lp-body a` vale (0,1,1) e vence QUALQUER classe simples aplicada a um
   link — `.lp-btn`, `.lp-marca` — que valem (0,1,0). Foi assim que o CTA
   principal apareceu com texto terracota sobre fundo terracota: invisível,
   com o CSS "certo" escrito logo abaixo. Toda regra de cor em link nesta
   folha precisa empatar ou superar isso; por isso as classes de link vêm
   prefixadas com `.lp-body`. */
.lp-body a { color: var(--lp-terracota); text-decoration: none; }
.lp-body a:hover { color: var(--lp-terracota-escuro); }
.lp-body input::placeholder { color: #b7a896; }

.lp-wrap { max-width: var(--lp-larg); margin-inline: auto; padding-inline: 22px; }
.lp-estreito { max-width: 560px; }
.lp-centro { text-align: center; }
.lp-mb { margin-bottom: 34px; }

/* Rótulo só para leitor de tela. Os campos do hero são identificados pelo
   placeholder no visual, mas placeholder não é rótulo acessível. */
.lp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- tipografia */
.lp-h1 {
  font-family: var(--lp-serif); font-weight: 600;
  font-size: clamp(34px, 8vw, 52px); line-height: 1.12;
  letter-spacing: -0.01em; margin: 0 0 16px; text-wrap: pretty;
}
.lp-h2 {
  font-family: var(--lp-serif); font-weight: 600;
  font-size: clamp(26px, 6vw, 36px); margin: 10px 0 0; text-wrap: pretty;
}
.lp-h3 { font-family: var(--lp-serif); font-weight: 600; font-size: 21px; margin: 18px 0 8px; }
.lp-p  { font-size: 15.5px; line-height: 1.55; color: var(--lp-tinta-media); margin: 0; }

.lp-olho {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--lp-terracota); font-weight: 600;
}
.lp-olho-mini { font-size: 11px; letter-spacing: 1.5px; color: var(--lp-tinta-suave); }

.lp-mini { font-size: 13.5px; color: var(--lp-tinta-suave); text-align: center; margin: 12px 0 0; }
.lp-mini-claro { color: var(--lp-tinta-fraca); }
.lp-dica { font-size: 13.5px; color: var(--lp-tinta-suave); margin: 12px 0 0; }

/* ----------------------------------------------------------------- botões */
.lp-body .lp-btn {
  display: flex; align-items: center; justify-content: center;
  /* min-height e não height: "Começar agora — é grátis montar" quebra em
     duas linhas na tela de 360px, e com altura fixa o texto vazava do botão.
     Crescer é mais feio que caber; vazar é ilegível. */
  min-height: 56px; padding: 0 20px; border-radius: 999px;
  background: var(--lp-terracota); color: #fff8ef;
  font-size: 17px; font-weight: 600; text-decoration: none;
  line-height: 1.25; text-align: center;
  box-shadow: 0 12px 26px rgba(180, 100, 63, .30);
  transition: transform .12s ease, box-shadow .2s ease;
}
.lp-body .lp-btn:hover { color: #fff8ef; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(180,100,63,.34); }
.lp-body .lp-btn:active { transform: translateY(1px); }
.lp-body .lp-btn-grande { min-height: 58px; font-size: 18px; box-shadow: 0 14px 30px rgba(180,100,63,.30); }

/* O botão do plano secundário. Prefixado com `.lp-body` pelo mesmo motivo do
   comentário sobre especificidade lá em cima: sem isso, `.lp-body a` vence a
   cor e o texto volta a ser terracota — que aqui até funcionaria, mas o
   `background: transparent` não sobreviveria. */
.lp-body .lp-btn-contorno {
  background: transparent; color: var(--lp-terracota);
  border: 1.5px solid var(--lp-terracota); box-shadow: none;
}
.lp-body .lp-btn-contorno:hover {
  background: var(--lp-terracota); color: #fff8ef; box-shadow: 0 12px 26px rgba(180,100,63,.24);
}

/* -------------------------------------------------------------- cabeçalho */
.lp-topo {
  max-width: var(--lp-larg); margin-inline: auto;
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
}
.lp-body .lp-marca {
  font-family: var(--lp-serif); font-style: italic; font-weight: 600;
  font-size: 21px; color: var(--lp-tinta);
}
.lp-body .lp-marca:hover { color: var(--lp-tinta); }
.lp-body .lp-topo-cta {
  font-size: 14.5px; font-weight: 600; color: var(--lp-terracota);
  border: 1.5px solid #e7cdb8; padding: 9px 16px; border-radius: 999px;
  background: var(--lp-cartao);
}

/* ------------------------------------------------------------------- hero */
.lp-hero { padding: 22px 0 68px; }
.lp-hero-grid { display: grid; gap: 38px; align-items: center; }

/* No desktop o celular ocupa a coluna direita inteira e o texto se divide em
   duas linhas na esquerda — o CTA fica ABAIXO dos campos, colado na ação. */
@media (min-width: 880px) {
  .lp-hero-grid { grid-template-columns: 1.1fr .9fr; column-gap: 56px; }
  .lp-hero-a { grid-column: 1; }
  .lp-hero-b { grid-column: 2; grid-row: 1 / span 2; }
  .lp-hero-c { grid-column: 1; align-self: start; }
}

.lp-hero-sub {
  font-size: 18px; line-height: 1.55; color: var(--lp-tinta-media);
  margin: 0 0 26px; max-width: 46ch; text-wrap: pretty;
}

.lp-nomes { display: grid; gap: 12px; max-width: 420px; }
.lp-input {
  height: 56px; border-radius: 16px; border: 1.5px solid var(--lp-borda-forte);
  background: var(--lp-cartao); padding: 0 18px;
  /* 17px e não menos: abaixo de 16px o Safari do iPhone dá zoom ao focar, e a
     página salta justamente no primeiro toque do visitante. */
  font-size: 17px; font-family: inherit; color: var(--lp-tinta);
  outline: none; box-sizing: border-box; box-shadow: 0 2px 8px rgba(43,33,23,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-input:focus { border-color: var(--lp-terracota); box-shadow: 0 0 0 3px rgba(180,100,63,.14); }
.lp-hero-c { max-width: 420px; }

/* --------------------------------------------------------- celular do hero */
.lp-hero-b { display: flex; justify-content: center; }
.lp-fone {
  width: min(320px, 84vw); background: var(--lp-preto);
  border-radius: 44px; padding: 11px; box-shadow: 0 28px 64px rgba(43,33,23,.20);
}
.lp-fone-tela {
  position: relative; background: #fdfbf6; border-radius: 34px; overflow: hidden;
  padding: 44px 20px 26px; text-align: center; box-sizing: border-box;
}
.lp-fone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 20px; background: var(--lp-preto); border-radius: 12px;
}
.lp-conv-supra {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--lp-ouro); font-weight: 600;
}
.lp-conv-nomes {
  font-family: var(--lp-serif); font-weight: 600; font-size: 30px;
  line-height: 1.18; margin-top: 14px; color: var(--lp-tinta);
}
.lp-conv-nomes span { display: block; }
.lp-conv-e { font-style: italic; font-weight: 400; font-size: 21px; color: var(--lp-ouro); }
.lp-conv-risco { width: 36px; height: 2px; background: #d9c49a; margin: 16px auto; }
.lp-conv-data {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lp-tinta-media);
}

.lp-conta {
  display: flex; justify-content: center; gap: 8px; margin: 18px 0 20px;
  animation: lp-pulso 2.6s ease-in-out infinite;
}
.lp-conta-item { width: 56px; background: #f5edde; border-radius: 12px; padding: 9px 0; }
.lp-conta-num {
  font-family: var(--lp-serif); font-size: 20px; font-weight: 600;
  /* Sem tabular-nums os segundos empurram os vizinhos a cada tique. */
  font-variant-numeric: tabular-nums;
}
.lp-conta-rot {
  font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--lp-tinta-suave);
}
.lp-conv-btn {
  display: inline-block; background: var(--lp-verde); color: #f7f4ec;
  font-size: 12.5px; font-weight: 600; padding: 10px 22px; border-radius: 999px;
}
.lp-coracoes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

@keyframes lp-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes lp-coracao {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-110px) scale(1.15) rotate(14deg); opacity: 0; }
}

/* ---------------------------------------------------------------- seções */
.lp-sec { padding: 68px 0; }
.lp-sec-alt { background: var(--lp-fundo-alt); padding: 56px 0 68px; }
.lp-sec-oferta { padding: 72px 0 30px; }
.lp-sec-garantia { padding: 40px 0 64px; }

.lp-3col { display: grid; gap: 20px; }
@media (min-width: 880px) { .lp-3col { grid-template-columns: repeat(3, 1fr); } }

.lp-card {
  background: var(--lp-cartao); border: 1px solid var(--lp-borda);
  border-radius: 22px; padding: 20px;
}
/* Os quatro superpoderes. Grid separado do `.lp-3col` de propósito — aquele
   monta também os passos do "Como funciona", e mexer nele quebraria uma seção
   que não tem nada a ver com esta.

   QUATRO COLUNAS FORAM TENTADAS E DESCARTADAS. Em 1060px de largura máxima,
   cada cartão ficava com 245px e os mocks desmontavam: "Cota da lua de mel"
   em três linhas, o botão do PIX em duas, a URL do convite partida no meio da
   palavra. O quarto card vira uma FAIXA embaixo dos três — e a forma diferente
   faz o trabalho que o selo sozinho não fazia: dizer que ele é de outro plano. */
.lp-poderes { display: grid; gap: 20px; align-items: start; }
@media (min-width: 880px) { .lp-poderes { grid-template-columns: repeat(3, 1fr); } }

.lp-card-destaque { background: #fff6ef; border: 1.5px solid #e4b79b; position: relative; }

/* O card do Completo. Dourado e não terracota: precisa ler como "de outro
   plano", não como "mais importante" — disputando destaque com o card do PIX,
   os dois perderiam. */
.lp-card-completo {
  position: relative; grid-column: 1 / -1;
  background: #fffaf3; border: 1.5px solid var(--lp-ouro-claro);
}
@media (min-width: 620px) {
  /* Deitado: o mock à esquerda com largura de cartão, o texto respirando à
     direita. Empilhado numa faixa larga, o mock ficaria esticado e o texto
     numa linha de 90 caracteres. */
  .lp-card-completo {
    display: grid; grid-template-columns: minmax(230px, 300px) 1fr;
    gap: 26px; align-items: center; padding: 22px;
  }
  .lp-card-completo .lp-h3 { margin-top: 0; }
}
/* ESCOPADO NO CARD DE PROPÓSITO — ver o aviso sobre especificidade no topo
   desta folha. `.lp-selo` é declarada DEPOIS daqui e vale o mesmo (0,1,0),
   então um `.lp-selo-completo` solto perdia o `right: auto` para o
   `right: 16px` dela. Com `left` e `right` valendo ao mesmo tempo, o selo
   deixava de encolher no conteúdo e atravessava o card inteiro. */
.lp-card-completo .lp-selo-completo {
  background: var(--lp-escuro); color: var(--lp-ouro-brilho);
  left: 18px; right: auto;
}
.lp-poder-link {
  display: inline-block; margin-top: 12px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.lp-selo {
  position: absolute; top: -12px; right: 16px;
  background: var(--lp-terracota); color: #fff6ec;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 999px;
}

/* ------------------------------------------------------------- carrossel */
.lp-carrossel {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 10px 24px 26px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp-carrossel::-webkit-scrollbar { display: none; }
.lp-carrossel:focus-visible { outline: 2px solid var(--lp-terracota); outline-offset: -4px; }
.lp-carrossel-dica {
  text-align: center; font-size: 12px; color: var(--lp-tinta-fraca); letter-spacing: 1px;
}

.lp-tema-card { scroll-snap-align: center; flex: 0 0 auto; width: 190px; }
.lp-tema-moldura {
  background: var(--lp-preto); border-radius: 30px; padding: 8px;
  box-shadow: 0 14px 34px rgba(43,33,23,.14);
}
.lp-tema-tela {
  border-radius: 23px; height: 296px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px; box-sizing: border-box;
}
.lp-tema-data { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; opacity: .6; }
.lp-tema-nomes { margin-top: 12px; line-height: 1.25; font-size: 22px; }
.lp-tema-risco { width: 26px; height: 2px; margin: 14px auto; }
.lp-tema-local { font-size: 10px; opacity: .65; letter-spacing: .5px; }
.lp-tema-btn {
  margin-top: 16px; font-size: 10px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid currentColor;
}
.lp-tema-rot { text-align: center; margin-top: 12px; }
.lp-tema-nome { color: var(--lp-tinta); line-height: 1.2; font-size: 19px; }
.lp-tema-desc { font-size: 12.5px; color: var(--lp-tinta-suave); margin-top: 2px; }

/* ---------------------------------------------------- mocks dos benefícios */
.lp-mock { border-radius: 16px; }
.lp-mock-wa { background: #eae1d3; padding: 16px 14px; }
.lp-wa-balao {
  background: #fff; border-radius: 4px 14px 14px 14px; padding: 7px;
  max-width: 260px; box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.lp-wa-link { border-radius: 10px; overflow: hidden; background: #f6f0e6; }
.lp-wa-foto {
  height: 82px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #ede3d4 0 8px, #f6efe3 8px 16px);
}
.lp-wa-foto span { font-family: ui-monospace, monospace; font-size: 10px; color: var(--lp-tinta-suave); }
/* Com foto real o fundo listrado sai de cena: ele apareceria nas beiradas de
   qualquer imagem que não tenha exatamente a proporção da caixa. */
.lp-wa-foto-real { background: #ede3d4; padding: 0; }
.lp-wa-foto-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-wa-txt { padding: 8px 10px; }
.lp-wa-titulo { font-size: 13px; font-weight: 700; color: #1f1a15; }
.lp-wa-desc { font-size: 11.5px; color: var(--lp-tinta-suave); margin-top: 2px; line-height: 1.35; }
.lp-wa-url { font-size: 11px; color: var(--lp-tinta-fraca); margin-top: 4px; word-break: break-all; }
.lp-wa-msg { font-size: 13.5px; color: var(--lp-tinta); padding: 8px 4px 2px; }
.lp-wa-hora { font-size: 10px; color: #9aa0a6; text-align: right; padding: 0 4px 3px; }

.lp-mock-rsvp { background: #f7f2e9; padding: 18px; }
.lp-rsvp-linha { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.lp-rsvp-num { font-family: var(--lp-serif); font-size: 40px; font-weight: 600; line-height: 1; }
.lp-rsvp-de { font-size: 14px; color: var(--lp-tinta-media); }
.lp-barra { height: 8px; border-radius: 999px; background: #eadfcb; margin: 14px 0; overflow: hidden; }
.lp-barra i { display: block; height: 100%; border-radius: 999px; background: var(--lp-verde); }
.lp-rsvp-item {
  display: flex; justify-content: space-between; font-size: 13.5px;
  padding: 6px 0; border-bottom: 1px solid var(--lp-borda);
}
.lp-rsvp-ultimo { border-bottom: 0; }
.lp-ok { color: var(--lp-verde); font-weight: 600; }

.lp-mock-pix { background: var(--lp-cartao); border: 1px solid #f0dfcc; padding: 18px; }
.lp-pix-linha { display: flex; gap: 14px; align-items: center; }
.lp-qr {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 10px;
  border: 5px solid #fff; outline: 1px solid #e7d7c4;
  background:
    repeating-linear-gradient(90deg, var(--lp-tinta) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, var(--lp-tinta) 0 4px, #fff 4px 8px);
}
/* O mock do mural: o cartaz e o que ele produz, no espaço de um card. */
.lp-mock-mural { background: #f6efe3; border: 1px solid #eadcc6; padding: 14px; }
.lp-mock-mural-cartaz {
  display: flex; gap: 11px; align-items: center;
  background: var(--lp-cartao); border: 1px solid var(--lp-borda);
  border-radius: 10px; padding: 10px;
}
.lp-qr-mini { width: 44px; height: 44px; border-width: 3px; border-radius: 8px; }
.lp-mock-mural-txt { min-width: 0; }
.lp-mock-mural-tit { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.lp-mock-mural-sub { font-size: 11.5px; color: var(--lp-tinta-suave); }
.lp-mock-mural-fotos {
  margin-top: 10px; display: grid; gap: 5px; grid-template-columns: repeat(4, 1fr);
}
.lp-mock-mural-fotos span {
  aspect-ratio: 1; border-radius: 5px; overflow: hidden; display: block;
  background: linear-gradient(135deg, #cbb79a 0%, #b7a184 100%);
}
.lp-mock-mural-fotos img,
.lp-chegando-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lp-mock-mural-fotos span:nth-child(2) { background: linear-gradient(200deg, #d3c1a5 0%, #ab9678 100%); }
.lp-mock-mural-fotos span:nth-child(3) { background: linear-gradient(60deg,  #b9a486 0%, #cdb99c 100%); }
.lp-mock-mural-fotos span:nth-child(4) { background: linear-gradient(160deg, #c4ae8f 0%, #a8936f 70%); }
.lp-mock-mural-pe {
  margin-top: 9px; font-size: 11.5px; color: var(--lp-tinta-media);
}

.lp-pix-nome { font-weight: 700; font-size: 15px; }
.lp-pix-valor { font-size: 13px; color: var(--lp-tinta-media); }
.lp-pix-btn {
  margin-top: 8px; display: inline-block; background: #32bcad; color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px;
}
.lp-pix-nota { font-size: 12.5px; color: #8a6a50; margin-top: 12px; }

/* ---------------------------------------------------------- como funciona */
.lp-passos { gap: 26px; max-width: 920px; margin-inline: auto; }
.lp-passo { text-align: center; padding: 0 10px; }
.lp-passo-num {
  font-family: var(--lp-serif); font-style: italic; font-size: 40px;
  color: var(--lp-terracota); line-height: 1;
}
.lp-passo-titulo { font-weight: 700; font-size: 17px; margin: 10px 0 6px; }
.lp-frase {
  text-align: center; font-family: var(--lp-serif); font-style: italic;
  font-size: 19px; color: #8a6a50; margin: 36px 0 0;
}

/* ------------------------------------------------------------ comparativo */
.lp-contas { display: grid; gap: 10px; }
.lp-conta-linha {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--lp-cartao); border: 1px solid var(--lp-borda);
  border-radius: 14px; padding: 16px 20px;
  font-size: 15.5px; color: var(--lp-tinta-media);
}
.lp-conta-valor { font-weight: 600; color: var(--lp-tinta-suave); }
.lp-conta-nossa {
  background: #33291f; border-color: var(--lp-ouro-claro); padding: 18px 20px;
  font-size: 16px; font-weight: 600; color: #f7f0e4;
}
.lp-conta-nossa span:last-child { font-weight: 700; color: var(--lp-ouro-brilho); }

/* ----------------------------------------------------------- prova social */
.lp-depo {
  background: var(--lp-cartao); border: 1px solid var(--lp-borda);
  border-radius: 20px; padding: 22px; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.lp-depo-txt {
  font-size: 15.5px; line-height: 1.6; color: #3d3226; margin: 0;
  text-wrap: pretty;
}
.lp-depo-pe { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lp-depo-chip {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lp-serif); font-style: italic; font-size: 13px; color: #5b4632;
}
.lp-depo-nome { font-weight: 700; font-size: 14.5px; }
.lp-depo-meta { font-size: 12.5px; color: var(--lp-tinta-suave); }

/* ------------------------------------------------------------ lançamento
   O que ocupa o lugar da prova social enquanto ela não existe. */
.lp-lancamento {
  max-width: 560px; margin-inline: auto; padding: 32px 28px;
  background: var(--lp-cartao); border: 1px solid #e2cfa9; border-radius: 26px;
  text-align: center; box-shadow: 0 20px 50px rgba(43,33,23,.08);
}
.lp-lanc-lista { list-style: none; margin: 22px 0 0; padding: 0; text-align: left; }
.lp-lanc-lista li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; font-size: 15px; color: var(--lp-tinta-media);
  border-top: 1px solid var(--lp-borda);
}
.lp-lanc-lista li:first-child { border-top: 0; }
.lp-lanc-pe {
  margin: 22px 0 0; font-size: 14px; line-height: 1.6;
  color: var(--lp-tinta-suave); text-wrap: pretty;
}

/* --------------------------------------------------------- mural de fotos
   A seção que faz o Essencial virar Completo. Fundo escuro de propósito: é a
   única seção de recurso com esse peso na página, e o contraste é o que a
   separa das três colunas logo acima em vez de virar "mais um card". */
.lp-sec-mural {
  background: var(--lp-escuro); color: #f6efe3;
  padding: 60px 0 66px; margin-top: 8px;
}
.lp-sec-mural .lp-olho { color: var(--lp-ouro-brilho); }
.lp-sec-mural .lp-h2 { color: #fffaf2; }
.lp-sec-mural .lp-p { color: #d8cbb8; }

/* No celular a ordem é texto → arte → botão, e é o botão que precisa ficar
   por último: pedir a venda antes de mostrar o cartaz é pedir cedo demais.
   No desktop as áreas trazem o botão de volta para baixo do texto, com a arte
   ocupando a coluna da direita inteira. */
.lp-mural-grid { display: grid; gap: 30px; }

/* AS ÁREAS NOMEADAS FICAM TODAS DENTRO DO MEDIA QUERY, e isso não é
   arrumação: `grid-area: txt` sem um `grid-template-areas` que declare "txt"
   não posiciona nada — os três itens caem na MESMA célula e a seção vira uma
   pilha de texto por baixo do cartaz e do botão. Foi exatamente o que
   aconteceu no celular. Abaixo de 900px o empilhamento natural do documento
   já dá a ordem certa (texto → arte → botão) e não precisa de área nenhuma. */
@media (min-width: 900px) {
  /* A arte fica menor que o texto: ela ilustra, o texto vende. */
  .lp-mural-grid {
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas: "txt arte" "acao arte";
    align-items: start; column-gap: 48px; row-gap: 26px;
  }
  .lp-mural-txt  { grid-area: txt; }
  .lp-mural-acao { grid-area: acao; }
  /* A arte ocupa as duas linhas; centralizada, ela acompanha o texto em vez
     de deixar um vazio embaixo dela. */
  .lp-mural-arte { grid-area: arte; align-self: center; }
}

/* fit-content: o .lp-btn é flex e, como filho de grid, esticaria à largura
   inteira da coluna — 900px de botão parecem um banner, não uma decisão. */
.lp-mural-acao .lp-btn { width: fit-content; max-width: 100%; }

.lp-mural-passos {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  counter-reset: mural;
}
.lp-mural-passos li {
  counter-increment: mural; position: relative; padding-left: 40px;
  font-size: 15.5px; line-height: 1.55; color: #cdbfa9; text-wrap: pretty;
}
.lp-mural-passos li::before {
  content: counter(mural);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--lp-ouro); color: var(--lp-ouro-brilho);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: lining-nums;
}
.lp-mural-passos strong { color: #fffaf2; display: block; }

.lp-mural-prazo {
  margin: 22px 0 26px; padding: 13px 16px;
  background: rgba(255,255,255,.05); border-left: 3px solid var(--lp-ouro);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px; line-height: 1.55; color: #d8cbb8; text-wrap: pretty;
}
.lp-mural-prazo strong { color: var(--lp-ouro-brilho); }

/* ------------------------------------------------------------- a arte */
.lp-mural-arte { display: grid; gap: 14px; }
@media (min-width: 520px) {
  /* O cartaz e o painel lado a lado: são as duas pontas do mesmo recurso,
     e empilhados pareciam dois recursos diferentes. */
  .lp-mural-arte { grid-template-columns: 1fr 1fr; align-items: start; }
}

.lp-cartaz {
  background: var(--lp-cartao); color: var(--lp-tinta);
  border-radius: 12px; padding: 20px 16px; text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  /* A inclinação mínima é o que faz ler como papel em cima da mesa. */
  transform: rotate(-1.6deg);
}
/* AS TRÊS CORES ABAIXO SÃO O TOM ESCURO DE PROPÓSITO. O cartaz é a única
   superfície clara desta seção, e as cores que funcionam sobre o fundo escuro
   dela — o terracota normal, o dourado, a tinta suave — chegam aqui com 3,1 a
   4,3 de contraste sobre o creme. A pior era o "&" entre os nomes, dourado
   sobre creme, que sumia. Herdar a cor de outra superfície é o jeito mais
   silencioso de esconder texto. */
.lp-cartaz-olho {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lp-terracota-escuro); font-weight: 700;
}
.lp-cartaz-nomes {
  font-family: var(--lp-serif); font-size: 19px; line-height: 1.2;
  margin: 6px 0 12px; color: var(--lp-tinta);
}
.lp-cartaz-nomes .lp-conv-e { color: var(--lp-terracota-escuro); font-size: 18px; }
.lp-cartaz-qr { width: 78px; height: 78px; margin: 0 auto; }
.lp-cartaz-url {
  margin-top: 10px; font-size: 11.5px; color: var(--lp-tinta-media);
  overflow-wrap: anywhere;
}
.lp-cartaz-pe {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lp-borda);
  font-family: var(--lp-serif); font-style: italic; font-size: 12px;
  color: var(--lp-tinta-media);
}

.lp-chegando {
  background: #3a2f24; border: 1px solid #4d4032;
  border-radius: 12px; padding: 16px;
}
.lp-chegando-topo { display: flex; align-items: baseline; gap: 7px; }
.lp-chegando-num {
  font-family: var(--lp-sans); font-weight: 700; font-size: 26px;
  color: var(--lp-ouro-brilho); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-chegando-rot { font-size: 12px; color: #b3a68e; }
.lp-chegando-grade {
  margin: 12px 0 10px; display: grid; gap: 5px;
  grid-template-columns: repeat(3, 1fr);
}
.lp-chegando-foto {
  aspect-ratio: 1; border-radius: 5px; overflow: hidden;
  background: linear-gradient(135deg, #574636 0%, #6d5a45 55%, #504032 100%);
}
/* Seis quadros idênticos leem como padrão de fundo, não como seis fotos
   diferentes. A variação de ângulo e tom é o mínimo para virarem um álbum. */
.lp-chegando-foto:nth-child(2) { background: linear-gradient(200deg, #6b5540 0%, #4e4033 70%); }
.lp-chegando-foto:nth-child(3) { background: linear-gradient(60deg, #4d3f31 0%, #7a6448 100%); }
.lp-chegando-foto:nth-child(4) { background: linear-gradient(160deg, #7a6449 0%, #55452f 60%); }
.lp-chegando-foto:nth-child(5) { background: linear-gradient(20deg, #514234 0%, #6f5b43 100%); }
.lp-chegando-foto:nth-child(6) { background: linear-gradient(120deg, #64513c 0%, #4a3d30 75%); }
.lp-chegando-fila {
  font-size: 11.5px; color: var(--lp-ouro-claro);
  padding-top: 9px; border-top: 1px solid #4d4032;
}

/* ---------------------------------------------------------- calculadora
   A conta que ganha a venda. Renderizada pelo servidor com o valor inicial:
   sem JavaScript ela mostra números reais, não traços. */
.lp-sub-calc { max-width: 52ch; margin-inline: auto; }

.lp-calc {
  background: var(--lp-cartao); border: 1px solid var(--lp-borda-forte);
  border-radius: 22px; padding: 26px 22px;
  box-shadow: 0 16px 40px rgba(43,33,23,.07);
}
.lp-calc-rot {
  display: block; font-size: 14.5px; color: var(--lp-tinta-media); text-align: center;
}
/* AQUI OS NÚMEROS SÃO DADO, NÃO ENFEITE — e por isso não usam a serifa do
   resto da página. São quatro valores que mudam ao vivo, lado a lado, que a
   pessoa compara com o dedo na barra. A Playfair é uma serifa de display de
   contraste altíssimo: nos tamanhos grandes daqui as hastes finas somem
   dentro do dourado, e os algarismos dela são estreitos e de eixo inclinado.
   Pior: enquanto a fonte não carrega (ou se o Google Fonts não responde), o
   fallback é a Georgia, cujos algarismos padrão são de TEXTO — 3, 4, 5, 7 e 9
   descem abaixo da linha de base e 6 e 8 sobem. "R$ 553,50" saía com os
   dígitos em quatro alturas diferentes, parecendo torto.
   A sans que já carregamos tem algarismos retos, todos da mesma altura. */
.lp-calc-valor,
.lp-calc-op-valor,
.lp-calc-total strong {
  font-family: var(--lp-sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.01em;
  /* lining: todos os algarismos na mesma altura, inclusive no fallback.
     tabular: sem isto o número "pula" de largura enquanto o dedo arrasta. */
  font-variant-numeric: lining-nums tabular-nums;
}

.lp-calc-valor {
  display: block; text-align: center; margin: 6px 0 14px;
  font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  line-height: 1.1; color: var(--lp-ouro);
}

.lp-calc-faixa {
  width: 100%; margin: 0 0 22px;
  /* 44px de altura de alvo mesmo com a trilha fina: no celular a pessoa
     arrasta com o polegar, e um range de 4px é impossível de pegar. */
  height: 44px; background: transparent; -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.lp-calc-faixa::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--lp-fundo-alt);
  border: 1px solid var(--lp-borda-forte);
}
.lp-calc-faixa::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--lp-fundo-alt);
  border: 1px solid var(--lp-borda-forte);
}
.lp-calc-faixa::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12px; border-radius: 999px;
  background: var(--lp-ouro); border: 3px solid var(--lp-cartao);
  box-shadow: 0 2px 8px rgba(43,33,23,.25);
}
.lp-calc-faixa::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--lp-ouro); border: 3px solid var(--lp-cartao);
  box-shadow: 0 2px 8px rgba(43,33,23,.25);
}
.lp-calc-faixa:focus-visible { outline: 2px solid var(--lp-ouro); outline-offset: 4px; }

/* Dois CAMINHOS lado a lado, não duas linhas de uma fatura. Empilhadas, elas
   pareciam itens da mesma conta — e a pessoa saía sem saber se a tarifa era
   cobrada por nós, que é a dúvida mais cara possível nesta página. */
.lp-calc-versus { display: grid; gap: 10px; }
@media (min-width: 620px) { .lp-calc-versus { grid-template-columns: 1fr 1fr; } }

.lp-calc-op {
  position: relative; padding: 18px 16px;
  border-radius: 14px; border: 1px solid var(--lp-borda);
  background: var(--lp-fundo);
  display: flex; flex-direction: column;
}
.lp-calc-op-quem { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.lp-calc-op-como {
  margin-top: 5px; font-size: 13px; line-height: 1.5;
  color: var(--lp-tinta-suave); text-wrap: pretty;
}
.lp-calc-op-valor {
  margin-top: auto; padding-top: 14px;
  /* Menor que o valor do topo: aqui cabe uma FAIXA ("R$ 553,50 a R$ 583,50")
     em meia largura de cartão, e em negrito tabular ela é larga. */
  font-size: clamp(1.25rem, 5vw, 1.55rem); line-height: 1.2;
}
.lp-calc-op-rot { margin-top: 2px; font-size: 12px; color: var(--lp-tinta-fraca); }

/* A cara: terracota, e o valor é o que SAI do bolso. */
.lp-calc-op-cara .lp-calc-op-quem { color: var(--lp-terracota-escuro); }
.lp-calc-op-cara .lp-calc-op-valor { color: var(--lp-terracota-escuro); }

/* A nossa: fundo escuro e o selo que responde a pergunta antes de ela ser feita. */
.lp-calc-op-nossa {
  background: #33291f; border-color: #4a3b2c; color: #f7f0e4;
  padding-top: 26px;
}
.lp-calc-op-nossa .lp-calc-op-quem { color: #fff; }
.lp-calc-op-nossa .lp-calc-op-como { color: #d9cbb6; }
.lp-calc-op-nossa .lp-calc-op-como strong { color: var(--lp-ouro-brilho); }
.lp-calc-op-nossa .lp-calc-op-valor { color: var(--lp-ouro-brilho); }
.lp-calc-op-nossa .lp-calc-op-rot { color: #a89579; }
.lp-calc-op-selo {
  position: absolute; top: -9px; left: 16px;
  background: var(--lp-verde); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

.lp-calc-total {
  margin-top: 14px; padding: 16px;
  background: var(--lp-fundo-alt); border: 1px solid var(--lp-borda-forte);
  border-radius: 14px; text-align: center;
  font-size: 14.5px; color: var(--lp-tinta-media);
}
.lp-calc-total strong {
  display: block; margin: 4px 0 2px;
  font-size: clamp(1.4rem, 6.4vw, 1.85rem); line-height: 1.2;
  color: var(--lp-ouro);
}
.lp-calc-total-rot { display: block; font-size: 13px; color: var(--lp-tinta-suave); }
.lp-calc-nota {
  margin: 16px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--lp-tinta-suave); text-align: center; text-wrap: pretty;
}

@media (min-width: 640px) {
  .lp-calc { padding: 32px 30px; }
  .lp-calc-linha { font-size: 15.5px; }
}

/* --------------------------------------------------------------- os planos
   Dois degraus lado a lado. Um preço só não dá à pessoa nada para comparar —
   e sem comparação ela compara com o concorrente, que é grátis para montar. */
.lp-planos {
  display: grid; gap: 18px; align-items: start;
  max-width: 780px; margin-inline: auto; padding-inline: 22px;
}
@media (min-width: 720px) { .lp-planos { grid-template-columns: 1fr 1fr; gap: 22px; } }

.lp-plano {
  position: relative; padding: 30px 26px;
  background: var(--lp-cartao); border: 1px solid var(--lp-borda-forte);
  border-radius: 24px; text-align: center;
}
/* O destaque é o Completo: borda dourada, sombra e um degrau acima no
   desktop. É o pacote que queremos vender, e a hierarquia diz isso sem
   precisar de uma frase. */
.lp-plano-destaque {
  border-color: #e2cfa9; border-width: 2px;
  box-shadow: 0 20px 50px rgba(43,33,23,.12);
}
@media (min-width: 720px) { .lp-plano-destaque { margin-top: -14px; padding-block: 38px 30px; } }

.lp-plano-selo {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--lp-verde); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}

.lp-plano-nome {
  font-family: var(--lp-serif); font-size: 26px; font-weight: 600; margin: 0;
}
.lp-plano-preco {
  margin-top: 8px;
  font-family: var(--lp-serif); font-weight: 600;
  /* lining: a Georgia (fallback enquanto a Playfair não carrega) usa
     algarismos de texto por padrão, com 4, 7 e 9 abaixo da linha de base.
     O preço aparecia torto no primeiro segundo de cada visita. */
  font-variant-numeric: lining-nums;
  /* nowrap: sem isto o "R$" fica numa linha e o valor na outra a partir de
     ~360px — o número que sustenta a oferta aparecia partido. */
  font-size: clamp(40px, 11vw, 52px); letter-spacing: -.01em; white-space: nowrap;
}
.lp-plano-rot { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--lp-tinta-suave); }
.lp-plano-chamada {
  margin: 14px auto 0; max-width: 30ch;
  font-size: 14.5px; line-height: 1.55; color: var(--lp-tinta-suave); text-wrap: pretty;
}
.lp-plano .lp-btn { width: 100%; }

/* ----------------------------------------------------------------- oferta */
.lp-oferta {
  max-width: 460px; margin-inline: auto; padding: 32px 28px;
  background: var(--lp-cartao); border: 1px solid #e2cfa9; border-radius: 26px;
  text-align: center; box-shadow: 0 20px 50px rgba(43,33,23,.10);
  /* A margem lateral evita o cartão colar na borda no celular. */
  margin-inline: max(22px, calc((100% - 460px) / 2));
}
.lp-preco { margin: 14px 0 2px; }
.lp-preco-ancora { font-size: 19px; color: #b7a896; text-decoration: line-through; margin-right: 10px; }
/* nowrap: sem isto o "R$" fica numa linha e o valor na outra a partir de
   ~360px — o número que sustenta a oferta inteira aparecia partido. */
.lp-preco-num {
  font-family: var(--lp-serif); font-weight: 600;
  /* Mesmo motivo do .lp-plano-preco: sem isto a Georgia entra com algarismos
     de texto e o preço principal nasce desalinhado. */
  font-variant-numeric: lining-nums;
  font-size: clamp(46px, 13vw, 58px); letter-spacing: -.01em; white-space: nowrap;
}
.lp-preco-ancora { white-space: nowrap; }
.lp-preco-rot { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--lp-tinta-suave); }
.lp-inclusos {
  display: grid; gap: 9px; text-align: left; margin: 24px auto;
  max-width: 300px; padding: 0; list-style: none;
}
.lp-inclusos li { display: flex; gap: 10px; font-size: 15px; }
.lp-check { color: var(--lp-verde); font-weight: 700; }

/* --------------------------------------------------------------- garantia */
.lp-garantia { max-width: 420px; margin-inline: auto; padding-inline: 22px; text-align: center; }
.lp-selo-dias {
  width: 64px; height: 64px; border-radius: 999px; border: 1.5px solid var(--lp-ouro-claro);
  margin: 0 auto 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.lp-selo-dias span { font-family: var(--lp-serif); font-weight: 600; font-size: 22px; line-height: 1; color: #8a6a50; }
.lp-selo-dias small { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lp-tinta-suave); }
.lp-garantia .lp-p { font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* -------------------------------------------------------------------- FAQ */
.lp-faq-wrap { max-width: 640px; }
.lp-faq { border-bottom: 1px solid #e5d8c4; }
.lp-faq-p {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; color: var(--lp-tinta);
}
.lp-faq-p::-webkit-details-marker { display: none; }
.lp-faq-p:focus-visible { outline: 2px solid var(--lp-terracota); outline-offset: 2px; border-radius: 4px; }
/* O sinal é desenhado pelo CSS a partir do estado do <details>: assim ele
   nunca fica dessincronizado do conteúdo, que é o que acontece quando um
   script troca o "+" pelo "−" por conta própria. */
.lp-faq-ico {
  flex: 0 0 auto; width: 24px; text-align: center;
  font-family: var(--lp-serif); font-size: 24px; line-height: 1; color: var(--lp-terracota);
}
.lp-faq-ico::before { content: "+"; }
.lp-faq[open] .lp-faq-ico::before { content: "−"; }
.lp-faq-r {
  padding: 0 2px 18px; font-size: 15.5px; line-height: 1.6;
  color: var(--lp-tinta-media); max-width: 58ch;
}

/* -------------------------------------------------------------- CTA final */
.lp-final { background: var(--lp-escuro); padding: 72px 0 0; }
.lp-final-in { max-width: 460px; margin-inline: auto; padding: 0 22px; text-align: center; }
.lp-final-h {
  font-family: var(--lp-serif); font-weight: 600; font-size: clamp(28px, 7vw, 38px);
  color: #f7f0e4; margin: 0; line-height: 1.2; text-wrap: pretty;
}
.lp-final-sub {
  font-family: var(--lp-serif); font-style: italic; font-size: 20px;
  color: var(--lp-ouro-brilho); margin: 10px 0 30px;
}
.lp-final .lp-nomes { max-width: none; }
.lp-final .lp-input { border-color: #4a3e32; }

.lp-rodape {
  border-top: 1px solid rgba(247,240,228,.14); margin-top: 56px;
  padding: 22px; text-align: center;
}
.lp-rodape-marca { font-family: var(--lp-serif); font-style: italic; font-size: 15px; color: #c9bca6; }
.lp-rodape-sep { font-size: 12.5px; color: var(--lp-tinta-suave); }
.lp-rodape-links { margin-top: 10px; font-size: 12.5px; color: var(--lp-tinta-suave); }
.lp-rodape-links a { color: var(--lp-ouro-claro); }

/* ------------------------------------------------------------ barra fixa */
.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250,246,240,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid #eadfd0;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.lp-sticky.aparece { transform: translateY(0); }
.lp-sticky .lp-btn { max-width: 480px; margin-inline: auto; min-height: 54px; }

/* ------------------------------------------------------------ preferências */
@media (prefers-reduced-motion: reduce) {
  .lp-body *, .lp-body *::before, .lp-body *::after {
    animation: none !important; transition: none !important;
  }
}

@media print {
  .lp-sticky, .lp-body .lp-topo-cta { display: none !important; }
}

/* "Já sou cliente" no topo.
   Peso visual deliberadamente menor que o CTA: a landing vende para quem ainda
   não comprou, e um "entrar" com o mesmo destaque do "criar" faz o visitante
   novo hesitar sobre qual dos dois é para ele. */
.lp-topo-acoes { display: flex; align-items: center; gap: .85rem; }
/* Prefixado com `.lp-body` — pela terceira vez neste projeto: `.lp-body a`
   vale (0,1,1) e venceria uma classe simples, deixando o link na cor do CTA.
   O objetivo aqui é justamente o contrário. */
.lp-body .lp-topo-entrar {
  font-size: .88rem; font-weight: 600; color: var(--lp-tinta-suave);
  text-decoration: none; white-space: nowrap;
}
.lp-body .lp-topo-entrar:hover { color: var(--lp-terracota); text-decoration: underline; }

@media (max-width: 420px) {
  /* Na tela mais estreita o CTA precisa da largura inteira; o "já sou cliente"
     continua acessível pelo rodapé. */
  .lp-topo-entrar { display: none; }
}