/* Landing pages dos MCPs (alpha-commerce, alpha-erp).
   Usam o design system do site principal (backend.css + frontend.css, escopo .site) e os mesmos efeitos (frontend.js).
   Aqui só moram os ajustes para texto corrido, que o sistema da home não traz: lá os textos são curtos e em caixa alta. */

/* cabeçalho: no celular a navegação some (regra do sistema), então o botão "Planos" fica sempre à vista */
.lp .s-bar .s-ghost { display: inline-flex; align-items: center; }
.lp .s-nav a[aria-current="page"] { color: var(--s-green); }
.lp .s-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* hero: o título aqui é uma frase, não duas palavras */
.lp .s-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 0.95; max-width: 20ch; margin-bottom: 1.5rem; }
.lp .s-lead { max-width: 34rem; margin-bottom: 2rem; font-size: 0.95rem; text-transform: none; color: rgba(51, 255, 51, 0.75); }
.lp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.lp-acoes .s-link { margin-top: 0; }
.lp-prova { max-width: 34rem; padding-left: 1rem; border-left: 2px solid var(--s-amber); font-size: 0.8rem; line-height: 1.6; color: var(--s-amber); }
@media (max-width: 860px) { .lp .s-hero { min-height: 0; } .lp .s-hero-visual { min-height: 16rem; } .lp .s-hero-content { min-height: 0; padding: 2.5rem 1.5rem 3rem; } }

/* seções: respiro menor que o da home, porque aqui tem mais conteúdo por seção */
.lp .s-section { padding: 5rem 1.5rem; }
.lp .s-features { min-height: 0; }
.lp .s-head { margin-bottom: 3rem; }
.lp .s-head h2, .lp .s-logs-head h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); }

/* faixa de números */
.lp-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border: 1px solid rgba(51, 255, 51, 0.2); background: rgba(10, 26, 10, 0.5); }
.lp-fato { display: grid; gap: 0.35rem; align-content: start; padding: 1.5rem; border-right: 1px solid rgba(51, 255, 51, 0.2); }
.lp-fato:last-child { border-right: 0; }
.lp-fato strong { font-family: 'VT323', ui-monospace, monospace; font-weight: 500; font-size: 2.75rem; line-height: 1; letter-spacing: -0.025em; color: var(--s-amber); }
.lp-fato span { font-size: 0.75rem; line-height: 1.5; color: rgba(51, 255, 51, 0.6); }
@media (max-width: 640px) { .lp-fato { border-right: 0; border-bottom: 1px solid rgba(51, 255, 51, 0.2); } .lp-fato:last-child { border-bottom: 0; } }

/* texto corrido */
.lp-texto { display: grid; gap: 1.1rem; max-width: 46rem; }
.lp-texto p, .lp .s-card-main p, .lp .s-list li, .lp .faq-content p, .lp-testes p, .lp-passos .t { font-size: 0.875rem; line-height: 1.7; text-transform: none; color: rgba(51, 255, 51, 0.72); }
.lp-texto strong, .lp .s-list strong, .lp-testes strong, .lp .faq-content strong { color: var(--s-green); font-weight: 500; }
.lp-nota { margin-top: 2rem; font-size: 0.8rem; color: rgba(51, 255, 51, 0.6); }
.lp-nota a { color: var(--s-green); border-bottom: 1px solid rgba(51, 255, 51, 0.4); }

