/* Vital Group — identidade extraída do design do Canva.
   Cores, tipografia e espaçamento 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 {
  --navy-900:#0e1730; --navy-800:#16203d; --navy-700:#1f2745; --navy-600:#2a3455;
  --gold:#c9a87c; --gold-light:#dbbf94; --gold-soft:#e6d3b3;
  /* --gold-dark 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-dark:#8a6a3b;
  --cream:#f4f1ec; --sand:#eeead6; --paper:#fbfaf8;
  --ink:#1a2340; --ink-soft:#4a5470; --line:rgba(26,35,64,.12);

  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1180px; --pad:clamp(20px,5vw,64px);
  --sec:clamp(64px,9vw,128px);
  --shadow:0 18px 50px -20px rgba(14,23,48,.35);
}

*,*::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.05vw,17px);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,.serif{font-family:var(--serif); font-weight:400; line-height:1.14; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6.2vw,4.1rem); margin:0}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem); margin:0}
h3{font-size:clamp(1.05rem,1.6vw,1.3rem); margin:0}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.lede{font-size:clamp(1rem,1.25vw,1.12rem); color:var(--ink-soft); max-width:52ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.9em; border:0; border-radius:2px; cursor:pointer;
  font:600 .78rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; background:var(--gold); color:var(--navy-900);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover{background:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow)}
.btn:focus-visible{outline:3px solid var(--navy-900); outline-offset:3px}
.btn--ghost{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(244,241,236,.45)}
.btn--ghost:hover{background:rgba(244,241,236,.1); box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- topo ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--pad); transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav__logo img{height:46px; width:auto; transition:height .3s ease}
.nav__links{display:flex; gap:1.9rem; margin-left:auto; align-items:center}
.nav__links a{
  color:var(--cream); text-decoration:none; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; opacity:.85;
  padding-block:.4rem; border-bottom:1px solid transparent; transition:.2s;
}
.nav__links a:hover{opacity:1; border-bottom-color:var(--gold)}
.nav.is-stuck{background:rgba(14,23,48,.94); backdrop-filter:blur(10px); padding-block:.55rem; box-shadow:0 1px 0 rgba(201,168,124,.25)}
.nav.is-stuck .nav__logo img{height:36px}
.nav__toggle{display:none; margin-left:auto; background:none; border:0; color:var(--cream); padding:.5rem; cursor:pointer}

@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--navy-900); padding:2rem var(--pad);
    transform:translateX(100%); transition:transform .35s ease;
  }
  .nav__links.is-open{transform:none}
  .nav__links a{font-size:1rem}
}

/* ---------- hero ---------- */
.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(100deg,rgba(14,23,48,.95) 0%,rgba(14,23,48,.82) 42%,rgba(14,23,48,.42) 100%);
}
.hero__inner{position:relative; z-index:1; width:100%; padding-block:8rem 4rem}
.hero h1{color:var(--gold); max-width:14ch}
.hero p{color:rgba(244,241,236,.9); margin:1.6rem 0 2.4rem; max-width:44ch; font-size:clamp(1rem,1.3vw,1.15rem)}
.hero__scroll{
  position:absolute; bottom:2rem; left:50%; translate:-50% 0; z-index:1;
  color:rgba(244,241,236,.55); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero__scroll span{display:block; width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ---------- blocos alternados ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.split--flip .split__media{order:-1}
.split__media img{width:100%; height:100%; object-fit:cover; border-radius:2px; box-shadow:var(--shadow)}
@media (max-width:820px){ .split{grid-template-columns:1fr} .split--flip .split__media{order:0} }

.eyebrow{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:600; margin-bottom:1.1rem;
}
.on-dark .eyebrow{color:var(--gold)}

/* ---------- serviços ---------- */
.services{background:var(--sand)}
.services__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:clamp(2.5rem,5vw,4rem)}
.service{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(150px,15vw,210px); padding:2rem 1.5rem;
  background:var(--gold-soft); color:var(--navy-800);
  font-family:var(--serif); font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.35;
  transition:background .3s ease, transform .3s ease;
}
/* alterna os três tons de dourado do design original, em xadrez */
.service:nth-child(6n+2),.service:nth-child(6n+4){background:var(--gold-light)}
.service:nth-child(6n+3),.service:nth-child(6n+6){background:var(--gold)}
.service:hover{background:var(--navy-800); color:var(--gold-light); transform:translateY(-3px); position:relative; z-index:1; box-shadow:var(--shadow)}
@media (max-width:820px){ .services__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .services__grid{grid-template-columns:1fr} }

/* ---------- lista de soluções ---------- */
.checks{list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:1.15rem}
.checks li{display:flex; gap:1rem; align-items:center; font-family:var(--serif); font-size:1.02rem}
.checks svg{flex:none; width:30px; height:30px; color:var(--gold-dark)}

/* ---------- 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:.28}
.team::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(14,23,48,.72),rgba(14,23,48,.88))}
.team .wrap{position:relative; z-index:1}
.team h2{color:var(--gold); text-align:center}
.team__lede{text-align:center; margin:1.4rem auto 0; max-width:60ch; color:rgba(230,211,179,.92)}
.team__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(3rem,6vw,5rem);
}
.member{text-align:center}
.member img{
  width:100%; max-width:170px; aspect-ratio:1; margin:0 auto .95rem; border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,168,124,.35), 0 14px 32px -14px rgba(0,0,0,.7);
  transition:transform .35s ease, box-shadow .35s ease;
}
.member:hover img{transform:translateY(-5px); box-shadow:0 0 0 2px var(--gold), 0 20px 40px -14px rgba(0,0,0,.8)}
.member__name{font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--cream)}
.member__role{font-family:var(--serif); color:var(--gold); font-size:.95rem; margin-top:.35rem}
.member__meta{font-size:.82rem; color:rgba(244,241,236,.6); margin-top:.15rem}
@media (max-width:900px){ .team__grid{grid-template-columns:repeat(3,1fr); gap:2.2rem} }
@media (max-width:520px){ .team__grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- história ---------- */
.history__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:clamp(2.5rem,5vw,4rem)}
.history__col{padding:clamp(1.8rem,3vw,2.6rem); background:var(--gold-soft); color:var(--navy-800)}
.history__col:nth-child(2){background:var(--gold-light)}
.history__col:nth-child(3){background:var(--gold)}
@media (max-width:820px){ .history__grid{grid-template-columns:1fr} }

