/* ════════════════════════════════════════════════════════════
   p-app.css — página do app Meu Plano (/app)
   Só o que é desta página. Cores e medidas vêm dos tokens
   (tokens.css e site.css); molduras e selos são do kit.
   ════════════════════════════════════════════════════════════ */

/* ── Hero: texto ao centro e a tela do computador logo abaixo ── */
.app-hero-texto { max-width: 820px; margin: 0 auto; text-align: center; }
.app-hero-texto .lead { margin-inline: auto; }
.app-hero-texto .hero-trust,
.app-hero-texto .hero-cta { justify-content: center; }
.app-hero-texto .hero-trust { gap: 8px 18px; }
.app-hero-nota { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.5; color: var(--tx-2); }
/* eyebrow com o descritor: no celular quebra em duas linhas, sempre depois de "o app de";
   até 340 px as letras se aproximam um pouco para "organização financeira da Verta" caber inteira.
   inline-block (e não o inline-flex do kit): o texto e o trecho que não quebra ficam numa linha só de texto */
.app-hero-eyebrow { display: inline-block; }
.app-hero-eyebrow .sem-quebra { white-space: nowrap; }
@media (max-width: 340px) { .app-hero-eyebrow { letter-spacing: .12em; } }
/* a tela do computador só aparece com 920 px ou mais e é a imagem maior do hero
   (sem lazy, com fetchpriority="high"); abaixo de 920 px o <source> de 1 px do
   <picture> evita o download no celular */
.app-hero-tela { display: none; }
.app-hero-tela picture { display: block; }
@media (min-width: 920px) {
  .app-hero-tela { display: block; margin-top: clamp(40px, 5vw, 56px); }
}

/* ── Títulos sem palavra sozinha na última linha ──────── */
#conteudo h2 { text-wrap: balance; }
.app-hero-texto .lead, .app-texto .lead, .app-integracao .lead, .app-final .lead { text-wrap: pretty; }

/* ── Âncoras: cabeçalho fixo (68 px) + navegação dos módulos (47 px) ── */
.app-grupo,
.app-grupo [id] { scroll-margin-top: 124px; }

/* ── Seções dos módulos ───────────────────────────────── */
.app-modulo { padding-top: clamp(28px, 4vw, 48px); }
.app-suave { background: var(--bg-suave); border-block: 1px solid var(--border); }
.app-suave + .app-suave { border-top: 0; }
.app-texto { max-width: 760px; }
.split .app-texto { max-width: none; }
.app-split-topo { align-items: start; }
/* seção de uma coluna: o texto centraliza sob a faixa (no celular fica alinhado à esquerda) */
@media (min-width: 720px) {
  .app-centro { margin-inline: auto; text-align: center; }
  .app-centro .lead { margin-inline: auto; }
  .app-centro .eyebrow::before { display: none; }
}
/* texto curto ao lado de um bloco alto (simulador): acompanha a rolagem */
@media (min-width: 900px) {
  .app-fixo { position: sticky; top: 140px; }
}

/* Faixa ilustrada do módulo (a mesma do topo da tela no app).
   O miolo da arte é branco opaco: o multiply funde o branco no fundo
   da seção. O recorte 4:1 tira só a sobra branca de cima e de baixo;
   o desenho fica inteiro. Não pode ficar dentro de um .reveal: a
   opacidade da entrada isolaria a mistura. */
.app-faixa {
  display: block; width: 100%; max-width: 720px; height: auto;
  aspect-ratio: 4 / 1; object-fit: cover; object-position: center;
  margin: 0 auto clamp(8px, 1.6vw, 16px);
  mix-blend-mode: multiply;
  pointer-events: none; user-select: none;
}

/* Tela larga (Plano do mês): na largura do conteúdo, para o texto da tela ficar legível */
.app-tela-larga { margin-top: clamp(28px, 4vw, 44px); }

