/* ============================================================
   STUDIO CONNECTA · LANDING PAGES DE SERVIÇO · SC26
   Folha compartilhada das 8 LPs de serviço (PT e EN, mesmo arquivo).
   Carregar DEPOIS de ds2.css, site2.css e lang-switch.css.

   Regras da casa:
   - Só tokens do ds2.css (var(--...)). Nenhum hex, nenhuma família
     de fonte solta. Transparência sai de color-mix() sobre token.
   - Escopo: <body class="lp-servico lp--<slug>">. O que só uma página
     usa (o miolo do mock do hero dela) fica num <style> no <head>
     daquela página, escopado por .lp--<slug>.
   - Texto pequeno (até ~14px) em --fg3, nunca --fg4 nem --accent-ink.
     Nada abaixo de 12px em componente novo (rótulo mono = 12px).
   - Movimento: o servico-lp.js põe html.lp-motion e .is-in nos
     componentes (IntersectionObserver) e toca as sequências
     [data-lp-seq] dos mocks. Sem JS, sem IntersectionObserver ou com
     prefers-reduced-motion, tudo aparece no estado final.
   - Quem anima [data-reveal], .line-mask, contadores e método é o
     GSAP do site2.js. As transições daqui ficam nos FILHOS dos
     elementos com data-reveal, nunca no próprio elemento.

   Mapa:
    0. Base, utilitários e correções de contraste do site
    1. Hero editorial
    2. Visual do hero: foto, moldura de mock, selos, sequência
    3. Prova rápida
    4. A dor
    5. A virada: diagrama do fluxo, regras e ficha ilustrativa
    6. O que está incluso: camadas, "não incluso" e oferta
    7. Recursos com ilustração (cards com mock)
    8. Comparativo
    9. Para quem é e para quem não é
   10. Prova: dados de mercado com fonte
   11. Como contratar
   12. Fecho, interlúdio e chips
   13. Outros serviços
   14. Responsivo
   15. Movimento reduzido e impressão
   ============================================================ */


/* ===================== 0. BASE, UTILITÁRIOS E CORREÇÕES ===================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* âncoras: o header fixo ocupa ~84px (mesmo offset que o site2.js usa
   no Lenis); sem Lenis (reduced-motion) o salto nativo respeita isto */
.lp-servico main > section[id] { scroll-margin-top: 84px; }

/* Rótulos pequenos do site que caem em --fg4 (3,2:1 no papel) ou em
   --accent-ink (2,9:1): nas LPs sobem para --fg3 (6,3:1). No .dark o
   --fg3 vira fog-300, que também passa. Cor só: tamanho e família
   continuam os do componente original. */
body.lp-servico p.ie-kicker,
.lp-servico .metodo-step .step-num,
.lp-servico .faq-q .faq-num,
.lp-servico .ft-step .ft-num,
.lp-servico .form-stepcount,
.lp-servico .field .hint,
.lp-servico .form-foot,
.lp-servico .rd-faixa-sep { color: var(--fg3); }
.lp-servico .metodo-step.is-active .step-num { color: var(--sc-verde); }
.lp-servico .faq-toggle:hover .faq-q .faq-num { color: var(--fg1); }
.lp-servico .field .hint.is-ok { color: var(--sucesso); }
.lp-servico .field .hint.is-err { color: var(--erro); }
/* lista sem marcador precisa de role="list" no HTML (Safari/VoiceOver) */
.lp-servico .ft-steps[role="list"] { list-style: none; }

/* ícone inline (iconify-icon 2.x): o componente esvazia o SVG quando sai da
   tela e o host vira 0x0. Sem caixa reservada, o texto ao lado pula ao rolar,
   a altura da página muda depois do load e os gatilhos do ScrollTrigger
   (medidos só no load) saem do lugar. 1em = o font-size que cada componente
   já dá ao ícone; ícone com width/height no atributo segue como está. */
.lp-servico main iconify-icon:not([width]) { display: inline-block; width: 1em; height: 1em; flex: none; }

/* foco: o anel do DS2 é --accent-ink (verde-deep), 2,9:1 no papel e 2,7:1 no
   paper-2, abaixo dos 3:1 do WCAG 1.4.11. No conteúdo da LP ele vira tinta
   (17 a 19:1) e, no escuro, verde (11:1). Header, rodapé e pílula seguem o
   padrão do site. A grade do método tem overflow hidden: lá o anel vai por
   dentro do card (o card focado fica ativo, escuro, e o anel é verde). */
.lp-servico main :focus-visible { outline-color: var(--fg1); }
.lp-servico main .dark :focus-visible,
.lp-servico .lp-outro--fecho :focus-visible,
.lp-servico .metodo-step.is-active:focus-visible { outline-color: var(--sc-verde); }
.lp-servico .metodo-step:focus-visible { outline-offset: -5px; }

/* método: as descrições das LPs são mais longas que as da home e o número
   fantasma (absoluto, pintado depois do texto) cobria as últimas linhas; no
   hover ele ficava verde sólido por cima do texto. Aqui o texto sobe de
   camada, o número encolhe e o hover só acende o contorno. */
.lp-servico .metodo-step .step-desc { position: relative; z-index: 1; }
.lp-servico .metodo-step .step-ghost { font-size: clamp(3.4rem, 4.6vw, 5rem); right: 0.5rem; bottom: 0.1rem; }
.lp-servico .metodo-step:hover .step-ghost { color: transparent; -webkit-text-stroke-color: var(--sc-verde); }

/* respostas do FAQ na faixa de 60 a 75 caracteres (o site deixa 46rem, ~95) */
.lp-servico #faq .faq-a p { max-width: 36rem; }
/* resposta do FAQ que termina num convite para a proposta (Quanto custa? da LP de Agentes) */
.lp-servico #faq .faq-a .faq-cta { margin-top: 1.1rem; }

/* títulos de card sem palavra órfã na última linha */
.lp-camada-cab h3, .lp-step h3, .lp-fluxo-no h3, .lp-quem-col h3, .lp-outro h3, .lp-regras h3 { text-wrap: balance; }

/* parte apagada das headlines (.head-mute): no site ela é tinta a 35%, o que
   dá ~2,3:1 no papel. Nas LPs ela leva texto de verdade, então sobe para
   ~3,2:1 no papel e no paper-2 (o mínimo AA de texto grande; a headline tem
   30px ou mais). No .dark vai o fog-400 sólido: ~3,9:1 sobre o near-black. */
.lp-servico .sec-title .head-mute { color: color-mix(in srgb, var(--fg1) 46%, transparent); }
.lp-servico .dark .sec-title .head-mute { color: var(--sc-fog-400); }

/* texto de apoio das dobras: o .metodo-manifesto do site vai até 52rem
   (~98 caracteres por linha); nas LPs fica na faixa de 60 a 75 */
.lp-servico .sec-head .metodo-manifesto { max-width: 40rem; }

/* formulário da home: o [hidden] do #btnBack perde para o display do .btn
   (no site inteiro o "Voltar" aparece já no passo 1). Nas LPs ele some de
   verdade e o "Continuar" fica à direita, como o .form-nav pretendia. */
.lp-servico .form-nav .btn[hidden] { display: none; }
.lp-servico .form-nav .btn[hidden] + .btn { margin-left: auto; }


/* ===================== 1. HERO EDITORIAL ===================== */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: clamp(130px, 16vh, 180px) 0 clamp(3.4rem, 8vh, 6rem);
  border-bottom: 1px solid var(--line);
}
.lp-hero .bg-breathe,
.lp-hero .bg-blueprint { position: absolute; inset: 0; }
/* número do serviço em outline gigante, atrás de tudo */
.lp-hero-ghost {
  position: absolute;
  right: -4rem;
  top: -6rem;
  z-index: 0;
  margin: 0;
  font-size: clamp(9rem, 20vw, 20rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--sc-ink-900) 7%, transparent);
  pointer-events: none;
  user-select: none;
}
.lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.lp-hero-copy { min-width: 0; }

/* kicker com o ponto vivo na mesma linha (a classe não tinha CSS no site,
   e o ponto caía numa linha própria acima do kicker) */