/* ---------- contato ---------- */
.contact{background:var(--paper)}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start}
.contact__list{display:grid; gap:1.5rem; margin-top:2.2rem}
.contact__item{display:flex; gap:1.1rem; align-items:flex-start; text-decoration:none}
.contact__item svg{flex:none; width:22px; height:22px; color:var(--gold-dark); margin-top:.25rem}
.contact__item span{transition:color .2s}
.contact__item:hover span{color:var(--gold-dark)}
.contact__card{background:var(--navy-900); color:var(--cream); padding:clamp(2rem,4vw,3rem); border-radius:2px}
.contact__card h3{color:var(--gold); margin-bottom:.9rem}
.contact__card p{color:rgba(244,241,236,.8); font-size:.98rem}
.contact__card .btn{margin-top:1.8rem}
@media (max-width:820px){ .contact__grid{grid-template-columns:1fr} }

/* ---------- rodapé ---------- */
.footer{background:var(--navy-900); color:rgba(244,241,236,.55); padding-block:3rem 2.4rem; font-size:.85rem}
.footer__inner{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between}
.footer img{height:44px; width:auto}
.footer a{color:var(--gold); text-decoration:none}
.footer a:hover{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(26px); transition:opacity .8s ease, transform .8s ease}
.js .reveal.is-in{opacity:1; transform:none}
@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:.8rem 1.2rem}
.skip:focus{left:var(--pad); top:.6rem}