/* Landing de conversão. Só o que é dela — site.css continua servindo
   a landing antiga, /confirmar/, /privacidade/ e /guia/. */

/* Fonte da marca, auto-hospedada (sem Google Fonts: nada de requisição a terceiro).
   Gerada de folder-build/fonts/CormorantGaramond-VF.ttf, licença OFL, com subset
   para Latin + pontuação (o VF traz 236 glifos cirílicos que esta página nunca usa:
   125 KB caíram para 56 KB por arquivo, sem perder um glifo que o site renderiza).

   POR QUE MORA AQUI E NÃO NO site.css (decisão do Renato, 18/09): trocar o --serif
   global levava Cormorant para a home e o /confirmar/, que já convertem. O `em` dentro
   de <p> usa var(--serif), e a x-height da Cormorant é 20% menor que a da Georgia
   (38,6 contra 48,1 medidos a 100px) — o itálico encolhia no meio da frase, num
   público de 45 a 75 anos lendo no celular. Aqui a fonte só existe para /nova/.
   Unificar o site inteiro é decisão para a hora da troca. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-regular.woff2?v=2026-09-18') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-semibold.woff2?v=2026-09-18') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* A itálica não é opcional: a cronologia usa <em> ("ler a idade"). Sem esta face o
   navegador SINTETIZA o itálico cisalhando a reta — medido: mesma largura de avanço,
   971,2px nas duas. Com a face real: 971,2 reto contra 875,7 itálico. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-italic.woff2?v=2026-09-18') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Redefinir --serif no .lp (que é a classe do <body> desta página) faz a variável
   cascatear para TODO descendente: cada var(--serif) daqui para baixo resolve em
   Cormorant, e nenhuma outra página do site é afetada, porque lá o :root do
   site.css continua valendo. Georgia segue na pilha como rede se o woff2 falhar. */
.lp {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', 'Noto Serif', serif;
  background: var(--paper); color: var(--navy);
}

/* ---------- HERÓI ----------
   CELULAR: texto no creme EM CIMA, foto embaixo. SEM SCRIM — testado em 18/09:
   scrim sobre foto clara deixa a imagem acinzentada e mata a luz de dia, que é
   a razão de a landing ser clara. (spec, bloco 📱) */
/* padding:0 anula o `section { padding: 64px 0 }` do site.css — o herói sangra,
   e sem isto sobra uma faixa creme em cima da foto e outra embaixo, colada no
   bloco escuro que vem a seguir. */
.lp-hero { display: flex; flex-direction: column; background: var(--paper); padding: 0; }
.lp-hero-txt { padding: 40px 16px 28px; }
.lp-hero-txt h1 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.12; margin: .3em 0 .8em;
}
.lp-hero-img { display: block; width: 100%; height: auto; }

.lp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lp-cta {
  display: inline-block; background: var(--navy); color: var(--paper);
  font-family: var(--serif); font-size: 1.15rem; text-decoration: none;
  padding: 14px 30px; border-radius: 30px; line-height: 1;
}
/* O secundário é um LINK, mas o dedo não sabe disso. Com `border-bottom` + 2px de
   padding a caixa media 32,4px de altura — abaixo do piso de 40px que o próprio
   teste de clique exige, e num público de 45 a 75 anos lendo no celular alvo curto
   é erro de mira, não detalhe. A caixa vai a 46px (a mesma altura do botão navy,
   então os dois encostam alinhados na linha do herói).
   ⚠️ A RÉGUA teve que sair do `border-bottom`: borda desenha no pé da CAIXA, e a
   caixa agora é 14px mais alta que o texto — a linha ficaria boiando longe da
   palavra. Como ::after ela é posicionada a partir do centro, logo abaixo do texto,
   exatamente onde estava (medido: 6,4px abaixo da tinta, antes e depois). */
.lp-cta-2 {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--serif); font-size: 1.15rem; color: var(--navy);
  text-decoration: none;
}
.lp-cta-2::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(50% + .907em); border-bottom: 1px solid var(--rule);
}
.lp-cta:hover { background: #2C424E; }

/* ---------- HERÓI, COMPUTADOR ----------
   Aí sim a composição de duas metades funciona: texto na metade esquerda
   vazia da própria foto. */
@media (min-width: 900px) {
  .lp-hero { display: grid; grid-template-areas: "tudo"; align-items: center; }
  .lp-hero picture, .lp-hero .lp-hero-txt { grid-area: tudo; }
  .lp-hero-img { width: 100%; max-height: 82vh; object-fit: cover; object-position: right center; }
  .lp-hero-txt {
    position: relative; z-index: 2; width: min(46%, 640px);
    padding: 0 0 0 clamp(32px, 6vw, 90px);
  }
  .lp-hero-txt h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); }
}

