/* ── Página pública de apresentação ───────────────────────────────────────────
   Carregada a seguir a app.css, que define os tokens de :root e o dark mode.
   Aqui só entra o que é próprio da landing — nada daqui afeta a área pessoal,
   porque a landing não usa o layout.php nem as suas classes.
   ─────────────────────────────────────────────────────────────────────────── */

.page-landing {
    /* A landing tem o seu próprio ritmo vertical; o resto da app usa .container. */
    background: var(--color-bg);
}

.lp-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.lp-wrap--narrow { max-width: 720px; }

/* ── Barra de topo ────────────────────────────────────────────────────────── */
.lp-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: .75rem var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
}
.lp-brand:hover { text-decoration: none; }
/* .mark (o quadrado com as iniciais) vem de app.css, mas está lá aninhado em
   .sidebar-brand — repetido aqui porque a landing não tem sidebar. */
.lp-brand .mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--color-primary), var(--color-primary-h));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 800;
    flex: none;
}

.lp-nav-links {
    display: none;
    gap: var(--space-5);
    margin-left: auto;
}
.lp-nav-links a {
    color: var(--color-muted);
    font-size: .92rem;
    font-weight: 500;
}
.lp-nav-links a:hover { color: var(--color-text); text-decoration: none; }

/* Sem os links de secção visíveis, o botão precisa de ser empurrado sozinho. */
.lp-nav > .btn { margin-left: auto; }

@media (min-width: 768px) {
    .lp-nav { padding: .75rem var(--space-5); }
    .lp-nav-links { display: flex; }
    .lp-nav > .btn { margin-left: 0; }
}

/* ── Botão grande (só usado aqui) ─────────────────────────────────────────── */
.btn-lg {
    padding: .7rem 1.5rem;
    font-size: .98rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lp-hero {
    padding: var(--space-6) 0 var(--space-6);
    text-align: center;
    /* Fundo discreto que funciona nos dois temas: os tokens já mudam sozinhos. */
    background:
        radial-gradient(60rem 22rem at 50% -8rem, var(--color-primary-bg), transparent 70%);
}
@media (min-width: 768px) {
    .lp-hero { padding: 4.5rem 0 3.5rem; }
}

.lp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.lp-hero h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .lp-hero h1 { font-size: 2.9rem; } }

.lp-lead {
    max-width: 620px;
    margin: 0 auto var(--space-5);
    font-size: 1.02rem;
    color: var(--color-muted);
    line-height: 1.65;
}

.lp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* Caixa do endpoint, logo abaixo do hero. */
.lp-endpoint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 620px;
    margin: var(--space-6) auto 0;
    padding: .6rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lp-endpoint-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--color-muted);
}
.lp-endpoint code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .86rem;
    word-break: break-all;
    color: var(--color-text);
}
.lp-copy {
    margin-left: auto;
    padding: .3rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.lp-copy:hover { color: var(--color-text); border-color: var(--color-border-2); }
.lp-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Secções ──────────────────────────────────────────────────────────────── */
.lp-section { padding: var(--space-6) 0; }
@media (min-width: 768px) { .lp-section { padding: 3.5rem 0; } }

.lp-section--alt {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.lp-section h2 {
    font-size: 1.45rem;
    letter-spacing: -.01em;
    margin-bottom: var(--space-3);
}
.lp-section-lead {
    color: var(--color-muted);
    max-width: 640px;
    margin-bottom: var(--space-6);
}

/* Texto corrido dentro de uma secção de largura normal: limita a medida sem
   recuar a margem esquerda, para que os títulos de todas as secções alinhem. */
.lp-prose { max-width: 680px; }

/* ── Grelha de cartões ("O que é") ────────────────────────────────────────── */
/* minmax(0, 1fr) e não 1fr: a largura mínima automática de um item de grelha
   é o seu min-content, e um bloco de código com uma linha longa arrasta a
   coluna toda para lá do ecrã — dava scroll horizontal na página em mobile. */
.lp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
@media (min-width: 620px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-card {
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.lp-section--alt .lp-card { background: var(--color-bg); }
.lp-card h3 {
    font-size: .98rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.lp-card p {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.lp-card code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .82rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    padding: .05rem .3rem;
    color: var(--color-text);
}

/* ── Passos ("Como funciona") ─────────────────────────────────────────────── */
.lp-steps {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}
@media (min-width: 860px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-steps li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.lp-step-n {
    width: 2rem; height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
}
.lp-steps h3 {
    font-size: .98rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.lp-steps p {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ── Cartões de cliente ───────────────────────────────────────────────────── */
.lp-clients {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
@media (min-width: 800px) { .lp-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-client {
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.lp-client--wide { grid-column: 1 / -1; }

.lp-client h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
}
.lp-client-path {
    font-size: .82rem;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}
.lp-client-path code,
.lp-client .hint code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .8rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    padding: .05rem .3rem;
}

.lp-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .15rem;
    font-size: .86rem;
}
.lp-fields dt {
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--space-2);
}
.lp-fields dt:first-child { margin-top: 0; }
.lp-fields dd {
    color: var(--color-muted);
    word-break: break-word;
}
.lp-fields dd code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .8rem;
    color: var(--color-text);
    word-break: break-all;
}

/* O .code-block do app.css é sempre escuro (#1e293b). Contra a superfície do
   tema escuro quase desaparece; uma borda destaca-o sem lhe mudar a cor, que é
   partilhada com os guias da área pessoal. */
.page-landing .code-block { border: 1px solid var(--color-border); }

.lp-client .code-block { margin-bottom: var(--space-3); }
.lp-client .hint { display: block; margin-top: var(--space-3); }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.lp-cta {
    padding: var(--space-6) 0;
    text-align: center;
}
@media (min-width: 768px) { .lp-cta { padding: 4rem 0; } }
.lp-cta h2 { font-size: 1.45rem; margin-bottom: var(--space-2); }
.lp-cta p { color: var(--color-muted); margin-bottom: var(--space-5); }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
.lp-foot {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
    font-size: .84rem;
    color: var(--color-muted);
}
.lp-foot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}
.lp-foot-links {
    display: flex;
    gap: var(--space-4);
}