.hero-eyebrow-row { display: flex; align-items: center; gap: 10px; }
.hero-eyebrow-row .ie-kicker { margin: 0; }
.dot-live {
  flex: none;
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-verde) 22%, transparent);
  animation: pulse-dot 2.2s var(--ease-soft) infinite;
}

/* h1 do hero: .display + .lp-hero-title (nunca .sec-title, que o site2.css
   encolhe para --fs-h2). Cada linha é um .line-mask em bloco, com folga
   para acento e descendente não serem cortados pelo line-height 0.88.
   Tamanho: com 5.6vw, uma linha de ~18 caracteres cabe na coluna de 1024
   a 1440; o mínimo de 2.5rem cabe em telas de 360px. Headline com linha
   mais longa pede um tamanho próprio no <style> da página. */
.lp-hero-title {
  font-size: clamp(2.5rem, 5.6vw, 6rem);
  margin: 1.2rem 0 0;
}
.lp-hero-title .line-mask {
  display: block;
  padding-block: 0.12em 0.1em;
  margin-block: -0.12em -0.1em;
}
.lp-hero-title .outline { -webkit-text-stroke-width: 1.5px; }
/* número dentro do lettering (span.lp-num): o tracking do .display
   (-0.065em) cola o 1 no 2 da Space Grotesk em "21h". tabular-nums não
   serve: troca o desenho do 1 por um com serifa. */
.lp-hero-title .lp-num { letter-spacing: 0.005em; }
/* o kicker do hero carrega o nome do serviço: sobe para 12px a partir de
   641px (no celular, a 12px ele quebra em duas linhas e empurra o CTA) */
@media (min-width: 641px) {
  .lp-hero .hero-eyebrow-row .ie-kicker { font-size: 0.75rem; letter-spacing: 0.1em; }
}
.lp-hero-lead {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  color: var(--fg2);
  text-wrap: pretty;
}
.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 1.9rem;
}
.lp-hero-micro {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--fg3);
}
/* cada trecho da linha mono (um <span> por trecho, separados por
   "&nbsp;· ") fica inteiro: a quebra cai depois do ponto médio. Em
   inline-block, um trecho mais longo que a linha ainda quebra por dentro. */
.lp-hero-micro span { display: inline-block; }

/* pílula do WhatsApp no celular e no tablet: o servico-lp.js põe
   .lp-pilula-recolhida enquanto o texto do hero (.lp-hero-copy, com os CTAs)
   está na tela, para ela não cobrir o botão nem o lead e não disputar com o
   CTA (o WhatsApp segue no header). Ao rolar, ela volta. O visibility tira a
   pílula do Tab enquanto está oculta. */
@media (max-width: 960px) {
  .lp-servico .status-pill {
    transition: transform var(--d-fast) var(--ease-snap), opacity var(--d-fast) var(--ease-soft), visibility 0s linear 0s, background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
  }
  .lp-servico .status-pill.lp-pilula-recolhida {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition-delay: 0s, 0s, var(--d-fast), 0s, 0s, 0s;
  }
}


/* ===================== 2. VISUAL DO HERO ===================== */
/* <figure class="lp-visual"> > .lp-visual-palco (palco com proporção fixa,
   onde a página posiciona foto, mock e selos) + figcaption.lp-visual-legenda
   (o conteúdo do mock em texto: o mock é aria-hidden).
   Padrão da referência: a legenda visível é só o aviso curto ("Conversa
   ilustrativa, com dados fictícios.") e o resto da descrição vai num
   span.visually-hidden; a legenda corre embaixo do palco.
   .lp-visual-legenda--palco (canto livre do palco, só no desktop; a página
   define a largura) serve apenas para legenda de uma ou duas linhas: texto
   longo ali cai embaixo da pílula fixa do WhatsApp em notebook com até
   ~880px de altura (1366x768, 1280x720). Até 960px ela volta para baixo. */
.lp-visual { position: relative; width: 100%; max-width: 600px; margin: 0 0 0 auto; }
.lp-visual-palco { position: relative; aspect-ratio: 1 / 1; }
.lp-visual-legenda {
  margin: 1.2rem 0 0;
  max-width: 30rem;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg3);
}
.lp-visual-legenda b { font-weight: 600; color: var(--fg2); }
@media (min-width: 961px) {
  .lp-visual-legenda--palco { position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0; }
}

/* ---- foto do serviço com o vocabulário da polaroid do DS2 ----
   moldura branca, legenda mono, fita amarela e inclinação por --tilt.
   Sem o P&B do .img-editorial: as fotos de serviço já vêm em P&B com o
   detalhe verde da marca, e o filtro apagaria esse verde. */
.lp-foto {
  --tilt: 2deg;
  position: relative;
  margin: 0;
  padding: 10px 10px 42px;
  background: var(--sc-white);
  border: 1px solid color-mix(in srgb, var(--sc-ink-900) 7%, transparent);
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--tilt));
}
/* foto em <picture> (WebP 640w e 1000w com srcset/sizes + o JPG de fallback):
   a foto é o LCP no desktop e aparece com ~460px de largura */
.lp-foto picture { display: block; }
.lp-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* alinhada à direita: no hero o mock costuma cobrir o lado esquerdo da foto */
.lp-foto-legenda {
  position: absolute;
  left: 10px;
  right: 14px;
  bottom: 12px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--sc-fog-400);
}
.lp-foto .fita,
.lp-ficha .fita,
.lp-janela .fita {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 3;
  width: 88px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--sc-amarelo) 55%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* ---- moldura de mock: tela de produto em HTML/CSS ----
   Sempre aria-hidden (o conteúdo vai em texto na legenda ou na página).
   Variantes: .lp-tela--celular (aparelho) e .lp-tela--janela (app ou
   navegador, com barra). O miolo de cada mock vive no <style> da página.
   ESCALA: a moldura é um container (container-type: inline-size) e o
   .lp-tela-ecra recebe font-size proporcional à largura dela (--lp-tela-escala
   x 1cqi). Escreva o miolo do mock em em: ele vira uma ilustração que encolhe
   inteira, igual em 1440 e em 1024, sem quebrar linha a mais nem cortar.
   Por ser container, a moldura precisa de largura vinda do layout (bloco
   que estica ou width explícito), nunca de shrink-to-fit. */
.lp-tela { position: relative; color: var(--fg1); font-family: var(--font-body); container-type: inline-size; }
.lp-tela--celular {
  padding: 7px;
  border-radius: 34px;
  background: var(--sc-ink-900);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px color-mix(in srgb, var(--sc-white) 12%, transparent);
}
/* ilha da câmera */
.lp-tela--celular::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  width: 62px;
  height: 17px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
  background: var(--sc-ink-900);
}
.lp-tela-ecra {
  --lp-tela-escala: 2.2;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sc-paper);
  font-size: 12px;
  font-size: clamp(9px, calc(var(--lp-tela-escala) * 1cqi), 16px);
}
/* no aparelho, 1em = 4,4% da largura útil: 12,6px num celular de 300px */
.lp-tela--celular .lp-tela-ecra { --lp-tela-escala: 4.4; aspect-ratio: 9 / 19; border-radius: 27px; }
.lp-tela-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.95em 1.8em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 500;
  color: var(--fg1);
}
.lp-tela-status span { display: inline-flex; align-items: center; gap: 0.3em; }
.lp-tela-status iconify-icon { font-size: 1.1em; }
/* sem overflow na moldura (a etiqueta "Ilustrativo" fica para fora dela):
   quem recorta os cantos são a barra e a tela */
