/* ==========================================================================
   VENTURA CONNECT - CSS exclusivo da pagina /ventura-connect/
   Carregado depois do css.css global (reset, topo, rodape, .reveal, fontes,
   .cv-pg-topo e .cv-cta). Aqui ficam SO as secoes desta pagina.

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

   NAO redeclarar aqui o .cv-pg-topo nem o .cv-cta: os dois moram no css.css
   global e sao compartilhados por todas as internas -- uma copia local
   carrega DEPOIS e faria esta pagina divergir das demais.

   Ritmo da pagina: creme (abertura) -> azul (pilares) -> branco (citacao) ->
   creme (frentes) -> branco (evento) -> branco (Instagram) -> azul (aviso).
   O fecho azul e o proprio bloco de aviso: como esta pagina e de uma marca
   em PRE-LANCAMENTO, o CTA e "quero ser avisado" e nao o Est_CTA.php padrao
   ("Vamos conversar?"), que fala de contratacao.
   ========================================================================== */

/* ==========================================================================
   TITULOS E INTRODUCOES desta pagina
   ========================================================================== */

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

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

/* Sobre fundo azul (pilares e aviso): o .cv-titulo global e azul escuro. */
.cv-vc-h2--claro {
    color: #efe9d3;
}

/* Paragrafo de introducao sob o H2 centralizado das secoes. */
.cv-vc-intro {
    max-width: 720px;
    margin: 0 auto 52px;
    font: 400 17px/29px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #4d5b6e;
    text-align: center;
}

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

/* ==========================================================================
   ABERTURA - definicao do hub + imagem
   Fundo branco quente descendo para o creme da marca, igual a abertura da
   /Biografia.php: separa a secao do .cv-pg-topo azul sem precisar de borda.
   ========================================================================== */

.cv-vc-abre {
    padding: 84px 0 90px;
    background: linear-gradient(180deg, #fdfcf8 0%, #f6f2e6 100%);
}

/* Texto a esquerda, imagem a direita. A coluna da imagem e mais estreita:
   o peso da secao esta no texto que define o que e a Connect. */
.cv-vc-abre-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 64px;
    align-items: center;
}

/* Selo "Em pre-lancamento" -- mesma linguagem do .cv-cta-selo global. */
.cv-vc-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 18px;
    border: 1px solid rgba(210, 170, 76, .5);
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, .05) 100%);
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9a7526;
}

/* A base svg.lucide do global tem especificidade tipo+classe: para colorir
   um icone o seletor precisa ser svg.classe, senao perde na cascata. */
svg.cv-vc-selo-ico {
    width: 14px;
    height: 14px;
    stroke: #9a7526;
}

.cv-vc-corpo {
    font: 400 17px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #435061;
}

.cv-vc-corpo p {
    margin-bottom: 18px;
}

.cv-vc-corpo p:last-child {
    margin-bottom: 0;
}

.cv-vc-corpo strong {
    font-weight: 700;
    color: #0b294d;
}

/* Entrada do texto: corpo maior e filete dourado a esquerda, para o bloco
   nao comecar chapado (mesmo recurso da .cv-bio-corpo-abre). */
.cv-vc-corpo-abre {
    padding-left: 20px;
    border-left: 3px solid #d2aa4c;
    font-size: 19px;
    line-height: 32px;
    color: #0b294d;
}

/* Assinatura da marca: CONECTAR . COLABORAR . PROSPERAR */
.cv-vc-assinatura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(11, 41, 77, .12);
    font: 400 14px/14px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #0b294d;
}

.cv-vc-assinatura-sep {
    color: #d2aa4c;
}

/* Moldura da imagem: overflow escondido para o zoom do hover ficar contido
   (padrao das fotos do projeto). */
.cv-vc-abre-foto {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(6, 35, 69, .18);
}

.cv-vc-abre-foto img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s var(--cv-ease);
}

.cv-vc-abre-foto:hover img {
    transform: scale(1.04);
}

/* A foto e um retrato (2:3). O aspect-ratio prende a moldura mesmo antes de
   a imagem carregar (sem pulo de layout) e o object-fit corta pelo topo, que
   e onde esta o rosto. */
