/* Vitrine pública da loja (/loja): a moldura das páginas públicas (topo e rodapé do inicio.css, nome pela marca), uma
   abertura curta no molde da dos termos (chip, título com uma palavra grifada, uma frase, três notas) e, no meio, a
   vitrine e a página de produto do app (loja.css). No produto e no serviço a abertura some. */

.lp-cabeca { padding: calc(64px + 32px + env(safe-area-inset-top)) 0 28px; border-bottom: var(--bw-fio) solid var(--linha); background: var(--fundo-2); }
.lp-cabeca .wrap { display: grid; justify-items: start; gap: 12px; }
.lp-cabeca h1 { max-width: 20ch; font-size: clamp(30px, 7.6vw, 44px); letter-spacing: -.025em; line-height: 1.08; }
.lp-lead { max-width: 58ch; color: var(--texto-2); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.lp-notas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; color: var(--texto-2); font-size: 14.5px; list-style: none; }
.lp-notas li { display: flex; align-items: center; gap: 8px; }
.lp-notas .ic { width: 18px; height: 18px; color: var(--acento); }
@media (max-width: 560px) {
  .lp-cabeca { padding-top: calc(64px + 20px + env(safe-area-inset-top)); padding-bottom: 22px; }
  .lp-notas li:nth-child(n + 2) { display: none; }
}
@media (min-width: 821px) { .lp-cabeca { padding: calc(64px + 48px) 0 36px; } }

.lp-miolo { padding: 28px 0 40px; outline: none; }
/* produto e serviço: sem a abertura, o miolo começa logo embaixo do topo fixo */
.lp-cabeca[hidden] + .lp-miolo { padding-top: calc(64px + 24px + env(safe-area-inset-top)); }
.lp-miolo > .lj-carregando { min-height: 30vh; }
/* produto e serviço na largura do topo e da vitrine (a coluna de 1040 do app deixava a página recuada da marca) */
.lp-miolo > .pagina:not(.estreita) { max-width: none; }

/* "venda aqui": um cartão chapado com o ícone, a frase e o botão (secundário: a ação da página é comprar) */
.lp-vender { padding-bottom: 56px; }
.lp-vender-caixa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; }
.lp-vender-caixa > .btn { grid-column: 1 / -1; }
.lp-vender-texto { display: grid; gap: 4px; min-width: 0; }
.lp-vender-texto h2 { font-size: 19px; letter-spacing: -.01em; }
.lp-vender-texto p { color: var(--texto-2); font-size: 15px; }
@media (min-width: 760px) { .lp-vender-caixa { grid-template-columns: auto minmax(0, 1fr) auto; } .lp-vender-caixa > .btn { grid-column: auto; } }

/* vitrine vazia (ou filtro sem resultado): o próprio vazio já chama pra vender; o cartão de baixo sai pra não repetir */
.lp:has(#loja-raiz .lj-vazio) #lp-vender { display: none; }