/* ── Mural dos sonhos ─────────────────────────────────── */
.app-mural {
  list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .app-mural { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.app-mural li { min-width: 0; }
.app-mural figure {
  position: relative; margin: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--sh-card);
}
.app-mural img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* legenda sobre a arte, como no Mural do app: véu verde-profundo garante o contraste do texto branco */
.app-mural figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px;
  font: 700 var(--fs-md)/1.25 var(--f-display); letter-spacing: -.005em; color: var(--tx-inv);
  background: linear-gradient(180deg, rgba(22,69,58,0) 0%, rgba(22,69,58,.74) 42%, rgba(22,69,58,.9) 100%);
}
@media (max-width: 480px) { .app-mural figcaption { padding: 26px 10px 10px; font-size: var(--fs-sm); } }

/* ── Simulador da independência ───────────────────────── */
.app-simulador { min-width: 0; }
.app-simulador .nota-legal { margin-top: 18px; }

/* ── Proteção: a lista num cartão ─────────────────────── */
.app-card-lista .checklist { margin-top: 0; gap: 18px; }

/* ── Simuladores do app ───────────────────────────────── */
.app-sims {
  list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr;
  /* cada cartão na altura do próprio conteúdo: só um simulador tem descrição, e
     esticar os outros até a altura dele deixaria caixas com um vazio embaixo */
  align-items: start;
}
@media (min-width: 340px) { .app-sims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .app-sims { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.app-sims li {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px 14px 34px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r3); box-shadow: var(--sh-card);
  font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--tx-1);
}
/* marcador alinhado à primeira linha do nome */
.app-sims li::before {
  content: ''; position: absolute; left: 16px; top: 20px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--verde);
}
.app-sims li span { font-size: var(--fs-xs); font-weight: 400; line-height: 1.45; color: var(--tx-2); text-wrap: balance; }
/* em duas colunas são 9 itens: o último ocupa a linha inteira em vez de ficar sozinho pela metade */
@media (min-width: 340px) and (max-width: 859px) {
  .app-sims li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .app-sims li { padding: 11px 12px 11px 27px; font-size: var(--fs-sm); }
  .app-sims li::before { left: 12px; top: 17px; width: 7px; height: 7px; }
}

/* ── Ferramentas (Radar, Milhas, Cofre, Documentos) ───── */
.app-ferramentas { padding-top: 0; }
/* 1, 2 ou 4 colunas: nunca 3 + 1 cartão sozinho na segunda linha */
.app-ferramentas-grid { display: grid; gap: 22px; margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .app-ferramentas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-ferramentas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.app-ferramenta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.app-ferramenta h3 { font-family: var(--f-body); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--tx-1); }
.app-ferramenta p { font-size: 15px; line-height: 1.6; color: var(--tx-2); }
/* no celular, o ícone vai para a esquerda e o cartão fica mais baixo */
@media (max-width: 559px) {
  .app-ferramentas-grid { gap: 14px; }
  .app-ferramenta { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; }
  .app-ferramenta .ico-selo { grid-row: 1 / span 2; }
  .app-ferramenta h3, .app-ferramenta p { grid-column: 2; }
  .app-ferramenta h3 { padding-top: 2px; }
}

/* ── Também no Meu Plano ──────────────────────────────── */
.app-tambem { margin-top: 0; gap: 16px; }
.app-tambem b { color: var(--tx-1); }
.app-tambem span:not(.ck) { font-size: 15px; line-height: 1.6; }
@media (min-width: 900px) { .app-tambem { padding-top: 6px; } }
/* numa coluna só, o título e a lista ficam a 20 px, como no resto do site
   (sem isto, o gap do .split somado à margem do ul.checklist dava 56 px) */
@media (max-width: 899px) {
  .app-split-tambem { row-gap: 20px; }
  .app-split-tambem > ul.app-tambem { margin-top: 0; }
}

/* ── Integração ───────────────────────────────────────── */
.app-integracao { max-width: 760px; text-align: center; }
.app-integracao .lead { margin-inline: auto; }

/* ── Chamada final ────────────────────────────────────── */
.app-final { padding-top: 0; }
.app-final .lead { margin-inline: auto; }
.app-final .hero-cta { justify-content: center; }

/* link dentro da nota (o aviso de sem JavaScript do teste e do simulador): sublinhado, como no /agendar */
.nota-legal a { color: var(--verde-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }