:root{
  --bg: #ffffff;
  --ink: #171717;
  --muted: #000000;
  --muted-2:#000000;
  --line:#e6e6e6;
  --soft:#f3f3f3;
  --soft-2:#f7f7f7;
  --pill: rgba(255,255,255,.18);
  --pill-border: rgba(255,255,255,.22);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* fonte mais próxima do site original (Framer) */
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  color:var(--ink);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}

.container{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}

/* HERO */
.hero{
  position:relative;
  min-height: 520px;
  height: 64vh;
  max-height: 700px;
  overflow:hidden;
  color:#fff;
}
.hero__bg{
  position:absolute; inset:0;
  /* imagem principal do hero - atualmente usando a imagem da pasta images;
     se você adicionar outra (ex: hero.jpg), basta trocar o caminho aqui */
  background-image: url("./images/background_home.png");
  background-size: cover;
  background-repeat:no-repeat;
  background-position: 50% 0%;
  filter: contrast(1.05) saturate(1.05);
  transform: scale(1.06);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 15% 25%, rgba(0,0,0,.35), rgba(0,0,0,.65)),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:16px 18px;
}
.brand{
  display:none;
}
.brand__img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.nav__pill{
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px;
  border-radius:999px;
  background: var(--pill);
  border: 1px solid var(--pill-border);
  backdrop-filter: blur(10px);
}
.nav__logo-wrapper{
  display:flex;
  align-items:center;
  margin-right:4px;
  padding:0 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.nav__pill .brand__img{
  height:28px;
  width:auto;
  object-fit:contain;
  mix-blend-mode: lighten;
  opacity: 0.95;
}
.nav__pill a{
  display:block;
  padding:10px 16px;
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,.92);
  border-radius:999px;
}
.nav__pill a:hover{
  background: rgba(255,255,255,.10);
}
.hero__content{
  position:relative;
  padding-top: 92px;
}
.hero h1{
  margin:0 0 14px;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight:800;
}
.hero p{
  margin:0 0 18px;
  width:min(560px, 100%);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  font-weight:400;
}
.hero__actions{
  display:flex; gap:10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background:#fff;
  color:#111;
  border-color:#fff;
}
.btn--ghost{
  background: transparent;
  color:#fff;
}
.btn--ghost:hover{background: rgba(255,255,255,.10)}

