/* ==========================================================================
   Vantis Partners — Folha de estilo compartilhada (site + blog)
   Marca: navy #0B1F3A / #14284A · apoio #5B6470 · claros #EDEFF4 / #F4F2ED
   Fontes: Cormorant Garamond (serif) + Jost (sans)
   ========================================================================== */

:root{
  --navy:#0B1F3A;
  --navy-2:#14284A;
  --navy-3:#081627;
  --grey:#5B6470;
  --ink:#3a4453;
  --mist:#EDEFF4;
  --cream:#F4F2ED;
  --line:rgba(255,255,255,.14);
  --line-dark:#e7e9ef;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--navy);background:#fff;line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:.2px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--grey)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;letter-spacing:1.2px;text-transform:uppercase;padding:15px 30px;border-radius:2px;transition:.25s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:#fff;color:var(--navy);font-weight:500}
.btn-primary:hover{background:var(--mist);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:#fff;font-weight:500}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s cubic-bezier(.2,.7,.3,1),padding .35s cubic-bezier(.2,.7,.3,1);padding:18px 0}
header.scrolled{background:rgba(11,31,58,.96);box-shadow:0 1px 0 var(--line);backdrop-filter:saturate(140%) blur(4px);padding:13px 0}
header.solid{background:rgba(11,31,58,.98)}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{height:34px;display:block;transition:height .35s cubic-bezier(.2,.7,.3,1)}
header.scrolled .brand img{height:29px}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav ul li:not(:last-child) a{position:relative}
.nav ul li:not(:last-child) a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:#fff;transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nav ul li:not(:last-child) a:hover::after{right:0}
.nav ul a{color:rgba(255,255,255,.82);font-size:14px;letter-spacing:.4px;transition:color .2s}
.nav ul a:hover{color:#fff}
.nav .cta-top{border:1px solid rgba(255,255,255,.4);padding:9px 18px;border-radius:2px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;transition:.25s}
.nav .cta-top:hover{background:#fff;color:var(--navy);transform:translateY(-1px)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}

/* ---------- Hero (home) ---------- */
.hero{background:linear-gradient(155deg,#0B1F3A 0%,#14284A 60%,#0e2140 100%);color:#fff;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
   radial-gradient(circle at 82% 30%,rgba(91,100,112,.20),transparent 42%),
   radial-gradient(circle at 12% 88%,rgba(20,40,74,.55),transparent 40%);pointer-events:none}
.hero-inner{position:relative;z-index:2;padding:150px 0 96px;display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start;width:100%}
.hero-copy .eyebrow{color:rgba(237,239,244,.66)}
.hero h1{font-size:clamp(36px,5vw,60px);color:#fff;max-width:none;margin:20px 0 22px}
.hero p.lead{font-size:clamp(17px,2.1vw,20px);color:rgba(237,239,244,.82);font-weight:300;max-width:50ch;margin-bottom:34px}
.hero .btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .tagline{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(237,239,244,.72);border-left:2px solid rgba(255,255,255,.28);padding-left:16px}

/* Entrada suave dos elementos do hero ao carregar a página */
.hero-copy .eyebrow,.hero-copy h1,.hero-copy p.lead,.hero-copy .btns,.hero-copy .tagline,.hero-emblem{
  opacity:0;transform:translateY(16px);animation:vp-fade-up .8s cubic-bezier(.2,.7,.3,1) forwards}
.hero-copy .eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.15s}
.hero-copy p.lead{animation-delay:.28s}
.hero-copy .btns{animation-delay:.4s}
.hero-copy .tagline{animation-delay:.5s}
.hero-emblem{animation-delay:.35s}
@keyframes vp-fade-up{to{opacity:1;transform:none}}

/* Emblem panel (balances the right side) */
.hero-emblem{border:1px solid rgba(255,255,255,.16);border-radius:6px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));padding:44px 40px;backdrop-filter:blur(2px);box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.hero-emblem .mono{height:62px;margin-bottom:26px;opacity:.96}
.hero-emblem .em-divider{width:44px;height:2px;background:rgba(255,255,255,.4);margin-bottom:24px}
.hero-emblem ul{list-style:none}
.hero-emblem li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.10);color:#fff}
.hero-emblem li:last-child{border-bottom:0}
.hero-emblem li .idx{font-family:var(--serif);font-size:14px;color:rgba(237,239,244,.55);min-width:22px}
.hero-emblem li .lbl{font-family:var(--serif);font-size:21px;letter-spacing:.3px}
.hero-emblem li .desc{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.3px;color:rgba(237,239,244,.6);margin-top:2px}

/* ---------- Sections ---------- */
section.block{padding:104px 0}
.section-head{max-width:760px;margin-bottom:56px}
.section-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 0}
.section-head p{color:var(--grey);font-size:18px;margin-top:18px}
.rule{width:46px;height:2px;background:var(--navy);opacity:.9}

.about{background:var(--cream)}
.about .lead-para{font-family:var(--serif);font-size:clamp(22px,3vw,30px);line-height:1.4;color:var(--navy);max-width:22ch;font-weight:500}
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
.about-grid p{color:var(--ink);font-size:16.5px;margin-bottom:18px}
.about-grid p:last-child{margin-bottom:0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line-dark);border-radius:4px;padding:36px 30px;transition:.3s}
.card:hover{border-color:var(--navy);box-shadow:0 18px 40px -22px rgba(11,31,58,.4);transform:translateY(-4px)}
.card .num{font-family:var(--serif);font-size:15px;color:var(--grey);letter-spacing:2px}
.card h3{font-size:25px;margin:14px 0 12px}
.card p{color:var(--grey);font-size:15.5px}

.how{background:var(--navy);color:#fff}
.how .section-head h2{color:#fff}
.how .section-head p{color:rgba(237,239,244,.7)}
.how .rule{background:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{border-top:2px solid var(--line);padding-top:26px}
.step .st-num{font-family:var(--serif);font-size:15px;color:rgba(237,239,244,.5);letter-spacing:2px}
.step h3{font-size:22px;color:#fff;margin:8px 0 12px}
.step p{color:rgba(237,239,244,.72);font-size:15.5px}

.sectors-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sector{border:1px solid var(--line-dark);border-radius:4px;padding:30px;background:var(--mist)}
.sector h3{font-size:21px;margin-bottom:8px}
.sector p{color:var(--grey);font-size:15px}

.lead-sec{background:var(--cream)}
.lead-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.lead-grid .name{font-family:var(--serif);font-size:32px;color:var(--navy)}
.lead-grid .role{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin:6px 0 22px}
.lead-grid p{color:var(--ink);font-size:16.5px;margin-bottom:16px}
.lead-grid .lk{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.5px;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:2px}

.contact{background:linear-gradient(160deg,#0B1F3A 0%,#14284A 100%);color:#fff;text-align:center}
.contact h2{font-size:clamp(30px,4vw,46px);color:#fff;max-width:18ch;margin:0 auto 20px}
.contact p.sub{color:rgba(237,239,244,.8);font-size:18px;max-width:46ch;margin:0 auto 38px}
.contact-meta{margin-top:40px;color:rgba(237,239,244,.7);font-size:14px;letter-spacing:.5px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.contact-meta a{color:rgba(237,239,244,.9);border-bottom:1px solid rgba(255,255,255,.3)}

/* ---------- Footer ---------- */
footer{background:var(--navy-3);color:rgba(237,239,244,.6);padding:52px 0 40px;font-size:13.5px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-top img{height:30px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:rgba(237,239,244,.7);letter-spacing:.4px}
.foot-links a:hover{color:#fff}
.foot-note{margin-top:24px;line-height:1.7;max-width:72ch}
.foot-bottom{margin-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(237,239,244,.4)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);transition:.25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- Blog hub (listing) ---------- */
.blog-hero{background:linear-gradient(155deg,#0B1F3A 0%,#14284A 100%);color:#fff;padding:160px 0 70px}
.blog-hero .eyebrow{color:rgba(237,239,244,.66)}
.blog-hero h1{font-size:clamp(34px,4.6vw,52px);color:#fff;margin:16px 0 18px;max-width:20ch}
.blog-hero p{color:rgba(237,239,244,.8);font-size:19px;max-width:56ch}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 0}
.filters button{font-family:var(--sans);font-size:13px;letter-spacing:.6px;padding:9px 18px;border-radius:2px;border:1px solid var(--line-dark);background:#fff;color:var(--navy);cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--navy)}
.filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;background:#fff;transition:.3s}
.post-card:hover{box-shadow:0 22px 48px -26px rgba(11,31,58,.45);transform:translateY(-4px);border-color:#d6d9e2}
.post-cover{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#0B1F3A,#14284A);color:#fff;padding:24px;display:flex;align-items:flex-end;overflow:hidden}
.post-cover::after{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;background:radial-gradient(circle,rgba(91,100,112,.35),transparent 65%)}
.post-cover .cov-cat{position:absolute;top:18px;left:24px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(237,239,244,.85)}
.post-cover .cov-title{position:relative;z-index:2;font-family:var(--serif);font-size:23px;line-height:1.2}
.post-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-body .meta{font-size:12.5px;letter-spacing:.5px;color:var(--grey);text-transform:uppercase;margin-bottom:12px}
.post-body h3{font-size:22px;margin-bottom:10px}
.post-body p{color:var(--grey);font-size:15px;margin-bottom:18px}
.post-body .read{margin-top:auto;font-size:13.5px;letter-spacing:.6px;color:var(--navy);font-weight:500}
.post-body .read:hover{text-decoration:underline}

/* ---------- Micro-interação em links com seta ---------- */
a:hover .vp-arrow{transform:translateX(4px)}
.vp-arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.3,1)}

/* ---------- Entrada suave ao rolar a página ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1;transform:none}
.reveal-stagger .card,.reveal-stagger .step,.reveal-stagger .sector{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-stagger.in-view .card,.reveal-stagger.in-view .step,.reveal-stagger.in-view .sector{opacity:1;transform:none}
.reveal-stagger.in-view .card:nth-child(2),.reveal-stagger.in-view .step:nth-child(2),.reveal-stagger.in-view .sector:nth-child(2){transition-delay:.08s}
.reveal-stagger.in-view .card:nth-child(3),.reveal-stagger.in-view .step:nth-child(3),.reveal-stagger.in-view .sector:nth-child(3){transition-delay:.16s}
.reveal-stagger.in-view .card:nth-child(4),.reveal-stagger.in-view .sector:nth-child(4){transition-delay:.24s}
.reveal-stagger.in-view .card:nth-child(5),.reveal-stagger.in-view .sector:nth-child(5){transition-delay:.32s}
.reveal-stagger.in-view .card:nth-child(6),.reveal-stagger.in-view .sector:nth-child(6){transition-delay:.4s}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px;padding:130px 0 72px}
  .hero-emblem{max-width:460px}
}
@media(max-width:880px){
  .about-grid,.lead-grid{grid-template-columns:1fr;gap:34px}
  .cards,.steps,.sectors-list,.post-grid{grid-template-columns:1fr}
  .nav ul{display:none}
  .nav ul.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:rgba(11,31,58,.98);padding:8px 0}
  .nav ul.open li{width:100%}
  .nav ul.open a{display:block;padding:14px 28px}
  .menu-toggle{display:block}
  section.block{padding:74px 0}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy .eyebrow,.hero-copy h1,.hero-copy p.lead,.hero-copy .btns,.hero-copy .tagline,.hero-emblem{animation:none;opacity:1;transform:none}
  .reveal,.reveal-stagger .card,.reveal-stagger .step,.reveal-stagger .sector{opacity:1;transform:none;transition:none}
}