/* ============================================================
   IntegraRenave — home.css
   CSS exclusivo da landing (index.html). Carregado DEPOIS de
   css/style.css e SÓ aqui: painel, cadastro, api e admin não
   importam este arquivo, então nada daqui os alcança.

   Direção: EDITORIAL. Separação por régua de 1px e por branco,
   nunca por caixa; base neutra + UM acento; um único ponto focal
   cromático (o bloco de preço em tinta escura).

   Convenções desta folha:
   1. Todo nome novo é prefixado .lp- (landing page) e/ou escopado
      em .home — nomes genéricos (.marca, .valor, .barra) vazariam
      conceito para o resto do produto.
   2. Toda cor nova é declarada nos TRÊS temas.
   3. Todo transform/transition de hover mora dentro do bloco
      @media (prefers-reduced-motion: no-preference).
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens novos — declarados nos três temas
   ------------------------------------------------------------ */
:root {
  /* Acento para TEXTO PEQUENO e para o anel de foco.
     O --laranja da marca (#e8862e) faz 2,6:1 sobre o creme do tema claro:
     reprova o mínimo de 3:1 que a WCAG 1.4.11 exige para o indicador de foco,
     e o --laranja-texto (#b45e0b) fica no limite para rótulos de 11–12px.
     Este tom é a mesma matiz um passo mais escura: 5,06:1 sobre --fundo.
     Nos temas escuro e colorido o token da marca já passa e é reaproveitado. */
  --lp-acento-forte: #a85608;

  --lp-linha: #e2d8ca;        /* trilho tracejado e divisores finos */
  --lp-chip: #f4efe7;         /* fundo de chip discreto */

  /* Bloco de destaque (preço). Único lugar da página com superfície cheia. */
  --lp-tinta: #16233f;
  --lp-tinta-texto: #ffffff;
  --lp-tinta-suave: #a9b8d6;  /* 7,8:1 sobre --lp-tinta */

  /* Janela do painel (mock) */
  --lp-mock-fundo: #ffffff;
  --lp-mock-barra: #f6f2ec;
  --lp-mock-linha: #f0eae1;

  /* Chip de código: escuro nos três temas de propósito — é a única
     "tela de terminal" da página e precisa ler como tal. */
  --lp-codigo-fundo: #16203a;
  --lp-codigo-texto: #dbe4f6;
  --lp-codigo-acento: #ffb367;

  --lp-halo-a: rgba(232, 134, 46, 0.20);
  --lp-halo-b: rgba(30, 58, 110, 0.10);

  --lp-sombra-mock: 0 30px 70px -28px rgba(30, 58, 110, 0.45);
  --lp-sombra-leve: 0 1px 2px rgba(30, 58, 110, 0.05);

  --lp-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", SFMono-Regular,
             Consolas, "Liberation Mono", monospace;
}

