/* LP Programa de Indicação — só o que o DS não tem componente para.
 * Nasceu como cópia do pagina.css da LP DnA IA (01/10/2026), sem o que era só dela
 * (configurador, portal, filme, faixas de posts, tabela comparativa).
 * Regra da skill: nenhum hex, px de fonte ou gap solto. Tudo por token.
 * Exceções de plataforma vão comentadas na linha. */

/* rolagem suave até a seção do link; quem pediu menos movimento pula direto */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── miolo: a régua da página (DESIGN.md §2) ─────────────────────── */
/* A régua é a do DS, não uma inventada: os templates (.dna-hero, .dna-navbar,
 * .dna-footer) usam --viewport-container/--viewport-padding, e o miolo desta
 * página tem de bater com eles ou o olho lê como torto (DESIGN.md §2).
 * ⚠ Por isso .lp-wrap NUNCA vai dentro de um __container do DS: os recuos somam. */
/* Mesmo padrão do .dna-hero: o RECUO vai no bloco, o max-width no container.
 * Invertido (padding no wrap) o conteúdo cai 32px para dentro e desalinha do logo. */
.lp-wrap {
  width: 100%;
  max-width: var(--viewport-container);
  margin-inline: auto;
}

.lp-secao { padding: var(--spacing-6xl) var(--viewport-padding); }

/* O Hero do DS é grid 1fr 1fr, pressupondo .dna-hero__midia ao lado.
 * Sem mídia, a segunda coluna fica vazia e o texto ocupa meia tela. */
.dna-hero__container:not(:has(.dna-hero__midia)) { grid-template-columns: 1fr; }

/* Hero com foto (banco do Magnific, "freelancer showing project to customer in cafe",
 * 01/10/2026) — a copy pede "duas pessoas conversando num café ou num set, nada de aperto
 * de mão corporativo" e, ao lado, três valores reais em destaque. A foto vai em quadro
 * (raio do card) e os três valores flutuam sobre a borda dela em vidro fosco, como o
 * Card Glass do DS: o número é o que se lê primeiro, a foto é contexto. */
.lp-hero__cena { position: relative; padding-block-end: var(--spacing-2xl); }
.lp-hero__cena .dna-hero__midia {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 40% center;
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border-default);
  filter: saturate(.85);
}
.lp-valores {
  position: absolute;
  inset-inline: var(--spacing-md);
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-valor {
  display: grid;
  gap: var(--spacing-4xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-background-primary) 55%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-text-primary) 14%, transparent);
  -webkit-backdrop-filter: blur(var(--spacing-sm));
  backdrop-filter: blur(var(--spacing-sm));
}
.lp-valor__numero {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  background: linear-gradient(160deg, var(--color-brand) 20%, var(--color-text-primary) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-valor__rotulo { font-size: var(--text-label-md); font-weight: 600; color: var(--color-text-secondary); text-wrap: balance; }
/* os três sobem um depois do outro e depois flutuam devagar, defasados */
/* vidro não entra com opacidade (o Safari desliga o desfoque sob opacity < 1): o card
 * só sobe e quem aparece é o conteúdo, como no Card Glass das seções */
.js-movimento .lp-valor { animation: lp-valor-sobe 900ms var(--ease-out) both, lp-flutua 7s ease-in-out infinite; }
.js-movimento .lp-valor > * { animation: lp-surge 900ms var(--ease-out) both; animation-delay: inherit; }
.js-movimento .lp-valor:nth-child(1) { animation-delay: 1200ms, 2400ms; }
.js-movimento .lp-valor:nth-child(2) { animation-delay: 1400ms, 3600ms; }
.js-movimento .lp-valor:nth-child(3) { animation-delay: 1600ms, 4800ms; }
.js-movimento .lp-valor:nth-child(1) > * { animation-delay: 1200ms; }
.js-movimento .lp-valor:nth-child(2) > * { animation-delay: 1400ms; }
.js-movimento .lp-valor:nth-child(3) > * { animation-delay: 1600ms; }
@keyframes lp-valor-sobe { from { transform: translateY(var(--spacing-md)); } }
@keyframes lp-flutua { 50% { transform: translateY(calc(-1 * var(--spacing-3xs))); } }
/* desktop: a foto ganha um pouco mais de coluna que o texto */
@media (min-width: 1200px) {
  .dna-hero:has(.lp-hero__cena) .dna-hero__container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--spacing-3xl); align-items: center; }
}
/* tablet: tag e título em linha inteira; embaixo, texto e botões de um lado e a foto
 * do outro (.dna-hero__conteudo em display: contents) — o arranjo aprovado na LP DnA IA. */
@media (min-width: 768px) and (max-width: 1199px) {
  .dna-hero:has(.lp-hero__cena) .dna-hero__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "tag tag" "tit tit" "desc cena" "acoes cena" "nota cena";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--spacing-xl);
    row-gap: var(--spacing-md);
    align-items: start;
  }
  .dna-hero:has(.lp-hero__cena) .dna-hero__conteudo { display: contents; }
  .dna-hero:has(.lp-hero__cena) .dna-tag { grid-area: tag; }
  .dna-hero:has(.lp-hero__cena) .dna-hero__titulo { grid-area: tit; }
  .dna-hero:has(.lp-hero__cena) .dna-hero__descricao { grid-area: desc; }
  .dna-hero:has(.lp-hero__cena) .dna-hero__acoes { grid-area: acoes; }
  .dna-hero:has(.lp-hero__cena) .lp-nota-btn { grid-area: nota; }
  .lp-hero__cena { grid-area: cena; }
  .lp-valores { grid-template-columns: minmax(0, 1fr); inset-inline: auto var(--spacing-xs); inset-block: auto calc(-1 * var(--spacing-md)); inline-size: 52%; }
}
/* celular: os três valores saem de cima da foto e ficam numa linha logo abaixo dela,
 * subindo só um pouco sobre a borda — sobre a foto, em 110px de largura, o número em
 * degradê sumia no fundo claro da imagem. Número em cor sólida, rótulo em caption. */