.lp-tela--janela {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.lp-tela--janela .lp-tela-ecra { background: var(--surface); border-radius: 0 0 var(--r-md) var(--r-md); }
.lp-tela-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
}
.lp-tela-dots { display: inline-flex; gap: 5px; flex: none; }
.lp-tela-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.lp-tela-titulo {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* etiqueta "Ilustrativo": todo dado de mock é marcado como tal */
.lp-ilustrativo {
  position: absolute;
  z-index: 4;
  top: -14px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed color-mix(in srgb, var(--sc-ink-900) 34%, transparent);
  border-radius: var(--r-pill);
  background: var(--sc-paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sc-ink-500);
  white-space: nowrap;
}
/* na janela os três pontos ficam à esquerda da barra: etiqueta à direita */
.lp-tela--janela .lp-ilustrativo { left: auto; right: 16px; }

/* ---- selo flutuante: pílula de vidro com ícone ----
   A página posiciona (top/right/bottom/left) com um modificador próprio.
   Com data-lp-apos-seq, só entra quando a sequência do mock termina. */
.lp-selo {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 7px;
  border: var(--glass-border);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sc-white) 90%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sc-ink-900);
  white-space: nowrap;
  transition: opacity var(--d-base) var(--ease-glide), transform var(--d-base) var(--ease-glide);
}
.lp-selo-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sc-ink-900);
  color: var(--sc-verde);
  font-size: 15px;
}
.lp-selo + .lp-selo { transition-delay: 180ms; }
html.lp-motion .lp-visual:not(.is-seq-fim) .lp-selo[data-lp-apos-seq] { opacity: 0; transform: translateY(10px) scale(0.96); }

/* ---- sequência dos mocks (servico-lp.js) ----
   [data-lp-seq] é o contêiner e [data-lp-seq-item] cada passo, em ordem.
   O item é um slot transparente que guarda o espaço (nada pula de
   lugar): quem aparece são os FILHOS dele. Um filho .lp-digitando, se
   houver, aparece só enquanto o item está .is-digitando. */
.lp-seq-armado [data-lp-seq-item] { position: relative; }
.lp-seq-armado [data-lp-seq-item] > :not(.lp-digitando) {
  transition: opacity var(--d-fast) var(--ease-glide), transform var(--d-base) var(--ease-glide);
}
.lp-seq-armado [data-lp-seq-item]:not(.is-on) > :not(.lp-digitando) {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.lp-digitando {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.8em 0.95em;
  border-radius: 1.1em;
  background: var(--sc-ink-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease-soft), visibility 0s linear 160ms;
}
.lp-digitando i { width: 0.48em; height: 0.48em; border-radius: 50%; background: var(--sc-fog-300); animation: lp-digita 1.2s var(--ease-soft) infinite; }
.lp-digitando i:nth-child(2) { animation-delay: 0.16s; }
.lp-digitando i:nth-child(3) { animation-delay: 0.32s; }
.lp-seq-armado [data-lp-seq-item].is-digitando:not(.is-on) > .lp-digitando { opacity: 1; visibility: visible; transition-delay: 0s; }
@keyframes lp-digita {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ---- colagem de telas reais (padrão do Web): janelas de navegador com
   print, herdando a polaroid do DS2 (inclinação e fita). A posição da
   janela da frente foi afinada para dois prints 16:10. ---- */
.lp-collage { position: relative; margin: 0 0 0 auto; max-width: 600px; width: 100%; }
.lp-janela {
  --tilt: 0deg;
  position: relative;
  margin: 0;
  background: var(--sc-white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--tilt));
}
.lp-janela-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.lp-janela-dots { display: inline-flex; gap: 5px; flex: none; }
.lp-janela-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.lp-janela-url {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 72%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--fg3);
  text-align: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-janela picture, .lp-janela img { display: block; width: 100%; height: auto; }
.lp-janela--frente {
  --tilt: 2deg;
  position: absolute;
  left: -52px;
  bottom: -48px;
  z-index: 2;
  width: 57%;
  overflow: visible;
}
.lp-janela--frente .lp-janela-tela { border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }
.lp-janela--frente .lp-janela-barra { border-radius: var(--r-md) var(--r-md) 0 0; }
.lp-telas-legenda {
  margin: 14px 0 0 auto;
  max-width: 50%;
  text-align: right;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg3);
}
.lp-telas-legenda em { color: var(--fg2); }


/* ===================== 3. PROVA RÁPIDA ===================== */
/* faixa logo abaixo do hero: números oficiais da home (data-count, que o
   site2.js anima; no PT só inteiros) + o dock de logos da home */
.lp-prova-rapida.section-pad-sm { padding: clamp(2.6rem, 6vh, 4rem) 0 clamp(2.2rem, 5vh, 3.4rem); }
.lp-numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lp-numero {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(0.9rem, 1.8vw, 1.5rem);
  border-right: 1px solid var(--line);
}
.lp-numero:last-child { border-right: 0; }
.lp-numero strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--fg1);
  white-space: nowrap;
}
.lp-numero > span {
  max-width: 15rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-prova-rapida .logo-dock-frame { margin-top: clamp(0.6rem, 2vh, 1.2rem); }
.lp-prova-rapida .logo-dock { padding-top: clamp(2rem, 5vh, 3.6rem); }
.lp-prova-rapida .logo-dock-rotulo { font-size: 0.75rem; color: var(--fg3); }
/* no toque a lupa do dock fica desligada (--dock-ganho 0 no site2.css): sai
   o respiro de topo que a reservava e as marcas crescem e ganham opacidade
   (os PNGs de 1800x1200 têm margem interna e sumiam a 56px e 55%) */
@media (max-width: 900px), (hover: none) {
  .lp-prova-rapida .logo-dock { padding-top: 0.6rem; }
  .lp-prova-rapida .logo-dock-frame { --dock-h: clamp(72px, 24vw, 104px); }
  .lp-prova-rapida .dock-item { filter: grayscale(1) contrast(1.05) opacity(0.8); }
}


/* ===================== 4. A DOR ===================== */
/* cartões na cena do cliente: a situação concreta + o custo de deixar
   como está. data-reveal vai no <li>; a cascata do custo é daqui. */
.lp-dores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
}
.lp-dor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-soft), box-shadow var(--d-fast) var(--ease-soft);
}
.lp-dor:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.lp-dor-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-dor-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg1);
  font-size: 20px;
}
.lp-dor-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg3); }
.lp-dor h3 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.lp-dor-cena { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--fg2); }
.lp-dor-custo {
  margin-top: auto;
  padding: 0.9rem 1rem 1rem;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
  transition: opacity var(--d-base) var(--ease-glide) 220ms, transform var(--d-base) var(--ease-glide) 220ms;
}
.lp-dor-custo-rotulo {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-dor-custo p { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--fg1); }
html.lp-motion .lp-dor:not(.is-in) .lp-dor-custo { opacity: 0; transform: translateY(10px); }


/* ===================== 5. A VIRADA ===================== */
/* diagrama do fluxo em HTML (lista ordenada): os nós entram em cascata e a
   linha verde corre por baixo dos ícones quando .lp-fluxo ganha .is-in.
   No desktop é horizontal; até 1020px vira linha do tempo vertical. */
.lp-fluxo {
  --lp-no: 46px;                       /* diâmetro do nó */
  --lp-n: 6;                           /* número de nós: LP com outro número troca no style do <ol> */
  --lp-gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--lp-n), minmax(0, 1fr));
  gap: var(--lp-gap);
}
.lp-fluxo::before,
.lp-fluxo::after {
  content: "";
  position: absolute;
  left: calc(var(--lp-no) / 2);
  right: calc(var(--lp-no) / 2);
  top: calc(var(--lp-no) / 2);
  height: 1px;
  background: var(--line-strong);
}
.lp-fluxo::after {
  height: 2px;
  margin-top: -0.5px;
  background: var(--sc-verde);
  transform-origin: left center;
  transition: transform var(--d-cine) var(--ease-expo) 0.15s;
}
html.lp-motion .lp-fluxo:not(.is-in)::after { transform: scaleX(0); }
/* na horizontal os nós ficam à esquerda de cada coluna: a linha termina no
   centro do último nó, e não na borda do contêiner (largura de uma coluna
   menos meio nó) */