/* ---------- A VIRADA: o ÚNICO bloco escuro da página ---------- */
/* Sangria total. padding próprio anula o `section { padding: 64px 0 }` do
   site.css — sem isto sobra uma faixa creme dentro do retângulo escuro. */
.lp-virada {
  background: #120E0B; color: var(--paper);
  padding: clamp(64px, 14vw, 140px) 16px; text-align: center;
}
.lp-virada p {
  font-family: var(--serif); font-size: clamp(1.7rem, 5.6vw, 3rem);
  line-height: 1.25; max-width: 18ch; margin: 0 auto;
  color: var(--paper);   /* o `p { color: var(--muted) }` do site.css apagaria a frase no escuro */
}

/* ---------- CRONOLOGIA ---------- */
.lp-crono { padding: clamp(56px, 10vw, 110px) 16px; max-width: 720px; margin: 0 auto; }
.lp-beat { padding: 26px 0; border-top: 1px solid var(--rule); }
.lp-beat:first-of-type { border-top: 0; }
.lp-ano {
  display: block; font-family: var(--serif); font-size: clamp(2rem, 7vw, 3rem);
  color: var(--rose); line-height: 1; margin-bottom: .2em;
}
.lp-beat p { margin: 0 0 .6em; font-size: 1.05rem; line-height: 1.6; }
/* RESSALVA — regra compartilhada: vale na cronologia (escopo do FDA) E no bloco do
   programa (o disclaimer de compliance). Vive aqui porque nasceu com a cronologia.

   SELETOR COM `.lp` E COM O `p` DE PROPÓSITO: `.lp-ressalva` sozinho tem especificidade
   0,1,0 e PERDE para `.lp-beat p` (0,1,1) — dentro de uma batida a ressalva sairia no
   tamanho e na cor do corpo, calada. `.lp p.lp-ressalva` é 0,2,1: vence `.lp-beat p` na
   cronologia e continua valendo em qualquer outro bloco da página, que é o caso do
   `.lp-programa`, onde a versão antiga simplesmente não aplicava nada.
   E a cor é --muted, não --soft: medido, --soft dá 3,13:1 sobre o papel e reprova o AA
   da WCAG (4,5:1) num texto de 14px; --muted dá 6,52:1. Estas ressalvas são obrigatórias
   e têm que continuar legíveis no print de quem fotografar só aquele pedaço —
   secundárias ao corpo (10,91:1), nunca ilegíveis.
   `margin-bottom: 0` porque nos dois casos ela é o último elemento do bloco. */
.lp p.lp-ressalva { font-size: .92rem; color: var(--muted); line-height: 1.5; margin-bottom: 0; }

/* ---------- A PONTE ---------- */
/* padding próprio anula o `section { padding: 64px 0 }` do site.css. */
.lp-ponte { padding: clamp(56px, 11vw, 120px) 16px; text-align: center; background: var(--paper-2); }
.lp-ponte p {
  font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.3; max-width: 20ch; margin: 0 auto .4em;
  color: var(--navy);   /* o `p { color: var(--muted) }` do site.css apagaria a frase de virada */
}
/* `.lp-ponte p.lp-ponte-2` e NÃO `.lp-ponte-2`: a regra acima é 0,1,1 e venceria uma
   classe sozinha (0,1,0) em qualquer ordem — o rosa sumiria e as duas linhas ficariam
   iguais, matando a virada. Mesma armadilha da ressalva, dois blocos acima. */
.lp-ponte p.lp-ponte-2 { color: var(--rose); margin-bottom: 0; }

/* ---------- PROGRAMA e PARA QUEM É ---------- */
.lp-programa, .lp-quem { padding: clamp(56px, 10vw, 110px) 16px; max-width: 720px; margin: 0 auto; }
.lp-programa h2, .lp-quem h2 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.22;
  /* `auto` nas laterais, não `0`: o `.lp-quem` é sangria total, então lá o h2 tem
     max-width de 720px dentro de um container largo e precisa se centralizar junto
     com a lista. Com `margin: .2em 0 1em` ele vencia o `.lp-quem > *` (0,1,1 contra
     0,1,0) e ficava encostado na borda esquerda enquanto o resto do bloco ficava
     centrado — desalinhamento visível a partir de ~1100px. */
  margin: .2em auto 1em;
}
.lp-lista { list-style: none; padding: 0; margin: 0 auto 1.6em; }
.lp-lista li {
  padding: 14px 0 14px 26px; border-top: 1px solid var(--rule);
  position: relative; line-height: 1.55;
}
/* O traço acompanha a PRIMEIRA linha do item: padding do topo + metade da entrelinha
   (1.55em / 2). Valor fixo em px descola assim que o corpo muda de tamanho, e no
   celular quase todo item quebra em duas ou três linhas — é justamente aí que um
   traço fora do lugar aparece. */