@media (max-width: 767px) {
  .lp-hero__cena { padding-block-end: 0; }
  .lp-valores { position: relative; inset: auto; margin: calc(-1 * var(--spacing-lg)) var(--spacing-xs) 0; gap: var(--spacing-3xs); }
  .lp-valor { padding: var(--spacing-xs); background: color-mix(in srgb, var(--color-background-primary) 80%, transparent); }
  .lp-valor__numero { font-size: var(--text-heading-sm); background: none; color: var(--color-brand); }
  .lp-valor__rotulo { font-size: var(--text-caption); }
  /* lado a lado e estreitos, flutuando em fases diferentes pareciam desalinhados: só sobem */
  .js-movimento .lp-valor { animation: lp-valor-sobe 900ms var(--ease-out) both; }
}

.lp-secao--fundo { background: var(--color-background-surface); }

.lp-cabecalho { margin-block-end: var(--spacing-3xl); }
.lp-titulo {
  font-family: var(--font-sans);
  font-size: var(--text-heading-xl);
  font-weight: 600;
  line-height: var(--leading-title);   /* era --leading-tight (1,05): o título colava; os do DS usam este */
  color: var(--color-text-primary);
  text-wrap: balance;
  margin: 0;
}
/* Corpo de texto em body-sm (16 no desktop), subtítulo em body-md (18): o André achou
 * o corpo grande demais em 24/09/2026 (estava em body-lg/xl, 20/24). Títulos ficam. */
.lp-subtitulo {
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
  text-wrap: pretty;
  margin-block-start: var(--spacing-md);
  margin-block-end: 0;
}
.lp-texto {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-wrap: pretty;
  margin: 0;
}
.lp-texto + .lp-texto { margin-block-start: var(--paragraph-body-sm); }
.lp-texto--destaque { color: var(--color-text-primary); }

/* ── blocos paralelos: lado a lado no desktop, empilhados no mobile ── */
/* A coluna sai da QUANTIDADE de itens, não da largura. auto-fit com minmax deixava
 * buraco: 3 cards em 2 colunas, 4 em 3. Cada grade só usa divisores do próprio total.
 * Os px são breakpoint (fronteira Figma × código), não desenho. */
