/* LP DnA IA — só o que o DS não tem componente para.
 * 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 o mockup (Magnific, "mobile app mockup instagram grid", 24/09/2026): celular
 * com o feed da DnA e três slides do carrossel "Claude Code" flutuando. Montado a
 * partir do PSD com psd-tools, fundo TRANSPARENTE (a sombra é alfa de verdade), então a
 * aura da página aparece por trás. Não corta embaixo: o hero mantém o respiro do DS e a
 * seção seguinte dissolve normalmente. O .dna-hero__midia do DS é quadrado com fundo de
 * superfície: aqui não. */
.lp-hero__mao { display: flex; justify-content: center; }
.lp-hero__mao .dna-hero__midia {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
  border-radius: 0;
}
/* flutua devagar, como a referência do André (carro-0km-vs-assinatura) */
.js-movimento .lp-hero__mao .dna-hero__midia { animation: lp-flutua 7s ease-in-out 2200ms infinite; }
@keyframes lp-flutua { 50% { transform: translateY(calc(-1 * var(--spacing-xs))); } }
/* desktop: o mockup ganha um pouco mais de coluna que o texto */
@media (min-width: 1200px) {
  .dna-hero:has(.lp-hero__mao) .dna-hero__container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--spacing-2xl); }
}
/* tablet: tag e título em linha inteira; embaixo, texto e botões de um lado e o
 * mockup do outro (.dna-hero__conteudo em display: contents). */
@media (min-width: 768px) and (max-width: 1199px) {
  .dna-hero:has(.lp-hero__mao) .dna-hero__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "tag tag" "tit tit" "desc mao" "acoes mao" "nota mao";
    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__mao) .dna-hero__conteudo { display: contents; }
  .dna-hero:has(.lp-hero__mao) .dna-tag { grid-area: tag; }
  .dna-hero:has(.lp-hero__mao) .dna-hero__titulo { grid-area: tit; }
  .dna-hero:has(.lp-hero__mao) .dna-hero__descricao { grid-area: desc; }
  .dna-hero:has(.lp-hero__mao) .dna-hero__acoes { grid-area: acoes; }
  .dna-hero:has(.lp-hero__mao) .lp-nota-btn { grid-area: nota; }
  .lp-hero__mao { grid-area: mao; align-self: center; }
}

.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)); }
}

/* 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.
 * [candidato ao pacote — ver com o André no fim] */
.lp-secao .dna-card__corpo { gap: var(--spacing-sm); }
.lp-secao .dna-card__texto { font-size: var(--text-body-sm); }   /* DS: body-lg. [candidato ao pacote] */
.dna-card__corpo > .lp-acoes { margin-block-start: auto; padding-block-start: var(--spacing-3xs); }

/* ── tabela do comparativo ───────────────────────────────────────── */
/* Comparativo, não planilha: a coluna da DnA IA é um card azul que atravessa a
 * tabela, cada coluna leva a bolinha do núcleo dela, as linhas se enxergam, e o
 * preço fecha em destaque. O André achou a primeira versão "um Excel" (24/09/2026). */
.lp-tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-hairline) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-background-primary) 60%, transparent);
}
.lp-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;           /* abaixo disso a tabela rola em vez de espremer */
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}
.lp-tabela th,
.lp-tabela td {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-block-end: var(--border-hairline) solid color-mix(in srgb, var(--color-border-default) 55%, transparent);
  vertical-align: middle;          /* célula de uma palavra ("Sim") fica no meio da linha alta */
  color: var(--color-text-secondary);
}
.lp-tabela tbody tr:last-child > * { border-block-end: 0; }
.lp-tabela tbody tr { transition: background var(--dur-base) var(--ease-standard); }
.lp-tabela tbody tr:hover { background: color-mix(in srgb, var(--color-text-primary) 4%, transparent); }