.cv-vc-abre-foto img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 18%;
}

/* Vinheta azul subindo do rodape da foto: escurece justamente a faixa onde a
   legenda se apoia, garantindo contraste do texto claro sobre qualquer foto. */
.cv-vc-abre-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(6, 35, 69, .28) 0%, rgba(6, 35, 69, 0) 45%),
        linear-gradient(0deg, rgba(6, 35, 69, .88) 0%, rgba(6, 35, 69, .45) 18%, rgba(6, 35, 69, 0) 38%);
    pointer-events: none;
}

/* Legenda sobre a foto: diz QUEM e a pessoa e por que ela tem autoridade
   para abrir a rede -- e o que a arte generica anterior nao dizia. */
.cv-vc-abre-legenda {
    position: absolute;
    right: 26px;
    bottom: 22px;
    left: 26px;
    z-index: 1;
    font: 400 13px/19px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .80);
}

.cv-vc-abre-legenda strong {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #efe9d3;
}

/* Filete dourado curto acima do nome, assinatura visual da marca. */
.cv-vc-abre-legenda::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, #d2aa4c 0%, rgba(210, 170, 76, 0) 100%);
}

/* ==========================================================================
   PILARES - Conectar / Colaborar / Prosperar
   Fundo azul com as mesmas 3 camadas do .cv-cta global (trama + brilho
   dourado + degrade), sem imagem para baixar.
   ========================================================================== */

.cv-vc-pilares {
    position: relative;
    padding: 88px 0 96px;
    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(90% 120% at 12% 100%, rgba(210, 170, 76, .20) 0%, rgba(210, 170, 76, .05) 40%, rgba(210, 170, 76, 0) 68%),
        linear-gradient(155deg, #051d3a 0%, #072a4f 46%, #0e3560 100%);
    overflow: hidden;
}

/* Filete dourado no topo, nascendo e morrendo transparente (igual .cv-cta). */
.cv-vc-pilares::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

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

.cv-vc-pilar {
    position: relative;
    padding: 38px 32px 34px;
    border: 1px solid rgba(210, 170, 76, .22);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .015) 100%);
    overflow: hidden;
    transition: transform .25s var(--cv-ease), border-color .25s var(--cv-ease);
}

/* Card sobe 4px no hover (padrao de card do projeto). */
.cv-vc-pilar:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 170, 76, .5);
}

/* Numero grande e decorativo, atras do conteudo. */
.cv-vc-pilar-num {
    position: absolute;
    top: 14px;
    right: 20px;
    font: 400 74px/74px 'Afterglow', Georgia, serif;
    color: rgba(210, 170, 76, .13);
    pointer-events: none;
}

.cv-vc-pilar-ico-caixa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border: 1px solid rgba(210, 170, 76, .4);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, .04) 100%);
}

svg.cv-vc-pilar-ico {
    width: 26px;
    height: 26px;
    stroke: #d2aa4c;
}

.cv-vc-pilar-titulo {
    margin-bottom: 12px;
    font: 400 26px/30px 'Afterglow', Georgia, serif;
    color: #efe9d3;
}

.cv-vc-pilar-txt {
    font: 400 15px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .74);
}

/* ==========================================================================
   CITACAO - fala da Cida publicada no @venturaconnect
   ========================================================================== */

/* REFEITA: antes era uma caixa creme clara sobre fundo branco -- o momento
   mais fraco da pagina, apesar de carregar a melhor frase dela. Agora e uma
   faixa ESCURA de largura total: a frase vira respiro entre duas secoes
   claras (pilares azul -> cita escura seria repetir, por isso a cita fica
   entre o azul dos pilares e o creme das frentes, com tom proprio, mais
   profundo, quase preto-azulado). Sem caixa, sem borda: so a fala. */