html[data-tema="escuro"] {
  --lp-acento-forte: var(--laranja-texto);   /* #f09d52 = 8,5:1 sobre o fundo */

  --lp-linha: #2e3950;
  --lp-chip: #1d2536;

  --lp-tinta: #223052;
  --lp-tinta-texto: #f3f7ff;
  --lp-tinta-suave: #a9b8d6;

  --lp-mock-fundo: #151d2c;
  --lp-mock-barra: #101725;
  --lp-mock-linha: #232d42;

  --lp-codigo-fundo: #0a0f19;
  --lp-codigo-texto: #cfdaf0;
  --lp-codigo-acento: #ffc188;

  --lp-halo-a: rgba(232, 134, 46, 0.16);
  --lp-halo-b: rgba(58, 92, 168, 0.20);

  --lp-sombra-mock: 0 30px 70px -26px rgba(0, 0, 0, 0.8);
  --lp-sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-tema="colorido"] {
  --lp-acento-forte: var(--laranja-texto);   /* #be123c = 5,9:1 sobre o fundo */

  --lp-linha: #e6d8f4;
  --lp-chip: #f5eefc;

  /* Aqui a tinta é gradiente — por isso o token só é usado como background,
     nunca como border-color. */
  --lp-tinta: linear-gradient(135deg, #4c1d95, #831843);
  --lp-tinta-texto: #ffffff;
  --lp-tinta-suave: #dcc9f0;

  --lp-mock-fundo: #ffffff;
  --lp-mock-barra: #f8f1fd;
  --lp-mock-linha: #f1e7fa;

  --lp-codigo-fundo: #2c0f5e;
  --lp-codigo-texto: #ebe0fb;
  --lp-codigo-acento: #fda4af;

  --lp-halo-a: rgba(244, 63, 94, 0.16);
  --lp-halo-b: rgba(139, 92, 246, 0.18);

  --lp-sombra-mock: 0 30px 70px -28px rgba(91, 33, 182, 0.4);
  --lp-sombra-leve: 0 1px 2px rgba(91, 33, 182, 0.06);
}

/* ---------- Contraste do botão de conversão ----------
   O --grad-primario do style.css começa em #d97514: texto branco sobre esse
   ponto dá 3,23:1 e reprova o AA para texto normal — justamente no botão que
   converte. Aqui a rampa começa no tom escuro que a marca já usa
   (#b35c0a = 4,72:1) e desce a partir dele: mesma matiz, agora legível.
   NOTA PARA O TIME: o ideal é corrigir isso em css/style.css, para o produto
   inteiro (o mesmo botão aparece em /painel e /cadastro). Esta entrega não
   pode tocar naquele arquivo, então o override fica escopado em body.home.
   O tema colorido já passa (#e11d48 = 4,7:1) e é preservado como está. */
body.home { --grad-primario: linear-gradient(135deg, #b35c0a, #944709); }

html[data-tema="colorido"] body.home {
  --grad-primario: linear-gradient(135deg, #e11d48, #7c3aed);
}

/* ------------------------------------------------------------
   2. Base da landing
   ------------------------------------------------------------ */
body.home {
  /* clip (e não hidden) porque hidden criaria um contexto de rolagem e
     quebraria o position:sticky do topo. Rede de segurança contra estouro
     horizontal a 375px. */
  overflow-x: clip;
}

/* Margem lateral fixa em vez de porcentagem: a 375px sobra folga real
   e nada encosta na borda da tela. */
.home .container { width: min(1160px, calc(100% - 40px)); }

/* Âncoras não podem parar debaixo do topo fixo (navbar de 72px + folga) */
[id] { scroll-margin-top: 92px; }

/* O scroll-behavior:smooth do style.css é global e não consulta a
   preferência do usuário — aqui ele é desligado para quem pediu
   menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* .lp-secao vence o `section { padding: 80px 0 }` do style.css por
   especificidade, sem !important. */
.home .lp-secao { padding: clamp(60px, 8vw, 120px) 0; }

/* Foco visível em tudo que recebe teclado. O offset joga o anel para fora
   do componente, garantindo contraste também sobre o botão laranja. */
.home a:focus-visible,
.home button:focus-visible {
  outline: 2px solid var(--lp-acento-forte);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Títulos: tracking apertado é a assinatura tipográfica da página.
   Sem hyphens:auto — a 375px o navegador quebraria "des-pachante" no meio
   de um título de 38px; balance + break-word já resolvem. */
.home h1,
.home h2,
.home h3 {
  color: var(--titulo);
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Texto só para leitor de tela */
.lp-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   3. Botões e links próprios da landing
   ------------------------------------------------------------ */
/* Contorno por box-shadow inset: o botão contornado fica exatamente com a
   mesma altura do primário (border mudaria a caixa). */
.lp-btn-contorno {
  background: transparent;
  color: var(--titulo);
  box-shadow: inset 0 0 0 1.5px var(--borda);
}

.lp-btn-contorno:hover {
  box-shadow: inset 0 0 0 1.5px var(--lp-acento-forte);
  color: var(--lp-acento-forte);
}

/* Botão para usar sobre a tinta escura (escura nos três temas) */
.lp-btn-claro {
  background: #ffffff;
  color: #15213c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.lp-link-forte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-acento-forte);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.lp-link-forte .ic { width: 16px; height: 16px; }

.lp-link-forte:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   4. Topo (ajustes finos sobre o .navbar do style.css)
   ------------------------------------------------------------ */
.home .nav-links { gap: clamp(18px, 2.4vw, 30px); }

.home .nav-links a { font-size: 0.92rem; font-weight: 600; }

.home .nav-links a:hover { color: var(--lp-acento-forte); }

.lp-entrar {
  color: var(--titulo);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}

.lp-entrar:hover { color: var(--lp-acento-forte); }

.lp-btn-topo { white-space: nowrap; }

/* ------------------------------------------------------------
   5. Capa
   ------------------------------------------------------------ */
.lp-capa {
  position: relative;
  overflow: hidden;                 /* segura os halos e a carta fantasma */
  padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 64px);
}

/* Dois halos radiais: profundidade sem imagem e sem peso de download */
.lp-capa::before,
.lp-capa::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.lp-capa::before {
  width: 720px; height: 720px;
  top: -340px; right: -220px;
  background: radial-gradient(circle, var(--lp-halo-a) 0%, transparent 68%);
}

.lp-capa::after {
  width: 620px; height: 620px;
  bottom: -340px; left: -260px;
  background: radial-gradient(circle, var(--lp-halo-b) 0%, transparent 68%);
}

.lp-capa-grade {
  position: relative;
  z-index: 1;
  display: grid;
  /* assimetria leve: o texto manda, a janela acompanha */
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(40px, 5.5vw, 72px);
  align-items: center;
}

.lp-sobretitulo {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lp-acento-forte);
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

.lp-capa h1 {
  /* o elemento mais caro da página: grande, apertado, sem enfeite.
     Cor sólida — texto em gradiente com background-clip some no modo de
     alto contraste do Windows e derruba o contraste no stop claro. */
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.lp-capa-frase {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--texto-suave);
  max-width: 44ch;
  margin-top: clamp(18px, 2.4vw, 26px);
}

.lp-capa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 36px);
}

.lp-micro {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   6. Mock do painel — prova visual do produto em HTML/CSS
   ------------------------------------------------------------ */
.lp-mock-area { position: relative; min-width: 0; }

/* Carta fantasma rotacionada atrás da janela: profundidade em um
   pseudo-elemento, sem imagem nenhuma. */
.lp-mock-area::before {
  content: "";
  position: absolute;
  inset: 26px -14px -18px 22px;
  border-radius: 20px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda);
  opacity: 0.6;
  transform: rotate(2deg);
  pointer-events: none;
}

/* Sem overflow:hidden — o pino flutua para fora da janela de propósito.
   Cada filho arredonda os próprios cantos. */
.lp-mock {
  position: relative;
  background: var(--lp-mock-fundo);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--borda), var(--lp-sombra-mock);
}

.lp-mock-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--lp-mock-barra);
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--lp-mock-linha);
  min-width: 0;
}

