/* Estilo compartilhado do mandaorca.com.br. Editar aqui vale pras duas paginas. */
/* Identidade v3. Sem emoji no corpo da página de propósito: a versão antiga
   tinha oito seguidos nos títulos dos cartões, que é a assinatura visual de
   landing page gerada. Fica só o do botão da Play, que é convenção de loja. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --marca: #3A63C2;
  --marca-escura: #29499C;
  --tinta: #16212e;
  --tinta-fraca: #5c6b7a;
  --linha: #e3e9f0;
  --fundo-suave: #f6f8fb;
}
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tinta); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }

/* ── Navegação ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.nav .container { display: flex; align-items: center; gap: 32px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--tinta-fraca); font-size: .95rem; font-weight: 500; }
.nav nav a:hover { color: var(--marca); }
.btn {
  display: inline-block; background: var(--marca); color: #fff; text-decoration: none;
  font-weight: 700; padding: 11px 20px; border-radius: 10px; font-size: .95rem;
  transition: background .15s;
}
.btn:hover { background: var(--marca-escura); }
.btn.grande { padding: 16px 30px; font-size: 1.05rem; border-radius: 12px; }

/* ── Herói ─────────────────────────────────────────────────────────── */
.heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 72px 0 64px; }
.heroi h1 { font-size: 3.1rem; line-height: 1.08; letter-spacing: -.035em; font-weight: 800; }
.heroi .chamada { margin-top: 22px; font-size: 1.2rem; color: var(--tinta-fraca); max-width: 30em; }
.acoes { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.acoes .video { color: var(--marca); font-weight: 600; text-decoration: none; }
.acoes .video:hover { text-decoration: underline; }

/* Moldura de celular: sombra e borda escura. Sem isso a captura vira
   "imagem solta na página", que foi o que sempre faltou aqui. */
.fone {
  border: 8px solid #1d2733; border-radius: 30px; overflow: hidden;
  box-shadow: 0 30px 60px -18px rgba(22,33,46,.4), 0 8px 20px -8px rgba(22,33,46,.25);
  max-width: 258px; margin: 0 auto; background: #1d2733;
}
/* Todas as capturas são recortadas em 1080x1920 antes de virar .webp, então
   aqui é só deixar a proporção correr solta.
   NÃO usar max-height + object-fit: cover aqui. Os atributos width/height do
   <img> valem como altura declarada; o max-height cortava essa altura e o
   cover ampliava a imagem pra preencher, comendo as laterais da tela do app. */
.fone img { display: block; width: 100%; height: auto; }

/* ── Faixa de credibilidade ────────────────────────────────────────── */
.faixa { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--fundo-suave); }
.faixa .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; padding-top: 18px; padding-bottom: 18px; }
.faixa span { color: var(--tinta-fraca); font-size: .92rem; font-weight: 500; }
.faixa span + span::before { content: "·"; margin-right: 34px; color: #b9c4d0; }

/* ── Blocos alternados ─────────────────────────────────────────────── */
.bloco { padding: 72px 0; border-bottom: 1px solid var(--linha); }
.bloco .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bloco.invertido .texto { order: 2; }
.rotulo {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  font-weight: 700; color: var(--marca); margin-bottom: 14px;
}
.bloco h2 { font-size: 2.05rem; line-height: 1.18; letter-spacing: -.025em; font-weight: 800; }
.bloco p { margin-top: 18px; font-size: 1.08rem; color: var(--tinta-fraca); }
.bloco .fone { max-width: 244px; }

/* O bloco do Pix é o único colorido: é a única coisa que nenhum
   concorrente anuncia, e estava perdida no meio de oito cartões iguais. */
.bloco.destaque {
  background: linear-gradient(158deg, #4A76DC 0%, #2A50B4 55%, #1B3C8F 100%);
  color: #fff; border-bottom: 0;
}
.bloco.destaque .rotulo { color: #ffd75e; }
.bloco.destaque p { color: rgba(255,255,255,.86); }
.bloco.destaque .fone { border-color: rgba(0,0,0,.35); box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); }

/* ── E mais ────────────────────────────────────────────────────────── */
.mais { padding: 76px 0; border-bottom: 1px solid var(--linha); }
.mais .colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 34px; }
.mais h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.mais p { color: var(--tinta-fraca); font-size: .99rem; }
.titulo-secao { font-size: 1.9rem; letter-spacing: -.025em; font-weight: 800; }

/* ── Preço ─────────────────────────────────────────────────────────── */
.preco { padding: 84px 0; background: var(--fundo-suave); border-bottom: 1px solid var(--linha); }
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; align-items: stretch; }
.plano { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 30px 26px; }
.plano.melhor { border: 2px solid var(--marca); position: relative; }
.plano .nome { font-weight: 700; font-size: 1.02rem; }
.plano .valor { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 4px; }
.plano .valor small { font-size: 1rem; font-weight: 600; color: var(--tinta-fraca); letter-spacing: 0; }
.plano .detalhe { color: var(--tinta-fraca); font-size: .96rem; }
.plano .selo {
  position: absolute; top: -12px; left: 26px; background: var(--marca); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
}
.nota-preco { margin-top: 24px; color: var(--tinta-fraca); font-size: .95rem; }