.cv-vc-cita-secao {
    position: relative;
    padding: 96px 0 100px;
    background-color: #041b34;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(120% 140% at 50% 0%, rgba(210, 170, 76, .13) 0%, rgba(210, 170, 76, 0) 58%),
        linear-gradient(180deg, #03142a 0%, #041b34 45%, #03162b 100%);
    overflow: hidden;
}

/* Sombra interna no topo: como a secao dos pilares (azul) vem logo acima,
   sem isso as duas faixas escuras se encostavam e a divisa sumia. */
.cv-vc-cita-secao::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Filete dourado no topo, igual ao das demais secoes escuras da pagina. */
.cv-vc-cita-secao::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

/* Aspa gigante de marca d'agua. Fica ATRAS do texto (z-index 0 contra o 1 da
   figure) e usa a Afterglow, a mesma serifada dos titulos do site. */
.cv-vc-cita-marca {
    position: absolute;
    top: -66px;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
    font: 400 340px/1 'Afterglow', Georgia, serif;
    color: rgba(210, 170, 76, .07);
    pointer-events: none;
    user-select: none;
}

.cv-vc-cita {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cv-vc-cita-txt {
    margin-bottom: 34px;
    font: 400 38px/56px 'Afterglow', Georgia, serif;
    color: #efe9d3;
}

/* O trecho que carrega a ideia central ganha o dourado da marca. */
.cv-vc-cita-txt em {
    font-style: normal;
    color: #d2aa4c;
}

.cv-vc-cita-assina {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Risco dourado no lugar da foto: a mesma imagem ja aparece no bloco do
   Instagram logo abaixo, e repeti-la aqui enfraquecia as duas. */
.cv-vc-cita-risco {
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, #d2aa4c 100%);
}

.cv-vc-cita-nome {
    font: 400 14px/20px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .62);
    text-align: left;
}

.cv-vc-cita-nome strong {
    display: block;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    color: #efe9d3;
}

/* ==========================================================================
   FRENTES - a rede que ja existe (Grupo de Empresarios, Floripa, Golf Rosa)
   ========================================================================== */

.cv-vc-frentes {
    padding: 84px 0 92px;
    background: linear-gradient(180deg, #f6f2e6 0%, #fdfcf8 100%);
}

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

.cv-vc-frente {
    display: flex;
    flex-direction: column;
    padding: 36px 30px 30px;
    border: 1px solid rgba(11, 41, 77, .10);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(6, 35, 69, .05);
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

.cv-vc-frente:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(6, 35, 69, .11);
}

.cv-vc-frente-ico-caixa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #0b294d 0%, #062345 100%);
}

svg.cv-vc-frente-ico {
    width: 24px;
    height: 24px;
    stroke: #d2aa4c;
}

/* Cargo/papel acima do nome da frente: e o dado de autoridade. */
.cv-vc-frente-papel {
    margin-bottom: 8px;
    font: 400 11px/11px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9a7526;
}

.cv-vc-frente-titulo {
    margin-bottom: 12px;
    font: 400 23px/29px 'Afterglow', Georgia, serif;
    color: #0b294d;
}

/* margin-top:auto empurra o link para o rodape do card: com textos de
   alturas diferentes, os tres links continuam alinhados entre si. */
.cv-vc-frente-txt {
    margin-bottom: 22px;
    font: 400 15px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #435061;
}

.cv-vc-frente-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 4px 0;
    font: 400 14px/20px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
    transition: color .25s var(--cv-ease);
}

.cv-vc-frente-link:hover {
    color: #9a7526;
}

svg.cv-vc-frente-link-ico {
    width: 17px;
    height: 17px;
    stroke: #d2aa4c;
}

/* ==========================================================================
   EVENTO - Golf & Negocios (23/10, Costao Golf Ville)
   ========================================================================== */

.cv-vc-evento {
    padding: 0 0 88px;
    background: #fdfcf8;
}

/* Caixa clara sobre o fundo claro: quem separa e a borda dourada a esquerda
   e a sombra, nao uma cor de fundo diferente. */
.cv-vc-evento-caixa {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 38px;
    align-items: center;
    padding: 40px 44px;
    border: 1px solid rgba(11, 41, 77, .10);
    border-left: 4px solid #d2aa4c;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(6, 35, 69, .07);
}

/* Bloco de data em azul, no lugar de um icone de calendario generico. */
.cv-vc-evento-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 132px;
    border-radius: 4px;
    background: linear-gradient(160deg, #0b294d 0%, #062345 100%);
    color: #efe9d3;
}

.cv-vc-evento-dia {
    font: 400 54px/54px 'Afterglow', Georgia, serif;
    color: #d2aa4c;
}

.cv-vc-evento-mes {
    margin-top: 4px;
    font: 400 13px/13px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.cv-vc-evento-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font: 400 11px/11px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9a7526;
}

svg.cv-vc-evento-tag-ico {
    width: 14px;
    height: 14px;
    stroke: #9a7526;
}

.cv-vc-evento-titulo {
    margin-bottom: 12px;
    font-size: 34px;
    line-height: 40px;
}

.cv-vc-evento-txt {
    margin-bottom: 14px;
    font: 400 16px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #435061;
}

.cv-vc-evento-txt strong {
    font-weight: 700;
    color: #0b294d;
}

.cv-vc-evento-local {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font: 400 14px/20px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #6b7889;
}

svg.cv-vc-evento-local-ico {
    width: 16px;
    height: 16px;
    stroke: #d2aa4c;
}

/* ==========================================================================
   INSTAGRAM - cartao de convite ao perfil (SEM grade de publicacoes)

   A grade de posts foi removida em 09/09/2026: eram copias estaticas, que
   nunca poderiam cumprir a promessa de "ultimas postagens". O bloco virou
   um convite -- avatar, bio e o que a pessoa encontra la -- e nao exige
   mais nenhuma manutencao manual. Ver o comentario no VenturaConnect.php.
   ========================================================================== */

/* FAIXA DE LARGURA TOTAL com fundo proprio. As secoes vizinhas sao claras
   (branco/creme), entao aqui entra o azul profundo da marca com uma malha
   de "rede" por cima -- o bloco passa a se destacar como um respiro escuro
   antes do fecho, em vez de se dissolver no fundo das outras.

   As 4 camadas sao todas CSS (nada para baixar):
     1. trama diagonal de 6px (textura)
     2. malha de pontos de 26px (sugere os nos de uma rede)
     3. brilho dourado nascendo embaixo, no centro
     4. degrade azul de base

   TOM: bem mais PROFUNDO que o do .cv-vc-aviso, que vem logo depois e
   tambem e azul. Com os dois no mesmo #062345 as duas faixas viravam um
   bloco escuro so, sem divisa visivel -- por isso aqui o azul e quase
   preto (#02101f -> #062544) e o aviso segue no azul institucional. */
.cv-vc-insta {
    position: relative;
    padding: 90px 0 96px;
    background-color: #03142a;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(rgba(210, 170, 76, .16) 1px, rgba(210, 170, 76, 0) 1px),
        radial-gradient(90% 130% at 50% 100%, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, .03) 42%, rgba(210, 170, 76, 0) 70%),
        linear-gradient(160deg, #02101f 0%, #051f3a 48%, #062544 100%);
    background-size: auto, 26px 26px, auto, auto;
    overflow: hidden;
}

/* Filete dourado no topo da faixa (assinatura das secoes escuras do site). */
.cv-vc-insta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

/* CARTAO DE PERFIL, agora sobre a faixa escura: vidro fosco claro em cima do
   azul, no lugar do cartao branco -- ver o comentario no VenturaConnect.php.

   SEM max-width: o cartao acompanha o .cv-container (1170px), ocupando toda
   a largura util da secao. */
.cv-vc-insta-cartao {
    position: relative;
    padding: 46px 48px 44px;
    border: 1px solid rgba(210, 170, 76, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    text-align: center;

    /* -webkit- junto: sem ele o Safari nao aplica o desfoque. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.cv-vc-insta-cabeca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
}

/* Anel degrade em volta do avatar, citando o anel de story do Instagram.
   O padding do anel e que cria a coroa colorida; o fundo branco do <img>
   separa a foto do degrade. */
.cv-vc-insta-avatar-anel {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d2aa4c 0%, #b8922f 40%, #0b294d 100%);
}

.cv-vc-insta-avatar {
    display: block;
    width: 78px;
    height: 78px;
    border: 3px solid #03142a;   /* casa com o fundo escuro da faixa */
    border-radius: 50%;
    object-fit: cover;
}

.cv-vc-insta-quem {
    text-align: left;
}

.cv-vc-insta-titulo {
    margin-bottom: 4px;
    font-size: 32px;
    line-height: 38px;
    color: #efe9d3;              /* o .cv-titulo global e azul: aqui inverte */
}

.cv-vc-insta-arroba {
    font: 400 15px/20px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #d2aa4c;
    transition: opacity .25s var(--cv-ease);
}

.cv-vc-insta-arroba:hover {
    opacity: .7;
}

/* Botao dourado solido: e a acao principal da secao e precisa saltar do
   fundo escuro (o vazado de antes sumia sobre o azul).

   CENTRALIZACAO: com o cartao ocupando os 1170px do container, o
   `text-align:center` do pai nao bastava para prender o botao no meio.
   Ele agora e `display:flex` com `width:fit-content` + `margin:0 auto`,
   que centra a caixa de verdade, seja qual for a largura do cartao. */
.cv-vc-insta-btn {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: 100px;
    background: linear-gradient(180deg, #e7ad14 0%, #c9930c 100%);
    font: 700 15px/15px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #062345;
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

/* Botao sobe 2px no hover (padrao de botao do projeto). */
.cv-vc-insta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(210, 170, 76, .26);
}

svg.cv-vc-insta-btn-ico {
    width: 18px;
    height: 18px;
    stroke: #062345;
}

.cv-vc-insta-bio {
    max-width: 560px;
    margin: 0 auto 30px;
    font: 400 16px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .80);
}

/* O QUE A PESSOA ENCONTRA NO PERFIL. Alinhada a esquerda dentro do cartao
   centralizado: texto corrido de varias linhas fica dificil de ler quando
   centralizado, entao so o bloco e centralizado, nao as linhas. */
.cv-vc-insta-itens {
    display: flex;
    width: fit-content;      /* mesma razao do botao: centra a caixa */
    flex-direction: column;
    gap: 14px;
    margin: 0 auto 32px;
    padding: 26px 30px;
    border-top: 1px solid rgba(210, 170, 76, .20);
    border-bottom: 1px solid rgba(210, 170, 76, .20);
    text-align: left;
}

.cv-vc-insta-itens li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font: 400 15px/24px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .82);
}

/* ARMADILHA do Lucide: a base `svg.lucide { fill:none; stroke:currentColor }`
   tem especificidade tipo+classe -- o seletor descendente abaixo vence e
   deixa o dourado explicito. */
.cv-vc-insta-itens li svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    stroke: #d2aa4c;
}