/* cards: a altura vem do conteúdo, não dos 28rem da home; colunas só quando cabem (a home usa 3 a partir de 768px, apertado para texto corrido) */
.lp .s-cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .lp .s-cards:not(.s-cards-planos) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp .s-cards:not(.s-cards-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp .s-card { min-height: 0; padding: 1.75rem; }
.lp .s-card-top { margin-bottom: 1.75rem; }
.lp .s-card h3 { font-size: 1.75rem; }
.lp .s-card-main p { max-width: none; }
.lp .s-card-main .s-link { margin-top: 1.25rem; }
.lp .s-card.destaque { border-color: var(--s-green); background: var(--s-bg2); }
.lp .s-card.destaque .s-card-num { color: var(--s-amber); }

/* preço no formato da vitrine: valor por mês em destaque, a cobrança anual logo abaixo */
.lp-preco-linha { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; }
.lp-preco-de { flex-basis: 100%; margin-bottom: 0.25rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-amber); }
.lp-preco { font-family: 'VT323', ui-monospace, monospace; font-size: 3.5rem; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: var(--s-green); }
.lp-preco.txt { font-size: 2.5rem; }
.lp-preco-un { font-size: 0.875rem; color: var(--s-amber); }
.lp-preco-nota { margin-top: 0.6rem; font-size: 0.7rem; line-height: 1.6; color: rgba(51, 255, 51, 0.55); }
.lp .s-card-foot .lp-preco-nota { text-transform: none; }

/* como funciona */
.lp-passos { list-style: none; margin: 0; padding: 0; max-width: 52rem; counter-reset: passo; }
.lp-passos li { counter-increment: passo; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid rgba(51, 255, 51, 0.1); }
.lp-passos li::before { content: counter(passo, decimal-leading-zero); font-family: 'VT323', ui-monospace, monospace; font-size: 2rem; line-height: 1; color: var(--s-amber); }

/* lista de segurança */
.lp .s-list { gap: 0.9rem; max-width: 52rem; margin-top: 0; }
.lp .s-list li { padding-left: 1.4rem; }
.lp .s-list li::before { top: 0.6em; }

/* "o que já foi testado": o painel-terminal do sistema, com texto legível */
.lp-testes { max-width: 56rem; }
.lp-testes .s-dash-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.5rem; }
@media (min-width: 768px) { .lp-testes .s-dash-body { padding: 2.25rem; } }

/* FAQ: a mesma sanfona da home */
.lp .s-faq { max-width: 56rem; }
.lp .faq-content p { max-width: 48rem; }
.lp .faq-q { text-transform: none; font-size: 0.9rem; line-height: 1.5; }

/* chamada final */
.lp .s-cta-title { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 22ch; margin-bottom: 2.5rem; }
.lp .s-cta-btn .s-cta-label { text-align: center; }
.lp .s-cta-status { flex-direction: column; gap: 0.75rem; text-align: center; }
.lp .s-cta-status p { line-height: 1.7; }
.lp .s-cta-status a { color: var(--s-green); border-bottom: 1px solid rgba(51, 255, 51, 0.4); }

/* rodapé: mesmo do site; aqui sem a altura mínima de 80% da tela, e com o aviso legal */
.lp .s-foot-wrap { min-height: 0; padding-top: 4rem; }
.lp .s-foot-top { margin-bottom: 3rem; }
.lp-legal { display: grid; gap: 0.75rem; max-width: 62rem; margin-bottom: 3rem; font-size: 0.7rem; line-height: 1.7; color: rgba(51, 255, 51, 0.5); }
.lp-legal a { color: rgba(51, 255, 51, 0.8); border-bottom: 1px solid rgba(51, 255, 51, 0.3); }

/* ponte para a página dos dois juntos: cada MCP fala só dele, e aqui só aponta para a combinação */
.lp-ponte { display: grid; gap: 0.6rem; justify-items: start; margin-top: 2.5rem; max-width: 52rem; padding: 1.25rem 1.5rem; border: 1px dashed var(--s-amber); background: rgba(255, 176, 0, 0.05); }
.lp-ponte p:not(.s-eyebrow) { font-size: 0.875rem; line-height: 1.7; color: rgba(51, 255, 51, 0.72); }
.lp-ponte .s-eyebrow { margin-bottom: 0; }
.lp-ponte .s-link { margin-top: 0.4rem; }