.lp-mock-pontos { display: flex; gap: 6px; flex: none; }

.lp-mock-pontos i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-linha);
}

.lp-mock-pontos i:first-child { background: var(--laranja); opacity: 0.75; }

.lp-mock-titulo {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--texto-suave);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-mock-corpo { display: grid; grid-template-columns: 124px minmax(0, 1fr); }

/* Menu lateral: é o que faz a janela ler como aplicativo, não como
   tabela solta. */
.lp-mock-menu {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 14px 10px;
  border-right: 1px solid var(--lp-mock-linha);
  background: var(--fundo);
}

.lp-mock-menu span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 7px 10px;
  border-radius: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* precisa vencer o `.lp-mock-menu span` acima — daí o seletor descendente */
.lp-mock-menu .lp-mock-ativo {
  background: var(--laranja-claro);
  color: var(--lp-acento-forte);
  font-weight: 800;
}

.lp-mock-painel { padding: 14px; min-width: 0; }

.lp-mock-topo { display: flex; gap: 8px; margin-bottom: 10px; }

.lp-mock-campo {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--campo-fundo);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: 0.73rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-mock-botao {
  flex: none;
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--grad-primario);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 700;
  white-space: nowrap;
}

.lp-mock-linha {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--lp-mock-linha);
  font-size: clamp(0.72rem, 1.9vw, 0.78rem);
  color: var(--texto-suave);
}