/* ==========================================================================
   AVISO DE LANCAMENTO - fecho da pagina
   Mesmas 3 camadas do .cv-cta global. Substitui o Est_CTA.php nesta pagina:
   a marca ainda nao lancou, entao o pedido e "quero ser avisado".
   ========================================================================== */

.cv-vc-aviso {
    position: relative;
    padding: 88px 0 96px;
    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(90% 120% at 12% 100%, rgba(210, 170, 76, .20) 0%, rgba(210, 170, 76, .05) 40%, rgba(210, 170, 76, 0) 68%),
        linear-gradient(155deg, #051d3a 0%, #072a4f 46%, #0e3560 100%);
    overflow: hidden;
    text-align: center;
}

.cv-vc-aviso::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

/* Halo dourado difuso atras do conteudo (decorativo, sem captura de clique
   -- o .cv-vc-aviso-inner abaixo recebe o z-index). */
.cv-vc-aviso::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 170, 76, .12) 0%, rgba(210, 170, 76, 0) 62%);
    pointer-events: none;
}

.cv-vc-aviso-inner {
    position: relative;
    z-index: 1;
}

.cv-vc-aviso-ico-caixa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border: 1px solid rgba(210, 170, 76, .45);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, .04) 100%);
}

svg.cv-vc-aviso-ico {
    width: 27px;
    height: 27px;
    stroke: #d2aa4c;
}