@media (min-width: 1021px) {
  .lp-fluxo::before,
  .lp-fluxo::after { right: calc((100% - (var(--lp-n) - 1) * var(--lp-gap)) / var(--lp-n) - var(--lp-no) / 2); }
}
.lp-fluxo-no {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  transition: opacity var(--d-base) var(--ease-glide), transform var(--d-base) var(--ease-glide);
}
.lp-fluxo-no:nth-child(2) { transition-delay: 120ms; }
.lp-fluxo-no:nth-child(3) { transition-delay: 240ms; }
.lp-fluxo-no:nth-child(4) { transition-delay: 360ms; }
.lp-fluxo-no:nth-child(5) { transition-delay: 480ms; }
.lp-fluxo-no:nth-child(6) { transition-delay: 600ms; }
html.lp-motion .lp-fluxo:not(.is-in) .lp-fluxo-no { opacity: 0; transform: translateY(14px); }
.lp-fluxo-ico {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: var(--lp-no);
  height: var(--lp-no);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg1);
  font-size: 19px;
}
.lp-fluxo-no:last-child .lp-fluxo-ico { border-color: var(--sc-verde); color: var(--sc-verde); }
.lp-fluxo-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg3); }
.lp-fluxo-no h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-fluxo-no p { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--fg2); }

/* base da virada: regras de parada + ficha ilustrativa lado a lado */
.lp-virada-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: start;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(2.4rem, 6vh, 3.4rem);
  border-top: 1px solid var(--line);
}
.lp-regras h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-regras > p { margin: 0.9rem 0 0; max-width: 34rem; font-size: var(--fs-body); line-height: 1.65; color: var(--fg2); }
.lp-regras .lp-chips { margin-top: 1.3rem; }
.lp-regras-nota {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg3);
}
.lp-regras-nota iconify-icon { flex: none; margin-top: 2px; font-size: 17px; color: var(--accent-ink); }

/* ---- ficha ilustrativa (nota de papel com fita): o que a equipe recebe,
   a cotação que sai, o lead que chega. Redefine os tokens para o claro,
   então funciona igual dentro de .dark. ---- */
.lp-ficha-wrap { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.lp-ficha {
  --fg1: var(--sc-ink-900);
  --fg2: var(--sc-ink-500);
  --fg3: var(--sc-fog-400);
  --line: color-mix(in srgb, var(--sc-ink-900) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--sc-ink-900) 28%, transparent);
  --surface: var(--sc-white);
  --surface-2: var(--sc-paper-2);
  --accent-ink: var(--sc-verde-deep);
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.2vw, 1.6rem);
  border-radius: var(--r-md);
  background: var(--sc-white);
  color: var(--fg2);
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.2deg);
}
.lp-ficha .lp-ilustrativo { top: -13px; left: auto; right: 18px; color: var(--sc-ink-500); }
.lp-ficha-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-ficha-topo b { font-weight: 500; color: var(--fg1); }
.lp-ficha-titulo {
  margin: 0.9rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-ficha dl { margin: 0; }
.lp-ficha dl > div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.lp-ficha dl > div:first-child { border-top: 0; }
.lp-ficha dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-ficha dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--fg1); }
.lp-ficha-barra {
  display: inline-block;
  width: 64px;
  height: 6px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.lp-ficha-barra i { display: block; width: var(--nivel, 80%); height: 100%; border-radius: inherit; background: var(--sc-verde); }
.lp-ficha .lp-chips { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); }
.lp-ficha-legenda {
  margin: 1.1rem auto 0;
  max-width: 26rem;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg3);
}


/* ===================== 6. O QUE ESTÁ INCLUSO ===================== */
/* ficha do serviço em camadas + card de oferta sticky ao lado */
.lp-includes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  align-items: start;
}
.lp-camadas-indice {
  margin: 0 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-camadas-indice i { width: 18px; height: 1px; background: var(--line-strong); }
.lp-camadas { display: grid; gap: clamp(0.9rem, 1.8vw, 1.2rem); }
.lp-camada {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-soft), box-shadow var(--d-fast) var(--ease-soft);
}
.lp-camada:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
/* camada recorrente (o que a assinatura cuida todo mês): filete verde */
.lp-camada--mensal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--sc-verde);
}
.lp-camada-num {
  position: absolute;
  right: -0.08em;
  bottom: -0.3em;
  z-index: 0;
  font-size: clamp(5.5rem, 9vw, 8rem);
  line-height: 0.8;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  pointer-events: none;
  user-select: none;
}
.lp-camada-cab { position: relative; z-index: 1; display: grid; gap: 0.5rem; align-content: start; }
.lp-camada-kicker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-camada-cab h3 {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-camada-desc { margin: 0; font-size: var(--fs-small); color: var(--fg3); max-width: 24rem; }
.lp-camada-desc a { color: var(--fg1); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.lp-camada-desc a:hover { text-decoration-color: var(--fg1); }

/* blueprint em traço: esqueleto em hairline (.tr), a parte que a camada
   entrega em verde (.ac, pathLength=1) desenhada quando o card entra */
.lp-bp { display: block; width: min(100%, 168px); height: auto; margin-top: 0.7rem; overflow: visible; }
.lp-bp * { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lp-bp .fl { fill: var(--surface-2); stroke: none; }
.lp-bp .tr { stroke: var(--line-strong); }
.lp-bp .ac {
  stroke: var(--accent-ink);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d-cine) var(--ease-expo) 0.35s;
}
html.lp-motion .lp-camada:not(.is-in) .lp-bp .ac { stroke-dashoffset: 1; }

.lp-camada-corpo { position: relative; z-index: 1; display: grid; gap: 1rem; align-content: start; }
.lp-camada-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.3rem;
}
.lp-camada-itens li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
  transition: opacity var(--d-base) var(--ease-glide) 150ms, transform var(--d-base) var(--ease-glide) 150ms;
}
.lp-camada-itens li:nth-child(2) { transition-delay: 210ms; }
.lp-camada-itens li:nth-child(3) { transition-delay: 270ms; }
.lp-camada-itens li:nth-child(4) { transition-delay: 330ms; }
html.lp-motion .lp-camada:not(.is-in) .lp-camada-itens li { opacity: 0; transform: translateY(14px); }
.lp-camada-itens iconify-icon { flex: none; font-size: 19px; color: var(--accent-ink); margin-top: 1px; }
.lp-camada-itens strong { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--fg1); }
.lp-camada-itens span { display: block; margin-top: 0.15rem; font-size: var(--fs-caption); color: var(--fg3); line-height: 1.45; }
.lp-camada-meta {
  margin: 0;
  padding-top: 0.75rem;
  padding-right: clamp(4.5rem, 8vw, 7rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-camada-meta span { color: var(--fg1); }

/* o que não está incluso */
.lp-nao {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 16px 20px 18px;
}
.lp-nao-label {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-nao ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.lp-nao li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg3); }
.lp-nao li iconify-icon { flex: none; font-size: 14px; color: var(--fg3); margin-top: 2px; }

/* card de oferta: .svc-card + .lp-offer (o .svc-panel não serve: o
   site2.js esconde e escurece). Preço SÓ no Web; nas outras LPs o card
   leva modelo, prazo e pré-requisitos. */
.lp-offer-rail { position: sticky; top: 96px; display: grid; gap: 14px; }
.lp-offer, .lp-offer:hover { transform: none; box-shadow: var(--shadow-soft); border-color: var(--line); }
/* no card da LP o modelo de contratação desce para baixo do ícone, numa
   linha só (o .svc-card o espremia à direita do ícone, em 9px) */
.lp-offer .svc-topo { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.lp-offer .svc-eyebrow { font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.06em; text-align: left; text-wrap: balance; }
.lp-offer-lead { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--fg2); }
.lp-offer-list { list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.lp-offer-list li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg2); }
.lp-offer-list li iconify-icon { flex: none; font-size: 14px; color: var(--accent-ink); margin-top: 2px; }
.lp-offer-label {
  margin: 0.95rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-offer-label + .lp-offer-list { border-top: 0; padding-top: 0; }
.lp-offer .btn { margin-top: 1.1rem; width: 100%; justify-content: center; }
.lp-offer .microcopy { margin: 0.8rem 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg3); }


/* ===================== 7. RECURSOS COM ILUSTRAÇÃO ===================== */
/* dois ou mais cards verticais: ilustração em HTML puro no topo (.lp-mock)
   + ficha do recurso embaixo. Subgrid alinha as fichas na mesma linha
   (sem suporte, cai no auto 1fr). Os mocks internos são da página. */
