/* =====================================================================
   Bluhertz — Páginas de app (/apps/*) · complementa css/styles.css
   Tudo aqui tem o prefixo .app-lp- para não colidir com o resto do site.
   Reaproveita do styles.css: .container, .section(--alt), .section__head/__title/__sub,
   .eyebrow, .btn(--primary/--ghost), .cta-micro, .checks, .steps.steps--3/.step,
   .faq/.faq__item, .cta/.cta__inner, faixa #duvida (.duvida/.chat), header, footer,
   .wa-float, .back-to-top e [data-reveal] (main.js).

   ESQUELETO DE UMA LP DE APP — copie apps/desatola.html e troque só o conteúdo
   <head>  title "<App>: <o que resolve> | Bluhertz" · description · canonical
           https://www.bluhertz.tech/apps/<slug> · OG/Twitter com /assets/apps/<slug>.png
           CSS/JS/imagens SEMPRE por caminho absoluto (/css/styles.css, /css/apps.css, /js/main.js)
   <body class="app-lp" data-pagina="app-<slug>" data-wa-msg="..." data-wa-label="Adquirir o <App>"
         style="--app-cor: #...; --app-cor-escura: #...">   (cor do app: SÓ no mockup)
     header.site-header ............. copiado do software.html (links absolutos)
     main#conteudo
      1  section.hero.app-lp-hero
           nav.app-lp-crumbs ......... Software › Apps › <App>
           .app-lp-hero__grid
             .app-lp-hero__copy
               .app-lp-id ............ img.app-lp-id__icon + .app-lp-id__cat + p.app-lp-id__name
               ul.app-lp-tags ........ li.app-lp-tag--plat ("Android · offline" | "Web")
                                       li.app-lp-tag--test ("Teste no navegador")
                                       li.app-lp-tag--soon ("Versão web em breve")
               span.eyebrow (público) · h1.hero__title (dor/resultado) · p.hero__text
               .hero__actions ........ a.btn.btn--primary (Adquirir pelo WhatsApp)
                                       + a.btn.btn--ghost (Testar no navegador | Quero testar)
               p.cta-micro · ul.checks (3 itens reais)
             figure.app-lp-hero__visual  .app-lp-phone (mockup) + .app-lp-notif (opcional)
                                         + figcaption.app-lp-caption ("valores de exemplo")
      2  section.app-lp-facts ........ ul.app-lp-facts__list > li > strong + span (3–4 fatos reais)
      3  section.section.app-lp-pain . "O problema": article.app-lp-pain__item × 3
                                       (.app-lp-ico.app-lp-ico--pain, h3, p, p.app-lp-pain__fix)
      4  section.section.section--alt.app-lp-solve  "Como resolve":
                                       article.app-lp-feature × 4–6 (.app-lp-ico, h3, p, ul.app-lp-feature__list)
                                       + p.app-lp-solve__extra (opcional)
      5  section.section.app-lp-screens  .app-lp-screens__grid > figure.app-lp-shot × 3
                                       (.app-lp-phone.app-lp-phone--sm + figcaption)
      6  section.app-lp-try .......... com teste web: botão "Testar no navegador" + .app-lp-try__note
                                       sem web: .app-lp-try--soon (selo .app-lp-tag--soon + "Quero testar" no WhatsApp)
      7  section.section.section--alt.app-lp-how   ol.steps.steps--3 > li.step × 3
      8  section.section.app-lp-faq .. .faq > details.faq__item × 3–6
      9  section.cta.app-lp-final .... repete a promessa + botões do hero + nav.app-lp-back
     10  section#duvida .............. faixa padrão "Ficou com alguma dúvida?" (copiada)
     footer.footer · a.back-to-top · a.wa-float (copiados, links absolutos)

   MOCKUP (.app-lp-phone > .app-lp-phone__screen > .app-lp-ui__*): HTML/CSS puro, dados de
   exemplo genéricos (Usuário 1, Mês de exemplo, valores redondos) e sempre com legenda.
   Peças: __bar/__top/__title/__chip/__month · __body · __card · __label/__value/__sub ·
   __barrow + __track (style="--w:70%; --c:#cor") · __row(--done) + __check/__dot ·
   __donut (--a/--b) · __ring (--p) · __nav (span.is-on).

   PÁGINA ÍNDICE (apps/index.html): section.hero.app-lp-hero.app-lp-hero--index +
   section.app-lp-catalog > .app-lp-catalog__grid > article.app-lp-card(--kit)
   (.app-lp-card__top, a.app-lp-card__link = cartão inteiro clicável, .app-lp-card__case,
   ul.app-lp-tags, span.app-lp-card__more) + .app-lp-note + a.app-lp-custom.
   ===================================================================== */