.cv-vc-aviso-txt {
    max-width: 660px;
    margin: 0 auto 32px;
    font: 400 17px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .82);
}

.cv-vc-aviso-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ==========================================================================
   RESPONSIVO
   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 abaixo e curto. Os breakpoints acompanham os do projeto:
   1199 (tablet) / 991 (menu hamburguer) / 767 (uma coluna) / 479.
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-vc-abre-grid {
        grid-template-columns: 1fr 380px;
        gap: 44px;
    }

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

    .cv-vc-pilares-grid,
    .cv-vc-frentes-grid {
        gap: 20px;
    }

    .cv-vc-pilar {
        padding: 32px 24px 28px;
    }

    .cv-vc-frente {
        padding: 30px 24px 26px;
    }

    .cv-vc-evento-caixa {
        padding: 34px 32px;
        gap: 28px;
    }

}

@media (max-width: 991px) {

    .cv-vc-abre {
        padding: 62px 0 66px;
    }

    /* Imagem passa a vir DEPOIS do texto e ocupa a largura toda. */
    .cv-vc-abre-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .cv-vc-pilares,
    .cv-vc-aviso {
        padding: 66px 0 72px;
    }

    .cv-vc-frentes {
        padding: 62px 0 68px;
    }

    /* 3 cards nao cabem: viram 1 coluna, ja que o texto de cada um e longo. */
    .cv-vc-pilares-grid,
    .cv-vc-frentes-grid {
        grid-template-columns: 1fr;
    }

    /* O numero decorativo perde sentido empilhado: sai. */
    .cv-vc-pilar-num {
        display: none;
    }

    .cv-vc-cita-txt {
        font-size: 30px;
        line-height: 45px;
    }

    .cv-vc-cita-marca {
        top: -48px;
        font-size: 250px;
    }

    .cv-vc-insta-cartao {
        padding: 40px 36px 38px;
    }

}

