/* =========================================================
   page.css — páginas de conteúdo (institucionais, legais, contato, validação)
   Carregado via $page_extra_css apenas nessas páginas.
   Copiado do IncluiEduca; os tokens são os daqui (nenhum hex próprio).
   ========================================================= */

.page-doc {
    padding-block: var(--s-7) var(--s-8);
}

.page-doc__inner {
    max-width: 760px;
}

.page-doc__head {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}

.page-doc__eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: var(--s-2);
}

.page-doc__title {
    margin: 0 0 var(--s-2);
}

.page-doc__updated {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* Corpo em prosa */
.prose {
    color: var(--c-text);
    font-size: var(--fs-md);
    line-height: 1.7;
}

.prose h2 {
    font-size: var(--fs-xl);
    color: var(--c-primary);
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
    font-size: var(--fs-lg);
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
}

.prose p { margin: 0 0 var(--s-4); }

.prose ul,
.prose ol {
    margin: 0 0 var(--s-4);
    padding-left: var(--s-5);
}

.prose li { margin-bottom: var(--s-2); }

.prose a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose strong { font-weight: 700; }

.prose__note {
    margin-top: var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: var(--c-primary-soft);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* ---- Página de contato (cards) ---- */
.contact-grid {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

@media (min-width: 560px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.contact-card__icon { font-size: 1.75rem; }
.contact-card__label { font-weight: 700; margin: 0; }
.contact-card__value { margin: 0; }
.contact-card__value a { word-break: break-word; }

/* ---- Página de validação de certificado ---- */
.validar-box {
    margin-top: var(--s-5);
    padding: var(--s-6);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    text-align: center;
}


/* ---- Passos numerados (como funciona) — reaproveita .steps de components.css ---- */
.page-doc .steps { margin-block: var(--s-5); }

/* ---- Bloco de destaque dentro da prosa (garantia, conta única) ---- */
.prose__box {
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-5);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-secondary);
    border-radius: var(--r-md);
}
.prose__box p:last-child { margin-bottom: 0; }