/* ============================================================
   Documento — sub-página de compliance. 100% alinhado ao Figma do dono
   Tela: 861:33008 "WF · Documento — template" (vBDTCVQ2HIzfcDe3febQmY).
   Reescrito 20-08-2026.

   REGRA DESTA PÁGINA: valores vindos do Figma, escritos na mão.
   NÃO trocar por tokens/classes do design-system.css.
   ============================================================ */

/* corpo-documento · padding 64/300/92, gap 28, conteúdo de 840px */
.doc-corpo {
    /* o topo soma o clearance da navbar flutuante aos 64px do desenho */
    padding: clamp(120px, 13vh + 20px, 168px) 0 92px;
    background: #fff;
    /* Costura com o rodapé — padrão de todas as páginas do site (ver
       .ds-seam-bottom); valores escritos aqui para não depender do DS. */
    position: relative;
    z-index: 11;
    margin-bottom: -32px;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.doc-wrap {
    width: min(840px, 100% - 48px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: 'Poppins', sans-serif;
}

.doc-trilha {
    font-size: 0.8125rem;      /* 13px */
    font-weight: 500;
    color: #005bff;
}

.doc-trilha a {
    color: inherit;
    text-decoration: none;
}

.doc-trilha a:hover { text-decoration: underline; }

.doc-titulo {
    font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);   /* 40px */
    line-height: 1.2;
    color: #0b1b3b;
}

.doc-meta {
    font-size: 0.8125rem;      /* 13px */
    font-weight: 400;
    color: #45526e;
}

.doc-h2 {
    font-size: 1.1875rem;      /* 19px */
    font-weight: 600;
    color: #0b1b3b;
}

/* No wireframe o corpo do texto aparece como barras de placeholder;
   aqui vira parágrafo de verdade, na cor de texto secundário do desenho. */
.doc-p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.7;
    color: #45526e;
}

/* cta-download · 840×92, fundo #eef4ff, raio 14, padding 28/32 */
/* A caixa azul-clara em volta do botão saiu a pedido do dono (10-09-2026):
   com o Arrow Fill no lugar do botão antigo, o retângulo virava uma segunda
   moldura em volta de um botão que já tem corpo próprio. Sobra o respiro. */
.doc-cta {
    padding: 4px 0 0;
}

/* Botão · 224×36 */
.doc-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 224px;
    max-width: 100%;
    padding: 9px 16px;
    background: #005bff;
    color: #fff;
    border-radius: 8px;
    font-size: 0.75rem;        /* 12px */
    font-weight: 500;
    text-decoration: none;
    transition: background .18s ease;
}

@media (hover: hover) {
    .doc-cta__btn:hover { background: #004bd9; }
}

.doc-cta__btn svg {
    width: 12px;
    height: 12px;
    flex: none;
}

@media (max-width: 760px) {
    .doc-corpo { padding-bottom: 56px; }
    .doc-cta { padding: 4px 0 0; }
}