/* =====================================================
   Agendaki — landing

   Carrega depois do app.css e só na raiz do domínio.

   A página é lida quase toda no celular, rolando com o polegar, por alguém que
   ainda não decidiu nada. Por isso: uma coluna, blocos largos, texto grande, e
   a ação principal repetida em três alturas — quem se convence no primeiro
   terço não deve ter que rolar de volta ao topo para agir.
   ===================================================== */

.pagina-landing { background: var(--branco); }

/* Uma faixa de largura para tudo, para os blocos alinharem entre si mesmo
   tendo fundos diferentes. */
.lp-largura {
    max-width: 900px;
    margin: 0 auto;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

/* ===== Topo ===== */

.lp-topo {
    border-bottom: 1px solid var(--borda);
    padding: .8rem 0;
}
.lp-topo .lp-largura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lp-marca { display: block; width: 150px; flex-shrink: 0; }
.lp-marca img { width: 100%; height: auto; display: block; }
.lp-marca:hover { text-decoration: none; }

.lp-entrar {
    font-size: .9rem;
    font-weight: 700;
    color: var(--marca-escura);
    padding: .5rem .9rem;
    border-radius: var(--raio-sm);
    white-space: nowrap;
}
.lp-entrar:hover { text-decoration: none; background: var(--marca-clara); }

/* ===== Chamada ===== */

.lp-capa {
    background: linear-gradient(180deg, var(--marca-clara), var(--branco));
    padding: 3rem 0 2.75rem;
    text-align: center;
}

.lp-capa h1 {
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -.025em;
    max-width: 16ch;
    margin: 0 auto;
}

.lp-sub {
    font-size: 1.08rem;
    color: var(--n700);
    max-width: 46ch;
    margin: 1rem auto 0;
}

.lp-acoes {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}
.lp-acoes .btn { min-height: 52px; padding: .8rem 1.5rem; font-size: 1rem; }

.lp-selo {
    font-size: .85rem;
    color: var(--texto-suave);
    margin-top: .9rem;
}

/* ===== Seções ===== */

.lp-secao { padding: 2.75rem 1.1rem; }

.lp-secao h2 {
    font-size: 1.5rem;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
    text-align: center;
}

/* ===== Passos ===== */

.lp-passos { list-style: none; display: grid; gap: 1.1rem; }

.lp-passos li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.lp-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-passos strong { display: block; font-size: 1.02rem; }
.lp-passos p      { color: var(--texto-suave); font-size: .93rem; margin-top: .1rem; }

/* ===== Cartões ===== */

.lp-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .9rem;
}

.lp-cartao {
    background: var(--branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
    padding: 1.2rem;
}
.lp-cartao h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.lp-cartao p  { font-size: .93rem; color: var(--texto-suave); }

/* ===== Objeção ===== */

/* A dúvida que mais trava a decisão ganha bloco próprio e fundo diferente —
   ela precisa ser encontrada por quem está rolando à procura dela. */
.lp-objecao {
    background: var(--marca-clara);
    border-radius: var(--raio-lg);
    padding: 1.75rem 1.4rem;
}
.lp-objecao h2 { text-align: left; font-size: 1.3rem; margin-bottom: .8rem; }
.lp-objecao p  { font-size: .98rem; color: var(--n700); margin-bottom: .8rem; }
.lp-objecao p:last-child { margin-bottom: 0; }

/* ===== Preço ===== */

.lp-preco {
    text-align: center;
    background: var(--branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-media);
    padding: 2rem 1.4rem;
}
.lp-preco h2 { margin-bottom: .7rem; }
.lp-preco p  {
    font-size: .98rem;
    color: var(--texto-suave);
    max-width: 46ch;
    margin: 0 auto 1.4rem;
}
.lp-preco .btn { min-height: 52px; padding: .8rem 1.6rem; font-size: 1rem; }

/* ===== Quem veio marcar ===== */

/* Bloco discreto: quem chega aqui por engano precisa de saída, mas a página
   não é para ele — dar-lhe destaque roubaria a atenção de quem decide. */
.lp-cliente {
    border-top: 1px solid var(--borda);
    padding-top: 2rem;
    text-align: center;
}
.lp-cliente h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.lp-cliente p  {
    font-size: .93rem;
    color: var(--texto-suave);
    max-width: 44ch;
    margin: 0 auto 1.1rem;
}

.lp-codigo {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 420px;
    margin: 0 auto;
}
.lp-codigo input {
    flex: 1;
    min-width: 170px;
    border: 1px solid var(--n300);
    border-radius: var(--raio-sm);
    background: var(--branco);
    color: var(--texto);
}
.lp-codigo input:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(0, 87, 184, .14);
}

