/* =============================================================================
   LEAD MODAL — SKIN "mini brandbook oficial" (2026-08-26)
   Aditivo e ESCOPADO por LP: só tem efeito quando #leadModal recebe a classe
   .lmb-brand, emitida por _shared/lead-modal/modal.php quando
   $LP_CONFIG['modal_brand'] = true (ver doc no cabeçalho de modal.php).

   Ligado hoje em: sp/, sp-piloto-agenda/ (cada uma via <link> própria no
   <head>, depois de /_shared/lead-modal/lead-modal.css). cwb/ e rp/ NÃO
   importam este arquivo e não setam a flag — zero efeito, visual antigo
   (fundo navy, cantos arredondados 24px, botão verde WhatsApp #1DA851,
   tipografia Inter) preservado intocado.

   Migrar cwb/ ou rp/ para este skin, quando chegar a vez: (1) setar
   $LP_CONFIG['modal_brand'] = true no include do modal.php da LP; (2) dar
   <link rel="stylesheet" href="/_shared/lead-modal/lead-modal-brand.css">
   no <head>, depois do <link> de lead-modal.css. Nada mais — todos os
   valores de cor abaixo usam var(--token, #fallback-hex), então funciona
   mesmo que a LP ainda não tenha /_shared/brand/surfcenter-brand.css
   linkado (caso do piloto: só as fontes Google Montserrat+Playfair Display
   precisam estar no <head> da LP para os títulos renderizarem na serifada
   certa — sem elas cai no fallback Georgia/serif do navegador, ainda
   legível, só não é a fonte exata).

   Cores (mini brandbook, revista/pit.md secao 3): concha #F0ECE2 (fundo),
   oliva #494638 (texto/titulos), areia #D6C2AB (bordas), petroleo #163648
   (blocos escuros pontuais), laranja #E1753A (acento). CTA primario usa
   --laranja-cta (#E58957, tom ajustado — ver _shared/brand/surfcenter-
   brand.css) com texto petroleo: medido 4,86:1 (WCAG AA, laranja puro
   contra petroleo mede só 4,11:1, abaixo do minimo). Cantos SEMPRE retos
   (raio 0), característica central da marca — única exceção é o botão
   fechar (X), que vira pílula (raio 999px), padrão já usado em badges.
   ============================================================================= */

/* ── Overlay de fundo (classic overlay OU .lmb-embedded.active) ─────────── */
/* Fallback genérico: qualquer LP com modal_brand=true, mesmo sem override
   estrutural próprio (cwb/rp quando migradas), ganha automaticamente um
   backdrop petroleo->oliva em vez do navy antigo.
   CORRIGIDO 2026-08-25 (bug "2 faixas verticais escuras ladeando o cartão
   embutido", reportado em sp-piloto-agenda/ e no form embutido escopado de
   sp/#sc-closer): a regra anterior pintava #leadModal.lmb-brand
   incondicionalmente. Ela tem a MESMA especificidade (1 ID + 1 classe) do
   reset local de cada LP (#leadModal.lmb-embedded { background:none },
   vive em sp*/styles.css) — empate de especificidade é resolvido por ORDEM
   NO DOCUMENTO, não por "quem é mais específico" (o comentário antigo
   estava errado nesse ponto). Como o <link> deste arquivo é sempre o
   ÚLTIMO no <head> de cada LP (depois do <style> inline com o styles.css
   da própria LP), esta regra sempre vencia e repintava o gradiente escuro
   por trás do cartão em repouso — sobrando como as 2 faixas verticais
   (diferença de largura entre #leadModal, que ocupa a seção inteira, e o
   cartão .lmb-form-container, mais estreito por dentro). Fix: excluir
   o estado embutido em repouso deste fallback via :not(.lmb-embedded)
   (fica transparente, herda o off-white da seção) e reaplicar o MESMO
   gradiente só quando o embutido volta a virar overlay real (.active,
   fluxo embedded_form_scoped de sp/) numa 2a regra com 3 classes de
   especificidade — deixa de depender de ordem de <link> pra sempre. */