/* cabeçalho: nome da coluna com a bolinha do núcleo */
.lp-tabela thead th {
  padding-block: var(--spacing-md);
  font-size: var(--text-label-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;        /* rótulo curto não quebra (Decisões do DS) */
  border-block-end-color: var(--color-border-default);
}
.lp-tabela__marca { display: inline-flex; align-items: center; gap: var(--spacing-3xs); }
.lp-tabela__marca::before {
  content: "";
  inline-size: var(--spacing-3xs);
  block-size: var(--spacing-3xs);
  border-radius: var(--radius-round);
  background: var(--color-brand);
}

/* rótulo da linha: é o que se lê primeiro */
.lp-tabela tbody th { font-weight: 600; color: var(--color-text-primary); }

/* a coluna da DnA IA: faixa azul translúcida, com bordas laterais */
.lp-tabela .lp-col-destaque {
  background: color-mix(in srgb, var(--color-brand-marketingdigital) 10%, transparent);
  color: var(--color-text-primary);
  font-weight: 500;
  border-inline: var(--border-hairline) solid color-mix(in srgb, var(--color-brand-marketingdigital) 45%, transparent);
}
.lp-tabela thead .lp-col-destaque {
  background: color-mix(in srgb, var(--color-brand-marketingdigital) 18%, transparent);
  border-block-start: var(--spacing-4xs) solid var(--color-brand-marketingdigital);
}

/* emoji no lugar do ícone: ❌ / ✅ nos valores e um por linha no rótulo, que é o que
 * mais tira o monocromático (André, 24/09/2026). O "não" continua recuado na cor. */
.lp-tabela__emoji { display: inline-block; margin-inline-end: var(--spacing-3xs); font-size: 1.1em; line-height: 1; }
.lp-tabela__rotulo { display: inline-flex; align-items: center; gap: var(--spacing-3xs); }
.lp-tabela__rotulo .lp-tabela__emoji { margin: 0; }
.lp-tabela .lp-nao { color: var(--color-text-disabled); }
.lp-tabela .lp-nao .lp-tabela__emoji { font-size: .85em; opacity: .8; }
.lp-tabela .lp-col-destaque.lp-nao { color: var(--color-text-secondary); }
.lp-tabela .lp-sim { color: var(--color-text-primary); font-weight: 600; }

/* linha do preço: fecha a tabela em destaque */
.lp-tabela__preco > * { padding-block: var(--spacing-md); }
.lp-tabela__preco td { font-size: var(--text-body-md); font-weight: 600; color: var(--color-text-primary); }
.lp-tabela__preco td:first-of-type { font-size: var(--text-body-sm); font-weight: 400; color: var(--color-text-secondary); }
.lp-tabela__preco .lp-col-destaque { font-size: var(--text-heading-sm); color: var(--color-brand-marketingdigital); }

/* no celular a tabela vira uma lista por critério: o critério como título e as três
 * opções embaixo, cada uma com o nome em cima (data-rotulo) e o valor na largura toda.
 * A rolagem lateral escondia justamente a comparação — o André via só a coluna presa e
 * "Fazer sozinho" (25/09/2026). A 1ª versão empilhada, com o nome numa coluna à
 * esquerda, também caiu: cada critério num card solto (sem continuidade), nome e valor
 * em tamanhos diferentes, o ❌ separado do texto (texto solto num td em grid vira item
 * próprio) e o filete da DnA IA empurrando o conteúdo 4px. Agora: um painel só, mesmo
 * recuo em tudo, destaque por fundo e filete interno (box-shadow não ocupa espaço). */
@media (max-width: 767px) {
  .lp-tabela { min-width: 0; }
  .lp-tabela, .lp-tabela tbody, .lp-tabela tr, .lp-tabela th, .lp-tabela td { display: block; }
  .lp-tabela thead { display: none; }
  .lp-tabela tbody tr + tr { border-block-start: var(--border-hairline) solid var(--color-border-default); }
  .lp-tabela tbody tr:hover { background: none; }
  .lp-tabela th,
  .lp-tabela td { border: 0; padding-inline: var(--spacing-md); }
  .lp-tabela tbody th { padding-block: var(--spacing-md) var(--spacing-3xs); font-size: var(--text-label-lg); }
  .lp-tabela td { padding-block: var(--spacing-3xs); }
  .lp-tabela td:last-child { padding-block-end: var(--spacing-sm); }
  .lp-tabela td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--color-text-secondary);
  }
  .lp-tabela .lp-col-destaque {
    border: 0;
    box-shadow: inset var(--spacing-4xs) 0 0 var(--color-brand-marketingdigital);
    padding-block: var(--spacing-xs);
    margin-block: var(--spacing-3xs);
  }
  .lp-tabela .lp-col-destaque::before { color: var(--color-brand-marketingdigital); font-weight: 600; }
  .lp-tabela .lp-nao .lp-tabela__emoji { font-size: 1em; }
  /* preço: os três valores no mesmo corpo, a DnA IA na cor */
  .lp-tabela__preco > * { padding-block: var(--spacing-3xs); }
  .lp-tabela__preco td,
  .lp-tabela__preco td:first-of-type { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-primary); }
  .lp-tabela__preco .lp-col-destaque { font-size: var(--text-body-lg); color: var(--color-brand-marketingdigital); }
}

