/* =========================================================
   MOBILE — ATÉ 700px
   Este arquivo é independente do CSS Desktop
========================================================= */

@media (max-width: 700px) { 

    #secaoQuemSomos {
        width: 100%;
        padding: 30px 0 0;
        overflow: hidden;
        background: var(--corCinza);
        box-sizing: border-box;
    }

    .conteudoQuemSomos {
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        box-sizing: border-box;
    }

    .textoQuemSomos {
        width: 100%;
        max-width: none;
        flex: none;
        padding: 0 25px 20px;
        box-sizing: border-box;
        z-index: 5;
    }

    .textoQuemSomos h1 {
        margin: 0 0 8px;
        font-size: 1.6rem;
        line-height: 1.15;
        color: var(--azulEscuro);
        font-weight: 500;
    }

    .linhaTitulo {
        width: 75px;
        height: 8px;
        margin: 0 0 10px 5px;
        background: var(--laranjaForte);
        border-radius: 0;
    }

    .textoQuemSomos p {
        width: 100%;
        margin: 0;
        font-size: .9rem;
        line-height: 1.5;
        color: var(--azulEscuro);
        text-align: left;
        font-weight: 300;
    }

    .imagemQuemSomos {
        position: relative;
        width: 100%;
        height: 400px;
        flex: none;
        margin: 0;
        overflow: hidden;
        border-radius: 0;
    }

    .imagemQuemSomos img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: right center;
        clip-path: none;
    }