.lp-recurso-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.lp-recurso-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-row: span 2;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-soft), box-shadow var(--d-fast) var(--ease-soft);
}
@supports (grid-template-rows: subgrid) {
  .lp-recurso-card { grid-template-rows: subgrid; row-gap: 0; }
}
.lp-recurso-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.lp-mock, .lp-recurso-corpo { min-width: 0; }
.lp-recurso-corpo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.3rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem);
}
.lp-recurso-corpo h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-recurso-lead { margin: 0; font-size: var(--fs-small); color: var(--fg3); max-width: 31rem; }
.lp-recurso-itens { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.lp-recurso-itens li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
  transition: opacity var(--d-base) var(--ease-glide) 150ms, transform var(--d-base) var(--ease-glide) 150ms;
}
.lp-recurso-itens li:nth-child(2) { transition-delay: 210ms; }
.lp-recurso-itens li:nth-child(3) { transition-delay: 270ms; }
.lp-recurso-itens li:nth-child(4) { transition-delay: 330ms; }
html.lp-motion .lp-recurso-card:not(.is-in) .lp-recurso-itens li { opacity: 0; transform: translateY(14px); }
.lp-recurso-itens iconify-icon { flex: none; font-size: 19px; color: var(--accent-ink); margin-top: 1px; }
.lp-recurso-itens strong { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--fg1); }
.lp-recurso-itens span { display: block; margin-top: 0.15rem; font-size: var(--fs-caption); color: var(--fg3); line-height: 1.45; }
.lp-recurso-nota {
  margin: 0.25rem 0 0;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg2);
}
.lp-recurso-nota iconify-icon { flex: none; font-size: 15px; color: var(--fg3); margin-top: 1px; }
.lp-recurso-nota b { font-weight: 600; color: var(--fg1); }
.lp-recurso-card .lp-camada-meta { padding-right: 0; margin-top: auto; padding-top: 0.95rem; }
/* moldura das ilustrações: papel com a tela dentro + etiqueta "Ilustrativo" */
.lp-mock {
  position: relative;
  display: grid;
  align-content: center;
  padding: 2rem clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.lp-mock-tag {
  position: absolute;
  top: 11px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-mock-tela {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}


/* ===================== 8. COMPARATIVO ===================== */
/* <table> de verdade, com <caption> e th scope. Até 760px cada linha vira
   um cartão; os role= no HTML seguram a semântica quando o display muda.
   O rótulo de cada célula no celular é um span.lp-cel-rotulo aria-hidden
   (span real, e não ::before, para a marca poder ir em <em>). A coluna da
   Studio Connecta leva .lp-col-destaque (único acento verde da seção). */
.lp-cel-rotulo {
  display: none;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-tabela-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.lp-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.lp-tabela caption {
  caption-side: top;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-tabela th,
.lp-tabela td {
  padding: 1.05rem 1.25rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.lp-tabela tbody tr:last-child > * { border-bottom: 0; }
.lp-tabela thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
  background: var(--surface-2);
  vertical-align: bottom;
}
.lp-tabela tbody th {
  width: 17%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-tabela td { color: var(--fg2); }
/* o tom verde vai como imagem de fundo sobre a superfície: a cor de fundo
   continua sólida (e é ela que os medidores de contraste leem) */
.lp-tabela td.lp-col-destaque {
  color: var(--fg1);
  background-color: var(--surface);
  background-image: linear-gradient(color-mix(in srgb, var(--sc-verde) 9%, transparent), color-mix(in srgb, var(--sc-verde) 9%, transparent));
}
.lp-tabela thead th.lp-col-destaque {
  color: var(--sc-white);
  background: var(--sc-ink-900);
  box-shadow: inset 0 3px 0 var(--sc-verde);
}


/* ===================== 9. PARA QUEM É ===================== */
.lp-perfis { margin: 0 0 clamp(1.6rem, 4vh, 2.4rem); }
.lp-perfis-rotulo {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
/* os dois cartões, com a mesma altura no desktop. O "sim" é cheio (a
   superfície branca e o filete verde de 3px no topo, o mesmo sinal da coluna
   da casa no comparativo) e o "não" é contorno (o papel da seção e a
   hairline). Os dois dividem um eixo: o centro do ícone do título é o centro
   dos marcadores, e o texto dos itens começa na mesma vertical do texto do
   título. Os marcadores do "sim" são discos verde claro com o check em
   tinta; os do "não" são só o x, e o item que aponta outro serviço troca o x
   pela seta de desvio, porque ali a coluna orienta em vez de recusar. */
.lp-quem {
  --quem-eixo: clamp(32px, 2.6vw, 40px);   /* coluna do ícone do título e dos marcadores */
  --quem-vao: clamp(12px, 1.1vw, 16px);    /* vão entre o eixo e o texto */
  --quem-pad: clamp(1.25rem, 2.8vw, 2.4rem);
  --quem-fs: var(--fs-body);
  --quem-lh: 1.6;
  --quem-marca: 24px;                      /* disco do marcador do "sim" */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
}
.lp-quem-col {
  min-width: 0;
  padding: var(--quem-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.lp-quem-col:not(.lp-quem-col--nao) { box-shadow: inset 0 3px 0 var(--sc-verde); }
.lp-quem-col--nao { background: transparent; }
.lp-quem-col h3 {
  display: flex;
  align-items: center;
  gap: var(--quem-vao);
  margin: 0;
  padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
/* o .lp-quem na frente vence o iconify-icon:not([width]) da seção 0 (que
   fixa 1em de caixa) em qualquer ordem de arquivo */
.lp-quem .lp-quem-col h3 > iconify-icon:not([width]) {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--quem-eixo);
  height: var(--quem-eixo);
  font-size: calc(var(--quem-eixo) * 0.7);
  color: var(--fg1);
}
.lp-quem .lp-quem-col--nao h3 > iconify-icon:not([width]) { color: var(--fg2); }

/* itens: marcador pendurado no eixo, texto alinhado ao título, hairline só
   na coluna do texto (borda, para continuar visível com cores forçadas) e
   medida de até 34em, perto de 65 caracteres */
.lp-quem-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lp-quem-col li {
  position: relative;
  display: grid;
  grid-template-columns: var(--quem-eixo) minmax(0, 1fr);
  gap: 0 var(--quem-vao);
  align-items: start;
  padding: clamp(0.85rem, 1.5vw, 1.15rem) 0;
  border: 0;
  font-size: var(--quem-fs);
  line-height: var(--quem-lh);
  color: var(--fg2);
}
.lp-quem-col li:last-child { padding-bottom: 0; }
.lp-quem-col li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--quem-eixo) + var(--quem-vao));
  right: 0;
  border-top: 1px solid var(--line);
}
.lp-quem-col li > span { grid-column: 2; max-width: 34em; text-wrap: pretty; }
/* a marca e o nome do serviço não se partem entre duas linhas, fora do
   celular (lá o nowrap deixava uma linha curta, "Você quer que a") */
@media (min-width: 641px) {
  .lp-quem-col li em, .lp-quem-col a { white-space: nowrap; }
}
.lp-quem .lp-quem-col li > iconify-icon:not([width]) {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  flex: none;
  width: var(--quem-marca);
  height: var(--quem-marca);
  margin-top: calc((var(--quem-fs) * var(--quem-lh) - var(--quem-marca)) / 2);
  border-radius: var(--r-pill);
  font-size: calc(var(--quem-marca) * 0.6);
  background: color-mix(in srgb, var(--sc-verde) 26%, var(--surface));
  color: var(--fg1);
}
.lp-quem .lp-quem-col--nao li > iconify-icon:not([width]) { background: none; font-size: 17px; color: var(--fg2); }
/* item do "não" que aponta outro serviço: a seta de desvio (lucide
   corner-down-right) no lugar do x. Sem :has, o x continua */
@supports selector(:has(*)) {
  .lp-quem .lp-quem-col--nao li:has(a[href]) > iconify-icon:not([width]) { display: none; }
  .lp-quem .lp-quem-col--nao li:has(a[href])::after {
    content: "";
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 18px;
    height: 18px;
    margin-top: calc((var(--quem-fs) * var(--quem-lh) - 18px) / 2);
    background-color: var(--fg1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (forced-colors: active) {
  .lp-quem .lp-quem-col--nao li:has(a[href])::after { forced-color-adjust: none; background-color: CanvasText; }
}

/* link de roteamento: tinta, seminegrito e sublinhado com contraste próprio
   (60% de tinta, acima de 3:1), como os outros links dentro do texto da LP */
.lp-quem-col a {
  color: var(--fg1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, var(--fg1) 60%, transparent);
}
@media (hover: hover) {
  .lp-quem-col a:hover { text-decoration-color: var(--fg1); text-decoration-thickness: 2px; }
}
.lp-quem-col a:focus-visible { outline: 2px solid var(--fg1); outline-offset: 2px; border-radius: 2px; }
/* toque: o link ganha 0,4em de área em volta. Em elemento inline o padding
   vertical não mexe na altura da linha, e a margem negativa devolve o
   lateral; com o clone, cada pedaço de um link que quebra ganha a mesma
   folga */
@media (pointer: coarse), (max-width: 640px) {
  .lp-quem-col a { padding: 0.4em; margin-inline: -0.4em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .lp-quem-col a:focus-visible { outline-offset: calc(2px - 0.4em); }
}

/* cascata: cada item um passo de 70ms, o cartão do "não" 100ms depois do
   "sim". O seletor com :nth-child(n) tem especificidade (0,3,2) e vence as
   regras de 400ms do 6º item no <style> das LPs de Design e Radar (0,3,1) */
.lp-quem-col li:nth-child(2) { --quem-i: 1; }
.lp-quem-col li:nth-child(3) { --quem-i: 2; }
.lp-quem-col li:nth-child(4) { --quem-i: 3; }
.lp-quem-col li:nth-child(5) { --quem-i: 4; }
.lp-quem-col li:nth-child(6) { --quem-i: 5; }
.lp-quem-col li:nth-child(n+7) { --quem-i: 6; }
.lp-quem-col--nao { --quem-atraso: 100ms; }
/* movimento só na tela e com movimento liberado; as transições ficam nos
   filhos, nunca no cartão, que é do GSAP. Sem JS ou com movimento reduzido,
   nada se esconde. Transição em longhands: shorthand com var() seguido de
   longhand na mesma regra perde valores quando uma ferramenta reescreve o
   CSS pelo CSSOM */
@media screen and (prefers-reduced-motion: no-preference) {
  .lp-quem .lp-quem-col ul > li:nth-child(n) {
    transition-property: opacity, transform;
    transition-duration: var(--d-base);
    transition-timing-function: var(--ease-glide);
    transition-delay: calc(var(--quem-atraso, 0ms) + var(--quem-i, 0) * 70ms);
  }
  .lp-quem .lp-quem-col li > iconify-icon:not([width]) {
    transition-property: transform;
    transition-duration: var(--d-base);
    transition-timing-function: var(--ease-snap);
    transition-delay: calc(var(--quem-atraso, 0ms) + var(--quem-i, 0) * 70ms + 140ms);
  }
  html.lp-motion .lp-quem:not(.is-in) .lp-quem-col li { opacity: 0; transform: translateY(10px); }
  html.lp-motion .lp-quem:not(.is-in) .lp-quem-col li > iconify-icon:not([width]) { transform: scale(0.4); }
  .lp-quem-col a { transition: text-decoration-color var(--d-fast) var(--ease-soft); }
}
/* celular: eixo e respiro menores devolvem largura ao texto (17em a 375px) */
@media (max-width: 640px) {
  .lp-quem { --quem-pad: 1.1rem; --quem-eixo: 28px; --quem-vao: 10px; --quem-marca: 22px; --quem-fs: 1rem; }
}
/* celular pequeno (ou zoom de 400%) */
@media (max-width: 359px) {
  .lp-quem { --quem-pad: 1rem; --quem-eixo: 24px; --quem-vao: 8px; --quem-marca: 20px; }
  .lp-quem-col h3 { font-size: 1.3rem; }
}


/* ===================== 10. PROVA: DADOS DE MERCADO ===================== */
/* tabuleiro de hairlines (padrão north-form da home): número grande,
   o dado em uma frase e a fonte entre parênteses, em mono */
.lp-dados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lp-dado {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--surface);
  transition: opacity var(--d-base) var(--ease-glide), transform var(--d-base) var(--ease-glide);
}
.lp-dado:nth-child(2) { transition-delay: 90ms; }
.lp-dado:nth-child(3) { transition-delay: 180ms; }
.lp-dado:nth-child(4) { transition-delay: 270ms; }
html.lp-motion .lp-dados:not(.is-in) .lp-dado { opacity: 0; transform: translateY(12px); }
.lp-dado strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--fg1);
  white-space: nowrap;
}
.lp-dado p { margin: 0; flex: 1; font-size: var(--fs-small); line-height: 1.55; color: var(--fg2); }
.lp-dado cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--fg3);
}
.lp-casa {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: clamp(1.6rem, 4vh, 2.4rem) 0 0;
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg2);
}
.lp-casa strong { font-weight: 600; color: var(--fg1); }
.lp-casa iconify-icon { flex: none; margin-top: 4px; font-size: 20px; color: var(--fg1); }


/* ===================== 11. COMO CONTRATAR ===================== */
/* os dois cartões (o modelo e o que precisamos de você) com a mesma altura */
.lp-contratar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
}
.lp-modelo,
.lp-precisa {
  min-width: 0;
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.lp-bloco-rotulo {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-modelo dl { margin: 0; }
.lp-modelo dl > div {
  display: grid;
  grid-template-columns: 8.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}
.lp-modelo dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-modelo dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; font-weight: 500; color: var(--fg1); text-wrap: pretty; }
.lp-precisa ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.3rem; }
.lp-precisa li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg2);
}
.lp-precisa li iconify-icon { flex: none; margin-top: 2px; font-size: 17px; color: var(--accent-ink); }
.lp-precisa-nota { margin: 1.2rem 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg3); }

