/* =====================================================================
   lp.css — landing page pública
   Reusa os tokens de tokens.css. Nenhum valor de cor, espaço ou tipo
   escrito à mão. Mobile-first, 390 → 768 → 1280.
   ===================================================================== */

/* Os componentes compartilhados (.botao, .etiqueta) vêm de componentes.css,
   carregado por <link> na própria página. Nada de @import aqui: ele obriga
   o navegador a buscar um arquivo depois do outro, em série, e isso atrasa
   a primeira pintura logo na página que precisa abrir rápido. */

.lp {
    background-color: var(--fundo-superficie);
}

.lp-largura {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: var(--esp-5);
}

.lp-largura--estreita {
    max-width: 42rem;
}

/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */

.lp-topo {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-cabecalho);
    background-color: color-mix(in srgb, var(--fundo-superficie) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid var(--borda-sutil);
}

.lp-topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding: var(--esp-3) var(--esp-5);
}

.lp-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
}

.lp-marca:hover {
    color: var(--texto-forte);
    text-decoration: none;
}

.lp-marca__icone {
    width: 22px;
    height: 22px;
    stroke: var(--acento);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-topo__acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.lp-link-topo {
    color: var(--texto-suave);
    font-size: var(--texto-md);
    font-weight: var(--peso-medio);
}

.lp-link-topo:hover {
    color: var(--texto-forte);
    text-decoration: none;
}

/* Botão grande, só da LP. */
.botao--grande {
    min-height: 52px;
    padding-inline: var(--esp-8);
    font-size: var(--texto-lg);
}

/* ---------------------------------------------------------------------
   Blocos de seção
   --------------------------------------------------------------------- */

.lp-secao {
    padding-block: var(--esp-16);
}

.lp-secao--compacta {
    padding-block: var(--esp-10);
}

.lp-secao--alt {
    background-color: var(--fundo-app);
}

/* Faixa escura: usa a cor de texto forte como fundo pra inverter o bloco
   sem inventar token novo. */
.lp-secao--escura {
    background-color: var(--fundo-inverso);
    color: color-mix(in srgb, var(--texto-inverso) 78%, transparent);
}

.lp-secao--escura .lp-secao__titulo {
    color: var(--texto-inverso);
}

.lp-sobrancelha {
    margin-block-end: var(--esp-3);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--acento);
}

.lp-sobrancelha--claro {
    color: var(--azul-400);
}

.lp-secao__titulo {
    max-width: 20ch;
    font-size: var(--texto-2xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    line-height: var(--altura-apertada);
    color: var(--texto-forte);
    text-wrap: balance;
}

.lp-secao__texto {
    max-width: 46ch;
    margin-block-start: var(--esp-4);
    font-size: var(--texto-lg);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.lp-hero {
    padding-block: var(--esp-12) var(--esp-16);
    text-align: center;
}

.lp-hero__titulo {
    max-width: 16ch;
    margin-inline: auto;
    font-size: var(--texto-3xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    line-height: 1.08;
    text-wrap: balance;
}

.lp-realce {
    color: var(--acento);
}

.lp-hero__texto {
    max-width: 44ch;
    margin: var(--esp-5) auto 0;
    font-size: var(--texto-lg);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

.lp-hero__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-block-start: var(--esp-8);
}

.lp-hero__nota {
    margin-block-start: var(--esp-4);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
}

/* ---------------------------------------------------------------------
   Demonstração do card
   --------------------------------------------------------------------- */

.lp-demo {
    margin: var(--esp-12) auto 0;
    max-width: 30rem;
}

.lp-demo__legenda {
    margin-block-end: var(--esp-3);
    font-size: var(--texto-xs);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.lp-demo__card {
    padding: var(--esp-6) var(--esp-5);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-lg);
}

.lp-demo__etiquetas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esp-2);
    margin-block-end: var(--esp-6);
}

.lp-demo__frase {
    font-family: var(--fonte-display);
    font-size: var(--texto-xl);
    font-weight: var(--peso-medio);
    line-height: var(--altura-solta);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
}

.lp-demo__frase mark {
    background-color: var(--acento-suave);
    color: var(--acento);
    padding-inline: var(--esp-2);
    border-radius: var(--raio-sm);
    font-weight: var(--peso-forte);
}

.lp-demo__pergunta {
    margin-block-start: var(--esp-4);
    font-size: var(--texto-md);
    color: var(--texto-fraco);
}

.lp-demo__botoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-2);
    margin-block-start: var(--esp-6);
    padding-block-start: var(--esp-5);
    border-block-start: 1px solid var(--borda-sutil);
}

.lp-demo__botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-3) var(--esp-2);
    border: 1px solid var(--borda-media);
    border-radius: var(--raio-lg);
    font-size: var(--texto-md);
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
}

.lp-demo__botao small {
    font-size: var(--texto-xs);
    font-weight: var(--peso-normal);
    color: var(--texto-fraco);
}

.lp-demo__botao--errei {
    border-color: color-mix(in srgb, var(--perigo) 45%, transparent);
    color: var(--perigo);
}

.lp-demo__botao--dificil {
    border-color: color-mix(in srgb, var(--atencao) 45%, transparent);
    color: var(--atencao);
}

.lp-demo__botao--facil {
    border-color: color-mix(in srgb, var(--sucesso) 45%, transparent);
    color: var(--sucesso);
}