.imagemQuemSomos::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -80px;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(29, 48, 86, 0.15) 35%,
        rgba(29, 48, 86, 0.40) 55%,
        rgba(29, 48, 86, 0.70) 75%,
        #1D3056 100%
    );

    z-index: 1;
    pointer-events: none;
}

    .imagemQuemSomos img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        clip-path: none;
    }

    .sobreposicaoImagem {
        position: absolute;
        inset: 0;
        background: none;
    }

    .imagemFundoPresidenteMobile {
        display: none;
    }


    /* =====================================================
       SECÇÃO PRESIDENTE — MOBILE
    ===================================================== */

    #secaoPresidente {
        position: relative;

        width: 100%;
        min-height: 0;
        height: auto;

        padding: 0 0 45px;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* =====================================================
       IMAGEM DE FUNDO
    ===================================================== */

    .imagemFundoPresidente {
        display: block;

        position: absolute;

        left: 0;
        bottom: 34px;

        width: 100%;
        height: 280px;

        z-index: 1;

        overflow: hidden;
    }

    .imagemFundoPresidente img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
        object-position: center bottom;
    }


    /* =====================================================
       CONTEÚDO
    ===================================================== */

    .conteudoPresidente {
        position: relative;

        z-index: 2;

        width: 100%;

        min-height: 0;
        height: auto;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        gap: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       MENSAGEM
    ===================================================== */

    .ladoDireito {
        order: 1;

        position: relative;

        width: 100%;
        height: auto;

        padding: 35px 12px 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        box-sizing: border-box;

        z-index: 5;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .ladoDireito h2 {
        width: 100%;

        margin: 0 0 8px;

        color: var(--azulEscuro);

        font-size: 1.5rem;
        line-height: 1.2;

        text-align: center;

        white-space: nowrap;

        font-weight: 500;
    }


    /* =====================================================
       CAIXA DA MENSAGEM
    ===================================================== */

    .caixaMensagem {
        position: relative;

        width: 100%;

        margin: 0 0 15px 0 ;

        padding: 15px;

        box-sizing: border-box;

        background: var(--azulClaro);

        color: var(--corBranca);

        border-radius: 12px;

        overflow: hidden;

        z-index: 6;

        transition:
            box-shadow .3s ease;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .caixaMensagem p {
        position: relative;

        margin: 4px 0 0;

        font-weight: 300;

        font-size: .9rem;

        line-height: 1.2;

        text-align: left;

        max-height: 115px;

        overflow: hidden;

        transition:
            max-height .45s ease;
    }


    /* =====================================================
       DEGRADÊ NO FINAL DO TEXTO
    ===================================================== */

    .caixaMensagem:not(.aberta) p::after {
        content: "";

        position: absolute;

        left: 0;
        right: 0;

        bottom: 0;

        height: 45px;

        background: linear-gradient(to bottom,
                transparent,
                var(--azulClaro));

        pointer-events: none;
    }


    /* =====================================================
       BOTÃO
    ===================================================== */

    .btnLerMais {
        display: block;

        margin: 10px auto 0;

        padding: 3px 2px;

        border: none;

        border-bottom: 1px solid var(--laranjaForte);

        background: transparent;

        color: var(--corBranca);

        font-size: .85rem;

        font-weight: 400;

        line-height: 1.2;

        cursor: pointer;

        transition:
            color .25s ease,
            border-color .25s ease;
    }

    .btnLerMais:hover {
        color: var(--laranjaForte);

        border-bottom-color: var(--corBranca);
    }


    /* =====================================================
       MENSAGEM ABERTA
    ===================================================== */

    .caixaMensagem.aberta {
        box-shadow:
            0 8px 20px rgba(0, 0, 0, .08);
    }

    .caixaMensagem.aberta p {
        max-height: 1800px;
    }

    /* Remove o degradê quando abrir */
    .caixaMensagem.aberta p::after {
        display: none;
    }


    /* =====================================================
       TRIÂNGULO
    ===================================================== */

    .caixaMensagem::after {
        content: "";

        position: absolute;

        left: 60px;
        bottom: -42px;

        width: 0;
        height: 0;

        border-top: 45px solid var(--azulClaro);

        border-right: 85px solid transparent;

        border-left: 0 solid transparent;

        z-index: 5;
    }


    /* =====================================================
       FOTO DO PRESIDENTE
    ===================================================== */

    .ladoEsquerdo {
        order: 2;

        position: relative;

        width: 240px;
        height: 320px;

        margin-top: 5px;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        flex-shrink: 0;

        z-index: 3;
    }


    /* =====================================================
       FOTO
    ===================================================== */

    .fotoPresidente {
        width: 100%;
        height: 100%;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        overflow: visible;

        position: relative;

        z-index: 3;
    }

    .fotoPresidente img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: contain;

        object-position: center bottom;
    }


    /* =====================================================
       CARTÃO
    ===================================================== */

    .cartaoPresidente {
        position: absolute;

        left: 50%;
        bottom: -10px;

        transform: translateX(-50%);

        width: calc(100% + 40px);

        max-width: 360px;

        box-sizing: border-box;

        background: var(--corBranca);

        border-radius: 10px 10px 2px;

        padding: 10px;

        text-align: center;

        z-index: 10;

        box-shadow:
            0 7px 20px rgba(0, 0, 0, .15);
    }

    .cartaoPresidente h3 {
        margin: 0;

        color: var(--azulEscuro);

        font-size: .9rem;

        line-height: 1.1;

        font-weight: 500;
    }

    .cartaoPresidente span {
        margin: 0;

        color: var(--azulEscuro);

        font-weight: 300;

        font-size: .9rem;

        line-height: 1.2;
    }


    /* =====================================================
       HISTORIAL
    ===================================================== */

    #secaoHistorial {
        padding: 0 10px 35px;

        text-align: center;

        background: linear-gradient(to bottom,
                #ffffff 85%,
                var(--corCinza) 15%);

        box-sizing: border-box;
    }

    #secaoHistorial h2 {
        margin: 0;

        font-size: 1.5rem;

        color: var(--azulEscuro);

        font-weight: 500;
    }

    #secaoHistorial p {
        width: 94%;

        margin: 6px auto;

        font-size: .9rem;

        line-height: 1.2;

        font-weight: 300;

        color: var(--azulEscuro);
    }


    /* =====================================================
       LINHA DO TEMPO — MOBILE
    ===================================================== */

    .linhaTempo {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 260px;

        display: flex;
        justify-content: center;
        align-items: flex-start;

        gap: 10px;

        margin-top: 55px;

        /* Aumentado o padding superior de 20px para 55px */
        padding: 55px 8px 25px;

        box-sizing: border-box;

        /* Alterado de hidden para visible para não cortar os marcadores */
        overflow: visible;
        flex-wrap: nowrap;
    }

    /* =====================================================
       CARDS
    ===================================================== */

    .cartaoAno {
        position: relative;

        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);

        max-width: none;
        min-height: 150px;

        box-sizing: border-box;

        padding: 17px 12px 20px;

        margin: 0;

        border-radius: 15px;

        background: var(--corBranca);

        border: 1px solid transparent;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

        overflow: visible;

        display: none;

        opacity: 0;

        transform: translateY(8px);

        transition:
            opacity .45s ease,
            transform .45s ease,
            border-color .3s ease,
            box-shadow .3s ease;

        z-index: 1;
    }


    /* =====================================================
       CORES DOS CARDS
    ===================================================== */

    .cartaoAno:nth-child(1) {
        --corCartao: var(--azulEscuro);
    }

    .cartaoAno:nth-child(2) {
        --corCartao: var(--azulClaro);
    }

    .cartaoAno:nth-child(3) {
        --corCartao: var(--laranjaForte);
    }

    .cartaoAno:nth-child(4) {
        --corCartao: var(--azulEscuro);
    }

    .cartaoAno:nth-child(5) {
        --corCartao: var(--azulClaro);
    }

    .cartaoAno:nth-child(6) {
        --corCartao: var(--laranjaForte);
    }

    .cartaoAno:nth-child(7) {
        --corCartao: var(--azulClaro);
    }


    /* =====================================================
       CARD ATIVO
    ===================================================== */

    .cartaoAno.ativo {
        display: block;

        opacity: 1;

        transform: translateY(-8px);

        border-color: var(--corCartao);

        position: relative;

        z-index: 10;

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .12);
    }


    /* =====================================================
   MARCADOR COM ÍCONE PERSONALIZADO (Ajustado)
===================================================== */
    .marcadorAno {
        position: absolute;
        top: -34px;
        /* Ajustado para encaixar com o tamanho menor */
        left: 50%;

        width: 22px;
        /* Reduzido de 28px */
        height: 22px;
        /* Reduzido de 28px */

        /* Alterado de -45deg para 45deg para o pino ficar vertical e alinhado */
        transform: translateX(-50%) rotate(45deg);

        background: var(--corBranca);
        border: 2px solid var(--corCartao);
        border-radius: 50% 50% 0 50%;
        /* Ajuste das bordas para a ponta apontar para baixo */

        opacity: 0;

        transition: .3s ease;

        z-index: 5;
    }

    /* =====================================================
   MOSTRAR NO CARD ATIVO E HOVER (Manter proporção)
===================================================== */

    .cartaoAno.ativo .marcadorAno,
    .cartaoAno:hover .marcadorAno {
        opacity: 1;
        /* Mantém o ângulo correto ao dar zoom no ativo/hover */
        transform: translateX(-50%) rotate(45deg) scale(1.1);
    }

    /* =====================================================
       FAIXA COLORIDA NO RODAPÉ DO CARD
    ===================================================== */

    .cartaoAno::after {
        content: "";

        position: absolute;

        left: 0;
        right: 0;

        bottom: -7px;

        height: 18px;

        background: var(--corCartao);

        border:
            1px solid var(--corCartao);

        border-radius:
            0 0 15px 15px;

        z-index: -1;

        opacity: 0;

        transform: translateY(5px);

        transition:
            opacity .35s ease,
            transform .35s ease,
            bottom .35s ease,
            height .35s ease;
    }


    /* MOSTRAR RODAPÉ COLORIDO NO ATIVO */

    .cartaoAno.ativo::after {
        opacity: 1;

        transform: translateY(0);

        bottom: -10px;

        height: 22px;
    }


    /* =====================================================
       TÍTULO DO ANO
    ===================================================== */

    .cartaoAno h3 {
        margin: 0 0 2px;

        color: var(--azulEscuro);

        font-size: 1.2rem;

        line-height: 1.1;

        text-align: center;

        font-weight: 500;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .cartaoAno span:not(.marcadorAno) {
        display: block;

        color: var(--azulEscuro);

        font-size: .7rem;

        line-height: 1.2;
        font-weight: 300;

        text-align: center;
    }


    /* =====================================================
       EFEITO AO TOCAR / HOVER
    ===================================================== */

    .cartaoAno:hover {
        transform: translateY(-8px);

        border-color: var(--corCartao);

        box-shadow:
            0 14px 30px rgba(0, 0, 0, .16);

        z-index: 20;
    }

    /* Mostrar faixa no hover */

    .cartaoAno:hover::after {
        opacity: 1;

        transform: translateY(0);

        bottom: -10px;

        height: 20px;
    }


    /* =====================================================
       MISSÃO / VISÃO / VALORES
    ===================================================== */

    .SessãoMissãoVisãoValores {
        position: relative;

        width: 100%;

        min-height: 100vh;

        padding: 0 15px 80px;

        overflow: visible;

        box-sizing: border-box;
    }

    .ImagemFundoCurvo {
        display: none;
    }

    .ImagemFundoCurvoMobile {
        display: block;

        position: absolute;

        top: -50px;
        left: 50%;

        transform: translateX(-50%);

        width: 100%;
        min-width: 100%;

        height: 100%;

        max-width: none;

        z-index: 1;

        pointer-events: none;
    }

    .ImagemFundoCurvoMobile img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;
    }

    .ConteúdoMissãoVisãoValores {
        position: relative;

        z-index: 2;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        box-sizing: border-box;
    }

    .CartãoMissãoVisãoValores {
        width: 85%;
        max-width: 100%;

        min-height: 320px;

        background: var(--corBranca);

        border-radius: 20px;

        overflow: hidden;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .18);

        transition: transform .35s ease;
    }

    .CabeçalhoCartão {
        height: 50px;

        background: var(--azulEscuro);

        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;

        border-radius: 20px 22px 8px 0;
    }

    .CabeçalhoCartão::after {
        content: "";

        position: absolute;

        bottom: -25px;
        left: 50%;

        transform: translateX(-50%);

        width: 125%;
        height: 40px;

        background: var(--corBranca);

        border-radius: 97% 97% 0 0;
    }

    .CabeçalhoCartão h2 {
        position: relative;

        z-index: 2;

        color: var(--corBranca);

        font-size: 1.5rem;
        font-weight: 550;

        margin: 0;
    }

    .CorpoCartão {
        padding: 25px 18px 0;
    }

    .CorpoCartão p {
        color: var(--azulEscuro);

        font-size: .9rem;
        line-height: 1.2;

        font-weight: 300;

        text-align: left;

        margin: 0;
    }

    .CorpoCartão ul {
        list-style: none;

        padding: 0;
        margin: 0;
    }

    .CorpoCartão li {
        display: flex;

        justify-content: flex-start;
        align-items: flex-start;

        gap: 2px;

        margin-bottom: 4px;

        color: var(--azulEscuro);

        font-size: .9rem;
        font-weight: 300;

        text-align: left;
    }

    .CorpoCartão li::before {
        content: "";

        width: 6px;
        height: 6px;

        margin-top: 8px;

        background: var(--azulEscuro);

        border-radius: 50%;

        flex-shrink: 0;
    }


    /* =====================================================
       OBJECTIVOS
    ===================================================== */

    #secaoObjectivos {
        position: relative;

        width: 100%;

        min-height: 100vh;

        background: var(--branco);

        overflow: visible;

        box-sizing: border-box;
    }

    .conteudoObjectivos {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        z-index: 2;

        box-sizing: border-box;
    }

    #secaoObjectivos .tituloObjectivos {
        display: block;

        width: 100%;

        text-align: center;

        color: var(--azulEscuro);

        font-size: 1.5rem;
        font-weight: 500;

        position: relative;

        z-index: 3;
    }

    #secaoObjectivos .tituloObjectivos::after {
        content: "";

        display: block;

        width: 80px;
        height: 7px;

        margin: 4px auto 0;

        background: var(--laranjaForte);

        border-radius: 10px;
    }

    .imagemObjectivos {
        display: none;
    }

    .imagemObjectivosMobile {
        width: 100%;
        height: 60vh;

        display: block;

        border-radius: 12px;

        margin-bottom: 10px;

        object-fit: cover;
    }

    #secaoObjectivos .conteudoObjectivosMobile {
        display: block;

        position: relative;

        padding: 0;

        width: 90%;
        max-width: 90%;

        margin: 0 auto;

        z-index: 3;

        box-sizing: border-box;
    }

    #secaoObjectivos .conteudoObjectivosMobile p {
        color: var(--azulEscuro);

        font-size: .9rem;
        line-height: 1.2;
        font-weight: 300;
        text-align: left;

        margin: 0 0 10px;
    }

    #secaoObjectivos .imagemFundoObjectivos {
        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        width: auto;
        min-width: 100vw;

        max-width: none;

        height: auto;

        object-fit: contain;
        object-position: center center;

        z-index: 1;

        pointer-events: none;
    }

    #secaoObjectivos .spamNegrito {
        display: flex;

        flex-direction: column;

        gap: 5px;
    }

    #secaoObjectivos .spamNegrito span {
        display: block;

        font-weight: 300;

        color: var(--azulEscuro);

        font-size: .9rem;
    }


    /* =====================================================
       ESTRUTURA ORGANIZACIONAL
    ===================================================== */

    #secaoEstruturaOrganizacional {
        width: 100%;

        padding: 35px 0 10px;

        background: var(--azulEscuro);

        overflow: hidden;

        box-sizing: border-box;
    }

    .cabecalhoEstrutura {
        width: 100%;

        margin: 0 0 20px;

        padding: 0 10px;

        text-align: center;

        box-sizing: border-box;
    }

    .cabecalhoEstrutura h2 {
        color: var(--corBranca);

        font-size: 1.5rem;

        line-height: .95;

        margin: 0 0 10px;
        font-weight: 500;
    }

    .cabecalhoEstrutura p {
        color: var(--corBranca);

        font-size: .9rem;

        line-height: 1.2;

        margin: 0 auto;
        font-weight: 300;

        max-width: 92%;
    }

    .mobile {
        display: block;
    }

    #botaoAmpliarEstrutura {
        display: flex;

        align-items: center;
        justify-content: center;

        cursor: pointer;
    }

    .conteudoEstrutura {
        width: 100%;

        background: transparent;

        display: flex;

        justify-content: center;
        align-items: center;

        padding: 0 7px;

        box-sizing: border-box;

        overflow: visible;
    }

    .caixaImagemEstrutura {
        position: relative;

        width: 100%;
        max-width: 100%;

        border: 1px solid rgba(255, 255, 255, .22);

        border-radius: 5px;

        overflow: hidden;

        background: rgba(255, 255, 255, .03);
    }

    .imagemEstrutura {
        width: 100%;
        height: auto;

        display: block;

        object-fit: contain;

        opacity: 1;
        transform: none;
    }

    .botaoAmpliarEstrutura {
        position: absolute;

        right: 5px;
        bottom: 5px;

        width: 30px;
        height: 30px;

        padding: 5px;

        border-radius: 3px;

        background: transparent;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* =====================================================
       MODAL DA ESTRUTURA
    ===================================================== */

    .modalEstrutura {
        position: fixed;

        inset: 0;

        width: 100vw;
        height: 100vh;

        background: rgba(0, 0, 0, .92);

        z-index: 99999;

        display: flex;

        align-items: center;
        justify-content: center;

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }

    .modalEstrutura.aberto {
        opacity: 1;
        visibility: visible;
    }

    .areaImagemAmpliada {
        position: relative;

        width: 100%;
        height: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: hidden;

        touch-action: none;

        cursor: grab;
    }

    .areaImagemAmpliada:active {
        cursor: grabbing;
    }

    #imagemEstruturaAmpliada {
        width: auto;
        height: auto;

        max-width: 97vw;
        max-height: 92vh;

        object-fit: contain;

        user-select: none;

        -webkit-user-drag: none;

        transform-origin: center center;

        transition: transform .2s ease;
    }

    .barraModalEstrutura {
        position: fixed;

        top: 15px;
        right: 15px;

        z-index: 100001;

        display: flex;

        align-items: center;

        gap: 7px;
    }

    .barraModalEstrutura button {
        width: 38px;
        height: 38px;

        border: none;

        border-radius: 50%;

        background: var(--corBranca);

        color: var(--laranjaForte);

        font-size: 24px;

        display: flex;

        align-items: center;
        justify-content: center;

        cursor: pointer;

        transition: .25s;
    }

    .barraModalEstrutura button:hover {
        transform: scale(1.08);

        background: var(--laranjaForte);

        color: var(--corBranca);
    }

    #percentagemZoom {
        min-width: 55px;

        text-align: center;

        color: var(--corBranca);

        font-size: 14px;
        font-weight: 600;
    }

    #fecharEstrutura {
        font-size: 28px;

        margin-left: 5px;
    }


    /* =====================================================
       DOCUMENTOS
    ===================================================== */

    #secaoDocumentos {
        padding: 5px 0 30px;

        background: var(--corBranca);

        box-sizing: border-box;
    }

    .conteudoDocumentos {
        width: 90%;
        max-width: 90%;

        margin: auto;
    }

    .cabecalhoDocumentos {
        width: 100%;
        max-width: 100%;

        margin-bottom: 30px;
    }

    .cabecalhoDocumentos h2 {
        font-size: 1.5rem;
        line-height: 1.2;

        color: var(--azulEscuro);
        font-weight: 500;

        margin-bottom: 4px;
    }

    .cabecalhoDocumentos h3 {
        font-size: 1rem;

        color: var(--azulEscuro);

        margin-bottom: 4px;
        line-height: 1.2;

        font-weight: 400;
    }

    .cabecalhoDocumentos p {
        font-size: .9rem;

        line-height: 1.2;
        font-weight: 300;

        color: var(--azulEscuro);

        margin-bottom: 5px;
    }

    .grelhaDocumentos {
        display: grid;

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 20px;

        height: auto;
        max-height: none;

        padding: 0;

        overflow: visible;
    }

    .cartaoDocumento {
        position: relative;

        width: 90%;

        min-height: 240px;

        display: flex;

        flex-direction: column;

        box-sizing: border-box;

        padding: 25px;

        background: linear-gradient(180deg,
                #376E9D,
                #2B5D8C);

        border-radius: 8px;

        text-decoration: none;

        color: var(--corBranca);

        box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

        transition: transform .35s ease;

        opacity: 1;

        transform: none;
    }

    .cartaoDocumento:hover {
        transform: translateY(-2px);

        background: linear-gradient(180deg,
                #417EB2,
                #2F6EA6);
    }

    .cartaoDocumento h4 {
        font-size: 1.2rem;
        line-height: 1.2;

        margin: 0 0 4px;

        font-weight: 500;
    }

    .linhaTituloDocumentos {
        width: 50%;

        height: 1px;

        margin: 0 0 5px;

        background: #ffffffa2;
    }

    .cartaoDocumento p {
        font-size: .9rem;

        line-height: 1.2;

        margin: 0px;
        font-weight: 300;
    }

    .botaoDocumento {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: fit-content;

        margin-top: auto;
        margin-bottom: 0;

        background: var(--laranjaForte);

        color: var(--corBranca);

        padding: 6px 10px;

        border-radius: 8px;

        font-size: .8rem;
        font-weight: 300;
        text-decoration: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .verTodosDocumentos {
        width: 90%;

        margin: 5px auto 0;

        color: var(--azulEscuro);

        font-size: .9rem;

        font-weight: 300;

        cursor: pointer;

        transition: .3s ease;

        user-select: none;
    }

    .verTodosDocumentos:hover {
        color: var(--laranjaForte);
    }

}