/* ---------- Cor do app: só ilustração (o botão de ação continua o --action do site) ---------- */
.app-lp {
  --app-cor: #1e6bff;
  --app-cor-escura: #0a1f44;
  --app-fundo: #f3f7fd;
}
/* Texto longo sem espaço (link, e-mail) quebra em vez de empurrar a página no celular de 360px */
.app-lp main { overflow-wrap: break-word; }

/* ---------- Hero ---------- */
.app-lp-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(50, 175, 255, .14), transparent 34%),
    linear-gradient(150deg, #fff 45%, #eef6ff);
  padding: clamp(22px, 3.4vw, 40px) 0 clamp(60px, 8vw, 100px);
}

/* Trilha: Software › Apps › App */
.app-lp-crumbs { margin-bottom: clamp(14px, 2.6vw, 30px); font-size: .9rem; }
.app-lp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--muted); }
.app-lp-crumbs li { display: inline-flex; align-items: center; }
.app-lp-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--gray-400); font-weight: 700; }
.app-lp-crumbs a {
  display: inline-block; padding: 10px 0;
  color: var(--blue-600); font-weight: 600;
  text-decoration: underline; text-decoration-color: #9bbfff; text-underline-offset: 3px;
}
.app-lp-crumbs a:hover { text-decoration-color: currentColor; }
.app-lp-crumbs [aria-current] { color: var(--navy-800); font-weight: 600; }

.app-lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.app-lp-hero__copy { min-width: 0; }