/* as três células truncam em vez de empurrar a largura a 375px */
.lp-mock-linha > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-mock-cab {
  border-top: none;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lp-mock-placa {
  font-family: var(--lp-mono);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--titulo);
}

.lp-mock-tag {
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: clamp(0.6rem, 1.6vw, 0.66rem);
  font-weight: 800;
}

/* tintas já resolvidas nos três temas pelo style.css */
.lp-tag-ok { background: var(--verde-claro); color: var(--verde-texto); }
.lp-tag-az { background: var(--azul-claro); color: var(--titulo); }
.lp-tag-la { background: var(--laranja-claro); color: var(--lp-acento-forte); }

/* Barras esmaecidas: dizem "a tabela continua" sem gastar uma palavra */
.lp-mock-esqueleto {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-mock-linha);
  -webkit-mask-image: linear-gradient(#000 5%, transparent 100%);
  mask-image: linear-gradient(#000 5%, transparent 100%);
}

.lp-mock-esqueleto i {
  height: 8px;
  border-radius: 99px;
  background: var(--lp-mock-linha);
}

.lp-mock-pe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--lp-mock-linha);
  border-radius: 0 0 20px 20px;
  background: var(--lp-mock-barra);
  font-size: 0.76rem;
  color: var(--texto-suave);
}

.lp-mock-pe strong { color: var(--titulo); font-weight: 800; letter-spacing: -0.02em; }

/* Pino flutuante: a única linha de prova sobre a janela */
.lp-mock-pino {
  position: absolute;
  top: -16px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 36px);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda), 0 10px 24px rgba(0, 0, 0, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mock-pino .ic { width: 13px; height: 13px; flex: none; color: var(--verde-texto); }

/* ------------------------------------------------------------
   7. Régua de credibilidade
   ------------------------------------------------------------ */
.lp-prova {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 46px);
  margin-top: clamp(40px, 5.5vw, 76px);
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}

.lp-prova li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.lp-prova .ic { width: 16px; height: 16px; flex: none; color: var(--lp-acento-forte); }

/* ------------------------------------------------------------
   8. Régua de âncoras (só no celular)
   Abaixo de 960px o style.css esconde o .nav-links; sem isto o
   visitante de celular fica sem sumário da página.
   ------------------------------------------------------------ */
.lp-rail { display: none; }

.lp-rail ul {
  display: flex;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lp-rail ul::-webkit-scrollbar { display: none; }

.lp-rail a {
  display: block;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--lp-chip);
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   9. Cabeçalho de seção (à esquerda, editorial)
   ------------------------------------------------------------ */
.lp-secao-topo { max-width: 640px; margin-bottom: clamp(34px, 4.6vw, 60px); }

.lp-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lp-acento-forte);
  margin-bottom: 14px;
}

.lp-rotulo::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.lp-secao-topo h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  max-width: 18ch;
}

.lp-secao-linha {
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 1rem;
}

/* ------------------------------------------------------------
   10. Serviços — a trilha
   Desktop: horizontal. Celular: vertical. O trecho que sai do RENAVE é
   sólido no acento (serviço no ar); os demais são tracejados (dependem de
   credenciamento). O desenho carrega o status regulatório, então o selo
   "Em breve" deixa de ser o único sinal.
   ------------------------------------------------------------ */
.lp-trilha {
  --no: 52px;                       /* diâmetro do nó */
  --gap: clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
}

.lp-etapa { position: relative; min-width: 0; }

/* trecho de trilho que sai de cada etapa (a última não tem) */
.lp-etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--no) / 2 - 1px);
  left: calc(var(--no) + 12px);
  width: calc(100% + var(--gap) - var(--no) - 24px);
  height: 2px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, var(--lp-linha) 0 7px, transparent 7px 14px);
}