.lp-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-xl);
}
@media (min-width: 768px) {
  .lp-grade--2,
  .lp-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lp-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Os ajustes de Card, Button, Select e Logo que moravam aqui viraram DS em 25/09/2026
 * (Figma primeiro, pacote depois): .dna-card--texto-longo, .dna-card--glass, número em
 * gradiente, borda no hover, .dna-btn__seta, seta do Select em Text/Secondary,
 * .dna-logo--simbolo. Aqui fica só o que é da página.
 * Card: título, corpo e botão com o MESMO respiro. O DS dá 3xs (8px) entre as linhas
 * do slot, e o botão ganhava o margin do .lp-acoes por cima: título colado, botão longe.
 * Decidido (André, 24/09/2026): o Card do DS continua compacto; card de texto longo
 * ajusta NA PÁGINA, pelo conteúdo (Decisões do DS em ds/dna-design/SKILL.md). */
.dna-card__corpo > .lp-acoes { margin-block-start: auto; padding-block-start: var(--spacing-3xs); }


.lp-so-leitor {
  position: absolute;
  inline-size: 1px;  block-size: 1px;   /* padrão de acessibilidade: some da tela, fica no leitor */
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── utilidades pontuais ─────────────────────────────────────────── */
.lp-pilha { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.lp-acoes { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-block-start: var(--spacing-xl); }
.lp-centro { text-align: center; }
.lp-centro .lp-acoes { justify-content: center; }
.lp-nota-btn {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-block-start: var(--spacing-sm);
}
.lp-pular {
  position: absolute;
  inset-inline-start: -9999px;  /* skip-link fora da tela até receber foco */
}
.lp-pular:focus {
  position: fixed;
  inset-block-start: var(--spacing-sm);
  inset-inline-start: var(--spacing-sm);
  z-index: 100;
}

/* espaçamento pontual entre um bloco e o parágrafo que o fecha */
.lp-apos-md { margin-block-start: var(--spacing-md); }
.lp-apos-lg { margin-block-start: var(--spacing-lg); }
.lp-apos-xl { margin-block-start: var(--spacing-xl); }
.lp-apos-2xl { margin-block-start: var(--spacing-2xl); }
.lp-acende strong { font-weight: inherit; }

/* ── FAQ em sanfona ──────────────────────────────────────────────── */
/* 9 perguntas não fecham em grade nenhuma sem buraco; em lista, a pergunta é o que
 * se lê primeiro e a resposta abre sob demanda. Texto corrido no miolo inteiro (§2). */
.lp-faq { border-block-start: var(--border-hairline) solid var(--color-border-default); }
.lp-faq__item { border-block-end: var(--border-hairline) solid var(--color-border-default); }
.lp-faq__pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding-block: var(--spacing-md);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-title);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
  transition: color var(--dur-base) var(--ease-standard);
}
.lp-faq__pergunta::-webkit-details-marker { display: none; }
.lp-faq__pergunta:hover { color: var(--color-text-secondary); }
.lp-faq__icone {
  flex: none;
  width: var(--spacing-md);
  height: var(--spacing-md);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lp-faq__item[open] .lp-faq__icone { transform: rotate(45deg); }
.lp-faq__resposta {
  margin: 0;
  padding-block-end: var(--spacing-md);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
/* abre deslizando onde o navegador sabe animar até `auto`; nos outros, abre seco */
@supports (interpolate-size: allow-keywords) {
  .lp-faq { interpolate-size: allow-keywords; }
  .lp-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete;
  }
  .lp-faq__item[open]::details-content { block-size: auto; }
}

/* ── movimento ───────────────────────────────────────────────────── */
/* O que o Figma não tem par (skill desenvolvimento-web §1): parte livre, mas pontual.
 * Só o que clica reage ao mouse — card que não é link não sobe no hover, senão promete
 * um clique que não existe (mesma regra da Tag no pacote). */

/* botão: sem sublinhado (o `a:hover` do base.css pega o <a class="dna-btn">
 * [candidato ao pacote]), sobe 2px e a seta anda. A cor do hover é a do DS.
 * Halo e reflexo foram tentados e reprovados (embaçava a leitura, 24/09/2026). */

/* link da navbar: acende numa pílula clara, sutil. O padding sai do próprio recuo
 * (margem negativa igual), então o link não anda. Traço embaixo e troca seca de cor
 * foram reprovados (24/09/2026). */
.dna-navbar__links { gap: var(--spacing-3xs); }   /* o respiro entre links agora é o padding da pílula */
.dna-navbar__links .dna-navbar__link {
  color: var(--color-text-secondary);
  padding: var(--spacing-3xs) var(--spacing-sm);
  margin-block: calc(-1 * var(--spacing-3xs));
  border-radius: var(--radius-round);
  transition: color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.dna-navbar__links .dna-navbar__link:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  text-decoration: none;
}

/* entrada: só com JS (a classe vem do movimento.js), para a página sem script não
 * nascer invisível. Três ritmos, não um só (o André achou tudo rápido e igual,
 * 24/09/2026). Durações são de movimento — sem par no Figma, sem token.
 *   título  — sobe e desfoca para o nítido, devagar (1400ms)
 *   card    — sobe mais, em cascata larga (1100ms, 150ms entre itens)
 *   suave   — só aparece (1200ms): parágrafo, tabela, configurador, FAQ */
:root { --lp-entrada: var(--ease-out); --lp-dur-titulo: 1400ms; --lp-dur-card: 1100ms; --lp-dur-suave: 1200ms; --lp-passo: 150ms; --lp-sobe-card: var(--spacing-2xl); }
.js-movimento .lp-revela {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: var(--lp-entrada);
  transition-delay: calc(var(--i, 0) * var(--lp-passo));
}
.js-movimento .lp-revela--titulo { transform: translateY(var(--spacing-lg)); filter: blur(var(--spacing-3xs)); transition-duration: var(--lp-dur-titulo); }
.js-movimento .lp-revela--card   { transform: translateY(var(--lp-sobe-card)); transition-duration: var(--lp-dur-card); }
.js-movimento .lp-revela--suave  { transition-duration: var(--lp-dur-suave); }
.js-movimento .lp-revela.lp-visivel { opacity: 1; transform: none; filter: none; }

/* título do hero: palavra por palavra, subindo de trás de uma máscara, sem pressa */
.lp-palavra { display: inline-block; overflow: clip; overflow-clip-margin: .1em; vertical-align: top; }
.lp-palavra > span {
  display: inline-block;
  animation: lp-sobe 1200ms var(--ease-out) both;
  animation-delay: calc(200ms + var(--i, 0) * 90ms);
}
@keyframes lp-sobe { from { transform: translateY(110%); } }
.js-movimento .dna-hero__conteudo > :not(.dna-hero__titulo) {
  animation: lp-surge 1300ms var(--ease-out) both;
  animation-delay: 1000ms;
}
.js-movimento .dna-hero__conteudo > .dna-tag { animation-delay: 0ms; }
.js-movimento .dna-hero__conteudo > .lp-nota-btn { animation-delay: 1300ms; }
/* a foto sobe do pé da seção, devagar, depois do título */
.js-movimento .lp-hero__cena .dna-hero__midia { animation: lp-mao 1600ms var(--ease-out) 600ms both; }
@keyframes lp-mao { from { opacity: 0; transform: translateY(12%); } }
@keyframes lp-surge { from { opacity: 0; transform: translateY(var(--spacing-sm)); filter: blur(var(--spacing-4xs)); } }

/* ícones: aparecem inteiros. O traço que se desenhava ao entrar e no hover foi
 * tirado (André, 24/09/2026): o ícone ficava pouco tempo legível e não se entendia. */
.lp-icone {
  display: inline-grid;
  place-items: center;
  inline-size: var(--spacing-3xl);
  block-size: var(--spacing-3xl);
  border-radius: var(--radius-lg);
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-brand) 30%, transparent);
  flex: none;
}
.lp-icone--neutro {
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
}
.lp-icone svg { inline-size: var(--spacing-md); block-size: var(--spacing-md); }
/* passo: número à esquerda, ícone à direita, na mesma linha */
.lp-passo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm); }

