/* ============================================================
   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 html.tema-escuro — é 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;
}

/* O toggle de tema usa .btn-tema-publico, já estilizado no
   publico.css — o margin-left:auto de lá alinha à direita. */

/* --- 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; }
}