/* SiloPimentel.mkt · IA na Rotina · camada visual clara v2 (29/10/2026)
   Carregada depois de layout.css (v1.1, preservado) e home-chrome.css (menu e rodapé da Home, escopados).
   Não muda copy, preços, formulário (lógica), demos nem o player. Menu e rodapé continuam com o fundo escuro da Home.

   Superfícies (do mais baixo ao mais alto):
   - página: marfim #F3ECE2;
   - faixas de apoio: areia #EAE0D2 (seções alternadas para separar blocos sem linhas pesadas);
   - folhas e cartões: papel #FFFDF9, borda tinta a 12% e sombra curta;
   - palco das demos e cartão de investimento: carvão #181C1A (contraste de “janela de trabalho” sobre o claro).
   Texto: tinta #181C1A no corpo, tinta-2 #46504B no secundário. Cobre #A85C3A em botões, bordas e números grandes; em texto pequeno, #96502F (5,1:1 sobre marfim).

   Ritmo (mesma régua da AO): seção 56/44 px; título → apoio 12/10 px; título → conteúdo 28/20 px.
   Todos os h2 fora do hero centralizados; corpo, rótulos, listas e o material do editor continuam à esquerda. */

main {
  --texto-claro: #181C1A;
  --texto-claro-2: #46504B;
  --lp-line: rgba(24, 28, 26, .13);
  --lp-panel: #FFFDF9;
  --papel: #FFFDF9;
  --cobre-texto: #96502F; /* cobre do brand kit escurecido só para texto pequeno sobre claro: 5,1:1 sobre marfim */
  --sec-y: 56px; --head-gap: 28px; --lead-gap: 12px;
  color: var(--tinta);
  background: var(--marfim);
}
body { background: var(--marfim); }
html { scroll-padding-top: 84px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--cobre); }

/* ---------- ritmo e títulos ---------- */
main .lp-sec { padding: var(--sec-y) 0; border-top: 1px solid var(--lp-line); }
main .lp-sec.lp-band { background: var(--areia); }
main > section:not(.lp-hero) .lp-h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 820px; color: var(--tinta); }
.lp-sec-title { margin-bottom: var(--head-gap); }
.lp-lead { color: var(--tinta-2); }
.lp-label { color: var(--cobre-texto); }