.lp-etapa-viva:not(:last-child)::after {
  background-image: none;
  background-color: var(--laranja);
  opacity: 0.85;
}

.lp-etapa-no {
  display: grid;
  place-items: center;
  width: var(--no);
  height: var(--no);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1.5px var(--borda), var(--lp-sombra-leve);
  color: var(--texto-suave);
}

.lp-etapa-no .ic { width: 22px; height: 22px; }

/* nó do serviço operacional: o único bloco preenchido da seção */
.lp-etapa-viva .lp-etapa-no {
  background: var(--grad-primario);
  color: #fff;
  box-shadow: 0 10px 24px var(--grad-sombra);
}

/* Sem opacity: o número é texto e 0.7 derrubaria o contraste.
   A hierarquia vem do tamanho. */
.lp-etapa-num {
  display: block;
  margin: 20px 0 6px;
  font-family: var(--lp-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
}

.lp-etapa h3 {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 7px;
}

.lp-etapa > p {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--texto-suave);
  max-width: 30ch;
}

/* Status + preço na mesma régua: o serviço que opera é o único que
   mostra número, e mostra onde o visitante decide. */
.lp-etapa-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 14px;
}

.lp-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.lp-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;   /* ponto vazado = pendente */
}

.lp-status-viva { color: var(--verde-texto); }

.lp-status-viva::before {
  background: currentColor;                     /* ponto cheio = no ar */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

.lp-preco { font-size: 0.85rem; color: var(--texto-suave); }

.lp-preco strong { color: var(--titulo); font-weight: 800; }

/* Nota regulatória: uma linha, sem parágrafo jurídico */
.lp-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  max-width: 72ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.lp-nota .ic { width: 16px; height: 16px; margin-top: 3px; flex: none; }

.lp-nota strong { color: var(--titulo); }

/* ------------------------------------------------------------
   11. Plataforma — uma barra dividida por hairlines
   Quatro itens numa só superfície (gap de 1px sobre um fundo da cor da
   borda) em vez de quatro cards idênticos: é o oposto visual da trilha.
   ------------------------------------------------------------ */
.lp-barra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--borda);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--borda), var(--sombra);
}

.lp-barra-item {
  background: var(--superficie);
  padding: clamp(22px, 2.6vw, 32px);
  min-width: 0;
}

.lp-barra-item > .ic {
  width: 22px;
  height: 22px;
  color: var(--lp-acento-forte);
  margin-bottom: 16px;
}

.lp-barra-item h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}

.lp-barra-item h3 a { color: inherit; text-decoration: none; }

.lp-barra-item h3 a:hover { text-decoration: underline; }

.lp-barra-item p { font-size: 0.89rem; line-height: 1.5; color: var(--texto-suave); }

/* Realce de hover é mudança de cor, não movimento: fica fora da guarda de
   reduced-motion (só a transição que o suaviza é que mora lá dentro). */
.lp-barra-item:hover { background: var(--hover-linha); }

/* Chip de código: a prova mais barata que existe para comprador com DMS */
.lp-codigo {
  display: block;
  font-family: var(--lp-mono);
  font-size: 0.78rem;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lp-codigo-fundo);
  color: var(--lp-codigo-texto);
  white-space: nowrap;
  overflow-x: auto;                 /* nunca empurra a largura da página */
}

.lp-codigo b { color: var(--lp-codigo-acento); }

/* ------------------------------------------------------------
   12. Preço — o ponto focal cromático
   ------------------------------------------------------------ */
.lp-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.lp-bento-destaque,
.lp-bento-lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(28px, 3.6vw, 46px);
  border-radius: 26px;
}

.lp-bento-destaque {
  background: var(--lp-tinta);
  color: var(--lp-tinta-texto);
}

.lp-bento-lateral {
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda), var(--sombra);
}