/* ── Perguntas ─────────────────────────────────────────────────────── */
.perguntas { padding: 84px 0; }
.perguntas details { border-bottom: 1px solid var(--linha); padding: 20px 0; }
.perguntas summary {
  cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; color: var(--marca); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.perguntas details[open] summary::after { content: "–"; }
.perguntas details p { margin-top: 12px; color: var(--tinta-fraca); max-width: 62em; }
.perguntas details p a { color: var(--marca); }

/* ── Chamada final ─────────────────────────────────────────────────── */
.final { background: var(--fundo-suave); border-top: 1px solid var(--linha); padding: 76px 0; text-align: center; }
.final h2 { font-size: 2.05rem; letter-spacing: -.025em; font-weight: 800; }
.final p { margin: 14px auto 28px; color: var(--tinta-fraca); max-width: 34em; }

/* ── Rodapé ────────────────────────────────────────────────────────── */
.rodape { background: #101b28; color: #9fb0c2; padding: 52px 0 40px; font-size: .95rem; }
.rodape .grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.rodape strong { color: #fff; display: block; margin-bottom: 12px; font-size: 1rem; }
.rodape a { color: #9fb0c2; text-decoration: none; display: block; margin-bottom: 8px; }
.rodape a:hover { color: #fff; }
.rodape .base { margin-top: 40px; padding-top: 22px; border-top: 1px solid #22303f; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: #7c8ea1; }
.rodape .aviso-bot { font-style: italic; }

/* ── Telas estreitas ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav nav { display: none; }
  .nav .container { gap: 16px; }
  .marca { margin-right: auto; }
  .heroi { grid-template-columns: 1fr; gap: 44px; padding: 52px 0; text-align: center; }
  .heroi h1 { font-size: 2.25rem; }
  .heroi .chamada { margin-left: auto; margin-right: auto; }
  .acoes { justify-content: center; }
  .bloco .container { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  /* Em coluna única a imagem vai SEMPRE depois do texto: alternar aqui só
     embaralharia a leitura, que é vertical. */
  .bloco.invertido .texto { order: 0; }
  .bloco h2 { font-size: 1.72rem; }
  .mais .colunas, .planos, .rodape .grade { grid-template-columns: 1fr; gap: 28px; }
  .bloco, .mais, .preco, .perguntas, .final { padding: 56px 0; }
  /* Empilhada, a faixa deixaria um "·" solto no começo das linhas 2 e 3. */
  .faixa span + span::before { display: none; }
  .faixa .container { flex-direction: column; gap: 6px; }
}

/* ── Página "Como funciona" ──────────────────────────────────────────── */
.pagina-topo { padding: 64px 0 12px; text-align: center; }
.pagina-topo h1 { font-size: 2.5rem; letter-spacing: -.03em; font-weight: 800; }
.pagina-topo p { margin: 16px auto 0; color: var(--tinta-fraca); font-size: 1.1rem; max-width: 34em; }

.video-caixa {
  max-width: 880px; margin: 40px auto 0; border-radius: 16px; overflow: hidden;
  position: relative; aspect-ratio: 16 / 9; background: #000;
  box-shadow: 0 24px 60px -20px rgba(22,33,46,.45);
}
.video-caixa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 36px; }
.passo .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca); color: #fff; font-weight: 700; font-size: .92rem; margin-bottom: 12px;
}
.passo p { color: var(--tinta-fraca); }

@media (max-width: 860px) {
  .pagina-topo { padding: 44px 0 8px; }
  .pagina-topo h1 { font-size: 1.95rem; }
  .passos { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Botão flutuante do WhatsApp ─────────────────────────────────────── */
/* Verde oficial do WhatsApp de propósito: é o único lugar da página com uma
   cor de fora da marca, e é justamente o reconhecimento instantâneo que faz
   esse botão funcionar. O SVG vai embutido — nada de ícone vindo de CDN. */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 8px 24px rgba(16,27,40,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.zap:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,27,40,.36); }
.zap svg { width: 30px; height: 30px; fill: currentColor; display: block; }
@media (prefers-reduced-motion: reduce) { .zap { transition: none; } .zap:hover { transform: none; } }
@media (max-width: 860px) { .zap { right: 16px; bottom: 16px; width: 52px; height: 52px; } .zap svg { width: 28px; height: 28px; } }