/* botões sobre fundo claro: cobre com texto papel (4,9:1); secundário com contorno tinta */
main .lp-btn-main { background: var(--cobre); color: var(--papel); }
main .lp-btn-main:hover { background: #8F4C2F; }
main .lp-btn-sec { color: var(--tinta); border-color: rgba(24, 28, 26, .4); }
main .lp-btn-sec:hover { border-color: var(--cobre); color: var(--cobre); }

/* ---------- hero (não centralizado) ---------- */
.lp-hero { background: var(--marfim); }
.lp-hero .lp-h1 { color: var(--tinta); }
.lp-cond { color: var(--tinta-2); }
.lp-cond span::before { background: var(--cobre); }
.lp-hero-vis::before { background: radial-gradient(closest-side, rgba(168, 92, 58, .14), transparent); }
.lp-hero .pg { background: var(--papel); border: 1px solid var(--lp-line); box-shadow: 0 18px 40px rgba(24, 28, 26, .12); }
.lp-ex { color: var(--tinta-2); }
.lp-ex::before { background: var(--cobre); }

/* hero em notebook baixo: espaçamento vertical menor para as condições caberem na primeira dobra */
@media (min-width: 761px) and (max-height: 660px) {
  .lp-hero .lp-wrap { padding-top: 18px; padding-bottom: 26px; }
  .lp-hero .lp-h1 { margin-top: 10px; }
  .lp-hero .lp-lead { margin-top: 12px; font-size: 17px; line-height: 1.5; }
  .lp-hero .lp-ctas { margin-top: 18px; gap: 8px; }
  .lp-hero .lp-btn { min-height: 48px; }
  .lp-hero .lp-cond { margin-top: 12px; }
}

/* ---------- 1. As mesmas mensagens: folha com margem de anotação ---------- */
.lp-sheet { background: var(--papel); border: 1px solid var(--lp-line); box-shadow: 0 14px 34px rgba(24, 28, 26, .08); border-radius: 12px; }
.lp-sheet-main { padding: 36px 40px 40px; }
.lp-sheet-main p { font-size: 18px; color: var(--tinta); }
.lp-sheet-margin { padding: 40px 32px 40px; }
.lp-sheet-margin::before { left: 32px; top: 28px; }

/* ---------- 2. Rotina bem montada (faixa areia) ---------- */
.lp-routine { gap: 44px; }
.lp-routine .lp-lead { margin-top: 0; font-size: 18px; color: var(--tinta); }
.lp-track { background: var(--papel); border-color: var(--lp-line); border-radius: 14px; }
.lp-track .lp-tab { background: #F6F0E7; border-right-color: var(--lp-line); color: var(--cobre); }
.lp-track .lp-it { padding: 15px 20px; }
.lp-track b { color: var(--tinta); }
.lp-econ { margin-top: 36px; background: var(--papel); border-color: var(--lp-line); border-top: 4px solid var(--cobre); padding: 28px 32px 30px; }
.lp-econ .lp-h3 { color: var(--tinta); }
.lp-econ .lp-cols { margin-top: 12px; gap: 36px; }
.lp-econ p { color: var(--tinta-2); }
.lp-econ p:last-child { color: var(--tinta); }

/* ---------- 3. Demonstração: editor em palco escuro próprio ---------- */
.lp-demos .lp-sec-head { text-align: center; }
.lp-demos .lp-sec-head > * { margin-left: auto; margin-right: auto; }
/* nota demonstrativa fictícia em 14 px, entrelinha 1,6 */
.lp-demos .lp-sec-head .lp-lead { margin-top: var(--lead-gap); max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.lp-frame-wrap {
  max-width: calc(var(--lp-max) - 2 * var(--gutter)); margin: var(--head-gap) auto 0;
  background: var(--carvao); border-radius: 18px; padding-top: 16px;
  box-shadow: 0 18px 44px rgba(24, 28, 26, .18);
}
.lp-frame { background: var(--carvao); }
/* destaque da decisão humana: superfície papel, borda cobre e a primeira frase em ênfase (texto existente) */
.lp-after {
  max-width: 860px; margin: 24px auto 0; font-size: 18px; line-height: 1.6; color: var(--tinta-2);
  background: var(--papel); border: 1px solid rgba(168, 92, 58, .35); border-left: 4px solid var(--cobre);
  border-radius: 6px 14px 14px 6px; padding: 18px 22px;
}
.lp-after strong { display: block; margin-bottom: 4px; color: var(--tinta); font-size: 19px; font-weight: 700; }

/* ---------- 4. O que você recebe ---------- */
.lp-cards { margin-top: var(--head-gap); gap: 14px; }
.lp-cards li { background: var(--papel); border-color: var(--lp-line); padding: 22px 22px 24px; box-shadow: 0 1px 2px rgba(24, 28, 26, .05); }
.lp-cards li::before { background: linear-gradient(225deg, var(--marfim) 50%, rgba(168, 92, 58, .3) 50%); }
.lp-cards b { color: var(--tinta); }
.lp-excl { max-width: none; margin-top: 20px; border: 1px dashed rgba(24, 28, 26, .32); background: rgba(255, 253, 249, .5); color: var(--tinta-2); }

/* ---------- 5. Como funciona (faixa areia) ---------- */
.lp-path { margin-top: var(--head-gap); }
.lp-path::before { background: linear-gradient(90deg, var(--cobre), rgba(168, 92, 58, .2)); }
.lp-path li::before { background: var(--papel); border-color: var(--cobre); color: var(--cobre); }
.lp-path b { color: var(--tinta); }
.lp-checklist { margin-top: 36px; background: var(--papel); border: 1px solid var(--lp-line); border-radius: 12px; padding: 28px 32px; }
.lp-checklist .lp-p { margin-top: 14px; }

/* ---------- 6. Investimento: cartão escuro, título no topo, divisão em destaque ---------- */
.lp-invest {
  background: var(--carvao); color: var(--marfim); border: 0; row-gap: 20px; padding: 36px 44px 40px;
  box-shadow: 0 18px 44px rgba(24, 28, 26, .18);
}
.lp-invest { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.lp-invest > .lp-h2 { grid-column: 1 / -1; margin: 0 auto; color: var(--marfim) !important; }
.lp-invest .lp-price { margin-top: 0; color: var(--marfim); font-size: clamp(40px, 4.4vw, 54px); }
.lp-invest .lp-parc { margin-top: 12px; font-size: 19px; line-height: 1.35; color: rgba(243, 236, 226, .86); }
.lp-invest .lp-amt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--cobre-claro); white-space: nowrap; }
.lp-invest .lp-terms { border-left-color: rgba(243, 236, 226, .18); color: rgba(243, 236, 226, .8); }
.lp-invest .lp-terms p:first-child { color: var(--marfim); }

/* ---------- 7. Dúvidas ---------- */
.lp-faq { margin-top: var(--head-gap); gap: 12px; }
.lp-faq details { background: var(--papel); border-color: var(--lp-line); }
.lp-faq summary { color: var(--tinta); font-size: 17px; padding: 16px 18px; }
.lp-faq summary::after { background: rgba(168, 92, 58, .1); color: var(--cobre); }
.lp-faq details p { color: var(--tinta-2); padding: 0 18px 18px; }

/* ---------- 8. Fechamento: eixo central ---------- */
.lp-close-sec .lp-wrap { display: block; text-align: center; }
.lp-close-sec .lp-lead { max-width: 680px; margin: var(--lead-gap) auto 0; }
.lp-close-sec .lp-ctas { margin-top: 24px; justify-content: center; }

/* ---------- 9. Contato: título no topo, formulário compacto centrado ---------- */
.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); color: var(--tinta-2); }
.lp-contact .lp-wa a { color: var(--cobre-texto); white-space: nowrap; }
.lp-form {
  width: 100%; max-width: 860px; padding: 24px 26px; gap: 12px 20px; background: var(--papel); border: 1px solid var(--lp-line);
  box-shadow: 0 14px 34px rgba(24, 28, 26, .08); grid-template-columns: minmax(0, 1fr) auto;
}
.lp-form > * { grid-column: 1 / -1; }
.lp-form > .lp-consent { grid-column: 1; align-items: center; }
.lp-form > button[type="submit"] { grid-column: 2; align-self: center; }
.lp-two { gap: 14px; }
.lp-f input, .lp-f textarea { min-height: 46px; padding: 10px 13px; background: #FFFFFF; }
.lp-f textarea { min-height: 96px; }
.lp-f .lp-help { font-size: 16px; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  main { --sec-y: 44px; --head-gap: 20px; --lead-gap: 10px; }
  .lp-sheet-main { padding: 22px 18px 24px; }
  .lp-sheet-main p { font-size: 17px; }
  .lp-sheet-margin { padding: 32px 18px 22px; }
  .lp-sheet-margin::before { left: 18px; top: 18px; }
  .lp-routine { gap: 20px; }
  .lp-routine .lp-lead { font-size: 17px; }
  .lp-econ { margin-top: 28px; padding: 20px 18px 22px; }
  /* demo: palco ocupa a largura toda, como na versão aprovada para celular */
  .lp-frame-wrap { max-width: none; border-radius: 0; padding-top: 10px; margin-top: var(--head-gap); box-shadow: none; }
  .lp-after { margin: 20px var(--gutter) 0; font-size: 16px; padding: 14px 16px; }
  .lp-after strong { font-size: 17px; }
  .lp-checklist { margin-top: 28px; padding: 20px 18px; }
  .lp-invest { padding: 26px 20px 28px; row-gap: 16px; }
  .lp-invest { grid-template-columns: minmax(0, 1fr); }
  .lp-invest > .lp-h2 { grid-column: 1; }
  .lp-invest .lp-amt { font-size: 26px; }
  .lp-invest .lp-parc { font-size: 17px; }
  .lp-invest .lp-terms { border-top-color: rgba(243, 236, 226, .18); }
  .lp-form { padding: 18px 16px; grid-template-columns: minmax(0, 1fr); }
  .lp-form > .lp-consent, .lp-form > button[type="submit"] { grid-column: 1; }
  .lp-f textarea { min-height: 128px; }
  .lp-ex { font-size: 14px; }
}