/* texto que ACENDE ao rolar: já está lá, apagado, e cada palavra ganha a cor
 * conforme a leitura avança. Só nas frases que fecham um argumento. */
.lp-acende {
  font-size: var(--text-heading-md);
  line-height: var(--leading-title);
  font-weight: 500;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.js-movimento .lp-acende .lp-pal {
  color: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  transition: color 500ms var(--ease-standard);
}
.js-movimento .lp-acende .lp-pal.lp-acesa { color: var(--color-text-primary); }
.js-movimento .lp-acende .lp-pal--marca.lp-acesa { color: var(--color-brand-marketingdigital); }

@media (prefers-reduced-motion: reduce) {
  .js-movimento .lp-revela { opacity: 1; transform: none; filter: none; transition: none; }
  .lp-palavra > span,
  .js-movimento .dna-hero__conteudo > *,
  .js-movimento .lp-valor,
  .js-movimento .lp-valor > *,
  .js-movimento .lp-hero__cena .dna-hero__midia { animation: none; }
  .dna-btn, .dna-btn:hover, .dna-btn:active, .dna-btn__seta, .dna-btn:hover .dna-btn__seta { transform: none; transition: none; }
  .lp-aura { animation: none; }
  .lp-faq__item::details-content { transition: none; }
}

/* ── cor: fundo com aura, seção clara, cards e FAQ ──────────────────── */
/* Referência do André: carro-0km-vs-assinatura.pages.dev — duas manchas radiais fixas,
 * desfocadas, derivando devagar. Aqui o azul é o acento da página (DnA IA = Marketing)
 * e o verde entra só no fundo, sem pintar componente: cor como luz, não como rótulo. */
.lp-aura {
  position: fixed;
  z-index: 0;
  inline-size: 60vmax;
  block-size: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.lp-aura--azul {
  inset-block-start: -22vmax;
  inset-inline-end: -16vmax;
  background: radial-gradient(circle, var(--color-brand-marketingdigital), transparent 65%);
  opacity: .22;
  animation: lp-deriva-1 24s var(--ease-standard) infinite alternate;
}
.lp-aura--verde {
  inset-block-end: -28vmax;
  inset-inline-start: -20vmax;
  background: radial-gradient(circle, var(--color-brand-branding), transparent 65%);
  opacity: .10;
  animation: lp-deriva-2 30s var(--ease-standard) infinite alternate;
}
@keyframes lp-deriva-1 { to { transform: translate(-5vmax, 6vmax) scale(1.1); } }
@keyframes lp-deriva-2 { to { transform: translate(6vmax, -4vmax) scale(1.15); } }

/* as seções deixam a aura passar: o fundo vira véu, não parede */
main, .dna-navbar, .dna-footer { position: relative; z-index: 1; }
/* barra fixa no topo, desktop e celular (André, 25/09/2026): a página corre por trás.
 * No topo ela é transparente e mescla com a aura (a faixa de fundo sólido foi reprovada
 * em 24/09); ao rolar vira vidro, como o menu da Apple — o mesmo vidro do Card Glass do
 * DS (fundo com transparência no paint + desfoque Spacing/sm) e um fio fino embaixo.
 * É template, não Marca: livre na página. A classe vem do script do menu (index.html). */
.dna-navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  border-block-end: var(--border-hairline) solid transparent;
  transition: background-color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.dna-navbar.lp-barra--vidro,
.dna-navbar.dna-navbar--aberto {
  background: color-mix(in srgb, var(--color-background-primary) 65%, transparent);
  -webkit-backdrop-filter: blur(var(--spacing-sm));
  backdrop-filter: blur(var(--spacing-sm));
  border-block-end-color: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}
/* painel aberto no celular: quase opaco — é lista para ler, e o título grande de trás
 * atravessava o vidro de 65% */
.dna-navbar.dna-navbar--aberto { background: color-mix(in srgb, var(--color-background-primary) 94%, transparent); }
/* âncora não para escondida atrás da barra: a altura dela vem do script (--lp-barra) */
html { scroll-padding-top: var(--lp-barra, 0px); }
.dna-hero, .lp-secao { background: transparent; }
.lp-secao--fundo { background: color-mix(in srgb, var(--color-background-surface) 55%, transparent); }

/* seção clara no meio das escuras, para destacar o configurador. As superfícies
 * resolvem no tema claro pelo pacote (colors.css, bloco .light). */
.lp-secao--clara {
  position: relative;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--color-brand-marketingdigital) 12%, transparent), transparent 70%),
    var(--color-background-surface);
  color: var(--color-text-primary);
}

/* cards de grade: número em azul que se dissolve e, no hover, só a borda acende de
 * leve. A luz seguindo o mouse foi reprovada (exagero, 24/09/2026). Card não é link:
 * não sobe e não troca cursor. */
/* ⚠ `transition` é um atalho: declarar só a borda aqui APAGAVA a transição de entrada
 * (.lp-revela--card), e os 14 cards de grade saltavam para o lugar sem animar (André
 * viu no celular e no desktop, 25/09/2026). Sem JS, só a borda; com JS, a lista inteira
 * mora na regra de entrada, logo abaixo. */
.lp-grade > .dna-card { transition: border-color var(--dur-slow) var(--ease-out); }
.js-movimento .lp-grade > .dna-card.lp-revela--card,
.js-movimento .lp-duo > .dna-card.lp-revela--card {   /* o orçamento da dobra 2: mesmo motivo */
  transition-property: opacity, transform, border-color, box-shadow;   /* a sombra é o glow do hover */
  transition-duration: var(--lp-dur-card), var(--lp-dur-card), var(--dur-slow), var(--dur-slow);
  transition-timing-function: var(--lp-entrada);
  transition-delay: calc(var(--i, 0) * var(--lp-passo)), calc(var(--i, 0) * var(--lp-passo)), 0s, 0s;
}