#leadModal.lmb-brand:not(.lmb-embedded) {
    background: linear-gradient(135deg, rgba(22, 54, 72, 0.95) 0%, rgba(73, 70, 56, 0.90) 100%);
}

#leadModal.lmb-brand.lmb-embedded.active {
    background: linear-gradient(135deg, rgba(22, 54, 72, 0.95) 0%, rgba(73, 70, 56, 0.90) 100%);
}

/* ── Cartão do formulário ─────────────────────────────────────────────── */
#leadModal.lmb-brand .form-container,
#leadModal.lmb-brand .lmb-form-container {
    background: var(--concha, #F0ECE2);
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(22, 54, 72, 0.35);
}

/* ── Logo (step 1): asset compartilhado é uma silhueta clara — sobre fundo
   concha precisa ficar escura. brightness(0) solidifica em preto puro
   (mantém a transparência do PNG); suficientemente on-brand sem exigir um
   segundo asset por LP. */
#leadModal.lmb-brand .lmb-modal-logo {
    filter: brightness(0);
    opacity: 0.88;
}

/* ── Tipografia: títulos em serifada display, corpo em Montserrat ───────── */
#leadModal.lmb-brand .lmb-quiz-title,
#leadModal.lmb-brand h2.lmb-quiz-title,
#leadModal.lmb-brand .lmb-question-text,
#leadModal.lmb-brand #modalTitle {
    font-family: var(--fonte-display, "Agatho", "Playfair Display", Georgia, serif);
    color: var(--petroleo, #163648);
}