.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;
}

/* ── configurador ────────────────────────────────────────────────── */
.lp-cfg { display: grid; gap: var(--spacing-xl); align-items: start; }
@media (min-width: 900px) {
  .lp-cfg { grid-template-columns: minmax(0, 1fr) 360px; }
}

.lp-cfg__ciclo {
  display: inline-flex;
  gap: var(--spacing-4xs);
  padding: var(--spacing-4xs);
  border-radius: var(--radius-round);
  background: var(--color-background-surface);
  margin-block-end: var(--spacing-lg);
}
.lp-cfg__ciclo-btn {
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-round);
  padding: var(--spacing-xs) var(--spacing-lg);
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
}
.lp-cfg__ciclo-btn[aria-pressed="true"] {
  background: var(--action-primary);
  color: var(--action-on-primary);
}

.lp-cfg__grupo { margin-block-end: var(--spacing-2xl); }
.lp-cfg__grupo-titulo {
  font-size: var(--text-label-md-caps, var(--text-label-md));
  text-transform: var(--text-caps-transform, uppercase);
  letter-spacing: var(--text-caps-tracking, normal);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-block-end: var(--spacing-sm);
}
.lp-cfg__nota {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-block: 0 var(--spacing-md);
}

.lp-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border-default);
  cursor: pointer;
}
.lp-item + .lp-item { margin-block-start: var(--spacing-xs); }
.lp-item:has(.dna-opcao__input:checked) {
  border-color: var(--action-primary);
  background: var(--color-background-surface);
}
.lp-item--fixo { cursor: default; }
.lp-item__nome {
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-primary);
}
.lp-item__desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: var(--spacing-4xs) 0 0;
  text-wrap: pretty;
}
.lp-item__preco {
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  text-align: right;
}
.lp-item__preco small {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* o resumo acompanha a rolagem no desktop */
.lp-resumo { position: sticky; top: var(--spacing-xl); }
.lp-resumo__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
  padding-block: var(--spacing-4xs);
}
.lp-resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-block-start: var(--spacing-md);
  padding-block-start: var(--spacing-md);
  border-block-start: var(--border-hairline) solid var(--color-border-default);
}
.lp-resumo__valor {
  font-size: var(--text-heading-md);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.lp-resumo__primeiro {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-block: var(--spacing-sm) 0;
  text-wrap: pretty;
}

/* ── 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). */
.dna-btn { transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); }
.dna-btn:hover { transform: translateY(calc(-1 * var(--spacing-4xs) / 2)); }
.dna-btn:active { transform: translateY(0) scale(.98); }
.lp-seta { transition: transform var(--dur-slow) var(--ease-out); }
.dna-btn:hover .lp-seta { transform: translateX(var(--spacing-4xs)); }

/* 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 mão sobe do pé da seção, devagar, depois do título */
.js-movimento .lp-hero__mao { 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-hero__mao,
  .js-movimento .lp-hero__mao .dna-hero__midia { animation: none; }
  .dna-btn, .dna-btn:hover, .dna-btn:active, .lp-seta, .dna-btn:hover .lp-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; }
.dna-navbar { background: transparent; }   /* sem faixa preta: a barra mescla com a aura */
.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);
}
/* no claro, "elevado" é mais CLARO que o fundo: seção em surface (229), cards em
 * primary (240), e o campo (surface) volta a contrastar dentro do resumo */
.lp-secao--clara .lp-resumo,
.lp-secao--clara .lp-item { background: var(--color-background-primary); }
.lp-secao--clara .lp-item:has(.dna-opcao__input:checked) {
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-background-primary));
}
.lp-secao--clara .lp-cfg__ciclo { background: var(--color-background-elevated); }