/* ===== Rodapé ===== */

.lp-rodape {
    border-top: 1px solid var(--borda);
    padding: 1.75rem 0 2.5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--texto-suave);
}
.lp-rodape p { margin-bottom: .25rem; }
.lp-rodape a { font-weight: 600; }

/* ===== Telas estreitas ===== */

@media (max-width: 480px) {
    .lp-capa      { padding: 2.25rem 0 2rem; }
    .lp-capa h1   { font-size: 1.7rem; max-width: 18ch; }
    .lp-sub       { font-size: 1rem; }
    .lp-secao     { padding: 2.25rem 1.1rem; }
    .lp-secao h2  { font-size: 1.3rem; }
    /* Empilhados e de largura cheia: dois botões meia-largura no celular
       ficam pequenos demais para o polegar. */
    .lp-acoes     { flex-direction: column; }
    .lp-acoes .btn { width: 100%; }
    .lp-marca     { width: 128px; }
}

/* =========================================================================
   Verde de ação

   O logo tem azul, verde e vermelho. A página inteira usava só o azul — que
   é a cor da MARCA, e por isso está no cabeçalho, nos números dos passos e
   nos títulos. Quando tudo é azul, nada se destaca: o botão que decide a
   conversão fica com o mesmo peso de um link de menu.

   O verde vira a cor de UMA coisa só: seguir em frente. Botão de criar conta
   e marca de item incluído. Não é decoração espalhada — é o que faz o olho
   achar o próximo passo sem procurar.
   ========================================================================= */

.btn-acao {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
    font-weight: 700;
}

.btn-acao:hover {
    background: #0b7d34;
    border-color: #0b7d34;
    color: #fff;
    text-decoration: none;
}

/* A sombra colorida dá relevo sem aumentar o botão — num fundo claro ela lê
   como "este é o botão", que é o trabalho dele. */
.btn-acao {
    box-shadow: 0 6px 16px rgba(13, 150, 62, .28);
}

.lp-acoes-centro { justify-content: center; margin-top: 1.5rem; }

/* =========================================================================
   Planos
   ========================================================================= */

.lp-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    max-width: 680px;
    margin: 1.5rem auto 0;
}

.lp-plano {
    position: relative;
    background: var(--branco);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: 1.4rem 1.2rem 1.2rem;
    text-align: left;
}

/* O plano pago ganha a borda verde e um degrau de sombra. Sem isso os dois
   cartões têm o mesmo peso, e a página não sugere caminho nenhum. */
.lp-plano-destaque {
    border-color: var(--ok);
    box-shadow: 0 8px 24px rgba(13, 150, 62, .12);
}

.lp-plano-fita {
    position: absolute;
    top: -.7rem;
    left: 1.2rem;
    background: var(--ok);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: 999px;
}

.lp-plano h3 { font-size: 1.05rem; margin-bottom: .3rem; }

.lp-plano-preco { margin-bottom: .2rem; }
.lp-plano-preco strong { font-size: 2rem; letter-spacing: -.02em; }
.lp-plano-preco span   { font-size: .9rem; color: var(--n700); }

.lp-plano-anual {
    font-size: .82rem;
    color: var(--ok);
    font-weight: 600;
    margin-bottom: .8rem;
}

.lp-plano-itens { list-style: none; margin-top: .9rem; }

/* O visto verde antes de cada item. Marca o que está incluído sem precisar
   de imagem, e a cor sozinha não carrega sentido nenhum: o texto do lado diz
   o que é, para quem não distingue o verde. */
.lp-plano-itens li {
    position: relative;
    padding: .3rem 0 .3rem 1.5rem;
    font-size: .9rem;
    line-height: 1.4;
}

.lp-plano-itens li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62rem;
    width: .55rem;
    height: .3rem;
    border-left: 2px solid var(--ok);
    border-bottom: 2px solid var(--ok);
    transform: rotate(-45deg);
}

.lp-plano-nota {
    max-width: 44ch;
    margin: 1.2rem auto 0;
    font-size: .88rem;
    color: var(--n700);
    text-align: center;
}

/* ----- Contato na landing -----

   Quem está decidindo tem perguntas que a página não respondeu, e uma página
   que só oferece "criar conta" perde essa pessoa em silêncio. */

.lp-contato {
    background: var(--marca-clara);
    border-radius: var(--raio-lg);
    padding: 2rem 1.5rem;
    text-align: center;
}

.lp-contato h2 { margin-bottom: .4rem; }
.lp-contato p  { color: var(--n700); max-width: 44ch; margin: 0 auto; }

.lp-contato-links {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}