/* ---------------------------------------------------------------------
   Problemas
   --------------------------------------------------------------------- */

.lp-problemas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-8);
    margin-block-start: var(--esp-10);
}

.lp-problema__marca {
    display: block;
    margin-block-end: var(--esp-3);
    font-family: var(--fonte-display);
    font-size: var(--texto-xl);
    font-weight: var(--peso-forte);
    color: var(--azul-400);
    letter-spacing: var(--tracking-apertado);
}

.lp-problema__titulo {
    margin-block-end: var(--esp-2);
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
    color: var(--texto-inverso);
}

.lp-problema__texto {
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: inherit;
}

.lp-problema__texto strong {
    color: var(--texto-inverso);
}

/* ---------------------------------------------------------------------
   Passos do método
   --------------------------------------------------------------------- */

.lp-passos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-6);
    margin-block-start: var(--esp-10);
    counter-reset: passo;
}

.lp-passo {
    display: flex;
    gap: var(--esp-4);
    padding: var(--esp-5);
    background-color: var(--fundo-app);
    border-radius: var(--raio-lg);
}

.lp-passo__numero {
    flex: 0 0 auto;
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    font-weight: var(--peso-forte);
    color: var(--acento);
    letter-spacing: var(--tracking-normal);
    font-variant-numeric: tabular-nums;
}

.lp-passo__titulo {
    margin-block-end: var(--esp-2);
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
}

.lp-passo__texto {
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

.lp-passo__texto em {
    font-style: normal;
    font-family: var(--fonte-mono);
    font-size: 0.9em;
    color: var(--texto-forte);
}

/* ---------------------------------------------------------------------
   Entregas
   --------------------------------------------------------------------- */

.lp-entregas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-5);
    margin-block-start: var(--esp-10);
}

.lp-entrega {
    padding: var(--esp-5);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
}

.lp-entrega__icone {
    width: 26px;
    height: 26px;
    margin-block-end: var(--esp-4);
    stroke: var(--acento);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-entrega__titulo {
    margin-block-end: var(--esp-2);
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
}

.lp-entrega__texto {
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   Números
   --------------------------------------------------------------------- */

.lp-numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-6);
    text-align: center;
}

.lp-numero__valor {
    display: block;
    font-family: var(--fonte-display);
    font-size: var(--texto-3xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lp-numero__rotulo {
    display: block;
    margin-block-start: var(--esp-2);
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

.lp-numeros__nota {
    margin-block-start: var(--esp-6);
    font-size: var(--texto-xs);
    color: var(--texto-fraco);
    text-align: center;
}

/* ---------------------------------------------------------------------
   Perfis e depoimentos
   --------------------------------------------------------------------- */

.lp-perfis {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-5);
    margin-block-start: var(--esp-10);
}

.lp-perfil {
    padding-inline-start: var(--esp-5);
    border-inline-start: 2px solid var(--acento);
}

.lp-perfil__titulo {
    margin-block-end: var(--esp-2);
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
}

.lp-perfil__texto {
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

.lp-depoimentos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-5);
    margin-block-start: var(--esp-10);
}

.lp-depoimento {
    padding: var(--esp-6);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
}

.lp-depoimento__texto {
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    line-height: var(--altura-solta);
    color: var(--texto-forte);
    text-wrap: pretty;
}

.lp-depoimento__autor {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    margin-block-start: var(--esp-4);
    padding-block-start: var(--esp-4);
    border-block-start: 1px solid var(--borda-sutil);
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   Chamada final e rodapé
   --------------------------------------------------------------------- */

.lp-cta {
    background-color: var(--fundo-app);
    text-align: center;
}

.lp-cta__titulo {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    line-height: var(--altura-apertada);
    text-wrap: balance;
}

.lp-cta__texto {
    max-width: 44ch;
    margin: var(--esp-4) auto 0;
    font-size: var(--texto-lg);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
}

.lp-cta__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-block-start: var(--esp-8);
}

.lp-rodape {
    padding-block: var(--esp-8);
    border-block-start: 1px solid var(--borda-sutil);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
}

.lp-rodape__interno {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    align-items: flex-start;
}

.lp-rodape__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-5);
}

/* =====================================================================
   768px — tablet
   ===================================================================== */

@media (min-width: 768px) {
    .lp-largura,
    .lp-topo__interno {
        padding-inline: var(--esp-8);
    }

    .lp-hero {
        padding-block: var(--esp-16) var(--esp-20);
    }

    .lp-hero__titulo {
        font-size: var(--texto-4xl);
    }

    .lp-hero__acoes,
    .lp-cta__acoes {
        flex-direction: row;
        justify-content: center;
    }

    .lp-secao__titulo,
    .lp-cta__titulo {
        font-size: var(--texto-3xl);
    }

    .lp-problemas,
    .lp-perfis,
    .lp-depoimentos {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-entregas {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-passos {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-numeros {
        grid-template-columns: repeat(4, 1fr);
    }

    .lp-rodape__interno {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* =====================================================================
   1280px — desktop
   ===================================================================== */

@media (min-width: 1280px) {
    .lp-secao {
        padding-block: var(--esp-20);
    }

    .lp-entregas {
        grid-template-columns: repeat(4, 1fr);
    }

    .lp-passos {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-hero__titulo {
        font-size: 3.75rem;
    }
}