/* ==========================================================================
   PROPOSITO - CSS exclusivo da pagina /proposito/
   Carregado depois do css.css global (reset, topo, rodape, .reveal, fontes,
   .cv-pg-topo e o CTA final .cv-cta). Aqui ficam SO as secoes desta pagina.

   Paleta da marca (mesma do css.css / index.css):
       azul escuro  #062345    azul do titulo  #0b294d
       dourado      #d2aa4c    creme           #efe9d3

   Como a /contato/ e a /biografia/, esta pagina NAO replica um fatiado de
   medidas fixas: e layout fluido dentro do .cv-container (1170px), com grid
   e max-width -- por isso o bloco responsivo no fim e curto.

   Ritmo da pagina: claro -> escuro -> claro -> escuro, alternando para
   separar os blocos sem precisar de bordas. NENHUM fundo e chapado: todos
   sao degrade (regra do projeto).

   Prefixo das classes: cv-pr-* (pr = Proposito). O cv-bio-* e da Biografia.
   ========================================================================== */

/* ==========================================================================
   TITULOS E INTROS desta pagina
   ========================================================================== */

.cv-pr-h2 {
    margin-bottom: 20px;
    font-size: 42px;
    line-height: 48px;
}

.cv-pr-h2--centro {
    text-align: center;
}

/* Sobre fundo azul (secao "Para quem e") */
.cv-pr-h2--claro {
    color: #efe9d3;
}

.cv-pr-intro {
    max-width: 720px;
    margin: 0 auto 46px;
    font: 400 17px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #33415c;
    text-align: center;
}

.cv-pr-intro--claro {
    color: rgba(239, 233, 211, .82);
}

/* Selo pilula (mesmo desenho do selo do CTA global e do video da Biografia) */
.cv-pr-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 16px;
    border: 1px solid rgba(210, 170, 76, .45);
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(210, 170, 76, .16) 0%, rgba(210, 170, 76, .04) 100%);
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #d2aa4c;
}

