/* ==========================================================================
   page.css — padrão visual das páginas internas
   Complementa style.css: reaproveita as variáveis, a fonte Roboto e o
   header/footer do site. Carregar sempre DEPOIS de style.css.
   ========================================================================== */

:root {
    /* Derivadas da paleta institucional (style.css) */
    --page-surface: #FFFFFF;
    --page-surface-2: #F2F5F9;
    --page-rule: #DFE5EE;
    --page-ink-faint: #78808F;

    --page-danger: #B3261E;
    --page-danger-bg: #FDF0EF;
    --page-warn: #8A5A00;
    --page-warn-bg: #FDF6E7;
    --page-info: var(--secondary-color);
    --page-info-bg: #EAF1FA;

    --page-code-bg: #0B1230;
    --page-code-ink: #E4EAF7;
    --page-code-dim: #8892B5;
    --page-code-accent: #7FB2F0;

    --page-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* --------------------------------------------------------------------------
   Compensação do header fixo
   -------------------------------------------------------------------------- */
.page-main {
    padding-top: 78px;
}

/* Âncoras internas não ficam escondidas atrás do header */
[id] {
    scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   Cabeçalho da página (faixa azul)
   -------------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 70px 0 60px;
}

.page-hero .breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.75);
}

.page-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
}

.page-hero .breadcrumb a:hover {
    color: var(--white);
}

.page-hero .breadcrumb i {
    margin-right: 6px;
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 7px 16px;
    margin-bottom: 20px;
}

.page-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 18px;
}

.page-hero .resumo {
    font-size: 1.1rem;
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Corpo do conteúdo
   -------------------------------------------------------------------------- */
.page-body {
    padding: 60px 0 90px;
    background: var(--bg-light);
}

.page-body .container {
    max-width: 900px;
}

/* Conteúdo em largura total (páginas com duas colunas) */
.page-body.largo .container {
    max-width: var(--max-width);
}

.page-body section {
    margin-bottom: 50px;
}

.page-body section:last-child {
    margin-bottom: 0;
}

.page-body h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--secondary-color);
}

.page-body h3 {
    font-size: 1.12rem;
    color: var(--text-color);
    margin: 28px 0 10px;
}

.page-body h3:first-child {
    margin-top: 0;
}

.page-body p {
    color: var(--text-light);
    margin-bottom: 16px;
    max-width: 72ch;
}

.page-body p:last-child {
    margin-bottom: 0;
}

.page-body strong {
    color: var(--text-color);
    font-weight: 700;
}

.page-body a:not(.btn-primary):not(.btn-whatsapp) {
    color: var(--secondary-color);
    font-weight: 500;
    text-underline-offset: 3px;
}

.page-body a:not(.btn-primary):not(.btn-whatsapp):hover {
    text-decoration: underline;
}

.page-body img {
    max-width: 100%;
    height: auto;
}

/* Listas */
.page-body ul.marcada,
.page-body ol.marcada {
    padding-left: 24px;
    margin-bottom: 16px;
    max-width: 72ch;
    color: var(--text-light);
    list-style: revert;
}

.page-body ul.marcada li,
.page-body ol.marcada li {
    margin-bottom: 10px;
}

.page-body ul.marcada li::marker,
.page-body ol.marcada li::marker {
    color: var(--secondary-color);
    font-weight: 700;
}

/* Código */
.page-body code {
    font-family: var(--page-mono);
    font-size: 0.88em;
    background: var(--page-surface-2);
    border: 1px solid var(--page-rule);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--primary-color);
}

.page-body pre {
    background: var(--page-code-bg);
    color: var(--page-code-ink);
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: var(--page-mono);
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.page-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.page-body pre .c {
    color: var(--page-code-dim);
}

.page-body pre .k {
    color: var(--page-code-accent);
}

/* Árvore de diretórios */
.arvore {
    background: var(--page-surface);
    border: 1px solid var(--page-rule);
    border-radius: 10px;
    padding: 20px 22px;
    overflow-x: auto;
    font-family: var(--page-mono);
    font-size: 0.85rem;
    line-height: 1.9;
    white-space: pre;
    color: var(--text-light);
    margin-bottom: 16px;
}

.arvore b {
    color: var(--primary-color);
}

.arvore .nota {
    color: var(--page-ink-faint);
}

/* Avisos / callouts */
.aviso {
    padding: 18px 22px;
    border-radius: 10px;
    border-left: 4px solid;
    margin-bottom: 16px;
}

.aviso h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    margin: 0 0 8px;
}

