/* SiloPimentel.mkt · Atendimento Organizado v2.2 · revisão geral visual (29/10/2026)
   Carregada depois de layout-v2.css (preservado). Não muda texto, preços, hero, menu, rodapé, formulário (lógica) nem demos.

   Ritmo vertical único, em múltiplos de 4 px:
   - seção: 56 px em cima e embaixo no desktop, 44 px no celular (antes variava entre 30, 40, 48 e 72 px);
   - título de seção → linha de apoio logo abaixo dele: 12 px;
   - título (ou título + apoio) → conteúdo: 28 px no desktop, 20 px no celular (antes variava de 6 a 32 px);
   - título interno (h3) → texto: 8 px.
   Todos os h2 fora do hero ficam centralizados; parágrafos, listas, preços e o material das demos continuam
   alinhados à esquerda, salvo onde a composição pede (indicado abaixo). */

:root { --sec-y: 56px; --head-gap: 28px; --lead-gap: 12px; }

/* ---------- ritmo das seções ---------- */
.lp-sec,
.lp-sec.lp-tight,
.lp-sec.lp-cena,
.lp-sec[aria-labelledby="h-muda"],
.lp-sec[aria-labelledby="h-faq"],
.lp-sec.lp-tight[aria-labelledby="h-recebe"] { padding: var(--sec-y) 0; }
/* demos: o iframe já termina com 20 px de respiro interno */
.lp-demos { padding-top: var(--sec-y); padding-bottom: 40px; }

/* ---------- h2 centralizados (exceto hero) ---------- */
main > section:not(.lp-hero) .lp-h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 820px; }
.lp-head-c { text-align: center; }

/* 1. Você reconhece esta cena? (já centralizado) */
.lp-moms { margin-top: var(--head-gap); }
.lp-cena .lp-close { margin-top: 24px; }

/* 2. O que isso custa */
.lp-light .lp-costs { margin-top: var(--head-gap); }

/* 3. O que muda: título no topo da seção; texto de apoio e linha numerada seguem lado a lado */
.lp-head-c + .lp-change { margin-top: var(--head-gap); }
.lp-change { align-items: start; }
.lp-change .lp-sticky .lp-lead { margin-top: 0; }
.lp-change .lp-sticky { top: 96px; } /* fica abaixo do header fixo de 72 px */

/* 4. Veja como fica na prática: três textos de apoio em 14 px (pedido explícito de Silo) */
.lp-demos .lp-sec-head .lp-lead,
.lp-demo-head .lp-p { font-size: 14px; line-height: 1.6; color: var(--texto-claro-2); letter-spacing: .005em; }
.lp-demos .lp-sec-head .lp-lead { margin-top: var(--lead-gap); }
.lp-demo { margin-top: 36px; }
.lp-demo-head .lp-p { margin-top: 6px; }
.lp-frame-wrap { margin-top: 12px; }

/* 5. O que você recebe */
.lp-tight .lp-spec { margin-top: var(--head-gap); }
.lp-tight .lp-spec li { padding: 12px 0 13px; }
/* destaque do atendimento humano: faixa de fundo cobre suave, borda inteira e a primeira frase em ênfase */
.lp-tight .lp-excl {
  margin-top: 24px; padding: 16px 20px; max-width: none;
  background: rgba(215, 160, 109, .09); border: 1px solid rgba(215, 160, 109, .42); border-left: 4px solid var(--cobre-claro);
  border-radius: 6px 14px 14px 6px; font-size: 17px; line-height: 1.55; color: var(--texto-claro-2);
}
.lp-excl strong { color: var(--texto-claro); font-weight: 680; }

/* 6. Como funciona + o que vamos pedir */
.lp-tight .lp-steps { margin-top: var(--head-gap); gap: 16px; }
.lp-tight .lp-ask { margin-top: 36px; align-items: start; }
.lp-tight .lp-ask .lp-p { margin-top: 16px; }

/* 7. Investimento: título no topo do cartão, centralizado; preço e condições lado a lado embaixo */
.lp-invest { row-gap: 20px; align-items: center; }
.lp-invest > .lp-h2 { grid-column: 1 / -1; margin: 0 auto; }
.lp-invest .lp-total { margin-top: 0; }

/* 8. Dúvidas: o bloco das perguntas acompanha o título no eixo central (perguntas continuam à esquerda) */
.lp-faq { margin: var(--head-gap) auto 0; }

/* 9. Fechamento (já centralizado) */
.lp-close-sec .lp-lead { margin-top: var(--lead-gap); }
.lp-close-sec .lp-ctas { margin-top: 28px; }

/* 10. Contato: título centralizado no topo, linha do WhatsApp logo abaixo dele, formulário centrado embaixo */
.lp-tight .lp-contact { grid-template-columns: minmax(0, 1fr); gap: var(--head-gap); justify-items: center; }
.lp-contact > div:first-child { text-align: center; }
.lp-contact .lp-wa { margin-top: var(--lead-gap); }
.lp-tight .lp-contact .lp-form { width: 100%; max-width: 860px; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  :root { --sec-y: 44px; --head-gap: 20px; --lead-gap: 10px; }
  .lp-demos { padding-bottom: 32px; }
  .lp-demo { margin-top: 28px; }
  .lp-head-c + .lp-change { gap: 20px; }
  .lp-tight .lp-spec li { padding: 12px 0; }
  .lp-tight .lp-excl { font-size: 16px; padding: 14px 16px; }
  .lp-tight .lp-ask { margin-top: 28px; }
  .lp-invest { row-gap: 16px; }
  .lp-invest > .lp-h2 { grid-column: 1; }
  .lp-cena .lp-close { margin-top: 20px; }
}

/* fechamento de cada demo alinhado à mesma borda do “Roteiro em texto” logo acima (antes flutuava centrado) */
.lp-after { margin: 4px 0 0; }