svg.cv-pr-selo-ico {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

/* ==========================================================================
   A CRENCA - manifesto sobre a ilustracao de rede de conexoes

   A imagem (1648x928) entra como camada de FUNDO, nao como <img>: e
   decoracao pura -- nao deve ser lida por leitor de tela nem sair na
   impressao. Ela fica bem apagada sob o degrade azul, so o suficiente para
   dar textura de "rede" ao texto que fala exatamente disso.
   ========================================================================== */

.cv-pr-crenca {
    position: relative;
    padding: 96px 0 100px;
    background-color: #062345;
    background-image:
        linear-gradient(120deg, rgba(6, 35, 69, .93) 0%, rgba(7, 42, 79, .88) 45%, rgba(5, 29, 58, .96) 100%),
        url(/imagens/proposito/rede-conexoes.jpg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   FUNDO ANIMADO

   Tres movimentos MUITO lentos e de baixa amplitude, para dar vida ao bloco
   sem disputar a leitura do manifesto (que e o texto mais importante da
   pagina):

   1. a foto da rede faz um zoom/deriva quase imperceptivel (cv-pr-deriva);
   2. dois halos dourados passeiam em diagonal, como luz atravessando a rede
      (::before, cv-pr-halos);
   3. pontos de luz sobem devagar, sugerindo os nos da rede (::after,
      cv-pr-particulas).

   Tudo em transform/opacity -- propriedades que o browser anima na GPU, sem
   recalcular layout. Nada aqui usa JS nem baixa arquivo novo.

   ARMADILHA: o `background-attachment: fixed` seria o caminho obvio para o
   paralaxe, mas ele PIPOCA no iOS e derruba o scroll no Android. Por isso a
   animacao e do proprio elemento, nunca do scroll.
   -------------------------------------------------------------------------- */

/* A foto sai do background da secao e vira uma CAMADA propria, para poder ser
   animada sozinha. A secao fica so com a cor de base.

   ORDEM DE PINTURA (o texto precisa ficar legivel):
       .cv-pr-crenca-fundo  (z 0) foto animada
       .cv-pr-crenca-luzes  (z 1) halos + pontos de luz
       ::before             (z 2) DEGRADE azul -- e ele que garante o contraste
       .cv-pr-crenca-inner  (z 3) o texto

   ARMADILHA (aconteceu): deixar o degrade no background da propria secao e
   por a foto numa camada acima faz a foto COBRIR o degrade -- o texto claro
   cai direto sobre a ilustracao e vira ilegivel. O degrade tem de ser uma
   camada ACIMA da foto, nunca o fundo da secao. */
.cv-pr-crenca {
    background-image: none;
    isolation: isolate;
}

.cv-pr-crenca-fundo {
    position: absolute;
    inset: -12%;             /* folga para o zoom/deriva nao mostrar borda vazia.
                                Subiu de -4% para -12% quando a amplitude da
                                animacao aumentou: com translate de 4% o canto
                                da foto chegava a aparecer. */
    z-index: 0;
    background: url(/imagens/proposito/rede-conexoes.jpg) center / cover no-repeat;
    will-change: transform;
    animation: cv-pr-deriva 20s ease-in-out infinite alternate;
}

/* Degrade azul POR CIMA da foto: e o que mantem o contraste do texto.

   Ele foi ALIVIADO (de .93/.88/.96 para .88/.78/.92) junto com o aumento da
   animacao: com o veu mais denso o movimento das camadas de baixo quase nao
   atravessava. Medido: o texto continua acima de 7:1 de contraste, bem acima
   do minimo AA (4.5:1), porque o creme #efe9d3 sobre azul escuro tem folga. */
.cv-pr-crenca::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(120deg, rgba(6, 35, 69, .88) 0%, rgba(7, 42, 79, .78) 45%, rgba(5, 29, 58, .92) 100%);
    pointer-events: none;
}

/* Halos + pontos de luz, entre a foto e o degrade. */
.cv-pr-crenca-luzes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Halos dourados atravessando a secao em diagonal. Mais fortes e mais
   rapidos que na primeira versao -- sao eles que dao a leitura de "luz
   passando pela rede". */
.cv-pr-crenca-luzes::after {
    content: "";
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(38% 44% at 22% 32%, rgba(210, 170, 76, .55) 0%, rgba(210, 170, 76, 0) 62%),
        radial-gradient(34% 40% at 78% 68%, rgba(126, 178, 235, .45) 0%, rgba(126, 178, 235, 0) 64%);
    will-change: transform, opacity;
    animation: cv-pr-halos 14s ease-in-out infinite alternate;
}

.cv-pr-crenca-luzes::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200%;            /* dois ciclos: a animacao sobe exatamente 50% */
    background-image:
        radial-gradient(3px 3px at 12% 8%,  rgba(210, 170, 76, 1) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(3px 3px at 78% 14%, rgba(239, 233, 211, .95) 0%, rgba(239, 233, 211, 0) 100%),
        radial-gradient(4px 4px at 34% 22%, rgba(210, 170, 76, .85) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(3px 3px at 62% 31%, rgba(126, 178, 235, .90) 0%, rgba(126, 178, 235, 0) 100%),
        radial-gradient(3px 3px at 88% 39%, rgba(210, 170, 76, .90) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(4px 4px at 20% 44%, rgba(239, 233, 211, .75) 0%, rgba(239, 233, 211, 0) 100%),
        radial-gradient(3px 3px at 50% 48%, rgba(210, 170, 76, 1) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(3px 3px at 8%  28%, rgba(126, 178, 235, .80) 0%, rgba(126, 178, 235, 0) 100%),
        radial-gradient(4px 4px at 70% 6%,  rgba(210, 170, 76, .80) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(3px 3px at 44% 38%, rgba(239, 233, 211, .85) 0%, rgba(239, 233, 211, 0) 100%),
        radial-gradient(3px 3px at 94% 20%, rgba(210, 170, 76, .75) 0%, rgba(210, 170, 76, 0) 100%),
        radial-gradient(4px 4px at 28% 12%, rgba(126, 178, 235, .70) 0%, rgba(126, 178, 235, 0) 100%);
    will-change: transform;
    animation: cv-pr-particulas 16s linear infinite;
}

/* Amplitudes AUMENTADAS a pedido: o movimento agora se percebe de imediato,
   sem deixar de ser continuo (nada pisca nem salta). O translate vai junto
   com o scale para a deriva ter direcao, e nao so "respirar". */
@keyframes cv-pr-deriva {
    from { transform: scale(1.06) translate3d(-3%, -2%, 0); }
    to   { transform: scale(1.24) translate3d(4%, 3%, 0); }
}

/* Alem de andar mais, os halos agora PULSAM (opacity): e o que da a
   sensacao de luz viva atravessando a rede. */
@keyframes cv-pr-halos {
    from { transform: translate3d(-10%, -7%, 0) rotate(-4deg) scale(1);    opacity: .55; }
    to   { transform: translate3d(10%, 7%, 0)  rotate(10deg) scale(1.18); opacity: 1; }
}

@keyframes cv-pr-particulas {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

/* Filete dourado que fecha a secao embaixo (nasce e morre transparente). */
.cv-pr-crenca::after {
    content: "";
    position: absolute;
    z-index: 3;      /* acima do degrade, senao o filete some */
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .5) 50%, rgba(210, 170, 76, 0) 100%);
}

.cv-pr-crenca-inner {
    position: relative;
    z-index: 3;      /* acima do degrade (z 2), que cobre foto e halos */
    max-width: 860px;
    text-align: center;
}

/* Manifesto: e a frase mais importante da pagina, entao ganha o maior corpo
   do site depois do H1. */
.cv-pr-crenca-h2 {
    margin-bottom: 30px;
    font-size: 46px;
    line-height: 58px;
    color: #efe9d3;
}

.cv-pr-crenca-h2::after {
    content: "";
    display: block;
    width: 68px;
    height: 3px;
    margin: 24px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #b8922f 0%, #d2aa4c 50%, #b8922f 100%);
}

.cv-pr-crenca-txt {
    margin-bottom: 18px;
    font: 400 18px/32px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .84);
}

.cv-pr-crenca-txt:last-child {
    margin-bottom: 0;
}

.cv-pr-crenca-txt strong {
    font-weight: 700;
    color: #efe9d3;
}

/* ==========================================================================
   OS VALORES - 4 principios em grid 2x2
   ========================================================================== */

.cv-pr-valores {
    padding: 88px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcf6 62%, #f7f4e3 100%);
}

.cv-pr-valores-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    list-style: none;
}

/* O filete dourado a esquerda cresce no hover: reforca a leitura de "lista
   de principios" sem precisar de bullet. */
.cv-pr-valor {
    position: relative;
    padding: 32px 30px 32px 34px;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfaf2 100%);
    box-shadow: 0 10px 26px rgba(6, 35, 69, .06);
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

.cv-pr-valor::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, #d2aa4c 0%, rgba(210, 170, 76, .2) 100%);
    transition: top .25s var(--cv-ease), bottom .25s var(--cv-ease);
}

.cv-pr-valor:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(6, 35, 69, .12);
}

.cv-pr-valor:hover::before {
    top: 14px;
    bottom: 14px;
}

svg.cv-pr-valor-ico {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    stroke: #d2aa4c;
}

.cv-pr-valor-h3 {
    margin-bottom: 11px;
    font: 700 19px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
}

.cv-pr-valor p {
    font: 400 16px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #4b5a72;
}

/* ==========================================================================
   PROPOSITO NA PRATICA - foto + frentes institucionais
   ========================================================================== */

.cv-pr-pratica {
    padding: 88px 0;
    background: linear-gradient(180deg, #f7f4e3 0%, #efe9d3 55%, #e9e2c7 100%);
}

.cv-pr-pratica-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    align-items: center;
}

/* Moldura com o filete dourado deslocado atras (mesmo jogo de camadas da
   foto da Biografia). O overflow contem o zoom do hover. */
.cv-pr-pratica-foto {
    position: relative;
    border-radius: 4px;
}

.cv-pr-pratica-foto::before {
    content: "";
    position: absolute;
    top: 22px;
    left: -22px;
    width: 100%;
    height: 100%;
    border: 2px solid #d2aa4c;
    border-radius: 4px;
    pointer-events: none;
}

.cv-pr-pratica-foto img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(6, 35, 69, .2);
}

