/* =====================================================================
   VN INVESTIMENTOS · folha de estilo institucional
   Paleta tirada da logo: azul petróleo e ouro. Base clara, tipografia
   com serifa nos títulos e grotesca no texto.
   ===================================================================== */
:root{
  --petroleo:#17384a;
  --petroleo-esc:#0e2634;
  --petroleo-med:#2e5c75;
  --petroleo-claro:#e7eef2;

  --ouro:#b8862b;
  --ouro-claro:#d9ae55;
  --ouro-esc:#8a6318;

  --papel:#ffffff;
  --papel-2:#f7f5f1;
  --papel-3:#efebe4;

  --tinta:#12202a;
  --tinta-2:#4e606c;
  --tinta-3:#77858e;

  --linha:#dfe4e8;
  --linha-forte:#c7d1d8;

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --maxw:1240px;
  --gut:clamp(20px,4.4vw,56px);
  --sec:clamp(64px,8vw,116px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);color:var(--tinta);background:var(--papel);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:16.5px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(184,134,43,.22)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.secao{padding-top:var(--sec);padding-bottom:var(--sec)}
.secao.compacta{padding-top:clamp(48px,5.5vw,76px);padding-bottom:clamp(48px,5.5vw,76px)}
.fundo-papel{background:var(--papel-2)}
.fundo-petroleo{background:var(--petroleo);color:#f4f7f9}
.fundo-petroleo .olho{color:var(--ouro-claro)}
.fundo-petroleo p{color:#c8d6de}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;line-height:1.14;color:var(--petroleo)}
.fundo-petroleo h1,.fundo-petroleo h2,.fundo-petroleo h3{color:#fff}
.h1{font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-.02em}
.h2{font-size:clamp(27px,3.2vw,42px);line-height:1.12}
.h3{font-size:clamp(19px,1.7vw,23px);line-height:1.25}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--tinta-2);max-width:62ch}
p{color:var(--tinta-2)}
strong{color:var(--tinta);font-weight:600}

.olho{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ouro-esc);margin-bottom:20px}
.olho::before{content:"";width:26px;height:2px;background:var(--ouro)}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn svg{width:15px;height:15px}
.btn-primario{background:var(--petroleo);color:#fff}
.btn-primario:hover{background:var(--petroleo-esc)}
.btn-ouro{background:var(--ouro);color:#1a1205}
.btn-ouro:hover{background:var(--ouro-esc);color:#fff}
.btn-linha{border-color:var(--linha-forte);color:var(--petroleo);background:transparent}
.btn-linha:hover{border-color:var(--petroleo);background:var(--papel-2)}
.btn-claro{background:#fff;color:var(--petroleo)}
.btn-claro:hover{background:var(--papel-3)}
.link-seta{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--petroleo);
  padding-bottom:4px;border-bottom:1px solid var(--linha-forte);transition:gap .2s ease,border-color .2s ease,color .2s ease}
.link-seta:hover{gap:15px;border-color:var(--ouro);color:var(--ouro-esc)}

/* ===== topo ===== */
.barra-topo{background:var(--petroleo-esc);color:#b9cad4;font-size:12.5px}
.barra-topo .shell{display:flex;justify-content:space-between;gap:20px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.barra-topo a:hover{color:#fff}
.barra-topo .sep{color:#4a6675;margin:0 10px}

.cabecalho{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha)}
.cabecalho .shell{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:16px;padding-bottom:16px}
.marca{display:inline-flex;align-items:center;gap:12px}
.marca img{height:36px;width:auto}
.marca-txt{display:flex;flex-direction:column;line-height:1.1}
.marca-txt b{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--petroleo)}
.marca-txt span{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta-3)}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-size:14.5px;font-weight:500;color:var(--tinta-2);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.menu a:hover{color:var(--petroleo)}
.menu a.ativo{color:var(--petroleo);border-bottom-color:var(--ouro)}
.acoes-topo{display:flex;align-items:center;gap:12px}
.abre-menu{display:none;background:none;border:1px solid var(--linha-forte);border-radius:2px;padding:10px 14px;
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--petroleo);cursor:pointer}
.menu-mobile{display:none;border-bottom:1px solid var(--linha);background:#fff}
.menu-mobile.aberto{display:block}
.menu-mobile a{display:block;padding:15px 0;font-size:17px;font-weight:500;color:var(--petroleo);border-bottom:1px solid var(--linha)}
.menu-mobile a:last-child{border-bottom:none}

/* ===== hero ===== */
.hero{background:var(--papel-2);border-bottom:1px solid var(--linha);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:url('../img/grafismo-claro.jpg') center/cover no-repeat;
  opacity:.3;pointer-events:none}
.hero .shell{position:relative;z-index:1;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero p.lead{margin-top:22px}
.hero-acoes{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero-nota{margin-top:26px;font-size:13px;color:var(--tinta-3);max-width:46ch}

/* hero com fotografia */
.hero--foto{background:var(--petroleo-esc);border-bottom:none}
.hero--foto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../img/hero-executivos.jpg') center 32%/cover no-repeat}
.hero--foto::after{opacity:1;background:linear-gradient(100deg,
  rgba(9,28,39,.95) 0%,rgba(9,28,39,.9) 34%,rgba(9,28,39,.62) 64%,rgba(9,28,39,.5) 100%)}
.hero--foto .shell{padding-top:clamp(76px,9.5vw,140px);padding-bottom:clamp(64px,8vw,116px)}
.hero--foto .hero-grid{grid-template-columns:minmax(0,1fr);max-width:none}
.hero--foto .olho{color:var(--ouro-claro)}
.hero--foto .h1{color:#fff;max-width:20ch}
.hero--foto p.lead{color:#ccdbe4;max-width:56ch}
.hero--foto .hero-nota{color:#8ba5b3;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;max-width:52ch}
.hero--foto .btn-primario{background:#fff;color:var(--petroleo)}
.hero--foto .btn-primario:hover{background:var(--ouro-claro);color:#1a1205}
.hero--foto .btn-linha{border-color:rgba(255,255,255,.4);color:#fff}
.hero--foto .btn-linha:hover{border-color:var(--ouro);color:var(--ouro-claro);background:transparent}

/* assinatura de credibilidade sob o hero */
.assinatura{background:#fff;border-bottom:1px solid var(--linha)}
.assinatura .shell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.5vw,56px);
  padding-top:clamp(30px,3.4vw,46px);padding-bottom:clamp(30px,3.4vw,46px)}
.assinatura div{position:relative;padding-left:clamp(22px,2.8vw,40px)}
.assinatura div:first-child{padding-left:0}
.assinatura div+div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--linha)}
.assinatura b{display:block;font-family:var(--serif);font-size:clamp(27px,3.1vw,38px);font-weight:600;
  line-height:1;color:var(--petroleo);letter-spacing:-.01em}
.assinatura b::before{content:"";display:block;width:26px;height:2px;background:var(--ouro);margin-bottom:16px}
.assinatura span{display:block;margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--tinta-2);max-width:34ch}

/* ===== hero interno ===== */
.hero-int{background:var(--petroleo);color:#fff;position:relative;overflow:hidden}
.hero-int::after{content:"";position:absolute;inset:0;background:url('../img/grafismo-petroleo.jpg') center/cover no-repeat;
  opacity:.3;pointer-events:none}
.hero-int--foto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-int--foto::after{opacity:1;background:linear-gradient(98deg,
  rgba(14,38,52,.96) 0%,rgba(14,38,52,.88) 40%,rgba(14,38,52,.62) 75%,rgba(14,38,52,.52) 100%)}
.hero-int--foto .shell{padding-top:clamp(64px,7.5vw,108px);padding-bottom:clamp(64px,7.5vw,108px)}
.hero-int--torres::before{background-image:url('../img/torres.jpg')}
.hero-int--brasilia::before{background-image:url('../img/brasilia-16x9.jpg');background-position:center 62%}
.hero-int .shell{position:relative;z-index:1;padding-top:clamp(52px,6vw,84px);padding-bottom:clamp(52px,6vw,84px)}
.hero-int h1{color:#fff;max-width:20ch}
.hero-int p{color:#c3d3dc;margin-top:18px;max-width:62ch;font-size:17.5px}
.trilha{font-size:12.5px;color:#8fa9b6;margin-bottom:22px}
.trilha a:hover{color:#fff}

/* ===== grades ===== */
.cab-secao{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.cab-secao.centro{grid-template-columns:1fr;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.cab-secao.centro .olho{justify-content:center}

.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
.grade-3 .cartao{background:#fff;padding:clamp(26px,2.6vw,34px);transition:background .25s ease}
.grade-3 .cartao:hover{background:var(--papel-2)}
.cartao-num{font-family:var(--serif);font-size:14px;color:var(--ouro);margin-bottom:14px}
.cartao h3{margin-bottom:10px}
.cartao p{font-size:14.5px;line-height:1.6}
.cartao .link-seta{margin-top:18px;font-size:13px}

.lista-dados{border-top:1px solid var(--linha-forte)}
.linha-dado{display:grid;grid-template-columns:200px 1fr;gap:clamp(18px,3vw,48px);padding:24px 0;border-bottom:1px solid var(--linha)}
.linha-dado dt{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.linha-dado dd{font-size:15.5px;color:var(--tinta-2)}

/* números */
.destaque-num{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(32px,4vw,56px);background:#fff;border:1px solid var(--linha);border-top:3px solid var(--ouro)}
.destaque-v{font-family:var(--serif);font-size:clamp(44px,6.4vw,78px);font-weight:600;line-height:1;color:var(--petroleo);letter-spacing:-.02em}
.destaque-l{margin-top:14px;font-size:17px;color:var(--tinta-2);max-width:26ch}
.etiqueta{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ouro-esc);border:1px solid var(--ouro);padding:5px 12px;margin-bottom:18px}
.nota-lateral{font-size:14px;line-height:1.7;color:var(--tinta-2);padding-left:22px;border-left:2px solid var(--ouro)}

.tabela-ops{width:100%;border-collapse:collapse;margin-top:clamp(28px,3.5vw,48px)}
.tabela-ops th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);padding:0 20px 14px 0;border-bottom:1px solid var(--linha-forte)}
.tabela-ops td{padding:22px 20px 22px 0;border-bottom:1px solid var(--linha);vertical-align:top;font-size:15px;color:var(--tinta-2)}
.tabela-ops td.valor{font-family:var(--serif);font-size:clamp(20px,2vw,26px);color:var(--petroleo);font-weight:600;white-space:nowrap}
.tabela-ops tr:hover td{background:var(--papel-2)}

.glossario{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:clamp(32px,4vw,52px)}
.glossario div{background:#fff;padding:24px 20px}
.glossario b{display:block;font-family:var(--serif);font-size:16px;color:var(--petroleo);margin-bottom:8px}
.glossario p{font-size:13px;line-height:1.55}

/* processo */
.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linha);border-top:1px solid var(--linha)}
.etapa{background:#fff;padding:30px 24px 34px}
.etapa span{display:block;font-family:var(--serif);font-size:28px;color:var(--ouro);margin-bottom:14px}
.etapa h3{font-size:18px;margin-bottom:8px}
.etapa p{font-size:14px;line-height:1.55}

/* equipe / sobre */
.bloco-2{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.bloco-2 img.grafismo{width:100%;height:100%;object-fit:cover;border:1px solid var(--linha)}

/* fotografia */
.foto{margin:0}
.foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linha);background:var(--papel-3)}
.foto figcaption{margin-top:13px;padding-left:14px;position:relative;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);line-height:1.5}
.foto figcaption::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1px;background:var(--ouro)}
.bloco-2 .foto img{aspect-ratio:4/3}
.pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:clamp(32px,4vw,52px)}
.pilar{background:#fff;padding:28px}
.pilar h3{font-size:18px;margin-bottom:10px}
.pilar p{font-size:14.5px;line-height:1.6}

.marcas-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,3.5vw,44px)}
.foto-slot{aspect-ratio:4/3;background:var(--papel-3) url('../img/grafismo-retrato.jpg') center/cover;border:1px solid var(--linha);
  display:grid;place-items:end start;padding:16px}
.foto-slot span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);background:rgba(255,255,255,.88);padding:6px 10px}

/* formulário */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.largo{grid-column:1 / -1}
.campo label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.campo input,.campo select,.campo textarea{background:#fff;border:1px solid var(--linha-forte);border-radius:2px;
  padding:13px 14px;font-size:15.5px;transition:border-color .2s ease,box-shadow .2s ease}
.campo textarea{min-height:130px;resize:vertical;line-height:1.6}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-3) 50%),linear-gradient(135deg,var(--tinta-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(23,56,74,.08)}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:#b3452f}
.form-rodape{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-msg{font-size:13.5px;color:var(--tinta-2);min-height:20px}
.form-msg.ok{color:var(--ouro-esc)}
.form-msg.ruim{color:#b3452f}

.ficha{border-top:1px solid var(--linha-forte)}
.ficha div{padding:20px 0;border-bottom:1px solid var(--linha)}
.ficha span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.ficha a,.ficha p{font-size:16px;color:var(--petroleo)}
.ficha a:hover{color:var(--ouro-esc)}

.aviso{font-size:13px;line-height:1.7;color:var(--tinta-3);border-top:1px solid var(--linha);padding-top:20px;margin-top:28px}

/* faixa de credibilidade */
.faixa-cred{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.faixa-cred div{padding:28px 24px;border-right:1px solid var(--linha)}
.faixa-cred div:last-child{border-right:none}
.faixa-cred b{display:block;font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);font-weight:600;color:var(--petroleo)}
.faixa-cred span{display:block;margin-top:6px;font-size:13.5px;color:var(--tinta-2)}

/* chamada final */
.chamada{background:var(--petroleo);color:#fff;position:relative;overflow:hidden}
.chamada::after{content:"";position:absolute;inset:0;background:url('../img/grafismo-petroleo.jpg') center/cover;opacity:.3}
.chamada .shell{position:relative;z-index:1;padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(56px,6vw,90px);
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,56px);align-items:center}
.chamada h2{color:#fff}
.chamada p{color:#c3d3dc;margin-top:14px;max-width:48ch}
.chamada .acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* rodapé */
.rodape{background:var(--petroleo-esc);color:#a8bdc8;padding-top:clamp(48px,5vw,72px)}
.rodape .grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.rodape h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7e99a7;margin-bottom:18px}
.rodape ul{list-style:none;display:grid;gap:11px}
.rodape a{font-size:14px;color:#c6d6df}
.rodape a:hover{color:#fff}
.rodape .sobre p{font-size:14px;line-height:1.7;color:#a8bdc8;margin-top:16px;max-width:36ch}
.rodape .marca-txt b{color:#fff}
.rodape .marca-txt span{color:#7e99a7}
.rodape-legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;font-size:12.5px;color:#7e99a7;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* revelação discreta */
[data-sobe]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
[data-sobe].visivel{opacity:1;transform:none}

/* responsivo */
@media (max-width:1040px){
  .hero-grid,.bloco-2,.cab-secao,.destaque-num,.chamada .shell{grid-template-columns:1fr}
  .chamada .acoes{justify-content:flex-start}
  .grade-3{grid-template-columns:repeat(2,1fr)}
  .etapas{grid-template-columns:repeat(2,1fr)}
  .glossario{grid-template-columns:repeat(3,1fr)}
  .rodape .grade{grid-template-columns:1fr 1fr}
  .rodape .sobre{grid-column:1 / -1}
  .nota-lateral{border-left:0;border-top:2px solid var(--ouro);padding-left:0;padding-top:18px}
}
@media (max-width:760px){
  .menu,.acoes-topo .btn{display:none}
  .abre-menu{display:inline-block}
  .barra-topo .oculta-mobile{display:none}
  .grade-3,.etapas,.pilares,.marcas-foto{grid-template-columns:1fr}
  .glossario{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .linha-dado{grid-template-columns:1fr;gap:6px}
  .faixa-cred{grid-template-columns:1fr}
  .faixa-cred div{border-right:none;border-bottom:1px solid var(--linha)}
  .faixa-cred div:last-child{border-bottom:none}
  .tabela-ops thead{display:none}
  .tabela-ops td{display:block;border:none;padding:4px 0}
  .tabela-ops tr{display:block;padding:20px 0;border-bottom:1px solid var(--linha)}
  .hero-acoes{flex-direction:column}
  .hero-acoes .btn{width:100%;justify-content:center}
  .hero:not(.hero--foto)::after,.hero-int:not(.hero-int--foto)::after,.chamada::after{opacity:.18}
  .assinatura .shell{grid-template-columns:1fr;gap:26px}
  .assinatura div{padding-left:0;padding-top:26px}
  .assinatura div+div::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .assinatura b::before{margin-bottom:12px}
  .hero--foto::after{background:linear-gradient(174deg,rgba(9,28,39,.72) 0%,rgba(9,28,39,.9) 46%,rgba(9,28,39,.95) 100%)}
  .hero-int--foto::after{background:linear-gradient(174deg,rgba(14,38,52,.9),rgba(14,38,52,.95))}
  .barra-topo .shell{justify-content:center}
  .barra-topo .esconde-xs{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  [data-sobe]{opacity:1;transform:none}
}