/* assets/css/style.css */
:root{
  --blue:#001F65;
  --orange:#F9743B;
  --white:#ffffff;
  --ink:#111827;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto; position: relative;
    z-index: 1;}
.section{padding:56px 0}

/* HEADER */
.header{ background-image: url('assets/img/ciencia-tecnologia-e-eletronica-impressao-de-desenhos-de-engenharia-eletrica-com-disjuntor-e-mulyimetro_113913-1383.avif'); color:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:34px;font-family:"Montserrat",system-ui,sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.menu a{position:relative;padding:10px 2px;opacity:.95}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:4px;border-radius:999px;background:var(--orange)}
.menu a:hover{opacity:1}
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:10px;padding:10px 12px;font-family:"Montserrat",system-ui,sans-serif;font-weight:900;letter-spacing:.08em}

/* HERO */
.hero{position:relative;min-height:200px;background-image: url(/assets/img/ciencia-tecnologia-e-eletronica-impressao-de-desenhos-de-engenharia-eletrica-com-disjuntor-e-mulyimetro_113913-1383.avif);background-size:cover;background-position:center;color:#fff;align-items:center}
.hero .inner{padding:46px 0}
.hero h1{margin:0 0 8px;font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(34px,4vw,52px);letter-spacing:.22em;font-weight:500;text-transform:uppercase}
.hero .highlight{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(42px,5.8vw,74px);letter-spacing:.16em;font-weight:900;color:var(--orange);text-transform:uppercase;margin:0 0 22px}
.btn-orange{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;padding: 27px 35px;border-radius:999px;font-family:"Montserrat",system-ui,sans-serif;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:13px;border:none}


.hero::before{content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,31,101,0.85); /* azul translúcido */
  z-index: 1;}