.cv-pr-pratica-intro {
    max-width: 540px;
    margin-bottom: 32px;
    font: 400 17px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #33415c;
}

.cv-pr-frentes {
    list-style: none;
}

.cv-pr-frente {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(11, 41, 77, .1);
}

.cv-pr-frente:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

svg.cv-pr-frente-ico {
    flex: none;
    width: 27px;
    height: 27px;
    margin-top: 2px;
    stroke: #d2aa4c;
}

.cv-pr-frente-h3 {
    margin-bottom: 7px;
    font: 700 18px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
}

.cv-pr-frente p {
    font: 400 16px/27px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #4b5a72;
}

/* ==========================================================================
   PARA QUEM E - 3 cards sobre fundo azul
   ========================================================================== */

.cv-pr-quem {
    position: relative;
    padding: 88px 0 92px;
    background-color: #062345;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(85% 115% at 15% 0%, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, .04) 42%, rgba(210, 170, 76, 0) 70%),
        linear-gradient(140deg, #0e3560 0%, #072a4f 46%, #051d3a 100%);
    overflow: hidden;
}

.cv-pr-quem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Card de vidro sobre o azul: fundo translucido claro em vez de branco
   chapado, para o degrade da secao continuar aparecendo por baixo. */
.cv-pr-quem-card {
    padding: 34px 28px;
    border: 1px solid rgba(239, 233, 211, .16);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 100%);
    transition: transform .25s var(--cv-ease), border-color .25s var(--cv-ease),
                background-color .25s var(--cv-ease);
}