.lp-lista li::before {
  content: ""; position: absolute; left: 0; top: calc(14px + .775em);
  width: 10px; height: 1px; background: var(--rose);
}
/* Sangria total: a faixa de cor vai de borda a borda e só o CONTEÚDO fica na
   coluna de 720px. O `max-width: none` precisa vir depois da regra compartilhada
   acima (mesma especificidade, ganha a ordem). */
.lp-quem { background: var(--paper-2); max-width: none; }
/* `720px - 2×16px` e NAO `720px`: com `box-sizing: border-box` (site.css), uma seção
   de `max-width:720px` com 16px de recuo tem caixa de CONTEÚDO de 688px. Dando 720px
   cheios ao filho aqui, a coluna do "para quem é" nascia 32px mais larga e 16px mais
   à esquerda que a da cronologia e a do programa — medido em 1280 e 1920px, e visível
   ao rolar de um bloco para o outro. O `16px` tem que acompanhar o recuo da regra
   compartilhada logo acima. */
.lp-quem > * { max-width: calc(720px - 2 * 16px); margin-left: auto; margin-right: auto; }
/* O `.kicker` do site.css também traz `margin: 0 0 .8rem 0` (0,1,0) e só perde para
   `.lp-quem > *` pela ordem dos arquivos. Isto aqui é 0,2,0 e não depende de ordem. */
.lp-quem .kicker { margin-left: auto; margin-right: auto; }

/* Na IMPRESSÃO o navegador descarta fundos por padrão, e aí a única frase do bloco
   escuro sai creme sobre papel branco — fantasma. Medido em 18/09: a página 2 do PDF
   saiu com ZERO pixel escuro e "gente tem data de validade." ilegível. Inverter só
   ESTE bloco na impressão resolve sem depender de print-color-adjust (que o usuário
   desliga na caixa de diálogo).
   ⚠️ NÃO é mais o único bloco invertido: o rodapé e o botão principal têm a MESMA
   doença e são tratados no segundo @media print, no fim do arquivo. */
@media print {
  .lp-virada { background: var(--paper); color: var(--navy); padding: 48px 16px; }
  .lp-virada p { color: var(--navy); }
}

/* ---------- O PEDIDO (o fecho) ---------- */
/* padding próprio anula o `section { padding: 64px 0 }` do site.css. */
.lp-pedido { padding: clamp(64px, 12vw, 130px) 16px; max-width: 720px; margin: 0 auto; text-align: center; }
.lp-pedido h2 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(1.8rem, 6vw, 2.6rem); margin: .2em 0 .5em;
}
.lp-lead { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin: 0 auto 1.8em; max-width: 46ch; }
/* O `.lp-acoes` do herói é alinhado à esquerda; aqui o bloco é centrado. */
.lp-acoes-c { justify-content: center; }

/* ---------- RODAPÉ ---------- */
.lp-rodape {
  background: var(--navy); color: var(--paper-2);
  padding: 44px 16px; text-align: center; font-size: .85rem; line-height: 1.6;
}
/* A COR TEM QUE SER REDECLARADA AQUI. O `p { color: var(--muted) }` do site.css é
   0,0,1 e se aplica DIRETAMENTE ao <p>; o `color` do `.lp-rodape` só seria herdado,
   e herança perde para qualquer declaração direta. Sem esta linha o disclaimer
   obrigatório sai #4A5560 sobre o navy #22353F — 1,45:1, praticamente invisível,
   e nada quebra nem avisa. Com --paper-2: 9,88:1. Mesma armadilha que já mordeu a
   virada e a ponte. */
.lp-rodape p { margin: 0 auto .9em; max-width: 60ch; color: var(--paper-2); }
/* `a { color: var(--rose) }` do site.css: rosa #824956 sobre navy dá 1,7:1.
   O `padding` não é estético: como <a> em linha o alvo de toque nascia com 73,4 × 16px
   de altura — abaixo dos 24px do WCAG 2.5.8, num público de 45 a 75 anos tocando no
   celular. Com 12px em cima e embaixo vai a 40px. A margem negativa devolve o espaço
   que o padding acrescentou, para o rodapé não ganhar uma faixa vazia embaixo. */
.lp-rodape a { color: var(--paper); display: inline-block; padding: 12px 16px; }
.lp-rodape p:last-child { margin-bottom: -12px; }

