/* Página inicial pública. Usa as variáveis de marca definidas em agape.css. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lp-topo a:focus-visible, .lp-seguranca a:focus-visible, .lp-rodape a:focus-visible {
    outline: 2px solid var(--agape-dourado);
    outline-offset: 3px;
}

/* Topo: cabeçalho, chamada e a tela do sistema, que avança sobre a seção seguinte */
.lp-topo { background: linear-gradient(175deg, #0d3b63 0%, var(--agape-marinho) 55%); }

.lp-cabecalho { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.lp-nav { display: flex; align-items: center; gap: 1.75rem; }
.lp-nav a:not(.btn) { color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 500; }
.lp-nav a:not(.btn):hover { color: #fff; }

.lp-chamada { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.lp-chamada h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5.6vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    max-width: 19ch;
    margin-bottom: 1.5rem;
}
.lp-chamada p { color: rgba(255, 255, 255, .82); font-size: 1.2rem; line-height: 1.55; max-width: 52ch; margin-bottom: 2rem; }
.lp-chamada .lp-nota { color: var(--agape-azul-claro); font-size: .95rem; margin: 1.25rem 0 0; }

.lp-tela {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid #dce3eb;
    box-shadow: 0 24px 48px -28px rgba(9, 45, 76, .45);
}
.lp-tela-principal {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 40px 80px -30px rgba(2, 14, 26, .7);
    margin-bottom: clamp(-11rem, -14vw, -3rem);
    position: relative;
}
.lp-tela-celular { width: min(280px, 70%); margin: 0 auto; border-radius: 28px; border: 8px solid var(--agape-marinho); }

/* O que já funciona */
.lp-funciona { padding-top: clamp(6rem, 18vw, 16rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.lp-funciona h2, .lp-modulos h2, .lp-comecar h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    letter-spacing: -.025em;
    line-height: 1.12;
}
.lp-funciona h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.lp-recurso { row-gap: 1.75rem; }
.lp-recurso + .lp-recurso { margin-top: clamp(3.5rem, 8vw, 7rem); }
.lp-recurso > .col-lg-5 { padding-left: clamp(.75rem, 3vw, 3rem); padding-right: clamp(.75rem, 3vw, 3rem); }
.lp-recurso h3 { font-size: 1.5rem; letter-spacing: -.015em; margin-bottom: .75rem; }
.lp-recurso p, .lp-recurso li { color: #46586b; font-size: 1.0625rem; line-height: 1.6; }
.lp-recurso ul { padding-left: 1.1rem; margin: 0; }
.lp-recurso li::marker { color: var(--agape-dourado); }

/* Módulos: lista com a situação real de cada um */
.lp-modulos { background: #fff; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.lp-intro { max-width: 60ch; margin-bottom: 2.5rem; }
.lp-intro p { color: #46586b; font-size: 1.0625rem; line-height: 1.6; margin: .9rem 0 0; }

.lp-lista-modulos { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dce3eb; }
.lp-lista-modulos li {
    display: grid;
    grid-template-columns: 13rem 1fr auto;
    align-items: baseline;
    gap: .35rem 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #dce3eb;
}
.lp-lista-modulos strong { color: var(--agape-marinho); font-size: 1.125rem; font-weight: 600; }
.lp-modulo-texto { color: #46586b; }
.lp-status { color: #6b7c8d; font-size: .9rem; white-space: nowrap; }
.lp-status-pronto {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #6f5216; font-weight: 600;
    background: rgba(216, 181, 114, .28);
    border-radius: 999px;
    padding: .2rem .7rem;
}
@media (max-width: 767.98px) {
    .lp-lista-modulos li { grid-template-columns: 1fr auto; }
    .lp-modulo-texto { grid-column: 1 / -1; grid-row: 2; }
}

/* Segurança */
.lp-seguranca { background: var(--agape-marinho); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.lp-seguranca h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    letter-spacing: -.025em;
    max-width: 20ch;
    margin-bottom: 2.75rem;
}
.lp-seguranca h3 { color: var(--agape-dourado); font-size: 1.125rem; font-weight: 600; border-top: 2px solid var(--agape-dourado); padding-top: 1rem; margin-bottom: .6rem; }
.lp-seguranca p { color: rgba(255, 255, 255, .8); line-height: 1.6; margin: 0; }

/* Como começar */
.lp-comecar { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.lp-passos {
    list-style: none;
    counter-reset: passo;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem 3rem;
    padding: 0;
    margin: 2.5rem 0 3rem;
}
.lp-passos li { counter-increment: passo; }
.lp-passos li::before {
    content: counter(passo);
    display: block;
    color: var(--agape-dourado);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: .75rem;
}
.lp-passos h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.lp-passos p { color: #46586b; line-height: 1.6; margin: 0; }
.lp-link { color: var(--agape-marinho); font-weight: 600; }

.lp-rodape { background: var(--agape-marinho); color: rgba(255, 255, 255, .7); padding: 1.75rem 0; }