@media (max-width: 767px) {

    .cv-vc-h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .cv-vc-intro {
        margin-bottom: 38px;
        font-size: 16px;
        line-height: 27px;
    }

    .cv-vc-corpo-abre {
        font-size: 17px;
        line-height: 29px;
    }

    /* Bloco de data acima do texto, centralizado. */
    .cv-vc-evento-caixa {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px;
        text-align: center;
    }

    .cv-vc-evento-data {
        width: 112px;
        height: 112px;
        margin: 0 auto;
    }

    .cv-vc-evento-tag,
    .cv-vc-evento-local {
        justify-content: center;
    }

    .cv-vc-evento-titulo {
        font-size: 28px;
        line-height: 34px;
    }

    /* No celular a cabeca do cartao empilha e tudo centraliza. */
    .cv-vc-insta-cartao {
        padding: 34px 24px 32px;
    }

    .cv-vc-insta-cabeca {
        flex-direction: column;
        gap: 14px;
    }

    .cv-vc-insta-quem {
        text-align: center;
    }

    /* No celular a lista usa a largura toda do cartao (o fit-content do
       desktop deixaria a caixa estreita e desalinhada). */
    .cv-vc-insta-itens {
        width: 100%;
        padding: 22px 0;
    }

    /* Botoes empilhados ocupam a largura toda: alvo de toque confortavel. */
    .cv-vc-aviso-botoes {
        flex-direction: column;
    }

    .cv-vc-aviso-botoes .cv-cta-btn {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 479px) {

    .cv-vc-abre {
        padding: 48px 0 52px;
    }

    .cv-vc-pilares,
    .cv-vc-frentes,
    .cv-vc-aviso {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    .cv-vc-assinatura {
        gap: 10px;
        font-size: 12px;
        letter-spacing: .14em;
    }

    .cv-vc-cita-secao {
        padding: 66px 0 70px;
    }

    .cv-vc-cita-txt {
        font-size: 24px;
        line-height: 37px;
    }

    .cv-vc-cita-marca {
        top: -30px;
        font-size: 160px;
    }

    /* Assinatura empilhada: o risco dourado acima do nome. */
    .cv-vc-cita-assina {
        flex-direction: column;
        gap: 10px;
    }

    .cv-vc-cita-nome {
        text-align: center;
    }

    .cv-vc-insta-avatar {
        width: 64px;
        height: 64px;
    }

    .cv-vc-insta-titulo {
        font-size: 26px;
        line-height: 32px;
    }

}