/* LOCKUP DA MARCA — wordmark grotesco + tagline Title Case na largura exata de
   ETERNA. Espelha o `.brand` do site.css (mesma razão, mesmo tracking), para o
   rodapé desta página ler igual ao rodapé que já está no ar.
   - `--sans` e NÃO `var(--serif)`: dentro de `.lp` o --serif é Cormorant, e wordmark
     serifado é exatamente o defeito que o Renato pegou em 28/08.
   - `width:0; min-width:100%` faz a tagline nunca ALARGAR o lockup, e o
     `text-align-last: justify` a abre até a largura de ETERNA.
   - razão em `em` (não pt/rem fixo): assim a trava sobrevive a qualquer tamanho.
   ⚠️ `white-space:nowrap` + justify NÃO justifica se a largura natural passar da
   caixa — ela TRANSBORDA calada. A razão abaixo é MEDIDA, não gosto.

   POR QUE .360em E NÃO O .370em (=.5rem/1.35rem) QUE O site.css USA: medido em
   18/09 na face que esta página realmente renderiza (BlinkMacSystemFont / SF, no
   Mac e no iPhone), ETERNA mede 111,95px e a tagline a .370em nasce com 112,03px
   de largura NATURAL — ou seja, 0,08px MAIOR que o wordmark. Ela só não é acusada
   porque o check-lockup.py tolera 1px. Folga zero é a véspera do defeito de 28/08:
   qualquer face um fio mais larga transborda calada. A .360em a natural cai para
   109,25px (+2,40% de folga, esticamento +2,47%, dentro dos ±6%), e nas outras
   faces da pilha a folga é ainda maior — Helvetica Neue +14,1%, Arial/Helvetica
   +17,8%, Tahoma +12,1%, Trebuchet +9,0%, Verdana +8,0%. É também a mesma razão
   medida no impresso (folder-build) e ~a do deck (0,365). */
.lp-rodape .lockup {
  display: flex; flex-direction: column; align-items: stretch;
  width: max-content; margin: 0 auto 20px; font-size: 1.35rem; color: var(--paper);
}
.lp-rodape .word {
  font-family: var(--sans); font-weight: 400; font-size: 1em; letter-spacing: .30em;
  margin-right: -.30em; white-space: nowrap; line-height: 1;
}
.lp-rodape .tag {
  font-family: var(--sans); font-weight: 400; font-size: .360em; letter-spacing: .01em;
  color: rgba(240, 237, 233, .72);   /* 6,50:1 sobre o navy — AA mesmo em corpo pequeno */
  margin-top: .30em; white-space: nowrap;
  display: block; width: 0; min-width: 100%; text-align: justify; text-align-last: justify;
}

/* Mesma doença da .lp-virada, e aqui ela é PIOR: o rodapé é justamente onde moram os
   disclaimers obrigatórios. Impresso, o navegador descarta o fundo navy e sobra
   #E7E2DB sobre papel branco — 1,29:1.
   O Chrome disfarça: medido em 18/09, ele ESCURECE sozinho a tinta clara ao imprimir
   (o disclaimer saiu em (147,144,139), 3,18:1; o rótulo do botão saiu quase navy).
   Isso é comportamento não especificado do Chrome — não vale para todo navegador, e
   3,18:1 continua abaixo dos 4,5:1 do AA. Texto de proteção jurídica não pode depender
   de um ajuste que o fabricante do navegador pode mudar amanhã: inverter de propósito.
   O `.lp-cta` é a mesma família (rótulo creme sobre fundo que some) e entra junto —
   sem isto o botão do herói e o do pedido imprimem como retângulo vazio. */
@media print {
  .lp-rodape { background: var(--paper); color: var(--navy); }
  .lp-rodape p, .lp-rodape a, .lp-rodape .word { color: var(--navy); }
  .lp-rodape .tag { color: var(--muted); }
  .lp-cta { background: var(--paper); color: var(--navy); border: 1px solid var(--rule); }
}

/* ---------- A MARCA ----------
   Estava faltando: a primeira versão da landing não tinha a chama em lugar
   nenhum — só as fitas dentro da foto do herói. O §6 do spec diz "a chama É o
   tema"; o kicker de texto não cumpria isso. Decisão do Renato, 18/09:
   topo + rodapé, SEM barra de menu.

   O wordmark é GROTESCA, nunca serifada — regra da marca (o `--serif` está
   redefinido no .lp, então aqui a família vai explícita para não herdar
   Cormorant). Tracking .28em com margin-right negativa para cancelar o
   espaço que sobra depois do último A. */
.lp-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.lp-chama { width: auto; height: 38px; display: block; }
.lp-marca-txt {
  font-family: var(--sans); font-size: .95rem; font-weight: 400;
  letter-spacing: .28em; margin-right: -.28em; color: var(--navy);
  line-height: 1; white-space: nowrap;
}
@media (min-width: 900px) { .lp-chama { height: 46px; } .lp-marca { margin-bottom: 32px; } }

/* Rodapé: a chama acima do lockup, irmã dele (ver o comentário no HTML). */
.lp-chama-rodape { height: 54px; width: auto; display: block; margin: 0 auto 14px; }