:root{--primary:#0F2D46;--accent:#1E5A8A;--light:#eaf3fb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:#0b1220;background:#fff}
.container{width:min(1120px,94%);margin:0 auto;padding:0 12px}
.site-header{position:sticky;top:0;background:var(--primary);color:#fff;z-index:60}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px}
.brand img{height:72px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.site-nav a{color:rgba(230,238,246,1);text-decoration:none;padding:8px 10px;border-radius:6px;font-weight:600;transition:color .12s}



/* Hero slideshow */
.hero{position:relative;height:68vh;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#123}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out}
.slide.show{opacity:1}
.hero-content{position:relative;z-index:3;color:#fff;text-align:left;padding:40px;max-width:920px}
.hero-content h1{margin:0;font-weight:300;font-size:32px}
.hero-content .year{display:block;font-size:64px;font-weight:700;margin-top:6px;color:var(--light)}
.hero-title{font-size:28px;font-weight:300;margin:0;color:#eaf3fb}
.hero-title .highlight{display:block;font-size:72px;font-weight:700;line-height:0.9;color:#fff}
.hero-subtitle{font-size:22px;margin-top:18px;opacity:0;transition:opacity 1s ease-in-out}
.hero-subtitle.fade-in{opacity:1}

/* Sections */
.section{padding:48px 0; text-align:left}
.section-title{font-size:22px;color:var(--primary);margin:12px 0 18px;text-align:left}

/* Carousel */
.carousel{overflow:hidden}
.carousel-track{display:flex;gap:20px;transition:transform .6s ease}
.carousel-item{flex:0 0 calc(33.333% - 13.333px);display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.carousel-item img{max-width:100%;max-height:72px;object-fit:contain}

/* Segments */
.title{ text-align:left; font-size:2.0rem; margin-bottom:20px; color:var(--primary); }
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.segment-card{height:220px;border-radius:8px;overflow:hidden;position:relative;background-size:cover;background-position:center;display:block;text-decoration:none;color:#fff;align-items:flex-end;display:flex}
.segment-card .overlay{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.6));padding:12px;text-align:center}
.segment-card h3{margin:0;font-size:1.25rem}

/* Cases */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-card{border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.case-card img{width:100%;height:220px;object-fit:cover;transition:transform .45s ease}
.case-card:hover img{transform:scale(1.08)}
.case-info{background:var(--primary);color:#fff;padding:12px;text-align:center;font-weight:700}

/* Clients */
.clients-hero{display:flex;gap:24px;align-items:center;justify-content:center;padding:24px 0}

/* Footer */
footer{background:var(--primary);color:#e6eef6;padding:36px 20px}
.footer-left{max-width:360px;text-align:left}
.footer-logo{max-width:160px;margin-bottom:12px}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #0a1f44;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 1000;
}

.navbar .logo img {
  height: 50px;
}



.hero h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
}

.hero .year {
  font-size: 3em;
  font-weight: bold;
  
}

.hero p {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 20px;
}
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.45); /* camada preta semitransparente */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2; /* deixa o texto acima da camada */
}

nav ul li a {
  position: relative;
  padding: 8px 16px;
  transition: color 0.3s ease;
  z-index: 1;
}

nav ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.15); /* retângulo claro e translúcido */
  border-radius: 6px; /* arredondado para ficar moderno */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

nav ul li a:hover::before {
  transform: scaleX(1); /* expande o retângulo no hover */
}

nav ul li a:hover {
  color: #fff; /* deixa o texto mais destacado */
}



/* Responsive */
@media(max-width:1000px){
  .carousel-item{flex:0 0 calc(50% - 10px)}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .segments{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .carousel-item{flex:0 0 calc(100% - 16px)}
  .cases-grid{grid-template-columns:1fr}
  .segments{grid-template-columns:1fr}
  .hero-content .year{font-size:48px}
  .brand img{height:56px}
}