/* Página pública de vendas.
 *
 * Só o que o tema Duralux não traz: ele foi desenhado para painel
 * administrativo, e não tem seção de largura total, hero nem lista com
 * marca de conferido. Tudo aqui usa as variáveis do próprio tema
 * (`--bs-primary`, `--bs-gray-*`), para a página não virar um segundo
 * sistema de cores que envelhece em separado.
 */

.nd-public {
    background: #fff;
    margin: 0;
}

.nd-public-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: .875rem 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bs-gray-200, #e9ecef);
}

.nd-section {
    padding: 4.5rem 0;
}

.nd-hero {
    padding: 4.5rem 0 4rem;
    background: linear-gradient(180deg, var(--bs-gray-100, #f8f9fa) 0%, #fff 100%);
}

.nd-hero-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-dark, #283c50);
    margin-bottom: 1rem;
}

.nd-hero-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--bs-secondary, #64748b);
    margin-bottom: 1.75rem;
}

.nd-hero-card {
    border: 1px solid var(--bs-gray-200, #e9ecef);
    box-shadow: 0 18px 40px rgba(40, 60, 80, .08);
}

/* Listas com marca. O `::before` evita uma imagem por item e mantém a
 * marca alinhada ao texto quando a linha quebra. */
.nd-tick li,
.nd-cross li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .6rem;
    line-height: 1.5;
}

.nd-tick li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--bs-success, #17c666);
}

.nd-cross li::before {
    content: "×";
    position: absolute;
    left: 0;
    top: -.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-secondary, #64748b);
}

.nd-plan-limits {
    padding: .75rem;
    border-radius: .5rem;
    background: var(--bs-gray-100, #f8f9fa);
}

/* O plano em destaque cresce um pouco — mas só onde há espaço. No celular
 * os cartões empilham, e um deles maior que os outros só desalinharia a
 * coluna. */
@media (min-width: 992px) {
    .nd-plan-highlight {
        transform: translateY(-.75rem);
        box-shadow: 0 18px 40px rgba(52, 84, 209, .16);
    }
}

.nd-public-footer {
    padding: 3rem 0 2rem;
    background: var(--bs-gray-100, #f8f9fa);
    border-top: 1px solid var(--bs-gray-200, #e9ecef);
}

.nd-public-footer a {
    color: var(--bs-secondary, #64748b);
    text-decoration: none;
    line-height: 2;
}

.nd-public-footer a:hover {
    color: var(--bs-primary, #3454d1);
}

/* --------------------------------------------------------------- ajuda */

.nd-help-card {
    border: 1px solid var(--bs-gray-200, #e9ecef);
    transition: box-shadow .14s linear, transform .14s linear;
}

.nd-help-card:hover {
    box-shadow: 0 12px 28px rgba(40, 60, 80, .1);
    transform: translateY(-2px);
}

.nd-help-article { padding: 3rem 0 4rem; }

/* O índice acompanha a rolagem: o manual é lido saltando entre processos,
 * e rolar de volta ao topo a cada salto quebra a leitura. */
.nd-help-nav {
    position: sticky;
    top: 5.5rem;
}

.nd-help-nav a { text-decoration: none; }
.nd-help-nav a:hover { color: var(--bs-primary, #3454d1); }

.nd-help-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.nd-help-step-number {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--bs-primary, #3454d1);
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-gray-200, #e9ecef);
}

.nd-help-step-body { flex: 1; min-width: 0; }
.nd-help-step-body p { line-height: 1.7; color: var(--bs-body-color, #4b5563); }

.nd-help-figure {
    margin: 1rem 0 0;
    border: 1px solid var(--bs-gray-200, #e9ecef);
    border-radius: .6rem;
    overflow: hidden;
    background: var(--bs-gray-100, #f8f9fa);
}

.nd-help-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.nd-help-figure figcaption {
    padding: .5rem .75rem;
    font-size: .7rem;
    color: var(--bs-secondary, #64748b);
    border-top: 1px solid var(--bs-gray-200, #e9ecef);
    background: #fff;
}

/* ------------------------------------------------------------- autor --
 *
 * A foto tem fundo branco recortado, então ela **não** leva moldura
 * escura nem fundo colorido: o recorte apareceria como um halo. O que dá
 * forma é o raio da borda e a sombra suave, e o limite de largura existe
 * porque numa tela grande a coluna de 4/12 ainda renderiza um retrato de
 * meio metro.
 */
.nd-autor-foto {
    max-width: 320px;
    width: 100%;
}

/* A frase de impacto: aspas tipográficas já vêm no texto, então aqui só a
 * entrelinha e a barra que a separa do currículo ao lado. Sem itálico —
 * em bloco de vinte pixels ele atrapalha a leitura em vez de destacar. */
.nd-autor-frase {
    line-height: 1.35;
    border-left: 3px solid var(--bs-primary, #3454d1);
    padding-left: 1rem;
}