/* Identidade do app: ícone + categoria + nome */
.app-lp-id { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.app-lp-id__icon {
  flex: none; width: 76px; height: 76px; border-radius: 20px; object-fit: cover;
  box-shadow: 0 14px 30px -12px rgba(13, 48, 104, .45);
}
.app-lp-id__cat,
.app-lp-card__cat {
  display: block; color: var(--blue-600);
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.app-lp-id__name {
  font-family: "Poppins", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.1; color: var(--navy-800);
}

/* Selos: plataforma, teste disponível, versão web em breve */
.app-lp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.app-lp-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: #fff; color: var(--navy-800); border: 1px solid var(--gray-200);
}
.app-lp-tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.app-lp-tag--plat { background: #eaf3ff; border-color: #bfd4ff; color: var(--blue-600); }
.app-lp-tag--test { background: #e5f7ee; border-color: #a9e2c4; color: #0b6b3a; }
.app-lp-tag--soon { background: #fff4e0; border-color: #f6cf8f; color: #8a4b00; }
.app-lp-tag--kit  { background: #d5f6ff; border-color: #8bdcff; color: #07556e; }

.app-lp-hero .eyebrow { font-size: .86rem; letter-spacing: .14em; margin-bottom: 10px; }
.app-lp-hero .hero__title {
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.022em;
  max-width: 620px; text-wrap: balance;
}
.app-lp-hero .hero__text {
  text-align: left; max-width: 560px; margin: 18px 0 26px;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.6;
}
.app-lp-hero .hero__text strong { color: var(--navy-800); font-weight: 600; }
.app-lp-hero .hero__actions { justify-content: flex-start; max-width: none; }
.app-lp-hero .cta-micro { max-width: 560px; }
.app-lp-hero .checks { max-width: 560px; }

/* Visual do hero: celular + notificação */
.app-lp-hero__visual { position: relative; display: grid; justify-items: center; gap: 14px; margin: 0; min-width: 0; }
.app-lp-caption { color: var(--muted); font-size: .84rem; text-align: center; line-height: 1.4; }

.app-lp-notif {
  position: absolute; z-index: 2; left: 0; top: 9%;
  display: flex; align-items: center; gap: 10px;
  width: min(236px, 80%); padding: 10px 12px;
  background: rgba(255, 255, 255, .97); color: var(--text);
  border: 1px solid #d6e3f7; border-radius: 16px;
  box-shadow: 0 18px 38px -16px rgba(10, 31, 68, .45);
  font-size: .8rem; line-height: 1.35;
  animation: app-lp-pop .6s var(--ease) .5s both;
}
.app-lp-notif__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
}
.app-lp-notif strong { display: block; font-size: .74rem; color: var(--muted); font-weight: 600; }
.app-lp-notif span { display: block; font-weight: 700; color: var(--navy-800); }
@keyframes app-lp-pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- Mockup de celular (HTML/CSS, dados de exemplo) ---------- */
.app-lp-phone {
  position: relative; width: min(100%, 300px);
  padding: 9px; border-radius: 40px;
  background: linear-gradient(160deg, #1d2d55, #061233);
  box-shadow: 0 40px 80px -36px rgba(6, 18, 51, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.app-lp-phone--sm { width: min(100%, 248px); border-radius: 34px; padding: 8px; }
.app-lp-phone__screen {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 556px; border-radius: 32px;
  background: var(--app-fundo); color: #1d2940;
  font-family: "Inter", system-ui, sans-serif; text-align: left;
}
.app-lp-phone--sm .app-lp-phone__screen { min-height: 470px; border-radius: 27px; }
.app-lp-phone__cam {
  position: absolute; z-index: 2; top: 9px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #061233;
  box-shadow: inset 0 0 0 2px #1d2d55;
}

.app-lp-ui__bar {
  background: linear-gradient(160deg, var(--app-cor), var(--app-cor-escura));
  color: #fff; padding: 30px 15px 13px;
}
.app-lp-ui__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-lp-ui__title { font-family: "Poppins", "Inter", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.app-lp-ui__chip {
  flex: none; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: .66rem; font-weight: 700; white-space: nowrap;
}
.app-lp-ui__month {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .14); font-size: .72rem; font-weight: 600;
}
.app-lp-ui__body { flex: 1; display: grid; align-content: start; gap: 9px; padding: 11px; }
.app-lp-ui__card {
  background: #fff; border: 1px solid #e1e9f5; border-radius: 14px;
  padding: 11px 12px; box-shadow: 0 6px 16px -12px rgba(10, 31, 68, .45);
}
.app-lp-ui__label {
  display: block; margin-bottom: 3px;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #56657e;
}
.app-lp-ui__value { font-family: "Poppins", "Inter", sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: #1d2940; }
.app-lp-ui__value--pos { color: #1f6f2a; }
.app-lp-ui__sub { display: block; font-size: .68rem; color: #56657e; line-height: 1.35; }

/* Barras horizontais (entrou/saiu/sobrou, orçamento, metas) */
.app-lp-ui__bars { display: grid; gap: 6px; margin-top: 9px; }
.app-lp-ui__barrow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  font-size: .66rem; font-weight: 600; color: #3d4b66;
}
.app-lp-ui__barrow b { font-weight: 700; color: #1d2940; white-space: nowrap; }
.app-lp-ui__track {
  position: relative; display: block; height: 7px; border-radius: 99px;
  background: #e6edf8; overflow: hidden;
}
.app-lp-ui__track::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 50%); border-radius: inherit; background: var(--c, var(--app-cor));
}
.app-lp-ui__meter { display: grid; gap: 4px; margin-top: 7px; font-size: .66rem; font-weight: 600; color: #3d4b66; }
.app-lp-ui__meter > span:first-child { display: flex; justify-content: space-between; gap: 6px; }
.app-lp-ui__meter b { font-weight: 700; color: #1d2940; }
.app-lp-ui__warn { color: #9a5b00; }

/* Linhas de lista (contas, cofrinhos, usuários) */
.app-lp-ui__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid #edf2f8; font-size: .72rem; line-height: 1.3;
}
.app-lp-ui__card > .app-lp-ui__label + .app-lp-ui__row,
.app-lp-ui__card > .app-lp-ui__sub + .app-lp-ui__row { border-top: 0; }
.app-lp-ui__row b { display: block; font-weight: 600; color: #1d2940; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-lp-ui__row small { display: block; font-size: .62rem; color: #62718b; }
.app-lp-ui__row em { font-style: normal; font-weight: 700; color: #1d2940; white-space: nowrap; }
.app-lp-ui__check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #b5c3da; display: grid; place-items: center;
  font-size: .56rem; font-weight: 900; color: #fff; line-height: 1;
}
.app-lp-ui__row--done .app-lp-ui__check { background: #1f6f2a; border-color: #1f6f2a; }
.app-lp-ui__row--done b,
.app-lp-ui__row--done em { color: #7d8aa3; text-decoration: line-through; }
.app-lp-ui__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--app-cor)); }

/* Rosca (conic-gradient) e anel de progresso */
.app-lp-ui__donut {
  --a: 50%; --b: 80%;
  width: 104px; aspect-ratio: 1; margin: 6px auto 4px; border-radius: 50%;
  background: conic-gradient(var(--app-cor) 0 var(--a), #00897b var(--a) var(--b), #f59e0b var(--b) 100%);
  display: grid; place-items: center;
}
.app-lp-ui__ring {
  --p: 60%;
  width: 96px; aspect-ratio: 1; margin: 4px auto; border-radius: 50%;
  background: conic-gradient(var(--app-cor) 0 var(--p), #e3eaf5 var(--p) 100%);
  display: grid; place-items: center;
}
.app-lp-ui__donut > span,
.app-lp-ui__ring > span {
  width: 66%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  display: grid; place-content: center; text-align: center;
  font-size: .58rem; font-weight: 600; color: #56657e; line-height: 1.2;
}
.app-lp-ui__donut > span b,
.app-lp-ui__ring > span b { display: block; font-family: "Poppins", "Inter", sans-serif; font-size: .9rem; color: #1d2940; }

/* Menu de baixo do app */
.app-lp-ui__nav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  padding: 8px 6px 12px; background: #fff; border-top: 1px solid #e1e9f5;
  font-size: .56rem; font-weight: 600; text-align: center; color: #62718b;
}
.app-lp-ui__nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-lp-ui__nav span::before {
  content: ""; display: block; width: 26px; height: 15px; margin: 0 auto 3px;
  border-radius: 999px; background: #e6edf8;
}
.app-lp-ui__nav .is-on { color: var(--app-cor); font-weight: 800; }
.app-lp-ui__nav .is-on::before { background: #dbe8fb; background: color-mix(in srgb, var(--app-cor) 22%, #fff); }

/* ---------- Faixa de fatos (só fatos verificáveis, nada de contador inventado) ---------- */
.app-lp-facts { background: var(--navy-800); padding: clamp(22px, 3.6vw, 34px) 0; }
.app-lp-facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.app-lp-facts__list li { display: grid; gap: 2px; text-align: center; color: rgba(219, 230, 255, .84); font-size: .9rem; line-height: 1.4; }
.app-lp-facts__list strong { color: #fff; font-family: "Poppins", "Inter", sans-serif; font-size: 1.1rem; }
.app-lp-facts :focus-visible { outline-color: var(--cyan); }

/* ---------- Ícones de traço (SVG inline) ---------- */
.app-lp-ico {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(140deg, #e8f3ff, #d7e9ff); color: var(--blue-600);
}
.app-lp-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-lp-ico--pain { background: linear-gradient(140deg, #fff1ee, #ffe2dc); color: #b42318; }

/* ---------- O problema ---------- */
.app-lp-pain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.app-lp-pain__item {
  display: flex; flex-direction: column;
  padding: 26px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.app-lp-pain__item h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.app-lp-pain__item > p { color: var(--muted); line-height: 1.55; }
.app-lp-pain__fix {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed #c9d6ec;
  color: var(--navy-800); font-size: .95rem; line-height: 1.5;
}
.app-lp-pain__item > p + .app-lp-pain__fix { margin-top: 16px; }
.app-lp-pain__fix strong { color: var(--blue-600); }

/* ---------- Como resolve: recursos agrupados ---------- */
.app-lp-solve__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.app-lp-feature {
  display: flex; flex-direction: column;
  padding: 26px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.app-lp-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: #bfd4ff; }
.app-lp-feature h3 { font-size: 1.12rem; margin: 16px 0 6px; }
.app-lp-feature > p { color: var(--muted); font-size: .97rem; line-height: 1.5; margin-bottom: 12px; }
.app-lp-feature__list { display: grid; gap: 7px; }
.app-lp-feature__list li { position: relative; padding-left: 24px; font-size: .94rem; line-height: 1.45; color: var(--text); }
.app-lp-feature__list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(30, 107, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231456d6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.app-lp-solve__extra {
  max-width: 760px; margin: clamp(26px, 4vw, 36px) auto 0; padding: 14px 18px;
  background: var(--white); border: 1px dashed #bfd4ff; border-radius: var(--radius-sm);
  text-align: center; color: var(--muted); font-size: .96rem; line-height: 1.55;
}
.app-lp-solve__extra a { color: var(--blue-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Telas (mockups menores) ---------- */
.app-lp-screens__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px); justify-items: center;
}
.app-lp-shot { margin: 0; display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center; min-width: 0; }
.app-lp-shot figcaption { max-width: 260px; }
.app-lp-shot figcaption strong { display: block; font-family: "Poppins", "Inter", sans-serif; color: var(--navy-800); font-size: 1.02rem; }
.app-lp-shot figcaption span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; margin-top: 2px; }
.app-lp-screens .app-lp-caption { margin-top: clamp(18px, 3vw, 28px); }

/* ---------- Teste antes de comprar (faixa escura) ---------- */
.app-lp-try { position: relative; overflow: hidden; background: var(--grad-navy); padding: clamp(56px, 8vw, 96px) 0; }
.app-lp-try::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 50vw; height: 50vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(closest-side, rgba(56, 198, 255, .22), transparent 70%);
  pointer-events: none;
}
.app-lp-try__box {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.app-lp-try .eyebrow { color: var(--cyan); }
.app-lp-try .app-lp-tags { margin: 6px 0 12px; }
.app-lp-try h2 { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 6px 0 10px; }
.app-lp-try__text { color: rgba(219, 230, 255, .86); font-size: 1.04rem; line-height: 1.6; }
.app-lp-try__note {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(234, 240, 255, .9); font-size: .93rem; line-height: 1.5;
}
.app-lp-try__note strong { color: #fff; }
.app-lp-try__actions { display: grid; gap: 12px; }
.app-lp-try__actions .btn { width: 100%; }
.app-lp-try__actions .cta-micro { margin-top: 0; text-align: center; }
.app-lp-try :focus-visible { outline-color: var(--cyan); }

/* Botão contornado claro, para fundo escuro */
.app-lp-btn-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.app-lp-btn-light:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }

/* ---------- Como funciona / FAQ ---------- */
.app-lp-how .step { background: var(--white); }
.app-lp-how .step h3 { font-size: 1.15rem; }
.app-lp-faq .faq { max-width: 820px; margin-inline: auto; }
.app-lp-faq .faq__item p a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA final ---------- */
.app-lp-final .cta__inner h2 { max-width: 760px; margin-inline: auto; text-wrap: balance; }
.app-lp-final .cta__inner > p:not(.cta-micro) { max-width: 620px; margin-inline: auto; }
.app-lp-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.app-lp-final .cta__inner .cta-micro { margin: 14px 0 0; font-size: .9rem; color: rgba(219, 230, 255, .82); }
.app-lp-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-top: 26px; }
.app-lp-back a {
  display: inline-block; padding: 10px 2px;
  color: #bfe6ff; font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(191, 230, 255, .5); text-underline-offset: 3px;
}
.app-lp-back a:hover { text-decoration-color: currentColor; color: #fff; }

/* ---------- Página índice (/apps) ---------- */
.app-lp-hero--index { text-align: center; padding-bottom: clamp(36px, 5vw, 56px); }
.app-lp-hero--index .app-lp-crumbs ol { justify-content: center; }
.app-lp-hero--index .hero__title { max-width: 820px; margin-inline: auto; }
.app-lp-hero--index .hero__text { text-align: center; max-width: 680px; margin-inline: auto; }
.app-lp-hero--index .hero__actions { justify-content: center; margin-inline: auto; }
.app-lp-hero--index .cta-micro { margin-inline: auto; text-align: center; }

.app-lp-catalog { padding-top: clamp(40px, 6vw, 72px); }
.app-lp-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.app-lp-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(20px, 2.2vw, 26px);
  background: linear-gradient(155deg, #fff 75%, #f7faff);
  border: 1px solid #dce8fb; border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(2, 18, 52, .07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.app-lp-card:hover,
.app-lp-card:focus-within { transform: translateY(-4px); border-color: #88bcff; box-shadow: 0 20px 44px rgba(9, 62, 141, .17); }
.app-lp-card--kit { border-color: #8bdcff; background: linear-gradient(155deg, #fff 70%, #eafaff); }
.app-lp-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.app-lp-card__top > div { min-width: 0; }
.app-lp-card__icon {
  flex: none; width: 68px; height: 68px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 12px 26px -10px rgba(13, 48, 104, .35);
}
.app-lp-card__name { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.25; margin-top: 2px; }
/* O link do nome cobre o cartão inteiro; o anel de foco é desenhado no cartão */
.app-lp-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.app-lp-card__link:focus-visible { outline: none; }
.app-lp-card__link:focus-visible::after { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.app-lp-card__case {
  flex: 1; margin-bottom: 16px; padding: 16px;
  background: #f1f7ff; border: 1px solid #e1ecfb; border-radius: 14px;
}
.app-lp-card__case strong { display: block; margin-bottom: 6px; font-family: "Poppins", "Inter", sans-serif; font-size: 1rem; line-height: 1.35; color: var(--navy-900); }
.app-lp-card__case p { color: #435775; font-size: .92rem; line-height: 1.5; }
.app-lp-card .app-lp-tags { margin-bottom: 16px; }
.app-lp-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--blue-600); font-weight: 700; }
.app-lp-card__more span { transition: transform .25s var(--ease); }
.app-lp-card:hover .app-lp-card__more span { transform: translateX(4px); }

.app-lp-note {
  max-width: 820px; margin: clamp(28px, 4vw, 40px) auto 0; padding: 16px 20px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  text-align: center; color: var(--muted); font-size: .96rem; line-height: 1.55;
}
.app-lp-note p + p { margin-top: 6px; }
.app-lp-note strong { color: var(--navy-800); }
.app-lp-note a { color: var(--blue-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.app-lp-custom {
  max-width: 820px; margin: 18px auto 0; padding: 20px 22px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid #bfd4ff; border-radius: var(--radius);
  color: var(--navy-800);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.app-lp-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--blue-500); }
.app-lp-custom strong { display: block; font-family: "Poppins", "Inter", sans-serif; font-size: 1.08rem; }
.app-lp-custom span { display: block; color: var(--muted); font-size: .94rem; line-height: 1.45; }
.app-lp-custom__cta { color: var(--blue-600); font-weight: 800; white-space: nowrap; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .app-lp-solve__grid,
  .app-lp-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-lp-hero__grid { grid-template-columns: 1fr; }
  .app-lp-hero__visual { margin-top: 8px; }
  .app-lp-pain__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .app-lp-try__box { grid-template-columns: 1fr; }
  .app-lp-try__actions { max-width: 420px; }
}
@media (max-width: 760px) {
  .app-lp-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Telas viram uma fileira que rola para o lado DENTRO da seção (a página não rola) */
  .app-lp-screens__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(236px, 74%);
    justify-items: center; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin-inline: -4px;
    scrollbar-width: thin;
  }
  .app-lp-shot { scroll-snap-align: center; }
  .app-lp-custom { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .app-lp-custom .app-lp-ico { margin-inline: auto; }
}
@media (max-width: 620px) {
  .app-lp-solve__grid,
  .app-lp-catalog__grid { grid-template-columns: 1fr; }
  .app-lp-feature, .app-lp-pain__item { padding: 22px; }
  .app-lp-final__actions .btn { width: 100%; }
}
@media (max-width: 520px) {
  .app-lp-id__icon { width: 64px; height: 64px; border-radius: 17px; }
  .app-lp-notif { position: relative; left: auto; top: auto; margin: -44px auto 0; width: min(250px, 92%); }
  .app-lp-tag { font-size: .76rem; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-lp-notif { animation: none; }
  .app-lp-feature:hover, .app-lp-card:hover, .app-lp-card:focus-within, .app-lp-custom:hover { transform: none; }
}