/* =====================================================================
   Paleta da landing — declarada AQUI, de propósito
   =====================================================================
   No saaslavajatos, de onde este arquivo veio, estas variáveis moravam
   no publico.css e o tema escuro era `html.tema-escuro`. Neste projeto o
   tema é o do Bootstrap (`data-bs-theme`, gravado no cookie `spe_tema`
   por views/parciais/tema_inicial.php), e a landing NÃO carrega o
   bootstrap.min.css: seria baixar a folha inteira para usar uma fração
   dela numa página que já tem estilo próprio.

   Por isso a paleta é autossuficiente. As `--cor-primaria*` são a
   exceção: vêm do <style> do layout, porque são a cor da MARCA, que o
   super-admin escolhe em /configuracoes.

   `--cor-fundo` etc. usam os mesmos valores do projeto de origem, para
   as landings dos SaaS não divergirem visualmente sem motivo.
   ===================================================================== */

:root {
    --cor-fundo:       #f6f7fb;
    --cor-card:        #ffffff;
    --cor-borda:       #e5e7eb;
    --cor-texto:       #1f2937;
    --cor-texto-suave: #6b7280;
    --sombra-card:     0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] {
    --cor-fundo:       #0f1117;
    --cor-card:        #1a1d27;
    --cor-borda:       #2e3145;
    --cor-texto:       #e2e8f0;
    --cor-texto-suave: #94a3b8;
    --sombra-card:     0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   saaslavajatos — landing pública do apex

   Mobile-first: as regras base valem para celular, e os
   @media (min-width: ...) acrescentam colunas conforme a tela
   cresce.

   As cores vêm das variáveis declaradas em publico.css, que já
   são redefinidas em [data-bs-theme="dark"] acima — é assim que o tema
   escuro sai de graça, sem um segundo conjunto de regras.

   ÚNICA exceção: o texto do botão primário é branco fixo. O
   fundo dele é a cor da marca em qualquer tema, então o texto
   não deve acompanhar a troca claro/escuro. Mesmo padrão do
   .btn-publico-primario no publico.css.
   ============================================================ */

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
}

/* --- Cabeçalho ---------------------------------------------- */

.cabecalho-landing {
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecalho-landing-conteudo {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 16px;
}

.logo-landing        { height: 32px; width: auto; }
.logo-landing-emoji  { font-size: 1.6rem; line-height: 1; }

.nome-landing {
    font-weight: 600;
    font-size: 1.05rem;
}

/* =====================================================================
   Botão de tema da landing
   =====================================================================
   No projeto de origem esta regra vinha do publico.css. Aqui a landing
   é autossuficiente, então o botão mora neste arquivo.

   A troca lua/sol usa EXATAMENTE o mesmo par de classes do app.css
   (.icone-ir-escuro / .icone-ir-claro) e o mesmo critério
   (data-bs-theme). Duas convenções para a mesma coisa é como nascem as
   divergências: alguém mexe numa e esquece a outra.
   ===================================================================== */

.btn-tema-landing {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.btn-tema-landing:hover {
    border-color: var(--cor-primaria);
}

[data-bs-theme="light"] .icone-ir-claro  { display: none; }
[data-bs-theme="dark"]  .icone-ir-escuro { display: none; }

/* --- Conteúdo ----------------------------------------------- */

.conteudo-landing {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Bloco 1: hero ------------------------------------------ */

.hero-landing {
    text-align: center;
    padding: 48px 0 40px;
}

.hero-titulo {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 14px;
}

.hero-subtitulo {
    color: var(--cor-texto-suave);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 28px;
}

.hero-selo {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* --- Botão -------------------------------------------------- */

.btn-landing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* min-height 48px: alvo de toque confortável no celular */
    min-height: 48px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-landing-primario {
    background: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--cor-primaria-rgb), 0.28);
}

.btn-landing-primario:hover  { background: var(--cor-primaria-hover); }
.btn-landing-primario:active { transform: translateY(1px); }

.btn-landing:focus-visible {
    outline: 3px solid rgba(var(--cor-primaria-rgb), 0.45);
    outline-offset: 2px;
}

/* --- Seções ------------------------------------------------- */

.secao-landing { padding: 32px 0 48px; }

.secao-titulo {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 28px;
}

/* --- Bloco 2: funcionalidades ------------------------------- */

.grade-funcionalidades {
    display: grid;
    grid-template-columns: 1fr;   /* celular: uma coluna */
    gap: 16px;
}

.cartao-funcionalidade {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 22px;
    box-shadow: var(--sombra-card);
}

.icone-funcionalidade {
    font-size: 1.6rem;
    color: var(--cor-primaria);
    display: block;
    margin-bottom: 10px;
}

.titulo-funcionalidade {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.descricao-funcionalidade {
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
}

/* --- Bloco 3: preço ----------------------------------------- */

.cartao-preco {
    background: var(--cor-card);
    border: 2px solid var(--cor-primaria);
    border-radius: 14px;
    padding: 32px 24px;
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--sombra-card);
}

.preco-plano {
    display: inline-block;
    background: rgba(var(--cor-primaria-rgb), 0.12);
    color: var(--cor-primaria);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.preco-valor {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 18px 0 6px;
}

.preco-periodo {
    font-size: 1rem;
    font-weight: 400;
    color: var(--cor-texto-suave);
}

.preco-itens {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    text-align: left;
}

.preco-itens li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--cor-borda);
}

.preco-itens li:last-child { border-bottom: none; }
.preco-itens .bi-check-lg  { color: var(--cor-primaria); flex-shrink: 0; }

/* --- Rodapé ------------------------------------------------- */

.rodape-landing {
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-card);
    margin-top: 24px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}


/* --- Telas maiores ------------------------------------------ */

@media (min-width: 600px) {
    .grade-funcionalidades { grid-template-columns: repeat(2, 1fr); }

    /* O rodapé tem um único elemento (nome · ano), então fica centrado
       em qualquer largura — sem space-between, que o jogaria à esquerda. */
    .rodape-landing {
        max-width: 1080px;
        margin: 24px auto 0;
    }
}

@media (min-width: 900px) {
    /* Respiro contido de propósito. Com 72px/56px o hero ocupava a
       primeira tela inteira num monitor de altura comum, e o visitante
       não via nenhuma pista de que havia funcionalidades e preço
       abaixo — muita gente sai sem rolar. Com 40px o topo do bloco
       seguinte já aparece e convida a continuar. */
    .hero-landing          { padding: 40px 0 40px; }
    .hero-titulo           { font-size: 2.4rem; }
    .grade-funcionalidades { grid-template-columns: repeat(3, 1fr); }
    .secao-titulo          { font-size: 1.6rem; }
}