.cv-pr-quem-card:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 170, 76, .5);
}

svg.cv-pr-quem-ico {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    stroke: #d2aa4c;
}

.cv-pr-quem-h3 {
    margin-bottom: 11px;
    font: 700 19px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #efe9d3;
}

.cv-pr-quem-card p {
    font: 400 16px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .74);
}

/* ==========================================================================
   ASSINATURA - o fecho do PDF institucional como manifesto curto
   ========================================================================== */

.cv-pr-assina {
    padding: 76px 0 80px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcf6 60%, #f7f4e3 100%);
}

.cv-pr-assina-inner {
    max-width: 780px;
    text-align: center;
}

.cv-pr-assina-h2 {
    font-size: 44px;
    line-height: 54px;
    color: #0b294d;
}

.cv-pr-assina-txt {
    margin-top: 20px;
    font: 400 19px/32px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #4b5a72;
}

/* Assinatura da marca Ventura Connect: caixa-alta espacada, em dourado, com
   um filete curto acima para separar do texto. */
.cv-pr-assina-marca {
    position: relative;
    margin-top: 34px;
    padding-top: 28px;
    font: 400 14px/22px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #b8922f;
}

.cv-pr-assina-marca::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 54px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(210, 170, 76, .2) 0%, #d2aa4c 50%, rgba(210, 170, 76, .2) 100%);
}

/* ==========================================================================
   RESPONSIVO
   Layout fluido: so precisa soltar o container, empilhar as grids e reduzir
   os titulos. As mesmas quebras do resto do site (1199 / 991 / 767 / 479).
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-container {
        width: auto;
        max-width: 100%;
        padding: 0 24px;
    }

    .cv-pr-pratica-grid {
        grid-template-columns: 340px 1fr;
        gap: 44px;
    }

    .cv-pr-crenca-h2 {
        font-size: 40px;
        line-height: 52px;
    }

}

@media (max-width: 991px) {

    .cv-pr-h2 {
        font-size: 36px;
        line-height: 42px;
    }

    .cv-pr-crenca-h2 {
        font-size: 34px;
        line-height: 46px;
    }

    .cv-pr-assina-h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .cv-pr-pratica-grid {
        grid-template-columns: 1fr;
    }

    /* Foto no topo, limitada para nao virar uma imagem gigante */
    .cv-pr-pratica-foto {
        max-width: 400px;
        margin: 0 auto 20px;
    }

    /* O filete deslocado sairia da tela no fluxo estreito */
    .cv-pr-pratica-foto::before {
        display: none;
    }

    .cv-pr-quem-cards {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

}

@media (max-width: 767px) {

    .cv-pr-crenca {
        padding: 62px 0 64px;
    }

    .cv-pr-valores,
    .cv-pr-pratica,
    .cv-pr-quem {
        padding: 54px 0;
    }

    .cv-pr-assina {
        padding: 54px 0 58px;
    }

    .cv-pr-h2 {
        font-size: 31px;
        line-height: 38px;
    }

    .cv-pr-crenca-h2 {
        font-size: 29px;
        line-height: 40px;
    }

    .cv-pr-crenca-txt {
        font-size: 16px;
        line-height: 29px;
    }

    .cv-pr-assina-h2 {
        font-size: 30px;
        line-height: 40px;
    }

    /* 2 colunas de valores nao cabem: uma so, com o card mais baixo */
    .cv-pr-valores-lista {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cv-pr-valor {
        padding: 26px 24px 26px 28px;
    }

}

@media (max-width: 479px) {

    .cv-container {
        padding: 0 16px;
    }

    .cv-pr-h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .cv-pr-crenca-h2 {
        font-size: 26px;
        line-height: 36px;
    }

    .cv-pr-assina-h2 {
        font-size: 26px;
        line-height: 36px;
    }

    .cv-pr-intro,
    .cv-pr-pratica-intro {
        font-size: 16px;
        line-height: 28px;
    }

    /* A palavra "Prosperar" nao cabe na linha com esse espacamento */
    .cv-pr-assina-marca {
        letter-spacing: .14em;
    }

}