/* Vital Group — identidade extraída do design do Canva e refinada.
   Cores, tipografia e ritmo vivem aqui e SÓ aqui: as páginas não escrevem
   hex na mão. Mudar um token abaixo re-tematiza o site inteiro. */
:root {
  /* azuis */
  --navy-900:#0b1226; --navy-800:#101a34; --navy-700:#1a2545; --navy-600:#2b3757;
  /* dourados */
  --gold:#c9a87c; --gold-light:#dcc19a; --gold-pale:#ece0cc;
  /* --gold-ink existe porque o --gold sobre creme dá 1.9:1 e reprova em AA.
     Todo texto dourado sobre fundo claro usa esta variante (4.8:1). */
  --gold-ink:#8a6a3b;
  /* claros */
  --cream:#f6f3ee; --sand:#efe9dd; --paper:#fdfcfa;
  /* tinta */
  --ink:#141c33; --ink-soft:#525c78; --ink-faint:#8b93a8;
  --line:rgba(20,28,51,.13); --line-gold:rgba(201,168,124,.42);

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1200px;
  --pad:clamp(22px,5vw,68px);
  --sec:clamp(76px,10vw,152px);
  --nav-h:76px;
  --shadow:0 24px 60px -28px rgba(11,18,38,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15.5px,1.02vw,16.5px);
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--gold); color:var(--navy-900)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:400; line-height:1.08;
  letter-spacing:-.005em; margin:0; font-variant-ligatures:common-ligatures;
}
h1{font-size:clamp(3rem,7.6vw,5.6rem)}
h2{font-size:clamp(2.3rem,5vw,3.7rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem)}
p{margin:0}

.lede{
  font-size:clamp(1.02rem,1.2vw,1.14rem); line-height:1.75;
  color:var(--ink-soft); max-width:46ch;
}
.on-dark .lede{color:rgba(246,243,238,.74)}

/* rótulo curto em versalete acima dos títulos */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-size:.7rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:1.4rem;
}
.eyebrow::before{
  content:""; width:clamp(24px,4vw,46px); height:1px; background:currentColor; opacity:.55;
}
.on-dark .eyebrow{color:var(--gold)}

/* numeral editorial das seções */
.numeral{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em;
  color:var(--gold-ink);
}
.on-dark .numeral{color:var(--gold)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.section{padding-block:var(--sec); scroll-margin-top:var(--nav-h)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.75em;
  padding:1.05em 2.3em; border:0; border-radius:0; cursor:pointer;
  font:600 .72rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; background:var(--gold); color:var(--navy-900);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), transform .45s var(--ease);
}
/* preenchimento que sobe: mais discreto que trocar a cor de fundo de uma vez */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--navy-900);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover{color:var(--gold-light); transform:translateY(-2px)}
.btn:hover::after{transform:translateY(0)}
.btn--ghost{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(246,243,238,.4)}
.btn--ghost::after{background:var(--gold)}
.btn--ghost:hover{color:var(--navy-900)}

/* ---------- topo ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:2rem; height:var(--nav-h);
  padding-inline:var(--pad);
  transition:background .45s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease);
}
.nav__logo img{height:44px; width:auto; transition:height .45s var(--ease)}
.nav__links{display:flex; gap:2.1rem; margin-left:auto; align-items:center}
.nav__links a{
  position:relative; color:var(--cream); text-decoration:none;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  opacity:.78; padding-block:.5rem; transition:opacity .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav.is-stuck{
  height:62px; background:rgba(11,18,38,.93); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line-gold);
}
.nav.is-stuck .nav__logo img{height:34px}
.nav__toggle{display:none; margin-left:auto; background:none; border:0; color:var(--cream); padding:.6rem; cursor:pointer}

@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.9rem;
    background:var(--navy-900); padding:2rem var(--pad);
    transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);
  }
  .nav__links.is-open{transform:none}
  .nav__links a{font-size:.95rem; letter-spacing:.14em; opacity:1}
}

/* ---------- capa ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--navy-900)}
.hero__media{position:absolute; inset:0}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(11,18,38,.55) 0%,transparent 22%,transparent 76%,var(--cream) 100%),
    linear-gradient(96deg,rgba(11,18,38,.96) 0%,rgba(11,18,38,.86) 38%,rgba(11,18,38,.38) 100%);
}
.hero__inner{position:relative; z-index:1; width:100%; padding-block:9rem 6rem}
.hero h1{color:var(--gold); max-width:13ch; font-weight:300}
.hero h1 em{font-style:italic; color:var(--gold-light)}
.hero__rule{width:64px; height:1px; background:var(--gold); opacity:.6; margin:2.4rem 0 2rem}
.hero p:not(.eyebrow){color:rgba(246,243,238,.82); margin-bottom:3rem; max-width:42ch; font-size:clamp(1rem,1.2vw,1.12rem)}
.hero .eyebrow{max-width:none}
.hero__scroll{
  position:absolute; bottom:2.4rem; left:50%; translate:-50% 0; z-index:1;
  color:rgba(246,243,238,.5); font-size:.63rem; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.85rem;
}
.hero__scroll i{display:block; width:1px; height:40px; background:linear-gradient(var(--gold),transparent); animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25; transform:scaleY(.55)}50%{opacity:1; transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hero__scroll i{animation:none}}

/* ---------- blocos alternados ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.8rem,7vw,7rem); align-items:center}
.split--flip .split__media{order:-1}
.split__media{position:relative}
.split__media img{width:100%; aspect-ratio:4/5; max-height:600px; object-fit:cover; box-shadow:var(--shadow)}
/* moldura deslocada: detalhe barato que dá acabamento sem pesar */
.split__media::before{
  content:""; position:absolute; inset:-14px -14px 14px 14px; z-index:-1;
  border:1px solid var(--line-gold); pointer-events:none;
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split__media::before{inset:-10px -10px 10px 10px}
}

