:root{
  --navy:#0B2438;
  --navy-2:#0E2E47;
  --cyan:#13B5CF;
  --cyan-2:#0E8FA6;
  --steel:#4A5F73;
  --paper:#F6F8F9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Barlow',sans-serif;
  color:var(--navy);
  background:var(--paper);
  margin:0;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Archivo Expanded',sans-serif;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;}

/* Chevron signature element — derived from the V/G logo mark, used as section dividers */
.chevron{
  width:0;height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:16px solid var(--cyan);
  display:inline-block;
}
.chevron-row{display:flex;align-items:center;gap:6px;}
.chevron-row .chevron:nth-child(2){border-top-color:var(--navy);opacity:.55;}
.chevron-row .chevron:nth-child(3){border-top-color:var(--navy);opacity:.3;}

.section-eyebrow{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--cyan-2);
}

.card-route{
  position:relative;
  border:1px solid #DCE3E7;
  background:#fff;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.card-route:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(11,36,56,.35);
  border-color:var(--cyan);
}
.card-route::before{
  content:"";
  position:absolute; top:0; left:0;
  width:0; height:3px;
  background:var(--cyan);
  transition:width .3s ease;
}
.card-route:hover::before{width:100%;}

.partner-logo{
  filter:grayscale(100%) opacity(.55);
  transition:filter .3s ease, transform .3s ease;
}
.partner-logo:hover{
  filter:grayscale(0%) opacity(1);
  transform:scale(1.05);
}

.nav-link{position:relative; padding-bottom:4px;}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:var(--cyan);
  transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--cyan) !important;}

.page-hero{
  background:
    linear-gradient(120deg, rgba(11,36,56,.95) 25%, rgba(11,36,56,.86) 100%),
    url('images/armazem-logistica.jpg') center / cover no-repeat;
}

.page-hero-formacao{
  background:
    linear-gradient(120deg, rgba(11,36,56,.95) 25%, rgba(11,36,56,.86) 100%),
    url('images/formacao-hero-bg.jpg') center / cover no-repeat;
}

/* Hero sections with an auto-advancing photo slideshow background */
.page-hero-pecas,
.page-hero-solucoes{
  position:relative;
  overflow:hidden;
  background:var(--navy);
}
.hero-media{position:absolute; inset:0;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(11,36,56,.95) 25%, rgba(11,36,56,.86) 100%);
}

