/* ============================================================
   CONTEÚDO PÚBLICO DE SEO (home e página verificar-vps)
   Complementa estilo.css; não altera as telas de login e painel.
   ============================================================ */

/* ---------- bloco de apoio na home (abaixo do login) ---------- */
.seo-sobre {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.seo-sobre h2 {
    font-size: 1.35rem;
    color: var(--color-text);
}

.seo-sobre p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.seo-sobre a {
    font-weight: 600;
}

/* ---------- página verificar-vps ---------- */
.seo-main {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.seo-marca {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    font-weight: 600;
}

.seo-marca:hover {
    color: var(--color-text);
}

.seo-entrar {
    width: auto;
}

.seo-hero {
    padding: clamp(24px, 5vw, 48px) 0 0;
}

.seo-kicker {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.seo-lead {
    color: var(--color-text-muted);
    font-size: 1.08rem;
    max-width: 68ch;
}

.seo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.seo-acoes .btn {
    width: auto;
}

.seo-bloco {
    padding: clamp(22px, 4vw, 34px);
}

.seo-bloco h2 {
    color: var(--color-text);
}

.seo-bloco p,
.seo-bloco li {
    color: var(--color-text-muted);
}

.seo-bloco h3 {
    margin-top: var(--space-lg);
    font-size: 1.05rem;
    color: var(--color-text);
}

.seo-lista,
.seo-passos {
    padding-left: 1.3rem;
    margin: var(--space-md) 0;
}

.seo-lista li,
.seo-passos li {
    margin-bottom: var(--space-sm);
}

.seo-lista strong,
.seo-passos strong {
    color: var(--color-text);
}

.seo-passos li::marker {
    color: var(--color-primary);
    font-weight: 600;
}

.seo-final {
    text-align: center;
    padding: var(--space-lg) 0 var(--space-md);
}

.seo-final p {
    font-size: 1.15rem;
    color: var(--color-text);
}

.seo-main .legenda-flexpage {
    margin-top: var(--space-md);
}

@media (max-width: 600px) {
    .seo-main { padding: var(--space-md); }
    .seo-sobre { padding: var(--space-lg) var(--space-md); }
}