.lp-etiqueta {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.lp-bento-destaque .lp-etiqueta { color: var(--lp-tinta-suave); }
.lp-bento-lateral .lp-etiqueta { color: var(--lp-acento-forte); letter-spacing: 0.06em; }

.lp-valor {
  font-size: clamp(3rem, 7vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.lp-valor sup {
  font-size: 0.32em;
  font-weight: 700;
  vertical-align: 0.95em;
  margin-right: 0.14em;
  letter-spacing: -0.01em;
}

/* Padrão NEUTRO, override no bloco escuro (e não o contrário): assim uma
   reordenação futura nunca produz texto claro sobre fundo claro. */
.lp-valor-nota,
.lp-rodape-bloco {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.lp-valor-nota { margin: 10px 0 26px; }

.lp-rodape-bloco { margin-top: 18px; }

.lp-bento-destaque .lp-valor-nota,
.lp-bento-destaque .lp-rodape-bloco { color: var(--lp-tinta-suave); }

.lp-bento-lateral .lp-rodape-bloco { margin: 12px 0 auto; }

.lp-valor-texto {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--titulo);
  line-height: 1.1;
}

.lp-bento-lateral .lp-link-forte { margin-top: 24px; }

/* Fichas de garantia: chips em linha, sem cards */
.lp-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  list-style: none;
  margin-top: 22px;
}

.lp-fichas li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--lp-chip);
  color: var(--texto-suave);
  font-size: 0.84rem;
  font-weight: 600;
}

.lp-fichas .ic { width: 14px; height: 14px; flex: none; color: var(--verde-texto); }

/* ------------------------------------------------------------
   13. Fecho
   ------------------------------------------------------------ */
/* Mesma especificidade de `.home .lp-secao`, declarada depois: vence sem
   precisar de !important. O respiro do fecho vem do .lp-fecho, que carrega
   a régua de 1px que separa a seção. */
.home .lp-secao-fecho { padding-top: 0; }

.lp-fecho {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding-top: clamp(50px, 7vw, 96px);
  border-top: 1px solid var(--borda);
}

.lp-fecho h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  max-width: 14ch;
}

.lp-fecho p { color: var(--texto-suave); font-size: 1.04rem; max-width: 34ch; }

.lp-fecho .btn { margin-top: 10px; }

/* O mascote entra uma vez só, aqui, com halo em vez de moldura */
.lp-fecho-mascote { position: relative; display: grid; place-items: center; }

.lp-fecho-mascote::before {
  content: "";
  position: absolute;
  width: 260px;
  max-width: 86vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lp-halo-a), transparent 68%);
}

.lp-fecho-mascote img {
  position: relative;
  width: auto;
  height: clamp(130px, 17vw, 180px);
}

/* ------------------------------------------------------------
   14. Rodapé
   Classe própria (.lp-pe): o .rodape do style.css é azul-escuro e pesaria
   a página. Aqui é só uma mudança tonal — e no tema escuro a regra
   html[data-tema="escuro"] .logo-img continua deixando a logo branca.
   ------------------------------------------------------------ */
.lp-pe {
  background: var(--fundo-painel);
  border-top: 1px solid var(--borda);
  padding: clamp(40px, 5vw, 62px) 0 28px;
}

.lp-pe-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}

.lp-pe-marca p {
  margin-top: 12px;
  max-width: 32ch;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.lp-pe-cab {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--titulo);
  margin-bottom: 14px;
}

.lp-pe-links ul { list-style: none; display: grid; gap: 9px; }

.lp-pe-links a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.88rem;
  /* e-mail longo não pode empurrar a largura no celular */
  overflow-wrap: anywhere;
}

.lp-pe-links a:hover { color: var(--lp-acento-forte); }