/* FAQ: o sinal num círculo azul e a pergunta aberta acende (o fio à esquerda saiu) */
.lp-faq__icone {
  box-sizing: content-box;
  padding: var(--spacing-4xs);
  border-radius: var(--radius-round);
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
  transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base), box-shadow var(--dur-slow);
}
.lp-faq__item { position: relative; transition: background var(--dur-slow) var(--ease-out); }
.lp-faq__pergunta:hover { color: var(--color-text-primary); }
.lp-faq__pergunta:hover .lp-faq__icone { box-shadow: 0 0 var(--spacing-md) color-mix(in srgb, var(--color-brand) 45%, transparent); }
.lp-faq__item[open] .lp-faq__pergunta { color: var(--color-brand); }
.lp-faq__item[open] .lp-faq__icone { background: var(--color-brand); color: var(--color-onbrand); }
/* todos os fios do FAQ no mesmo azul — só o de cima era azul e os outros cinza (André, 25/09/2026) */
.lp-faq { border-block-start-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border-default)); }
.lp-faq__item { border-block-end-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border-default)); }

@media (prefers-reduced-motion: reduce) {
  .lp-aura { animation: none; }
}

/* ── fotos: fundo escurecido e quadro ─────────────────────────────── */
/* Fotos do banco do Magnific (escolhidas em 24/09/2026). No fundo, a foto nunca
 * disputa com o texto: dessaturada, escurecida por um véu da cor da página e com
 * as bordas de cima e de baixo dissolvidas, para a seção não virar um retângulo. */
/* A foto fica FIXA na tela e a seção rola por cima dela, como uma janela.
 * Estrutura: <div class="lp-foto"> no começo da seção. A camada recorta (clip-path)
 * e dissolve as bordas com MÁSCARA transparente; o ::before dela é a foto em
 * position: fixed; o ::after é o véu. Máscara e não gradiente pintado de preto: o
 * que fica atrás da borda é aura, cinza translúcido ou preto conforme a seção
 * vizinha, e só o transparente casa com todos (a faixa escura na junção foi o
 * defeito que o André viu em tela larga, 24/09/2026).
 * ⚠ background-attachment: fixed não serve (o Safari do iPhone ignora), e nenhum
 * ancestral pode ter transform, filter, will-change ou contain: vira o "chão" do
 * fixed e a foto volta a rolar junto. */
.lp-secao--foto { position: relative; isolation: isolate; }
.lp-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor 18%, currentColor 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, currentColor 18%, currentColor 82%, transparent);   /* máscara: só o alfa conta */
}
.lp-foto::before,
.lp-foto::after { content: ""; inset: 0; }
.lp-foto::before {
  position: fixed;
  background: var(--foto) center var(--foto-y, center) / cover no-repeat;
  filter: saturate(.7);
}
.lp-foto::after {
  position: absolute;
  background: color-mix(in srgb, var(--color-background-primary) 60%, transparent);
}
/* a última seção não tem o que rolar depois dela: a foto fixa mostraria a borda de
 * cima em tela larga. Ela rola junto, enquadrada pelo --foto-y. */
.lp-secao--foto-solta .lp-foto::before { position: absolute; }
/* a imagem do fecho (luz azul na névoa, Midjourney) já nasce escura: véu mais leve */
.lp-secao--foto-solta .lp-foto::after { background: color-mix(in srgb, var(--color-background-primary) 35%, transparent); }


/* vidro fosco não pode entrar com opacidade: elemento com opacity < 1 vira um grupo, e o
 * Safari desliga o backdrop-filter dentro do grupo — o card entrava liso e o desfoque
 * aparecia de estalo no fim. Aqui o card só sobe e quem aparece é o conteúdo. */
.js-movimento .dna-card--glass.lp-revela { opacity: 1; }
.js-movimento .dna-card--glass.lp-revela > * {
  opacity: 0;
  transition: opacity var(--lp-dur-card) var(--lp-entrada) calc(var(--i, 0) * var(--lp-passo));
}
.js-movimento .dna-card--glass.lp-visivel > * { opacity: 1; }

/* título ao lado da foto no desktop; empilhados no mobile */
.lp-duo { display: grid; gap: var(--spacing-xl); align-items: center; margin-block-end: var(--spacing-3xl); }
.lp-duo > .lp-cabecalho { margin-block-end: 0; }
@media (min-width: 900px) { .lp-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-3xl); } }
.lp-quadro {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-hairline) solid var(--color-border-default);
  aspect-ratio: 16 / 10;
}
.lp-quadro img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(.85);
  transition: transform 1600ms var(--ease-out);
}
.js-movimento .lp-quadro.lp-revela img { transform: scale(1.08); }
.js-movimento .lp-quadro.lp-visivel img { transform: scale(1); }


/* ── destaque em azul dentro de título e subtítulo ─────────────────── */
/* Um trecho por título: a virada ou a promessa. Quebra o monocromático sem pintar o
 * título inteiro. Azul da DnA IA (Marketing) no título; no subtítulo, um tom mais claro,
 * porque texto menor precisa de mais contraste. Títulos-rótulo ficam sem destaque. */