/* TITULOS */
.title-center{text-align:center;font-family:"Montserrat",system-ui,sans-serif;color:var(--blue);letter-spacing:.18em;text-transform:uppercase;font-weight:900;margin:0 0 18px}
.p-wide{max-width:980px;margin:0 auto;font-size:18px;line-height:1.95;color:#1f2937;text-align:center}

/* SERVIÇOS HOME */
.services-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.service-card{border:12px solid var(--blue);background:#fff}
.service-card .img-wrap{padding:18px}
.service-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.service-card .bar{background:var(--blue);color:#fff;padding:16px 14px;text-align:center;font-family:"Montserrat",system-ui,sans-serif;font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:12px}

/* ===== NOSSOS CLIENTES ===== */
.clients-row{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 100px;
  flex-wrap:wrap;
}

.client-logo{
  height: 200px;       /* tamanho desktop */
  width:auto;
  max-width:230px;
  object-fit:contain;
}

/* FOOTER */
.footer-bar{
  background:var(--blue);
  padding:6px 0; /* diminui bastante a altura */
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-bar img{
  height: 60 px; 
  width:auto;
}

/* WHATSAPP */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:60;width:74px;height:74px;border-radius:999px;display:grid;place-items:center;background:#1f8f46;box-shadow:0 16px 34px rgba(0,0,0,.24)}
.whatsapp-float svg{width:38px;height:38px;fill:#fff}

/* QUEM SOMOS */
.big-qs{padding:56px 0 18px}
.big-qs h1{margin:0;text-align:center;font-family:"Montserrat",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-weight:900}
.big-qs .q{color:var(--orange);font-size:clamp(72px,9vw,120px)}
.big-qs .s{color:var(--blue);font-size:clamp(58px,7.5vw,96px);font-weight:500}
.about-intro{max-width:980px;text-align:center;font-size:18px;line-height:1.95}
.about-block{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:26px}
.h-sec{font-family:"Montserrat",system-ui,sans-serif;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;font-weight:900;margin:0 0 10px}
.about-text{font-size:17px;line-height:1.9;color:#1f2937}
.photo-right{display:flex;justify-content:center;align-items:flex-start}
.photo-right img{width:min(420px,100%);height:auto}

/* MVVS */
.mvvs{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mvvs-icon{width:90px;height:90px;margin:0 auto 10px}
.mvvs-title{text-align:center;font-family:"Montserrat",system-ui,sans-serif;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;font-weight:900;margin:0 0 10px}
.mvvs-body{font-size:14px;line-height:1.8;color:#1f2937}
.mvvs-body ul{margin:0;padding-left:18px}
.mvvs-body li{margin:6px 0}

/* SERVIÇOS PAGE */
/*.services-page{position:relative;padding-bottom:36px}
.big-title{padding:44px 0 8px}
.big-title .wrap{text-align:center;font-family:"Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.10em}
.big-title .nossos{color:var(--blue);font-weight:500;font-size:clamp(60px,8vw,92px);margin:0}
.big-title .servicos{color:var(--orange);font-weight:900;font-size:clamp(74px,10vw,120px);margin:-8px 0 0}
.service-row{display:grid;grid-template-columns:1fr 1.25fr;gap:36px;align-items:center;margin:26px 0}
.bullets{font-size:18px;line-height:1.9}
.bullets ul{margin:0;padding-left:22px}
.bullets li{margin:6px 0}
.service-media h4{margin:0 0 10px;color:var(--blue);font-family:"Montserrat",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-weight:900}
.service-media img{width:100%}*/

/* CONTATO */
.contact-band{background:var(--orange);padding:56px 0 38px;text-align:center}
.contact-band .t1{font-family:"Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.22em;color:var(--blue);font-weight:500;font-size:clamp(30px,4.2vw,52px);margin:0}
.contact-band .t2{font-family:"Montserrat",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em;color:#fff;font-weight:900;font-size:clamp(42px,5.6vw,72px);margin:10px 0 0}
.contact-main{background:var(--blue);padding:40px 0 24px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr}
.contact-grid .left img{width:100%;height:100%;min-height:420px;object-fit:cover}
.form-card{background:var(--orange);border-radius:56px;padding:30px 26px;margin:0 auto;width:min(520px,100%)}

/* RESPONSIVO */
@media (max-width:960px){
  .menu{display:none;position:absolute;left:0;right:0;top:82px;background:var(--blue);flex-direction:column}
  .menu.open{display:flex}
  .menu-toggle{display:inline-flex}
  .services-grid{grid-template-columns:1fr}
  .clients-row{gap:28px}
  .client-logo{
    height:72px;
    max-width:180px;
  }
  .about-block{grid-template-columns:1fr}
  .mvvs{grid-template-columns:1fr}
  .service-row{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* ===== SOMENTE QUEM SOMOS ===== */

.page-qs .header{
  background-size:cover;
  background-position:center;
}

/* overlay azul só no Quem Somos */
.page-qs .header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,31,101,0.85);
  z-index:0;
}

/* garante que menu e logo fiquem visíveis */
.page-qs .header .container,
.page-qs .header .nav{
  position:relative;
  z-index:1;
}

/* cores do menu */
.page-qs .menu a,
.page-qs .menu-toggle{
  color:#fff;
}

.page-qs .menu a.active::after{
  background:var(--orange);
}

/* menu mobile — só Quem Somos */
@media (max-width:960px){
  .page-qs .menu{
    background:var(--blue);
    z-index:60;
  }
}

/* ===================================================
   PÁGINA SERVIÇOS — AJUSTE FINAL DEFINITIVO
   =================================================== */


.page-services .header{
  background-size:cover;
  background-position:center;
}

/* overlay azul só no Quem Somos */
.page-services .header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,31,101,0.85);
  z-index:0;
}

/* garante que menu e logo fiquem visíveis */
.page-services .header .container,
.page-services .header .nav{
  position:relative;
  z-index:1;
}



/* seção principal */
.page-services .services-page{
  position:relative;
  padding:40px 0 48px;
}


/* faixa azul lateral */
.page-services .services-page::before{
  content:"";
  position:absolute;
  left:0;
  top:350px;
  bottom:0;
  width:56px;
  height: 777px;
  background:var(--blue);
}


/* container afastado da faixa */
.page-services .services-page .container{
  padding-left:72px; /* 56px da faixa + respiro */
}

/* título */
.page-services .big-title{
  padding:40px 0 22px;
}
.page-services .big-title .wrap{
  text-align:center;
  font-family:"Montserrat",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.page-services .big-title .nossos{
  color:var(--blue);
  font-weight:200;
  font-size:clamp(54px,7vw,88px);
  margin:0;
}
.page-services .big-title .servicos{
  color:var(--orange);
  font-size:clamp(72px,9vw,120px);
  margin:-8px 0 0;
}

/* blocos de serviço */
.page-services .service-row{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:36px;
  align-items:flex-start;
  margin:36px 0;
}


/* lista */
.page-services .bullets{
  font-size: 17px;
  line-height: 1.6;
}
.page-services .bullets ul{
  margin: 1px;;
  padding-left:20px;
}
.page-services .bullets li{
  margin:6px 0;
}

/* imagem */
.page-services .service-media h4{
  color:var(--blue);
  font-family:"Montserrat",system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-left: 18px;
}
.page-services .service-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:4px;
}

/* ================= MOBILE ================= */
@media (max-width:960px){

  /* evita qualquer vazamento lateral */
  .page-services{
    overflow-x:hidden;
  }

  
  .page-services .services-page::before{
    width:22px;
    top:220px;          
    height:auto;        
    pointer-events:none;
  }

  /* container centralizado com respiro */
  .page-services .services-page .container{
    padding-left:36px;
    padding-right:16px;
  }

  /* título: central + reduz tracking pra caber */
  .page-services .big-title .wrap{
    letter-spacing:.06em;   /* antes .12em */
    padding:0 6px;          /* respiro pra não cortar */
  }

  .page-services .big-title .nossos,
  .page-services .big-title .servicos{
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .page-services .big-title .servicos{
    margin-top:6px;         /* remove a margem negativa do desktop */
  }

  /* imagem e h4 centralizados */
  .page-services .service-media{
    order:-1;
    width:100%;
  }
  .page-services .service-media h4{
    margin-left:0;
    text-align:center;
  }

  .page-services .service-media img{
    height:auto;
    max-height:220px;
  }

  /* lista melhor no mobile */
  .page-services .bullets{
    font-size:15px;
    line-height:1.75;
  }
}

/* telas bem pequenas (iPhone 14 Pro Max tá ok, mas aqui garante) */
@media (max-width:420px){
  .page-services .services-page::before{
    width:16px;
    top:200px;
  }

  .page-services .services-page .container{
    padding: left 36px;
    padding-right:14px;
  }

  .page-services .big-title .wrap{
    letter-spacing:.04em;
  }

  .page-services .big-title .servicos{
    font-size:clamp(44px,14vw,72px);
  }
}