/* ---------- serviços ---------- */
.services{background:var(--sand)}
.services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(3rem,6vw,4.5rem); background:var(--line-gold);
  border:1px solid var(--line-gold);
}
.service{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:2.4rem;
  min-height:clamp(190px,19vw,250px); padding:clamp(1.7rem,2.6vw,2.4rem);
  background:var(--sand); color:var(--navy-800);
  transition:background .5s var(--ease), color .5s var(--ease);
}
.service__n{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em;
  color:var(--gold-ink); opacity:.85; transition:color .5s var(--ease);
}
.service__t{
  font-family:var(--display); font-size:clamp(1.3rem,1.9vw,1.62rem);
  line-height:1.2; max-width:16ch;
}
.service:hover{background:var(--navy-900); color:var(--gold-light)}
.service:hover .service__n{color:var(--gold)}
@media (max-width:860px){ .services__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .services__grid{grid-template-columns:1fr} }

/* ---------- lista de soluções ---------- */
.checks{list-style:none; margin:2.8rem 0 0; padding:0; border-top:1px solid var(--line)}
.checks li{
  display:flex; gap:1.4rem; align-items:baseline;
  padding-block:1.15rem; border-bottom:1px solid var(--line);
}
.checks b{
  font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
  flex:none; min-width:2.2em;
}
.checks span{font-family:var(--display); font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.35}

/* ---------- equipe ---------- */
.team{position:relative; background:var(--navy-900); color:var(--cream); overflow:hidden}
.team__bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.2}
.team::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(11,18,38,.82),rgba(11,18,38,.94));
}
.team .wrap{position:relative; z-index:1}
.team__head{text-align:center; max-width:62ch; margin-inline:auto}
.team__head .eyebrow{justify-content:center}
.team h2{color:var(--gold); font-weight:300}
.team__head .lede{margin:1.8rem auto 0}
.team__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1.4rem,3vw,2.8rem);
  margin-top:clamp(3.5rem,7vw,6rem);
}
.member{text-align:center; margin:0}
.member__photo{
  position:relative; width:100%; max-width:154px; aspect-ratio:1; margin:0 auto 1.35rem;
}
.member__photo img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  transition:transform .6s var(--ease);
}
/* anel dourado separado da imagem: assim ele pode crescer no hover sem
   distorcer a foto junto */
.member__photo::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(201,168,124,.3);
  transition:inset .6s var(--ease), border-color .6s var(--ease);
}
.member:hover .member__photo img{transform:scale(1.04)}
.member:hover .member__photo::after{inset:-13px; border-color:var(--gold)}
.member__name{
  font-size:.74rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:600; color:var(--cream);
}
.member__role{
  font-family:var(--display); font-style:italic; color:var(--gold);
  font-size:1.06rem; margin-top:.45rem;
}
.member__meta{font-size:.76rem; line-height:1.5; color:rgba(246,243,238,.5); margin-top:.35rem}
@media (max-width:940px){ .team__grid{grid-template-columns:repeat(3,1fr); gap:2.6rem} }
@media (max-width:560px){ .team__grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- história ---------- */
.history__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4.5vw,3.8rem); margin-top:clamp(3rem,6vw,4.5rem);
}
.history__col{padding-top:1.8rem; border-top:1px solid var(--line-gold)}
.history__col .numeral{display:block; margin-bottom:1.2rem}
.history__col p{color:var(--ink-soft); font-size:.98rem}
@media (max-width:860px){ .history__grid{grid-template-columns:1fr} }

/* ---------- contato ---------- */
.contact{background:var(--paper)}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.8rem,6vw,6rem); align-items:start}
.contact__list{margin-top:2.6rem; border-top:1px solid var(--line)}
.contact__item{
  display:flex; gap:1.3rem; align-items:flex-start; text-decoration:none;
  padding-block:1.4rem; border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.contact__item svg{flex:none; width:20px; height:20px; color:var(--gold-ink); margin-top:.35rem}
.contact__item strong{font-weight:500}
.contact__item span{transition:color .3s var(--ease)}
.contact__item:hover{padding-left:.6rem}
.contact__item:hover span{color:var(--gold-ink)}
.contact__card{
  position:relative; background:var(--navy-900); color:var(--cream);
  padding:clamp(2.2rem,4.5vw,3.4rem);
}
.contact__card::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(201,168,124,.22); pointer-events:none;
}
.contact__card h3{color:var(--gold); font-weight:300; margin-bottom:1.1rem}
.contact__card p{color:rgba(246,243,238,.72); font-size:.98rem}
.contact__card .btn{margin-top:2.2rem}
@media (max-width:860px){ .contact__grid{grid-template-columns:1fr} }

/* ---------- rodapé ---------- */
.footer{background:var(--navy-900); color:rgba(246,243,238,.45); padding-block:3.4rem 2.6rem; font-size:.82rem}
.footer__inner{display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between}
.footer img{height:40px; width:auto; opacity:.9}
.footer a{color:var(--gold); text-decoration:none; opacity:.85}
.footer a:hover{opacity:1; text-decoration:underline}

/* ---------- revelação no scroll ---------- */
/* Quem esconde é a classe `.js`, posta pelo próprio script no <head>. Sem
   isso, um site.js que não carregasse deixaria metade das seções invisíveis
   para sempre — o CSS esconde, e é o JS que revela. */
.js .reveal{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
.js .reveal[data-delay="1"]{transition-delay:.12s}
.js .reveal[data-delay="2"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* pular para o conteúdo (acessibilidade de teclado) */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:var(--navy-900); padding:.85rem 1.3rem}
.skip:focus{left:var(--pad); top:.6rem}