/* passos do primeiro contato até o começo */
.lp-steps {
  list-style: none;
  margin: clamp(2.4rem, 6vh, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}
.lp-step {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
  transition: opacity var(--d-base) var(--ease-glide), transform var(--d-base) var(--ease-glide);
}
.lp-step:nth-child(2) { transition-delay: 120ms; }
.lp-step:nth-child(3) { transition-delay: 240ms; }
html.lp-motion .lp-steps:not(.is-in) .lp-step { opacity: 0; transform: translateY(12px); }
.lp-step .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}
.lp-step h3 {
  margin: 0.55rem 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-step p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--fg3); }
.lp-cta-row { margin-top: clamp(2rem, 5vh, 2.8rem); display: flex; flex-wrap: wrap; gap: 12px; }
.lp-reassure {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 1.3rem 0 0;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg3);
}
.lp-reassure iconify-icon { flex: none; margin-top: 1px; font-size: 15px; color: var(--accent-ink); }


/* ===================== 12. FECHO, INTERLÚDIO E CHIPS ===================== */
.lp-fecho {
  margin: clamp(1.8rem, 4vh, 2.6rem) 0 0;
  max-width: 52rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.35;
  color: var(--fg1);
  text-wrap: pretty;
}
/* interlúdio: dois CTAs lado a lado sobre a foto */
.cta-inter-conteudo .lp-cta-final { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0.6rem; }
.cta-inter-conteudo .lp-cta-final .btn { margin-top: 0; }
/* interlúdio até 900px: o conteúdo deixa de ser absoluto e ocupa a largura
   toda da foto, mas o véu do site2.css segue lateral (some em 68%) e o fim
   das linhas caía na parede clara do corredor (até ~1:1). Aqui o véu vira
   vertical e mais denso, e o subtítulo sobe para fog-200. */
@media (max-width: 900px) {
  .lp-servico .cta-inter-veu {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--sc-ink-900) 84%, transparent) 0%,
      color-mix(in srgb, var(--sc-ink-900) 74%, transparent) 62%,
      color-mix(in srgb, var(--sc-ink-900) 40%, transparent) 100%);
  }
  .lp-servico .cta-inter-conteudo .cta-sub { color: var(--sc-fog-200); }
}