#leadModal.lmb-brand .lmb-quiz-sub,
#leadModal.lmb-brand .lmb-offer-otherplans {
    font-family: var(--fonte-ui, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    color: var(--oliva, #494638);
    opacity: 0.85;
}

/* ── Campos do formulário ─────────────────────────────────────────────── */
#leadModal.lmb-brand .form-group input[type="text"],
#leadModal.lmb-brand .form-group input[type="tel"],
#leadModal.lmb-brand .form-group input[type="email"] {
    background: var(--concha, #F0ECE2);
    border: 2px solid var(--areia, #D6C2AB);
    border-radius: 0;
    color: var(--oliva, #494638);
    font-family: var(--fonte-ui, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#leadModal.lmb-brand .form-group input::placeholder {
    color: rgba(73, 70, 56, 0.55);
}
#leadModal.lmb-brand .form-group input:focus {
    border-color: var(--petroleo, #163648);
    box-shadow: 0 0 0 3px rgba(22, 54, 72, 0.12);
}
#leadModal.lmb-brand .input-icon {
    color: rgba(73, 70, 56, 0.55);
}
#leadModal.lmb-brand .form-group.completed input {
    border-color: var(--petroleo, #163648);
    background: rgba(22, 54, 72, 0.05);
}
#leadModal.lmb-brand .form-group.completed::after,
#leadModal.lmb-brand .field-check {
    color: var(--petroleo, #163648);
}

/* ── Botão de envio (Continuar / Enviar) — CTA primario ──────────────────
   Mesma hierarquia do PONTO 2 da pagina: laranja de acento + texto escuro,
   contraste medido (4,86:1). Hover inverte pro petroleo solido + texto
   claro (10,75:1), sem inventar cor nova. */
#leadModal.lmb-brand .submit-button,
#leadModal.lmb-brand .lmb-enviar-btn {
    background: var(--laranja-cta, #E58957);
    color: var(--petroleo, #163648);
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(229, 137, 87, 0.35);
    font-family: var(--fonte-ui, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#leadModal.lmb-brand .submit-button:hover,
#leadModal.lmb-brand .lmb-enviar-btn:not([disabled]):hover {
    background: var(--petroleo, #163648);
    color: var(--concha, #F0ECE2);
    box-shadow: 0 12px 30px rgba(22, 54, 72, 0.35);
}

/* ── Botão fechar (X) — única exceção "pílula" (raio 999px) ─────────────── */
#leadModal.lmb-brand .close-fullscreen {
    background: var(--petroleo, #163648) !important;
    border-color: var(--petroleo, #163648) !important;
    border-radius: 999px;
}
#leadModal.lmb-brand .close-fullscreen:hover {
    background: var(--oliva, #494638) !important;
    border-color: var(--oliva, #494638) !important;
}

/* ── Card de oferta (preço) — bloco petroleo solido (uso permitido pelo
   brandbook p/ blocos escuros pontuais) com texto em concha. Substitui o
   gradiente cinza-azulado (#0e1b28/#1e3546/#1a6070) antigo e a variante
   translucida do desktop (rgba(14,27,40,.78)) — a regra abaixo tem
   especificidade maior que as duas (id + 2 classes vs 1 classe simples) e
   vale em qualquer breakpoint. */
#leadModal.lmb-brand .lmb-offer-card {
    background: var(--petroleo, #163648);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--concha, #F0ECE2);
}
#leadModal.lmb-brand .lmb-offer-label,
#leadModal.lmb-brand .lmb-offer-period,
#leadModal.lmb-brand .lmb-offer-parcelas,
#leadModal.lmb-brand .lmb-offer-total,
#leadModal.lmb-brand .lmb-offer-entrada-val {
    color: var(--concha, #F0ECE2);
    font-family: var(--fonte-ui, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#leadModal.lmb-brand .lmb-offer-total strong {
    color: var(--concha, #F0ECE2);
}
#leadModal.lmb-brand .lmb-offer-price {
    font-family: var(--fonte-display, "Agatho", "Playfair Display", Georgia, serif);
    color: var(--concha, #F0ECE2);
}
#leadModal.lmb-brand .lmb-offer-urgency {
    background: rgba(240, 236, 226, 0.12);
    border: 1px solid rgba(240, 236, 226, 0.3);
    color: var(--laranja, #E1753A); /* texto grande/negrito sobre petroleo: 4,4:1 medido no rebrand original */
}
#leadModal.lmb-brand .lmb-offer-urgency i {
    color: var(--laranja, #E1753A);
}

/* ── Quiz (step 2): opções e barra de progresso ─────────────────────────── */
#leadModal.lmb-brand .lmb-option {
    background: var(--concha, #F0ECE2);
    border: 1.5px solid var(--areia, #D6C2AB);
    border-radius: 0;
    color: var(--oliva, #494638);
    font-family: var(--fonte-ui, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#leadModal.lmb-brand .lmb-option:hover {
    border-color: var(--petroleo, #163648);
    background: rgba(22, 54, 72, 0.05);
    box-shadow: none;
}
#leadModal.lmb-brand .lmb-option--selected {
    border-color: var(--petroleo, #163648);
    background: rgba(22, 54, 72, 0.08);
    box-shadow: none;
    color: var(--petroleo, #163648);
}
#leadModal.lmb-brand .lmb-option--selected::after {
    color: var(--petroleo, #163648);
}
#leadModal.lmb-brand .lmb-progress-track {
    background: rgba(214, 194, 171, 0.5);
    border-radius: 999px;
}
#leadModal.lmb-brand .lmb-progress-fill {
    background: var(--laranja-cta, #E58957);
    border-radius: 999px;
}

/* ── Card "exclusividade" (modal legado órfão, mantido por segurança) ───── */
#leadModal.lmb-brand .exclusivity-card {
    background: var(--areia, #D6C2AB);
    color: var(--oliva, #494638);
    border-radius: 0;
}
#leadModal.lmb-brand .exclusivity-icon {
    color: var(--petroleo, #163648);
}

/* ── Step 3 (agenda, piloto): título/subtítulo do card escuro ───────────── */
#leadModal.lmb-brand #lmbStep3 .lmb-offer-card .lmb-quiz-title {
    font-family: var(--fonte-display, "Agatho", "Playfair Display", Georgia, serif);
    color: var(--concha, #F0ECE2);
}
#leadModal.lmb-brand #lmbStep3 .lmb-offer-card .lmb-quiz-sub {
    color: rgba(240, 236, 226, 0.8);
}
#leadModal.lmb-brand #lmbStep3 .lmb-offer-urgency i,
#leadModal.lmb-brand #lmbStep3 .lmb-offer-urgency span {
    color: var(--concha, #F0ECE2);
}

/* =============================================================================
   /LEAD MODAL — SKIN "mini brandbook oficial"
   ============================================================================= */