.lp-destaque { font-style: normal; color: var(--color-brand-marketingdigital); }
.lp-destaque--sub { color: var(--primitives-azul-400); }   /* 6,84:1 no fundo escuro; o 500 dá 4,21, pouco para texto de 18px */
.lp-secao--clara .lp-destaque--sub { color: var(--color-brand-marketingdigital); }

/* nome do modelo em cima, o que ele é embaixo, menor e na cor do núcleo do card
 * (verde na Agência DnA, azul na DnA IA, herdado do data-segmento) — no lugar do "·". */
.lp-card-nome { display: flex; flex-direction: column; gap: var(--spacing-4xs); }
.lp-card-nome__linha {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-title);
  font-weight: 500;
  color: var(--color-brand);
  text-wrap: balance;
}


/* menu do celular: a página mantém o que o André aprovou nela — links à esquerda, na
 * régua do texto, com um fio entre eles. O pacote segue o Figma (centralizado, sem fio). */
@media (max-width: 767px) {
  .dna-navbar--aberto .dna-navbar__painel { align-items: stretch; }
  .dna-navbar__painel .dna-navbar__link {
    text-align: left;
    border-block-end: var(--border-hairline) solid color-mix(in srgb, var(--color-border-default) 45%, transparent);
  }
  .dna-navbar__painel .dna-navbar__link:last-child { border-block-end: 0; }
}

/* ── entrada no toque: presa à rolagem (movimento.js escreve --p de 0 a 1) ──────────
 * Sem transição: quem anima é o dedo. O !important é contra as regras de entrada por
 * tempo, que têm seletor mais forte (a do card de grade junta a borda do hover). */
.js-toque .lp-revela {
  --lp-sobe: var(--spacing-xs);
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * var(--lp-sobe)));
  filter: none;
  transition: none !important;
}
.js-toque .lp-revela--titulo { --lp-sobe: var(--spacing-lg); }
.js-toque .lp-revela--card   { --lp-sobe: var(--spacing-2xl); }
/* vidro fosco: o card fica opaco (o Safari desliga o backdrop-filter sob opacity < 1) e
 * quem aparece é o conteúdo */
.js-toque .dna-card--glass.lp-revela { opacity: 1; }
.js-toque .dna-card--glass.lp-revela > * { opacity: var(--p, 0); transition: none; }
.js-toque .lp-quadro.lp-revela img { transform: scale(calc(1.08 - .08 * var(--p, 0))); transition: none; }

/* rodapé: site e Instagram com ícone E texto (André, 25/09/2026). O Footer do DS prevê
 * só o ícone; aqui o endereço escrito também informa, então o ícone vai ao lado dele,
 * no tamanho do texto (--dna-icon de 24 do bloco é para ícone sozinho). */
.dna-footer__sociais { gap: var(--spacing-md); --dna-icon: var(--spacing-xs); }
.dna-footer__social {
  align-items: center;
  gap: var(--spacing-3xs);
  font-size: var(--text-label-md);
  line-height: var(--leading-label);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.dna-footer__social svg { inline-size: var(--dna-icon); block-size: var(--dna-icon); flex: none; }
.dna-footer__social:hover { color: var(--color-text-primary); }

.dna-footer__copy { text-wrap: balance; }   /* no celular "supervisionada" sobrava sozinha na 2ª linha */

/* rótulo de seção: a Tag da primeira dobra repetida em cada seção, na variante NEUTRA
 * do pacote — a de marca (preenchida em azul) chama atenção demais para doze seções e
 * fica só no hero (André, 25/09/2026: "podemos usar a do pacote então: neutral", em vez
 * de uma variante de contorno local). Aqui só o respiro até o título e o centro no fecho. */
.lp-rotulo-secao { margin-block-end: var(--spacing-xs); }
.lp-centro .lp-rotulo-secao { margin-inline: auto; }


/* Campo-isca do formulário: fora da tela para gente, preenchido por robô (o Worker descarta). */
.lp-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ── brilho no hover (experimento de 01/10/2026, André) ─────────────────
 * Além da borda azul, um glow azul bem fraco por trás de cards e botões. Em 24/09 um
 * "halo/brilho em volta" do botão tinha sido reprovado (DESIGN.md §17); este é bem mais
 * contido — sombra difusa de baixa opacidade, sem anel. Só onde há mouse (hover: hover).
 * ⚠ A transição do glow só vale DEPOIS da entrada (.lp-entrou, posto pelo movimento.js no
 * fim dela) ou em quem não tem entrada: declarada antes, ela apagaria a entrada animada.
 * O glow é box-shadow do próprio card: o .dna-card tem overflow: hidden, e uma camada por
 * fora seria cortada. */
@media (hover: hover) {
  :is(.dna-card, .lp-opcao-card):not(.lp-revela),
  .js-movimento :is(.dna-card, .lp-opcao-card).lp-entrou {
    transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
  }
  .dna-btn:not(.lp-revela),
  .js-movimento .dna-btn.lp-entrou {
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .dna-card:not(.dna-card--elevated):hover,
  .lp-opcao-card:hover {
    border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border-default));
    box-shadow: 0 0 var(--spacing-xl) color-mix(in srgb, var(--color-brand) 16%, transparent);
  }
  /* botão ACENDE no hover (André, 01/10/2026: escurecer o fundo e azular o texto "apagava").
   * O glow SOMA à borda e ao anel de foco (no DS os dois são box-shadow: --dna-borda,
   * --dna-anel); trocar o box-shadow inteiro sumia com a borda do secundário. */
  .dna-btn:not(.dna-btn--stroke):not(.dna-btn--ghost):hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-brand) 88%, white);   /* um pouco mais claro, texto branco ainda legível */
    box-shadow: var(--dna-borda), var(--dna-anel), 0 0 var(--spacing-lg) color-mix(in srgb, var(--color-brand) 45%, transparent);
  }
  .dna-btn--stroke:hover:not(:disabled) {
    --dna-borda: inset 0 0 0 var(--border-hairline) var(--color-text-primary);   /* a borda acende */
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);    /* véu claro, não o cinza */
    box-shadow: var(--dna-borda), var(--dna-anel), 0 0 var(--spacing-lg) color-mix(in srgb, var(--color-brand) 22%, transparent);   /* cor da seção: verde na verde */
  }
}
/* o texto do botão não muda no hover: o vazamento da cor de link do `a:hover` foi
 * corrigido no pacote do DS (base.css, 01/10/2026) */