/* 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 {
  transition-property: opacity, transform, border-color;
  transition-duration: var(--lp-dur-card), var(--lp-dur-card), 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;
}
.lp-grade > .dna-card:hover { border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border-default)); }
.lp-grade .dna-card__valor {
  background: linear-gradient(160deg, var(--color-brand) 20%, color-mix(in srgb, var(--color-brand) 15%, transparent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 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); }
.lp-faq { border-block-start-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); }

/* cards sobre a foto: vidro fosco — translúcidos, com o blur do que passa atrás */
.lp-secao--foto .dna-card {
  background: color-mix(in srgb, var(--color-background-surface) 45%, transparent);
  -webkit-backdrop-filter: blur(var(--spacing-sm)) saturate(1.2);
  backdrop-filter: blur(var(--spacing-sm)) saturate(1.2);
  border-color: color-mix(in srgb, var(--color-text-primary) 14%, 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 .lp-secao--foto .dna-card.lp-revela { opacity: 1; }
.js-movimento .lp-secao--foto .dna-card.lp-revela > * {
  opacity: 0;
  transition: opacity var(--lp-dur-card) var(--lp-entrada) calc(var(--i, 0) * var(--lp-passo));
}
.js-movimento .lp-secao--foto .dna-card.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); }

/* seta do select no cinza médio (o DS usa text-disabled): na seção clara ela sumia */
.dna-select__seta { color: var(--color-text-secondary); }
.dna-select:focus-within .dna-select__seta { color: var(--color-text-primary); }

/* ── 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;
}

/* ── faixas de posts (Quem está por trás) ─────────────────────────── */
/* Ideia da página de Marketing Digital do site da DnA (dna.tv.br/marketing-digital),
 * em versão enxuta: duas faixas finas de posts reais para clientes, rolando em
 * sentidos opostos. Cada faixa tem o trilho duas vezes (o segundo aria-hidden), e a
 * animação anda -50%: o laço fecha sem emenda. Sai do miolo e vai de borda a borda. */
.lp-secao--faixas { overflow: hidden; }
.lp-faixas {
  --lp-post: 200px;              /* tamanho do post na faixa: é medida de peça, não token */
  display: grid;
  gap: var(--spacing-xs);
  margin-block-start: var(--spacing-3xl);
  margin-inline: calc(-1 * var(--viewport-padding));
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
  mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
}
@media (max-width: 767px) { .lp-faixas { --lp-post: 132px; } }
.lp-faixa { display: flex; inline-size: max-content; animation: lp-marquee 70s linear infinite; }
.lp-faixa--reverso { animation-direction: reverse; }
.lp-faixas:hover .lp-faixa { animation-play-state: paused; }
.lp-faixa__trilho { display: flex; gap: var(--spacing-xs); padding-inline-end: var(--spacing-xs); }
.lp-faixa__trilho img {
  display: block;
  inline-size: var(--lp-post);
  block-size: var(--lp-post);
  object-fit: cover;
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}
@keyframes lp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-faixa { animation: none; }
}

/* ── configurador: módulo em destaque, add-ons em grade ─────────────── */
/* O módulo básico é o produto; os add-ons são acessório. Antes os dois tinham o mesmo
 * item de largura inteira, e o Mensal/Anual solto no topo parecia valer para tudo
 * (André, 24/09/2026). Agora o ciclo mora DENTRO do card do módulo. */
.lp-modulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "texto preco" "ciclo ciclo";
  gap: var(--spacing-md) var(--spacing-lg);
  padding: var(--spacing-lg);
  margin-block-end: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-background-primary);
  border: var(--border-medium) solid var(--color-brand-marketingdigital);
  box-shadow: var(--shadow-md);
}
.lp-modulo__texto { grid-area: texto; display: grid; gap: var(--spacing-3xs); align-content: start; }
.lp-modulo__selo {
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-brand-marketingdigital);
}
.lp-modulo__nome { margin: 0; font-size: var(--text-heading-md); line-height: var(--leading-title); font-weight: 600; }
.lp-modulo__desc { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }
/* preço com o selo de lançamento em cima, alinhados à direita */
.lp-modulo__oferta { grid-area: preco; display: grid; justify-items: end; align-content: start; gap: var(--spacing-3xs); }
.lp-modulo__preco { align-self: start; font-size: var(--text-heading-lg); line-height: var(--leading-title); font-weight: 700; white-space: nowrap; }
.lp-modulo__preco small { font-size: var(--text-body-sm); font-weight: 400; color: var(--color-text-secondary); }
/* a faixa de baixo ocupa a largura inteira: sem coluna estreita, sem quebra forçada
 * e sem buraco sob o texto da esquerda (André, 24/09/2026) */