/* chips de texto (critérios, perfis, gatilhos): pílula com hairline */
.lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg2);
}
.lp-chip iconify-icon { flex: none; font-size: 14px; color: var(--accent-ink); }


/* ===================== 13. OUTROS SERVIÇOS ===================== */
/* DORMENTE desde 2026-11-05: a dobra #mais-servicos ("Outros serviços") saiu
   das 16 LPs a pedido do mentorado (a navegação entre serviços é o megamenu,
   assets/megamenu.*). O HTML de cada página está em 99_TEMP/Lixeira/
   website2-lps-dobra-outros-servicos-2026-11-05.md; estas regras ficam para
   a volta. Abaixo, o comentário de quando a dobra existia:
   cartões que levam às outras LPs (link esticado no h3: nome acessível
   limpo e o cartão inteiro clicável). O cartão escuro de fecho saiu das 16
   páginas em 2026-11-04: as regras .lp-outro--fecho ficam dormentes, para a
   volta ser só repor o HTML (cópia em 99_TEMP/Lixeira/website2-lps-card-fecho-
   outros-servicos-recuperado-2026-11-05.md; o backup de 2026-11-04 saiu pela retenção) */
.lp-outros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
}
.lp-outro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  --lp-outro-pad: clamp(1.2rem, 2.2vw, 1.6rem);
  padding: var(--lp-outro-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-soft), box-shadow var(--d-fast) var(--ease-soft);
}
.lp-outro:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
/* o link esticado do h3 não mostra anel próprio: quem acende é o cartão, em
   tinta (17:1 no paper-2; o --accent-ink dava 2,7:1). Com :has, só no foco
   por teclado (o clique de mouse não acende). O cartão escuro de fecho fica
   de fora: o link dele já tem anel verde (seção 0). */
.lp-outro:not(.lp-outro--fecho):focus-within { outline: 2px solid var(--fg1); outline-offset: 3px; }
@supports selector(:has(*)) {
  .lp-outro:not(.lp-outro--fecho):focus-within { outline: none; }
  .lp-outro:not(.lp-outro--fecho):has(h3 a:focus-visible) { outline: 2px solid var(--fg1); outline-offset: 3px; }
}
.lp-outro-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-outro-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg1);
  font-size: 19px;
  transition: background var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.lp-outro:hover .lp-outro-ico { background: var(--sc-verde); border-color: var(--sc-verde); color: var(--accent-fg); }
.lp-outro-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg3); }
.lp-outro h3 {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.lp-outro h3 a { color: inherit; outline: none; }
.lp-outro h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lp-outro p { margin: 0; flex: 1; font-size: var(--fs-small); line-height: 1.55; color: var(--fg3); }
/* modelo de contratação em Inter (o mono em caixa alta quebrava em duas
   linhas num cartão de 4 colunas) */
.lp-outro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg2);
}
/* o .lp-outro p acima também pega o modelo (é um p): sem o flex: none, a
   linha de modelo cresce junto com a descrição e o filete desalinha na
   fileira quando as descrições têm alturas diferentes */
.lp-outro .lp-outro-meta { flex: none; }
.lp-outro-meta iconify-icon { flex: none; font-size: 16px; color: var(--fg1); transition: transform var(--d-fast) var(--ease-snap); }
.lp-outro:hover .lp-outro-meta iconify-icon { transform: translate(2px, -2px); }
/* foto do serviço: a mesma imagem e o mesmo enquadramento (object-position)
   do painel do serviço na home, sangrando no topo do cartão. O ícone vira o
   selo de vidro da home (.svc-media-icone) por cima da foto, na escala do
   cartão (40px e 14px de recuo; na home são 46px e 16px), e não pega o
   clique, que segue para o link esticado do h3. Zoom e selo verde só com
   ponteiro que paira (no toque o hover gruda) ou no foco por teclado; com
   movimento reduzido, a foto não se mexe. O isolation segura o canto
   arredondado durante o zoom no Safari, que às vezes solta o recorte. As
   larguras desta foto (quatro e duas colunas, miniatura de 72 e de 48px)
   entram no sizes das 16 páginas: mudou uma medida ou um corte, refaça o
   sizes (LEIA-ME das LPs, seção 7). */