@media (prefers-reduced-motion: reduce) {
  .dna-card, .lp-opcao-card, .dna-btn { transition: none; }
}

/* ══ Peças desta página (Programa de Indicação, 01/10/2026) ══════════════════════ */


/* 4 cards: 1 coluna no celular, 2 no tablet, 4 na tela larga — divisores de 4, sem buraco */
@media (min-width: 1200px) { .lp-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* o valor em reais (R$ 320) é mais largo que o 10%: um degrau abaixo, para caber em
 * quatro colunas sem quebrar (o DS não deixa número quebrar, white-space: nowrap) */
.lp-grade--4 .dna-card__valor { font-size: var(--text-display-lg); }
/* e o título também desce para heading-sm: em quatro colunas (~230px de miolo) o heading-lg
 * do DS deixava "Desenvolvedor" maior que o card (medido em 1440, 01/10/2026) */
.lp-grade--4 .dna-card__titulo { font-size: var(--text-heading-sm); hyphens: manual; }

/* O que não entra: a lista e, ao lado, o card da pergunta do formulário */
.lp-regras { display: grid; gap: var(--spacing-2xl); align-items: start; }
@media (min-width: 900px) { .lp-regras { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--spacing-3xl); } }
.lp-regras .dna-list { gap: var(--spacing-md); }
.lp-regras__nota .dna-card__texto em { font-style: normal; color: var(--color-text-primary); font-weight: 600; }


/* ── formulário de registro ─────────────────────────────────────────────────── */
/* Seção clara, como o configurador da LP DnA IA. Um bloco por grupo; os campos curtos em
 * 2 colunas pela largura do FORMULÁRIO (container query), as opções em cards clicáveis. */
.lp-form { display: grid; gap: var(--spacing-2xl); container-type: inline-size; }
.lp-form__grupo { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.lp-form__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3xs);
  padding: 0;
  margin-block-end: var(--spacing-md);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-title);
  font-weight: 600;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.lp-form__campos { display: grid; gap: var(--spacing-md); }
@container (min-width: 640px) {
  .lp-form__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* opção em card: o rádio do DS dentro de uma caixa clicável inteira */
.lp-opcoes { display: grid; gap: var(--spacing-xs); }
@container (min-width: 640px) {
  .lp-opcoes--4, .lp-opcoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lp-opcao-card.dna-opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--color-border-default);
  background: var(--color-background-primary);
  text-wrap: pretty;
  transition: border-color var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
}
/* o rádio na primeira linha do texto (mesma regra do marcador do ListItem) */
.lp-opcao-card .dna-radio { margin-block-start: calc((1lh - var(--spacing-sm)) / 2); }
.lp-opcao-card:has(.dna-opcao__input:checked) {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-background-primary));
}
.lp-secao--clara .dna-controle,
.lp-secao--clara .dna-controle--area,
.lp-secao--clara .dna-controle--select { background: var(--color-background-primary); }
.lp-form .dna-controle--area { inline-size: 100%; box-sizing: border-box; resize: vertical; }
/* aceite, botão e a resposta em 2 dias: o fim do formulário, separado por um fio */
.lp-form__fim {
  display: grid;
  justify-items: start;
  gap: var(--spacing-md);
  padding-block-start: var(--spacing-lg);
  border-block-start: var(--border-hairline) solid var(--color-border-default);
}
.lp-form__termo { align-items: flex-start; text-wrap: pretty; }
.lp-form__termo .dna-check { margin-block-start: calc((1lh - var(--spacing-sm)) / 2); }
.lp-form__termo a { color: var(--color-brand); text-decoration: underline; text-underline-offset: .15em; }
.lp-form__status { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }
@container (max-width: 559px) { .lp-form__enviar { inline-size: 100%; } }
.lp-subtitulo strong { color: var(--color-text-primary); font-weight: 600; }
.lp-nota-btn a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* ── termo.html: texto legal para ler, no miolo inteiro (DESIGN.md §2) ─────────── */
.lp-termo__voltar { margin-inline-start: auto; }
.lp-termo__texto { font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--color-text-secondary); }
.lp-termo__texto p { margin: 0; text-wrap: pretty; }
.lp-termo__texto p + p { margin-block-start: var(--paragraph-body-sm); }
.lp-termo__clausula {
  margin: var(--spacing-2xl) 0 var(--spacing-xs);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-title);
  font-weight: 600;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.lp-termo__clausula:first-child { margin-block-start: 0; }