/* os dois se encontram no SKU (página /mcp/package): em linha no desktop, empilhados no celular */
.lp-combo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; margin-bottom: 2rem; }
@media (min-width: 900px) { .lp-combo { grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem) minmax(0, 1fr); } }
.lp-no { display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem; border: 1px solid rgba(51, 255, 51, 0.2); background: rgba(10, 26, 10, 0.5); }
.lp-no strong { font-family: 'VT323', ui-monospace, monospace; font-weight: 500; font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; color: var(--s-green); }
.lp-no .s-eyebrow { margin-bottom: 0; }
.lp-no .s-list { margin-top: 0.5rem; }
.lp-no .s-list li { font-size: 0.8rem; }
.lp-elo { position: relative; display: grid; justify-items: center; align-content: center; padding: 1.75rem 0; }
.lp-elo-linha { display: none; }
.lp-elo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed rgba(51, 255, 51, 0.5); }
@media (min-width: 900px) { .lp-elo { padding: 0 0.75rem; } .lp-elo::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed rgba(51, 255, 51, 0.5); } }
.lp-elo-sku { position: relative; z-index: 1; font-family: 'VT323', ui-monospace, monospace; font-size: 2rem; line-height: 1; padding: 0.2rem 0.9rem; border: 1px solid var(--s-amber); background: var(--s-bg); color: var(--s-amber); }
.lp-elo-ia { position: relative; z-index: 1; margin-top: 0.5rem; padding: 0 0.35rem; background: var(--s-bg); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(51, 255, 51, 0.6); text-align: center; }
@media (min-width: 900px) { .lp-elo-ia { position: absolute; top: calc(50% + 1.75rem); margin-top: 0; } }

/* pedidos de exemplo no painel-terminal */
.lp-pedido { font-size: 0.875rem; line-height: 1.7; color: var(--s-green); }
.lp-pedido span { color: var(--s-amber); margin-right: 0.4rem; }

/* título do Alpha ERP: nome do ERP digitado e apagado, só quando houver mais de um (mcp/digitacao.js); o cursor segue o "digital_" do logo */
.lp-erp::after { content: '_'; margin-left: 0.05em; animation: lp-cursor 1s steps(2) infinite; }
@keyframes lp-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp-erp::after { animation: none; } }

/* logos dos MCPs: a marca de cada produto no lugar do lobo do hero; no pacote, as duas ligadas pelo SKU */
.lp-par { display: flex; align-items: center; justify-content: center; width: min(86%, 560px); }
.s-hero-visual .lp-par svg { width: 38%; flex: none; }
.lp-par-elo { position: relative; flex: 1; min-width: 2rem; border-top: 1px dashed var(--s-amber); }
.lp-par-elo span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0.1rem 0.6rem; border: 1px solid var(--s-amber); background: var(--s-bg2); font-family: 'VT323', ui-monospace, monospace; font-size: 1.4rem; line-height: 1; color: var(--s-amber); }
.lp-no-marca { display: block; width: 44px; height: 44px; margin-bottom: 0.5rem; }
.lp-no-marca svg { display: block; width: 100%; height: 100%; }

/* índice /mcp/: no cartão do pacote as duas marcas vão lado a lado */
.lp-no-marca.lp-no-par { display: flex; width: auto; height: 44px; gap: 0.35rem; margin-bottom: 0; }
.lp-no-par svg { width: 44px; height: 44px; }
.lp .s-card-top .lp-no-marca { margin-bottom: 0; }
/* Comparação (páginas de produto): tabela com rolagem própria no celular; a coluna do produto em destaque */
.lp-comparar { overflow-x: auto; border: 1px solid rgba(51, 255, 51, 0.2); background: rgba(10, 26, 10, 0.35); }
.lp-comparar table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.8125rem; line-height: 1.55; }
.lp-comparar th, .lp-comparar td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(51, 255, 51, 0.12); color: rgba(51, 255, 51, 0.72); }
.lp-comparar tr:last-child th, .lp-comparar tr:last-child td { border-bottom: 0; }
.lp-comparar thead th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-amber); font-weight: 500; }
.lp-comparar tbody th { color: var(--s-green); font-weight: 500; }
.lp-comparar th:last-child, .lp-comparar td:last-child { color: var(--s-green); background: rgba(51, 255, 51, 0.06); }