.lp-modulo__ciclo {
  grid-area: ciclo;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3xs) var(--spacing-sm);
  padding-block-start: var(--spacing-md);
  border-block-start: var(--border-hairline) solid color-mix(in srgb, var(--color-border-default) 40%, transparent);
}
.lp-modulo__ciclo-rotulo { font-size: var(--text-label-md); font-weight: 600; color: var(--color-text-secondary); }
.lp-modulo .lp-cfg__ciclo { margin: 0; inline-size: fit-content; }
/* a frase que muda com o ciclo fica AO LADO do seletor; a fixa, embaixo */
.lp-modulo__nota-ciclo { flex: 1 1 14rem; margin: 0; font-size: var(--text-body-sm); color: var(--color-text-primary); text-wrap: pretty; }
@media (max-width: 479px) {
  .lp-modulo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "preco" "ciclo"; }
  .lp-modulo__oferta { justify-items: start; }
}

/* add-ons: cards compactos em grade. A coluna depende da QUANTIDADE e da largura da
 * coluna do configurador (container query), nunca auto-fit: 3 itens em 3 ou 1,
 * 4 itens em 2×2. */
.lp-cfg > div:first-child { container-type: inline-size; }
.lp-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
@container (min-width: 420px) { .lp-addons--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 620px) { .lp-addons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-item--card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "check preco" "texto texto";
  gap: var(--spacing-3xs) var(--spacing-xs);
  padding: var(--spacing-sm);
  align-content: start;
}
.lp-item--card + .lp-item--card { margin-block-start: 0; }
.lp-item--card > .dna-check { grid-area: check; }
.lp-item--card > span:not(.dna-check):not(.lp-item__preco) { grid-area: texto; }
.lp-item--card > .lp-item__preco { grid-area: preco; font-size: var(--text-body-sm); }
.lp-item--card .lp-item__nome { font-size: var(--text-body-sm); }
.lp-item--card .lp-item__desc { font-size: var(--text-caption); }

/* contador +1 dos add-ons sem acesso (André, 24/09/2026: "mais 2 posts, 2 reels,
 * mais tempo de reunião" não cabe num sim/não) */
.lp-item--qtd { cursor: default; }
.lp-item--qtd > .lp-qtd { grid-area: check; }
.lp-qtd {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-round);
  border: var(--border-hairline) solid var(--color-border-default);
  background: var(--color-background-primary);
}
.lp-qtd__btn {
  inline-size: var(--spacing-xl);
  block-size: var(--spacing-xl);
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-primary);
  font: 600 var(--text-body-md) / 1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.lp-qtd__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-brand) 14%, transparent); }
.lp-qtd__btn:disabled { color: var(--color-text-disabled); cursor: default; }
.lp-qtd__valor {
  inline-size: 3ch;
  padding: 0;                     /* o Safari do iPhone põe recuo interno no input e cortava o número ("(") */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  background: none;
  text-align: center;
  font: 600 max(1rem, var(--text-body-sm)) / 1 var(--font-sans);   /* 16px de piso: iOS */
  color: var(--color-text-primary);
}
.lp-item--ativo { border-color: var(--action-primary); background: color-mix(in srgb, var(--color-brand) 8%, var(--color-background-primary)); }

/* lista de add-ons no card "Você não precisa nos dar acesso": título com emoji numa
 * linha, a lista na de baixo */
.lp-addons-lista { display: grid; gap: var(--spacing-3xs); }
.lp-addons-lista__titulo { color: var(--color-text-primary); font-weight: 600; font-size: var(--text-body-sm); }
/* um parágrafo por grupo, como no configurador: rótulo em cima, itens embaixo */
.lp-addons-lista__grupo { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--color-text-secondary); text-wrap: pretty; }
.lp-addons-lista__grupo > span { display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand); }

/* logo reduzido (só o "DnA", sem a linha de baixo) na barra: o .dna-logo do DS tem a
 * altura do logo COMPLETO (Spacing/2xl); sem a linha de texto, o símbolo ficava maior
 * que as letras do logo inteiro. Spacing/lg deixa o "DnA" no tamanho de antes. */
.dna-navbar__logo .dna-logo { block-size: var(--spacing-lg); inline-size: auto; }

/* ── "Aprovar é um clique": texto à esquerda, o portal funcionando à direita ── */
/* O celular é moldura (tamanho de peça, não token); a tela dentro dele é o portal real,
 * em portal-demo.css, e a animação em portal-demo.js. */