.route-line{
  background-image: repeating-linear-gradient(to bottom, var(--cyan) 0 6px, transparent 6px 14px);
  width:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  position:fixed; top:1rem; left:1rem; z-index:100;
  background:var(--cyan); color:var(--navy); padding:.5rem 1rem; border-radius:4px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.is-visible{opacity:1; transform:translateY(0);}

#mobileMenu{transition:max-height .3s ease;}

/* Partner logo marquee */
.partner-strip{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.partner-track{
  display:flex;
  align-items:center;
  gap:1.25rem;
  width:max-content;
  animation:marquee 36s linear infinite;
}
.partner-strip:hover .partner-track{animation-play-state:paused;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* Responsive: reduce partner card image height on small screens */
@media(max-width:639px){
  .p-card img{height:24px;}
  .p-card-light img{height:36px;}
  .p-card{padding:8px 14px;}
  .p-card-light{padding:10px 18px;}
}

/* Footer — dotted world-map background with supplier connection arcs, radiating from Moçambique */
.footer-map{
  background-image: linear-gradient(180deg, rgba(6,15,26,.55) 0%, rgba(6,15,26,.85) 100%), url('images/footer-map-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-pin{
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Language switch (PT/EN) */
.lang-switch{
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:3px;
}
.lang-btn{
  background:transparent;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,.6);
  padding:5px 11px;
  border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.05em;
  transition:background .2s ease,color .2s ease;
}
.lang-btn.active{
  background:var(--cyan);
  color:var(--navy);
}

/* Card on dark (navy) background — footer */
.p-card{
  flex-shrink:0;
  background:rgba(255,255,255,.11);
  border-radius:6px;
  padding:10px 18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease;
}
.p-card:hover{background:rgba(255,255,255,.24);transform:scale(1.06);}
.p-card img{height:32px;width:auto;display:block;object-fit:contain;}
/* Card on light (white/paper) background — parceiros page */
.p-card-light{
  flex-shrink:0;
  background:#fff;
  border-radius:8px;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(11,36,56,.08),0 0 0 1px rgba(11,36,56,.06);
  transition:box-shadow .25s ease,transform .25s ease;
}
.p-card-light:hover{box-shadow:0 6px 20px rgba(11,36,56,.14),0 0 0 1px rgba(19,181,207,.35);transform:scale(1.05);}
.p-card-light img{height:48px;width:auto;display:block;object-fit:contain;}

/* ------------------------------------------------------------------ */
/* Sector / solution rail — sticky wayfinding nav built on the route-line
   motif, paired with full-width editorial rows (replaces boxed card grid
   on servicos.html and areas-fornecimento.html) */
/* ------------------------------------------------------------------ */
.rail-desktop{position:relative;}
.rail-desktop::before{
  content:"";
  position:absolute; top:6px; bottom:6px; left:5px;
  width:2px;
  background-image: repeating-linear-gradient(to bottom, var(--cyan) 0 6px, transparent 6px 14px);
  opacity:.5;
}
.rail-desktop .rail-link{position:relative; display:block; padding-left:1.75rem;}
.rail-desktop .rail-link + .rail-link{margin-top:1.9rem;}
.rail-dot{
  position:absolute; left:0; top:3px;
  width:12px; height:12px; border-radius:999px;
  background:var(--paper); border:2px solid var(--steel);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.rail-num{
  font-size:.68rem;
  color:var(--steel);
  transition:color .2s ease;
}
.rail-title{
  display:block; margin-top:.15rem;
  font-family:'Archivo Expanded',sans-serif;
  font-weight:800; font-size:.82rem; letter-spacing:0;
  text-transform:none;
  color:var(--navy);
  transition:color .2s ease;
}
.rail-desktop .rail-link:hover .rail-title{color:var(--cyan-2);}
.rail-link.is-active .rail-dot{background:var(--cyan); border-color:var(--cyan); transform:scale(1.25);}
.rail-link.is-active .rail-num,
.rail-link.is-active .rail-title{color:var(--cyan-2);}

.rail-mobile{
  display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail-mobile::-webkit-scrollbar{display:none;}
.rail-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  padding:.55rem 1rem; border:1px solid #DCE3E7; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.05em;
  color:var(--steel); white-space:nowrap; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.rail-chip.is-active{background:var(--navy); border-color:var(--navy); color:#fff;}

.solution-row{
  border-top:1px solid #DCE3E7;
  padding:3rem 0;
  display:flex; flex-direction:column; gap:1.75rem;
  scroll-margin-top:10rem;
}
.solution-row:first-child{padding-top:0; border-top:0;}
.solution-media{overflow:hidden; position:relative; background:#DCE3E7; aspect-ratio:16/10;}
.solution-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.solution-row:hover .solution-media img{transform:scale(1.05);}

/* Auto-advancing image slider inside a solution/sector media panel */
.img-slider .slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;
  transition:opacity 1.2s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.img-slider .slide.is-active{opacity:1;}
.img-slider .slide-dots{
  position:absolute; left:0; right:0; bottom:14px;
  display:flex; justify-content:center; gap:6px;
  z-index:2;
}
.img-slider .slide-dot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(11,36,56,.25);
  transition:background .25s ease, width .25s ease;
}
.img-slider .slide-dot.is-active{background:var(--cyan); width:18px; border-radius:4px;}
@media(min-width:1024px){
  .solution-row{flex-direction:row; align-items:center; gap:3.5rem;}
  .solution-row:nth-of-type(even){flex-direction:row-reverse;}
  .solution-media{width:42%; flex-shrink:0; aspect-ratio:4/3;}
  .solution-body{width:58%;}
}