.lp-outro-foto {
  margin: calc(-1 * var(--lp-outro-pad)) calc(-1 * var(--lp-outro-pad)) 0.35rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
  background: var(--surface-2);
}
.lp-outro-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-base) var(--ease-glide);
}
.lp-outro-foto + .lp-outro-topo { margin-bottom: -0.35rem; }
.lp-outro-foto + .lp-outro-topo .lp-outro-ico {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  pointer-events: none;
  border-color: var(--line-light);
  background: color-mix(in srgb, var(--sc-ink-900) 52%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--sc-white);
}
@media (hover: hover) {
  .lp-outro:hover .lp-outro-foto + .lp-outro-topo .lp-outro-ico { background: var(--sc-verde); border-color: var(--sc-verde); color: var(--accent-fg); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-outro:hover .lp-outro-foto img { transform: scale(1.04); }
}
@supports selector(:has(*)) {
  .lp-outro:has(h3 a:focus-visible) .lp-outro-foto + .lp-outro-topo .lp-outro-ico { background: var(--sc-verde); border-color: var(--sc-verde); color: var(--accent-fg); }
  @media (prefers-reduced-motion: no-preference) {
    .lp-outro:has(h3 a:focus-visible) .lp-outro-foto img { transform: scale(1.04); }
  }
}
/* cartão escuro de fecho: dormente desde 2026-11-04 (ver o topo da seção) */
.lp-outro--fecho { background: var(--sc-ink-900); border-color: var(--sc-ink-900); }
.lp-outro--fecho:hover { border-color: var(--sc-ink-900); }
/* com as fotos, o fecho cresce junto com a linha: o rótulo fica no topo e a
   frase desce com o link, na altura do texto dos cartões vizinhos */
.lp-outro--fecho .lp-outro-num { margin-bottom: auto; color: var(--sc-fog-300); }
.lp-outro--fecho p { flex: 0 1 auto; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.35; letter-spacing: var(--tracking-tight); color: var(--sc-white); }
.lp-outro--fecho .btn--link { --btn-fg: var(--sc-white); align-self: flex-start; }
.lp-outro--fecho .btn--link:hover { color: var(--sc-verde); }
/* faixa simples de leque (variante curta, sem cartões) */
.lp-cross { display: grid; justify-items: center; text-align: center; gap: 1rem; }
.lp-cross .sc-lead { max-width: 44rem; margin: 0; }


/* ===================== 14. RESPONSIVO ===================== */
@media (max-width: 1100px) {
  .lp-camada { grid-template-columns: 1fr; gap: 1.1rem; }
  .lp-camada-cab { grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "k bp" "h bp" "p bp"; column-gap: 1.2rem; }
  .lp-camada-cab .lp-camada-kicker { grid-area: k; }
  .lp-camada-cab h3 { grid-area: h; }
  .lp-camada-desc { grid-area: p; }
  .lp-bp { grid-area: bp; align-self: end; margin: 0; }
  .lp-janela--frente { left: -34px; width: 50%; }
  .lp-telas-legenda { max-width: 44%; }
  .lp-numero strong { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
  .lp-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-outros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-outro-foto { aspect-ratio: 16 / 9; }
}

@media (max-width: 1020px) {
  .lp-dores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* fluxo vira linha do tempo vertical: ícone à esquerda, texto ao lado */
  .lp-fluxo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 40rem; }
  .lp-fluxo::before,
  .lp-fluxo::after { left: calc(var(--lp-no) / 2); right: auto; top: calc(var(--lp-no) / 2); bottom: calc(var(--lp-no) / 2); width: 1px; height: auto; margin: 0; }
  .lp-fluxo::after { width: 2px; margin-left: -0.5px; transform-origin: center top; transform: scaleY(1); }
  html.lp-motion .lp-fluxo:not(.is-in)::after { transform: scaleY(0); }
  .lp-fluxo-no { display: grid; grid-template-columns: var(--lp-no) minmax(0, 1fr); column-gap: 1.1rem; row-gap: 0.3rem; align-items: start; }
  .lp-fluxo-ico { grid-row: 1 / span 3; }
  .lp-fluxo-num { padding-top: 4px; }
  .lp-virada-base { grid-template-columns: minmax(0, 1fr); }
  .lp-contratar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .lp-hero { padding-top: 120px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* empilhado, o lettering ganha a largura toda: cresce no tablet e volta
     ao mínimo de 2.5rem no celular */
  .lp-hero-title { font-size: clamp(2.5rem, 8.2vw, 4.6rem); }
  .lp-hero-ghost { display: none; }
  .lp-visual { margin: 2.4rem auto 0; max-width: 560px; }
  .lp-visual-legenda { margin-right: auto; text-align: left; }
  .lp-collage { margin: 2.2rem auto 0; max-width: 520px; }
  .lp-janela--frente { position: relative; left: auto; bottom: auto; width: 82%; margin: -12% 0 0 auto; --tilt: 1.5deg; }
  .lp-telas-legenda { max-width: none; text-align: left; margin-top: 18px; }
  .lp-includes { grid-template-columns: minmax(0, 1fr); }
  .lp-recurso-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-offer-rail { position: static; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-nao ul { grid-template-columns: minmax(0, 1fr); }
  .lp-numeros { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-numero { grid-column: span 2; border-bottom: 1px solid var(--line); }
  .lp-numero:nth-child(3) { border-right: 0; }
  .lp-numero:nth-child(4), .lp-numero:nth-child(5) { grid-column: span 3; border-bottom: 0; }
  .lp-quem { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* comparativo: cada linha vira um cartão com rótulo por célula */
  .lp-tabela, .lp-tabela tbody, .lp-tabela tr, .lp-tabela th, .lp-tabela td { display: block; width: 100%; }
  .lp-tabela thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-tabela caption { display: block; }
  .lp-tabela tbody tr { padding: 0.35rem 0 0.6rem; border-bottom: 1px solid var(--line-strong); }
  .lp-tabela tbody tr:last-child { border-bottom: 0; }
  .lp-tabela tbody th { width: auto; padding: 1rem 1.1rem 0.35rem; border: 0; font-size: 1.1rem; }
  .lp-tabela td { padding: 0.5rem 1.1rem; border: 0; font-size: 1rem; }
  .lp-cel-rotulo { display: block; }
  .lp-tabela td.lp-col-destaque { width: auto; margin: 0.35rem 0.75rem 0.2rem; padding: 0.75rem 0.85rem; border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--sc-verde); }
}

@media (max-width: 640px) {
  .lp-dores { grid-template-columns: minmax(0, 1fr); }
  .lp-camada-itens { grid-template-columns: minmax(0, 1fr); }
  .lp-camada-cab { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .lp-camada-cab .lp-camada-kicker, .lp-camada-cab h3, .lp-camada-desc { grid-area: auto; }
  .lp-bp { display: none; }
  .lp-janela--frente { width: 90%; margin-top: -10%; }
  .lp-janela-barra { height: 26px; gap: 8px; }
  .lp-dados { grid-template-columns: minmax(0, 1fr); }
  .lp-outros { grid-template-columns: minmax(0, 1fr); }
  .lp-precisa ul { grid-template-columns: minmax(0, 1fr); }
  .lp-modelo dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .lp-ficha dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .lp-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-numero, .lp-numero:nth-child(4) { grid-column: auto; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .lp-numero:nth-child(2n) { border-right: 0; }
  .lp-numero:nth-child(3) { border-right: 1px solid var(--line); }
  .lp-numero:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  /* outros serviços: no celular cada cartão vira uma linha compacta
     (miniatura da foto, nome e modelo), sem a descrição. As linhas 1fr de
     cima e de baixo centralizam o texto ao lado da miniatura. O modelo fica
     no --fs-caption, e não no 1rem do corpo de texto mais abaixo, para o
     trecho sem quebra do EN ("Monthly management ·") e a seta caberem ao
     lado da miniatura a partir de 320px. */
  .lp-outro:not(.lp-outro--fecho) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    padding: 0.85rem 1.1rem 0.85rem 0.85rem;
  }
  .lp-outro:not(.lp-outro--fecho) .lp-outro-topo { display: contents; }
  .lp-outro:not(.lp-outro--fecho) .lp-outro-ico { grid-column: 1; grid-row: 1 / -1; justify-self: center; }
  .lp-outro:not(.lp-outro--fecho) .lp-outro-num { display: none; }
  .lp-outro:not(.lp-outro--fecho) h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.05rem; }
  .lp-outro:not(.lp-outro--fecho) > p:not(.lp-outro-meta) { display: none; }
  .lp-outro:not(.lp-outro--fecho) .lp-outro-meta { grid-column: 2; grid-row: 3; padding-top: 0; border-top: 0; font-size: var(--fs-caption); }
  .lp-outro-foto { grid-column: 1; grid-row: 1 / -1; width: 72px; margin: 0; aspect-ratio: 1; border-radius: var(--r-sm); }
  .lp-outro-foto + .lp-outro-topo .lp-outro-ico { display: none; }
  /* corpo de texto dos componentes novos com 16px no celular */
  .lp-dor-cena, .lp-dor-custo p, .lp-fluxo-no p, .lp-quem-col li, .lp-dado p,
  .lp-step p, .lp-precisa li, .lp-outro p, .lp-camada-desc, .lp-recurso-lead { font-size: 1rem; }
  .lp-hero-lead { font-size: 1.0625rem; }
}

/* abaixo de 360px (celular pequeno, ou zoom de 400% numa janela de 1280px) a
   miniatura dos outros serviços desce para 48px e a coluna de texto volta à
   largura que tinha com o ícone: modelo e seta cabem no cartão também com o
   espaçamento de texto ampliado */
@media (max-width: 359px) {
  .lp-outro:not(.lp-outro--fecho) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; }
  .lp-outro-foto { width: 48px; }
}


/* ===================== 15. MOVIMENTO REDUZIDO E IMPRESSÃO ===================== */
/* armamento (servico-lp.js): por dois quadros nada transiciona, para o estado
   inicial escondido entrar seco, sem fade de saída do que já foi pintado */
html.lp-motion-prep *,
html.lp-motion-prep *::before,
html.lp-motion-prep *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dot-live, .lp-digitando i { animation: none; }
  .lp-dor-custo, .lp-fluxo-no, .lp-fluxo::after, .lp-camada, .lp-camada-itens li, .lp-bp .ac,
  .lp-recurso-card, .lp-recurso-itens li, .lp-quem-col li, .lp-dado, .lp-step, .lp-selo,
  .lp-seq-armado [data-lp-seq-item] > * { transition: none; }
  html.lp-motion .lp-dor:not(.is-in) .lp-dor-custo,
  html.lp-motion .lp-fluxo:not(.is-in) .lp-fluxo-no,
  html.lp-motion .lp-camada:not(.is-in) .lp-camada-itens li,
  html.lp-motion .lp-recurso-card:not(.is-in) .lp-recurso-itens li,
  html.lp-motion .lp-quem:not(.is-in) .lp-quem-col li,
  html.lp-motion .lp-dados:not(.is-in) .lp-dado,
  html.lp-motion .lp-steps:not(.is-in) .lp-step,
  html.lp-motion .lp-visual:not(.is-seq-fim) .lp-selo[data-lp-apos-seq],
  .lp-seq-armado [data-lp-seq-item]:not(.is-on) > :not(.lp-digitando) { opacity: 1; transform: none; }
  html.lp-motion .lp-fluxo:not(.is-in)::after { transform: none; }
  html.lp-motion .lp-camada:not(.is-in) .lp-bp .ac { stroke-dashoffset: 0; }
  .lp-digitando { display: none; }
}
@media print {
  html.lp-motion .lp-dor-custo, html.lp-motion .lp-fluxo-no, html.lp-motion .lp-camada-itens li,
  html.lp-motion .lp-recurso-itens li, html.lp-motion .lp-quem-col li, html.lp-motion .lp-dado,
  html.lp-motion .lp-step, html.lp-motion .lp-selo,
  .lp-seq-armado [data-lp-seq-item] > :not(.lp-digitando) { opacity: 1 !important; transform: none !important; }
  .lp-digitando { display: none !important; }
}