.lp-pe-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   15. Movimento — TODO transform/transition mora aqui dentro
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* A classe .anim só existe se o JS ligou (e só liga com
     IntersectionObserver disponível). Sem ela nada é escondido. */
  html.anim [data-revelar] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  html.anim [data-revelar].visivel { opacity: 1; transform: none; }

  /* O trilho é desenhado da esquerda para a direita — clip-path não
     distorce o tracejado como um scaleX faria. */
  html.anim .lp-etapa:not(:last-child)::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s ease;
    transition-delay: calc(var(--i, 0) * 80ms + 220ms);
  }

  html.anim .lp-etapa.acesa:not(:last-child)::after { clip-path: inset(0); }

  /* Hovers: 1–2px, nada além disso */
  .lp-btn-contorno,
  .lp-btn-claro,
  .lp-etapa-no,
  .lp-barra-item,
  .lp-link-forte .ic { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }

  .lp-btn-contorno:hover { transform: translateY(-1px); }
  .lp-btn-claro:hover { transform: translateY(-2px); }
  .lp-etapa:hover .lp-etapa-no { transform: translateY(-2px); }
  .lp-link-forte:hover .ic { transform: translateX(3px); }
}

/* Contrapartida: o .btn e o .btn-tema do style.css transicionam e levantam
   no hover fora de qualquer guarda. Na landing isso é neutralizado para
   quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .home .btn,
  .home .btn-tema { transition: none; }

  .home .btn:hover,
  .home .btn-tema:hover { transform: none; }
}

/* ------------------------------------------------------------
   16. Responsivo — 375px a 1440px+, sem scroll horizontal
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .lp-capa-grade { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 56px); }
  .lp-capa-texto { max-width: 640px; }
  .lp-capa h1 { max-width: 15ch; }
  .lp-mock-area { max-width: 560px; }
  .lp-barra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-pe-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-pe-marca { grid-column: 1 / -1; }
}

/* O style.css esconde o .nav-links aqui — a régua de âncoras entra no lugar */
@media (max-width: 960px) {
  .lp-rail { display: block; margin-top: -8px; }
}

/* A trilha vira vertical: mesma leitura, eixo trocado */
@media (max-width: 860px) {
  .lp-trilha { grid-template-columns: minmax(0, 1fr); --gap: 26px; }

  .lp-etapa { padding-left: calc(var(--no) + 22px); min-height: var(--no); }

  .lp-etapa-no { position: absolute; left: 0; top: 0; }

  .lp-etapa:not(:last-child)::after {
    top: calc(var(--no) + 12px);
    left: calc(var(--no) / 2 - 1px);
    width: 2px;
    height: calc(100% + var(--gap) - var(--no) - 24px);
    background-image: repeating-linear-gradient(180deg, var(--lp-linha) 0 7px, transparent 7px 14px);
  }

  .lp-etapa-viva:not(:last-child)::after { background-image: none; }

  .lp-etapa-num { margin-top: 2px; }

  .lp-etapa > p { max-width: 46ch; }
}

/* Trilho vertical: desenhado de cima para baixo. Consulta única (sem
   aninhamento de at-rules) para não depender do suporte a nesting. */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  html.anim .lp-etapa:not(:last-child)::after { clip-path: inset(0 0 100% 0); }
  html.anim .lp-etapa.acesa:not(:last-child)::after { clip-path: inset(0); }
}

@media (max-width: 620px) {
  .home .container { width: min(1160px, calc(100% - 32px)); }
  .lp-barra { grid-template-columns: minmax(0, 1fr); }
  .lp-pe-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-capa-acoes .btn { width: 100%; }

  /* a carta fantasma só rouba largura em tela estreita */
  .lp-mock-area::before { display: none; }

  .lp-mock-corpo { grid-template-columns: minmax(0, 1fr); }
  .lp-mock-menu { display: none; }
  .lp-mock-pino { right: 10px; font-size: 0.68rem; padding: 6px 11px; }
}

/* Telas estreitas: "Entrar" sai do topo para sobrar o CTA principal
   (o link continua no rodapé) */
@media (max-width: 560px) {
  .lp-entrar { display: none; }
  .home .nav-acoes { gap: 8px; }
  .lp-btn-topo { padding: 8px 13px; font-size: 0.8rem; }
}

@media (max-width: 400px) {
  /* último ajuste antes de 375px: nada pode empurrar a largura */
  .lp-mock-titulo { display: none; }
  .lp-fichas li { font-size: 0.8rem; padding: 7px 13px; }
}