/* SECTIONS */
.section{padding:56px 0}
.section--intro{background: #ffffff}
.intro{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:28px;
  align-items:start;
}
.intro h2{
  margin:0;
  font-size:22px;
  color:#000;
  font-weight:800;
  letter-spacing:.01em;
}
.intro h3{
  margin:4px 0 0;
  font-size:22px;
  color:#000;
  font-weight:800;
}
.intro p{
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:#000;
}

.section__title{
  text-align:center;
  margin:0;
  font-weight:800;
  letter-spacing:.14em;
  font-size:22px;
  color:#000;
}
.section__title--small{
  font-size:19px;
  letter-spacing:.16em;
}
.section__subtitle{
  text-align:center;
  margin:10px auto 0;
  width:min(720px, 100%);
  color:#000;
  font-size:17px;
  line-height:1.7;
}

/* QUALITY */
.section--quality{
  background: var(--soft);
}
.quality{
  margin-top:36px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:40px;
  align-items:start;
}
.quality__left,
.quality__right{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.quality__item{
  text-align:center;
  padding:0 12px;
}
.quality__item h4{
  margin:10px 0 6px;
  font-size:16px;
  letter-spacing:.06em;
  text-transform:none;
  color:#000;
  font-weight:800;
}
.quality__item p{
  margin:0 auto;
  max-width: 260px;
  font-size:15px;
  line-height:1.65;
  color:#000;
}
.quality__item--photo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.photo{
  width: 520px;
  height: 380px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  /* foto central da seção Política de Qualidade */
  background-image: url("./images/politicadequalidade.avif");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  background-color:#ddd;
}
.icon{
  width:24px;height:24px;
  margin:0 auto;
  opacity:1;
  filter:none;
}
.icon svg{width:24px;height:24px;display:block}
.icon--search,.icon--phone,.icon--check,.icon--star{background:none}

/* SERVICES */
.section--services{
  background: var(--soft-2);
}
.cards{
  margin-top:26px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.card{
  background:#f8f8f8;
  border:1px solid #e8e8e8;
  border-radius: 12px;
  padding:14px 14px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.card h3{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:800;
  color:#000;
}
.card p{
  margin:0;
  font-size:12px;
  color:#000;
  line-height:1.65;
}

/* CLIENTS */
.section--clients{background:#fff;padding-bottom:36px}
.clients__logos{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:18px;
  align-items:center;
}
.logo,
.logo-img{
  width:100%;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.logo{ /* fallback de texto caso alguma logo falte */
  border-radius: 10px;
  color:#000;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}

/* GALLERY (faixa contínua de fotos da equipe) */
.section--gallery{
  padding:32px 0;
  background:#fff;
}
.section--gallery .container{width:min(1280px, calc(100% - 48px))}
/* Carousel */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{
  display:flex;
  width:100%;
  transform: translateX(0);
}
.carousel__slide{flex:0 0 calc(100% / 3)}
.carousel__slide img{
  display:block;
  width:100%;
  height:460px;
  object-fit:cover;
  border-radius:10px;
}
.carousel__control{
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.6);
  border-radius:999px; cursor:pointer;
}
.carousel__control--prev{left:8px}
.carousel__control--next{right:8px}
.carousel__control:hover{background: rgba(0,0,0,.5)}
.carousel__dots{display:flex; gap:8px; justify-content:center; margin-top:10px}
.carousel__dot{width:8px; height:8px; border-radius:999px; border:1px solid #999; background:transparent; cursor:pointer}
.carousel__dot--active{background:#111; border-color:#111}

/* WHY */
.section--why{
  background: var(--soft);
}
.why{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:28px;
  align-items:start;
}
.why__left h2{
  margin:0;
  font-size:24px;
  letter-spacing:.02em;
  font-weight:800;
  color:#000;
  line-height:1.15;
}
.why__right{
  display:grid;
  gap:14px;
}
.why__item{
  display:grid;
  grid-template-columns: 22px 1fr;
  gap:12px;
  align-items:start;
}
.why__icon{
  width:18px;height:18px;
  margin-top:2px;
  border-radius:4px;
  border:2px solid #7f7f7f;
  opacity:.55;
}
.why__item h4{
  margin:0;
  font-size:17px;
  color:#000;
  font-weight:800;
}
.why__item p{
  margin:4px 0 0;
  color:#000;
  font-size:16px;
  line-height:1.6;
}

/* PROJECTS */
.section--projects{background:#fff}
.projects{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.project{
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding:14px 14px 12px;
  background:#fafafa;
  box-shadow: 0 10px 24px rgba(0,0,0,.03);
}
.project h3{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.08em;
  font-weight:800;
  color:#000;
}
.project ul{
  margin:0;
  padding-left:16px;
  color:#000;
  font-size:15px;
  line-height:1.75;
}

/* CONTACT */
.contact{
  position:relative;
  padding:56px 0;
  color:#fff;
  overflow:hidden;
}
.contact__bg{
  position:absolute; inset:0;
  /* imagem de fundo do banner de contato - usar uma foto da equipe ou operação */
  background-image: url("./images/background_home.png");
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  filter: contrast(1.03) saturate(1.03);
  transform: scale(1.05);
}
.contact__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.contact__content{
  position:relative;
}
.contact h2{
  margin:0 0 10px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.01em;
}
.contact p{
  margin:0 0 16px;
  width:min(640px, 100%);
  font-size:16px;
  line-height:1.7;
  color: rgba(255,255,255,.85);
}
.contact__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.contact__chip{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border-radius: 999px;
  background: transparent;
  border:2px solid rgba(255,255,255,.7);
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.contact__chip:hover{background: rgba(255,255,255,.12)}
.contact__chip svg{margin-right:8px}
/* ícones avulsos (whatsapp, localização, etc.) */
.contact__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  color:#fff;
  border:2px solid rgba(255,255,255,.7);
  border-radius:999px;
}
.contact__icon svg{width:18px;height:18px;display:block}
.contact__icon--square{
  border:2px solid rgba(255,255,255,.7);
  border-radius:6px;
}
.contact__icon:hover{background: rgba(255,255,255,.12)}

/* FOOTER */
.footer{
  background:#0f0f0f;
  color: rgba(255,255,255,.7);
  padding:14px 0;
  font-size:15px;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.footer a{color: rgba(255,255,255,.7)}
.footer a:hover{color:#fff}

/* RESPONSIVE */
@media (max-width: 980px){
  .intro, .why{grid-template-columns: 1fr; gap:18px}
  .quality{
    grid-template-columns: 1fr;
    gap:28px;
  }
  .quality__left,
  .quality__right{
    gap:20px;
  }
  .quality__item--photo{
    order: -1;
  }
  .photo{
    width:min(520px, 100%);
    height: 320px;
  }
  .cards{grid-template-columns: repeat(2, 1fr)}
  .projects{grid-template-columns: repeat(2, 1fr)}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .carousel__slide{flex:0 0 50%}
  .carousel__slide img{height: 320px}
  .gallery__img{height: 200px; background-size: 1100px auto;}
  .brand{position:static}
  .nav{justify-content:space-between}
}
@media (max-width: 520px){
  .hero__content{padding-top: 76px}
  .cards{grid-template-columns: 1fr}
  .projects{grid-template-columns: 1fr}
  .gallery{grid-template-columns: 1fr}
  .carousel__slide{flex:0 0 100%}
  .carousel__slide img{height: 240px}
  .gallery__img{height: 220px}
}