.lp-termo__lista { margin: var(--spacing-xs) 0; padding-inline-start: var(--spacing-lg); display: grid; gap: var(--spacing-3xs); }
.lp-termo__lista--letras { list-style: none; padding-inline-start: var(--spacing-sm); }
.lp-termo__texto mark { background: color-mix(in srgb, var(--color-brand) 25%, transparent); color: var(--color-text-primary); padding-inline: var(--spacing-4xs); border-radius: var(--radius-sm); }

/* ── barra no tablet: hambúrguer até 1099px ──────────────────────────────────────
 * Quatro links + "Registrar indicação" não cabem numa linha abaixo de ~1100px (medido em
 * 900: 911px de conteúdo para 837 de miolo, 35px de rolagem lateral). O DS troca para o
 * menu só abaixo de 768; aqui a página antecipa a troca, com o mesmo painel do celular
 * (regras do pacote, components.css, repetidas para esta faixa). É template, não Marca. */
@media (min-width: 768px) and (max-width: 1099px) {
  .dna-navbar__links { display: none; }
  .dna-navbar__acoes { gap: var(--spacing-3xs); }
  .dna-navbar__menu-btn { display: inline-flex; }
  .dna-navbar--aberto .dna-navbar__painel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: var(--viewport-container);
    margin-inline: auto;
    padding: var(--spacing-xs) 0 0;
  }
  .dna-navbar__painel .dna-navbar__link {
    font-size: var(--text-body-md);
    padding: var(--spacing-2xs) 0;
    text-align: left;
    border-block-end: var(--border-hairline) solid color-mix(in srgb, var(--color-border-default) 45%, transparent);
  }
  .dna-navbar__painel .dna-navbar__link:last-child { border-block-end: 0; }
}

/* ══ copy v2 (02/10/2026) ══════════════════════════════════════════════════════ */
.lp-apos-3xl { margin-block-start: var(--spacing-3xl); }

/* hero: os valores com milhar ("R$ 6.000"; a v2 teve "R$ 10.000") são mais largos que os
 * da v1, e o número não pode quebrar */
/* O chip tem 140 a 180px entre 1200 e 1440, e nenhum degrau fixo serve aos dois: o
 * número acompanha a largura do chip (container query) com o heading-lg do DS de teto.
 * 20cqi é medida de peça: "R$ 10.000" (o mais largo que já esteve aqui) mede 4,6× o
 * corpo, então 20cqi cabe com folga em qualquer valor de até cinco dígitos (02/10/2026). */
@media (min-width: 768px) {
  .lp-valor { padding: var(--spacing-sm) var(--spacing-xs); container-type: inline-size; }
  .lp-valor__numero { font-size: min(var(--text-heading-lg), 20cqi); }
}
/* celular: em três colunas de ~100px o valor com milhar não cabe nem em heading-sm (33px
 * de rolagem lateral com "R$ 10.000", medido a 390). Viram três linhas: valor à esquerda,
 * serviço à direita. */
@media (max-width: 767px) {
  .lp-valores { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4xs); }
  .lp-valor { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); }
  .lp-valor__rotulo { font-size: var(--text-label-md); text-align: right; }
}

/* dobra 2: texto à esquerda e, ao lado, o orçamento de produção com as duas linhas que
 * são de quem indicou. O topo das colunas alinha (o texto é mais alto que o card). */
.lp-duo--topo { align-items: start; }
.lp-orcamento { margin: 0; }
.lp-orcamento__topo { display: grid; gap: var(--spacing-4xs); padding-block-end: var(--spacing-sm); border-block-end: var(--border-hairline) solid color-mix(in srgb, var(--color-text-primary) 14%, transparent); }
.lp-orcamento__doc { font-size: var(--text-label-sm); font-weight: 600; letter-spacing: var(--text-caps-tracking); text-transform: var(--text-caps-transform); color: var(--color-text-secondary); }
.lp-orcamento__job { font-size: var(--text-heading-sm); line-height: var(--leading-title); font-weight: 600; color: var(--color-text-primary); }
.lp-orcamento__linhas { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-orcamento__linhas li {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-xs);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  border-block-end: var(--border-hairline) solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}
.lp-orcamento__linhas li > span:last-child { white-space: nowrap; }
/* as duas linhas de quem indicou: marcadas como num orçamento, com fundo e fio da marca */
.lp-orcamento__linhas .lp-orcamento__sua {
  color: var(--color-text-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  border-block-end-color: transparent;
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  box-shadow: inset var(--border-medium) 0 0 var(--color-brand);
}
.lp-orcamento__linhas .lp-orcamento__sua > span:last-child { color: var(--color-brand); }
.lp-orcamento__soma {
  display: flex;
  flex-wrap: wrap;   /* no celular o valor desce inteiro, em vez de "Você recebe" quebrar em dois */
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xs) 0;
  font-weight: 600;
  color: var(--color-text-primary);
}
.lp-orcamento__soma > span { white-space: nowrap; }
.lp-orcamento__soma > span:last-child { font-size: var(--text-heading-sm); color: var(--color-brand); }
.lp-duo--topo + .lp-acende { margin-block-start: 0; }

/* "Quem indica": o perfil que mais ganha em destaque, largura toda */
.lp-perfil-destaque .dna-card__corpo { display: grid; gap: var(--spacing-sm) var(--spacing-xl); }
@media (min-width: 900px) {
  .lp-perfil-destaque .dna-card__corpo { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
}

/* formulário v2: o tipo de trabalho na linha inteira; 3 opções em 3 colunas */
@container (min-width: 640px) {
  .lp-form__largo { grid-column: 1 / -1; }
  .lp-opcoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}