/* Estilos das páginas novas (privacidade, na mídia, blog).
   Apoiados nas variáveis e classes do vixtra.css original. */

.vx-pag{padding:calc(var(--vx-topo, 96px) + 48px) 0 72px}
.vx-pag .wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.vx-pag h1{font-size:clamp(30px,4vw,46px);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
.vx-pag .vx-sub{color:var(--vx-ink-2, #5b6472);max-width:70ch;margin:0 0 28px}

.vx-texto{max-width:78ch}
.vx-texto h2{font-size:clamp(20px,2.4vw,26px);margin:38px 0 12px;letter-spacing:-.01em}
.vx-texto h3{font-size:18px;margin:26px 0 10px}
.vx-texto h4{font-size:16px;margin:0 0 6px}
.vx-texto p{margin:0 0 14px;line-height:1.7}
.vx-texto ul,.vx-texto ol{margin:0 0 16px;padding-left:22px}
.vx-texto li{margin:0 0 8px;line-height:1.65}
.vx-texto blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--vx-brand, #0b1b33);background:rgba(0,0,0,.03);border-radius:8px}
.vx-texto a{text-decoration:underline;text-underline-offset:2px}

.vx-caixas{list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:18px 0 22px}
.vx-caixa{border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:16px;background:#fff}
.vx-linha-do-tempo{margin:18px 0 22px}
.vx-linha-do-tempo .vx-quando{opacity:.65;font-size:13px}
.vx-video{position:relative;padding-top:56.25%;margin:20px 0;border-radius:14px;overflow:hidden}
.vx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vx-cards{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vx-card{border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:18px;background:#fff;height:100%;display:flex;flex-direction:column;gap:8px}
.vx-card h2,.vx-card h3{font-size:17px;margin:0;line-height:1.35}
.vx-card .vx-meta{font-size:13px;opacity:.65}
.vx-card p{margin:0;line-height:1.6}
.vx-card a.vx-cheio{position:static}
.vx-veiculo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}

.vx-volta{display:inline-block;margin-bottom:18px;font-size:14px}
.vx-artigo-meta{font-size:14px;opacity:.7;margin:0 0 26px}

.vx-figura{margin:22px 0}
.vx-figura img{width:100%;height:auto;border-radius:14px;display:block}
.vx-figura figcaption{font-size:13px;opacity:.65;margin-top:8px;line-height:1.5}
.vx-capa{margin:0 0 26px}
.vx-capa img{width:100%;height:auto;border-radius:18px;display:block}
.vx-card .vx-thumb{display:block;margin:-18px -18px 4px}
.vx-card .vx-thumb img{width:100%;height:180px;object-fit:cover;border-radius:16px 16px 0 0;display:block}

/* ===========================================================================
   Correção 1 — geometria da Home.
   As páginas migradas são renderizadas dentro de um contêiner de rota, o que
   quebra os seletores de filho direto de #pg-index no vixtra.css. Aqui as
   MESMAS regras (vixtra.css, linhas 1922–1960) são repetidas com o contêiner
   .vx-page-root no caminho, dentro das MESMAS media queries. Nada do original
   foi alterado; isto é apenas um espelho do caminho de seletor.
   =========================================================================== */
@media (min-width:901px){
  #pg-index>.vx-page-root>.sec{
    min-height:calc(100vh - var(--vx-topo));
    min-height:calc(100dvh - var(--vx-topo));
    display:grid;
    align-content:center;
    align-content:safe center;
    padding-top:clamp(var(--s6),5vh,var(--s10));
    padding-bottom:clamp(var(--s6),5vh,var(--s10));
  }
  #pg-index>.vx-page-root>.sec.auto{min-height:0}
  #pg-index>.vx-page-root>.sec .h2{
    font-size:clamp(1.5rem,min(2.6vw,4.2vh),2.25rem);
  }
  #pg-index>.vx-page-root>.sec .head .lead{
    margin-bottom:clamp(var(--s4),2.5vh,var(--s7));
  }
  #pg-index>.vx-page-root>.sec .head{margin-bottom:clamp(var(--s5),3.5vh,var(--s8))}
}

@media (min-width:901px){
  #pg-index>.vx-page-root>#plataforma .telas3{margin-top:clamp(var(--s5),3vh,var(--s7))}
  #pg-index>.vx-page-root>#plataforma .companion{
    margin-top:clamp(var(--s5),4vh,var(--s9));
    padding-top:clamp(var(--s4),3vh,var(--s8));
  }
}

/* ===========================================================================
   Companion Comex Agent (Home) — a seção acompanha a altura do próprio
   conteúdo: o cartão do chat tem a altura da conversa (sem esticar até a
   coluna de texto) e o bloco não ocupa uma tela inteira como os demais da
   Home — cresce só até o fim do conteúdo. No mobile o .split já é uma
   coluna única e a regra de tela cheia não se aplica.
   =========================================================================== */
@media (min-width:901px){
  #pg-index>.vx-page-root>#plataforma{min-height:0}
  #pg-index>.vx-page-root>#plataforma .companion.split{align-items:flex-start}
  #pg-index>.vx-page-root>#plataforma .iac-wrap{align-self:flex-start}
}

/* Página 404 com a identidade do site */
.vx-404{min-height:70vh;display:grid;align-content:center;padding:96px 0}
.vx-404 .wrap{max-width:720px;margin:0 auto;padding:0 20px;text-align:center}
.vx-404-marca{height:34px;width:auto;margin:0 auto 26px;display:block}
.vx-404 h1{font-size:clamp(28px,4vw,42px);margin:10px 0 12px;letter-spacing:-.02em}
.vx-404 .vx-sub{margin:0 auto 26px;max-width:56ch}
.vx-404-acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===========================================================================
   Correção de encaixe mobile — depoimentos (.car) em /credito e páginas irmãs.
   No 390px, o último cartão não alcançava o início do snap (ficava ~12px
   cortado e o botão Próximo permanecia habilitado). Ancorando o último cartão
   pelo fim, o fim da esteira fica alcançável sem alterar tamanho/estilo.
   =========================================================================== */
@media (max-width:820px){
  .car > .dcard:last-child,
  .car > figure:last-child{scroll-snap-align:end}
}

/* ===========================================================================
   Aviso de cookies / preferências de medição.
   Fixo, discreto, com a tipografia e as cores do site. Não empurra layout.
   =========================================================================== */
.vx-ck{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;padding:14px;pointer-events:none;font-family:var(--vx-font)}
.vx-ck-caixa{pointer-events:auto;max-width:960px;width:100%;background:#fff;color:var(--vx-navy);border:1px solid var(--vx-border);border-radius:14px;box-shadow:0 12px 32px rgba(11,20,45,.18);padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.vx-ck-texto{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5}
.vx-ck-texto a{color:var(--vx-link);text-decoration:underline}
.vx-ck-acoes{display:flex;gap:10px;flex-wrap:wrap}
.vx-ck-b{font:inherit;font-size:14px;line-height:1;padding:11px 16px;border-radius:999px;border:1px solid var(--vx-navy);background:#fff;color:var(--vx-navy);cursor:pointer}
.vx-ck-b:hover{background:var(--vx-cinza-claro)}
.vx-ck-b.pd{background:var(--vx-navy);color:#fff}
.vx-ck-b.pd:hover{background:var(--vx-action-hover)}
.vx-ck-b.link{border-color:transparent;text-decoration:underline;padding-left:6px;padding-right:6px}
.vx-ck-b:focus-visible{outline:3px solid var(--vx-focus-ring);outline-offset:2px}
.vx-ck-prefs{flex:1 1 100%;border-top:1px solid var(--vx-border);margin-top:4px;padding-top:12px;font-size:14px}
.vx-ck-prefs h2{font-size:15px;margin:0 0 8px}
.vx-ck-linha{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.vx-ck-linha p{margin:2px 0 0;font-size:13px;line-height:1.45}
.vx-ck-aba{position:fixed;left:14px;bottom:14px;z-index:9998;font-family:var(--vx-font);font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;border:1px solid var(--vx-border);background:#fff;color:var(--vx-navy);box-shadow:0 6px 18px rgba(11,20,45,.14);cursor:pointer;opacity:.85}
.vx-ck-aba:hover{opacity:1}
.vx-ck-aba:focus-visible{outline:3px solid var(--vx-focus-ring);outline-offset:2px}
@media (max-width:640px){
  .vx-ck-caixa{padding:14px}
  .vx-ck-acoes{width:100%}
  .vx-ck-b{flex:1 1 auto;text-align:center}
}

/* Trade Banking: marcadores ✕ da coluna "nao e" com fundo #F4E8E8 e X #831A1A */
.dcol.nao li i{background:#F4E8E8;color:#831A1A}

/* ===========================================================================
    ESTRUTURA FINANCEIRA · home — composição editorial em dois lados
    Título em cima, dois blocos (FIDC próprio | Série A) separados por um fio vertical.
    Sem fios horizontais entre seções; logos/nomes soltos, sem caixa, sem card.
    =========================================================================== */
  .estr{display:block}
  .estr-topo{max-width:44rem}
  .estr-cols{
    display:grid;grid-template-columns:46fr 54fr;gap:0;
    margin-top:var(--s7)}
  .estr-col{padding-right:var(--s6);display:flex;flex-direction:column}
  .estr-col + .estr-col{
    padding-right:0;padding-left:var(--s6);
    border-left:1px solid rgba(39,170,225,.30)}
.estr-col .estr-cap{margin-top:0}
.estr-col .estr-lead{margin-top:var(--s2, 6px)}
.estr-lbl{display:flex;align-items:center;gap:var(--s4)}
.estr-lbl>div{padding-left:var(--s4);border-left:1px solid rgba(39,170,225,.30)}
.estr-ic{width:40px;height:40px;flex:0 0 auto;
  fill:none;stroke:var(--vx-cyan-600);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.estr .invr{
  display:flex;flex-wrap:wrap;align-items:center;
  margin-top:var(--s6);gap:var(--s5) var(--s5)}
.estr .invr img{display:block;width:auto;height:26px;max-width:100%;
  object-fit:contain}
.estr .invr img[alt="Itaú"]{height:38px}
.estr .invr img[alt="Credit Saison"]{height:34px}
.estr-col + .estr-col .invr img{height:22px}
@media(max-width:1024px){
  .estr-cols{grid-template-columns:1fr}
  .estr-col{padding-right:0}
  .estr-col + .estr-col{
    padding-left:0;margin-top:var(--s6);
    border-left:0}
}
@media(max-width:600px){
  .estr .invr{gap:var(--s4) var(--s5)}
  .estr .invr img{height:24px}
  .estr .invr img[alt="Itaú"]{height:34px}
  .estr .invr img[alt="Credit Saison"]{height:30px}
  .estr-col + .estr-col .invr img{height:20px}
}

/* faixa institucional de investidores do FIDC · quem somos */
.faixainv{
  margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid var(--vx-border)}
.faixainv .estr-cap{margin-top:0}
.faixainv .estr-lead{margin-top:var(--s3)}
.faixainv .invr{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4) var(--s7);margin-top:var(--s6)}
.faixainv .invr span{font-size:var(--fs-bs);font-weight:var(--fw-m);color:var(--vx-navy);white-space:nowrap}

/* faixa institucional em versao clara — usada nas paginas de parceria, onde a
   secao passou a vir logo abaixo do hero navy e dois navys se encostariam. */
.faixa.clara{background:var(--vx-surface-2);color:var(--vx-navy)}
.faixa.clara .vmark{opacity:.05}
.faixa.clara .ov.d{color:var(--vx-cyan-700)}
.faixa.clara .par b{color:var(--vx-cyan-700)}
.faixa.clara .sub{color:var(--vx-ink-2,#4a5560)}

/* Logo do rodape: altura fixa do CSS original + width attribute achatava a imagem.
   +15% proporcional: 24px -> 27.6px, largura acompanha a proporcao do arquivo */
.foot img{width:auto;height:27.6px}

/* Quem Somos — midia: 6 clippings em 3 colunas x 2 linhas, cards compactos */
#pg-quem-somos .midia-6{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
#pg-quem-somos .midia-6 .mit{padding:var(--s5);gap:var(--s2)}
#pg-quem-somos .midia-6 .mit .tt{font-size:var(--fs-bs)}
@media(max-width:900px){#pg-quem-somos .midia-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#pg-quem-somos .midia-6{grid-template-columns:1fr}}