.lp-portal-grid { display: grid; gap: var(--spacing-3xl); align-items: center; }
@media (min-width: 900px) { .lp-portal-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.lp-celular {
  --lp-cel-l: 300px;
  justify-self: center;
  inline-size: var(--lp-cel-l);
  aspect-ratio: 9 / 18.5;
  margin: 0;
  padding: var(--spacing-3xs);
  border-radius: 46px;                                   /* curva de celular: medida de peça */
  background: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-background-primary));
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-text-primary) 22%, transparent);
  box-shadow: var(--shadow-md), 0 0 0 var(--spacing-4xs) color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}
.lp-celular__tela {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  border-radius: 38px;
  background: var(--bg);
  padding: var(--spacing-2xl) var(--spacing-3xs) var(--spacing-3xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}
.lp-celular__tela::before {                              /* a ilha do topo */
  content: ""; position: absolute; inset-block-start: var(--spacing-3xs); inset-inline: 0; margin-inline: auto;
  inline-size: 30%; block-size: var(--spacing-md); border-radius: var(--radius-round); background: var(--color-background-primary);
}
/* a lista rola dentro da própria janela; a barra de cima fica parada, como no portal */
.lp-celular__rolagem { flex: 1; min-block-size: 0; overflow: hidden; border-radius: 12px; }
.lp-celular__lista { display: grid; gap: var(--spacing-3xs); transition: transform 900ms var(--ease-out); }
.lp-celular [data-demo-banner] { display: none; }
.lp-celular [data-demo-banner].lp-mostra { display: block; animation: lp-surge 500ms var(--ease-out); }
.lp-celular [data-demo-nota] { display: none; }
.lp-celular [data-demo-nota].lp-mostra { display: block; }
/* o dedo: um ponto que anda até o botão e pulsa no toque */
.lp-toque {
  position: absolute; z-index: 2; inset: 0 auto auto 0;
  inline-size: var(--spacing-lg); block-size: var(--spacing-lg);
  margin: calc(-0.5 * var(--spacing-lg)) 0 0 calc(-0.5 * var(--spacing-lg));
  border-radius: 50%;
  background: color-mix(in srgb, var(--primitives-azul) 35%, transparent);
  border: 2px solid color-mix(in srgb, var(--primitives-azul) 80%, transparent);
  opacity: 0;
  transition: transform 700ms var(--ease-out), opacity 300ms;
  pointer-events: none;
}
.lp-toque.lp-toca { animation: lp-toque 380ms ease-out; }
@keyframes lp-toque { 50% { scale: .7; } }


/* projetos à parte: pedido de orçamento, não item do pacote. Sem checkbox e sem preço
 * que some no total: card tracejado, "a partir de" como informação e uma pílula que
 * alterna "Quero orçamento" / "No pedido" (André, 24/09/2026). */
.lp-projeto {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--spacing-4xs);
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg);
  border: var(--border-hairline) dashed var(--color-border-default);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.lp-projeto:hover { border-color: var(--color-brand); }
.lp-projeto__emoji { font-size: var(--text-heading-sm); line-height: 1; margin-block-end: var(--spacing-3xs); }
.lp-projeto__nome { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-primary); }
.lp-projeto__desc { font-size: var(--text-caption); color: var(--color-text-secondary); text-wrap: pretty; }
.lp-projeto__valor { font-size: var(--text-caption); font-weight: 600; color: var(--color-text-primary); margin-block-start: var(--spacing-3xs); }
.lp-projeto__acao {
  justify-self: start;
  margin-block-start: var(--spacing-3xs);
  padding: var(--spacing-4xs) var(--spacing-xs);
  border-radius: var(--radius-round);
  border: var(--border-hairline) solid var(--color-brand);
  color: var(--color-brand);
  font-size: var(--text-label-md);
  font-weight: 600;
  transition: background var(--dur-base), color var(--dur-base);
}
.lp-projeto__no { display: none; }
.lp-projeto:has(:checked) { border-style: solid; border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 8%, var(--color-background-primary)); }
.lp-projeto:has(:checked) .lp-projeto__acao { background: var(--color-brand); color: var(--color-onbrand); }
.lp-projeto:has(:checked) .lp-projeto__quero { display: none; }
.lp-projeto:has(:checked) .lp-projeto__no { display: inline; }
.lp-projeto:has(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lp-resumo__orcamento { margin: var(--spacing-3xs) 0 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* 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; }
}