.aviso p {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.aviso p:last-child {
    margin-bottom: 0;
}

.aviso.critico {
    background: var(--page-danger-bg);
    border-color: var(--page-danger);
}

.aviso.critico h3 {
    color: var(--page-danger);
}

.aviso.atencao {
    background: var(--page-warn-bg);
    border-color: var(--page-warn);
}

.aviso.atencao h3 {
    color: var(--page-warn);
}

.aviso.nota {
    background: var(--page-info-bg);
    border-color: var(--page-info);
}

.aviso.nota h3 {
    color: var(--primary-color);
}

/* Tabelas */
.rolagem {
    overflow-x: auto;
    margin-bottom: 16px;
}

.page-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.92rem;
    background: var(--page-surface);
    border: 1px solid var(--page-rule);
    border-radius: 10px;
    overflow: hidden;
}

.page-body th,
.page-body td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--page-rule);
    color: var(--text-light);
}

.page-body th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary-color);
}

.page-body tbody tr:last-child td {
    border-bottom: none;
}

.page-body tbody tr:nth-child(even) {
    background: var(--page-surface-2);
}

/* Caixa destacada (checklist, resumo, quadro) */
.checklist {
    background: var(--page-surface);
    border: 1px solid var(--page-rule);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 28px 30px;
    margin-bottom: 16px;
}

.checklist h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.15rem;
}

.checklist> :last-child {
    margin-bottom: 0;
}

/* Grade de cartões dentro do conteúdo */
.page-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 16px;
}

.page-card {
    background: var(--page-surface);
    border: 1px solid var(--page-rule);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 28px 26px;
    transition: var(--transition);
}

.page-card:hover {
    transform: translateY(-6px);
    border-color: var(--secondary-color);
}

.page-card .page-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(40, 103, 178, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.page-card h3 {
    margin-top: 0;
    font-size: 1.05rem;
}

.page-card p {
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Seções de largura total (páginas institucionais)
   -------------------------------------------------------------------------- */
.page-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.page-section.alt {
    background: var(--bg-gray);
}

.page-section .section-title {
    color: var(--primary-color);
}

/* Título de seção alinhado à esquerda (o traço acompanha) */
.section-title.esquerda {
    text-align: left;
}

.section-title.esquerda::after {
    left: 0;
    transform: none;
}

.page-section p {
    color: var(--text-light);
}

/* Conteúdo + imagem lado a lado */
.page-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Conteúdo principal + coluna lateral (formulário, avisos) */
.page-split.com-lateral {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
}

.page-split img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.page-split p {
    margin-bottom: 15px;
}

.page-split strong {
    color: var(--text-color);
}

.page-split a:not(.btn-primary):not(.btn-whatsapp) {
    color: var(--secondary-color);
    font-weight: 500;
}

/* Faixa de destaque em azul */
.page-band {
    background: var(--primary-color);
    color: var(--white);
    padding: 70px 0;
    text-align: center;
}

.page-band h2,
.page-band h3 {
    font-size: 1.9rem;
    margin-bottom: 15px;
}

.page-band p {
    max-width: 800px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.9);
}

.page-band a:not(.btn-primary):not(.btn-whatsapp) {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-band .btn-primary {
    background: var(--white);
    color: var(--primary-color) !important;
}

.page-band .btn-primary:hover {
    background: var(--secondary-color);
    color: var(--white) !important;
}

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
.form-card {
    background: var(--page-surface);
    border: 1px solid var(--page-rule);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 30px;
}

.form-card h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.form-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-color);
}

.form-input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--page-rule);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-color);
    background: var(--white);
    transition: var(--transition);
}

.form-input::placeholder {
    color: var(--page-ink-faint);
}

.form-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(40, 103, 178, 0.15);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-light);
    margin: 18px 0 22px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--secondary-color);
    flex-shrink: 0;
}

.btn-submit {
    width: 100%;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
}

.btn-submit:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(40, 103, 178, 0.3);
}

/* Lista de benefícios com ícone */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 72ch;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-light);
}

.feature-list li i {
    color: var(--secondary-color);
    background: rgba(40, 103, 178, 0.08);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 3px;
}

.feature-list li strong {
    color: var(--text-color);
}

/* Chamada final da página */
.page-cta {
    background: var(--bg-gray);
    padding: 70px 0;
    text-align: center;
}

.page-cta h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.page-cta p {
    color: var(--text-light);
    max-width: 620px;
    margin: 0 auto 30px;
}

.page-cta .page-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* Nota de rodapé do conteúdo */
.page-note {
    border-top: 1px solid var(--page-rule);
    padding-top: 22px;
    margin-top: 40px;
    color: var(--page-ink-faint);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    .page-split,
    .page-split.com-lateral {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .page-main {
        padding-top: 70px;
    }

    .page-hero {
        padding: 50px 0 45px;
    }

    .page-body {
        padding: 45px 0 70px;
    }

    .checklist {
        padding: 24px 20px;
    }

    .page-cta {
        padding: 55px 0;
    }

    .page-section,
    .page-band {
        padding: 55px 0;
    }

    .page-split,
    .page-split.com-lateral {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}