/* ============================================================
   M3 TECHNOLOGY — PROJECT V4
   Implementação fiel ao mockup aprovado (14/08/2026)
   ============================================================ */

:root{
  --p4-navy:#020c1a;
  --p4-navy2:#061a32;
  --p4-blue:#087eff;
  --p4-blue2:#1795ff;
  --p4-line:#087eff;
  --p4-white:#fff;
  --p4-muted:#a8b7ca;
}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .fill-dot{fill:currentColor;stroke:none}

/* ---------- Header ---------- */
.project-header{
  background:linear-gradient(110deg,#020b17 0%,#06182d 58%,#071d36 100%)!important;
  border:0!important;
  box-shadow:none!important;
  position:relative!important;
  z-index:100!important;
}
.project-header::before{display:none!important}
.project-header::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:3px!important;
  background:linear-gradient(90deg,#087eff,#39b3ff 55%,#087eff)!important;
  box-shadow:0 0 14px rgba(8,126,255,.85)!important;opacity:1!important
}
.project-topbar{
  height:38px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;background:rgba(0,0,0,.10)!important
}
.project-topbar-inner{
  height:38px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;color:#c9d5e3!important;font-size:12px!important
}
.project-segments,.project-service{display:flex!important;align-items:center!important;gap:24px!important}
.project-segments span,.project-service span,.project-service a{display:flex!important;align-items:center!important;gap:7px!important;color:#c9d5e3!important;text-decoration:none!important;white-space:nowrap!important}
.project-segments svg{color:#087eff!important;stroke-width:3!important;width:14px!important;height:14px!important}
.project-service svg{width:16px!important;height:16px!important}
.project-service a svg{width:17px!important;height:17px!important}

.project-nav{
  min-height:76px!important;display:grid!important;grid-template-columns:150px auto minmax(320px,420px) auto!important;align-items:center!important;gap:28px!important
}
.project-logo{display:flex!important;align-items:center!important;text-decoration:none!important}
.project-logo img{display:block!important;width:132px!important;height:auto!important;max-height:62px!important;object-fit:contain!important;filter:drop-shadow(0 5px 14px rgba(0,90,255,.15))!important}
.project-links{display:flex!important;align-items:center!important;gap:40px!important;margin:0!important}
.project-links a{color:#fff!important;text-decoration:none!important;font-size:14px!important;font-weight:650!important;display:flex!important;align-items:center!important;gap:6px!important}
.project-links a:hover{color:#6fc2ff!important}
.chevron{font-size:17px!important;color:#c9d5e3!important}

.project-search{
  height:46px!important;margin-left:auto!important;display:flex!important;align-items:center!important;border:1px solid rgba(93,164,226,.32)!important;border-radius:24px!important;background:rgba(4,26,49,.64)!important;overflow:hidden!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)!important
}
.project-search button{
  width:47px!important;height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;background:transparent!important;color:#fff!important;cursor:pointer!important
}
.project-search button svg{width:20px!important;height:20px!important}
.project-search input{
  flex:1!important;min-width:0!important;height:46px!important;padding:0 18px 0 0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font-size:13px!important
}
.project-search input::placeholder{color:#93a8c0!important}

.project-wa{
  height:46px!important;padding:0 25px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;border-radius:16px!important;
  background:linear-gradient(135deg,#078cff,#0876f5)!important;color:#fff!important;text-decoration:none!important;font-weight:800!important;font-size:14px!important;
  box-shadow:0 8px 24px rgba(0,119,255,.28)!important;border:1px solid rgba(255,255,255,.10)!important
}
.project-wa svg{width:20px!important;height:20px!important}
.mobile-menu-btn,.mobile-search-btn,.mobile-wa-btn,.mobile-back-btn{display:none!important}

/* Product header */
.product-project-header .project-nav{grid-template-columns:132px auto minmax(320px,420px) auto!important}
.project-back{display:flex!important;align-items:center!important;gap:9px!important;color:#fff!important;text-decoration:none!important;font-weight:700!important;font-size:14px!important;padding-left:23px!important;border-left:1px solid rgba(255,255,255,.16)!important}
.project-back svg{width:18px!important;height:18px!important}

/* ---------- Hero ---------- */
.project-hero{
  position:relative!important;overflow:hidden!important;min-height:510px!important;padding:0!important;margin:0!important;
  background:linear-gradient(108deg,#010a15 0%,#04142a 52%,#082d58 100%)!important
}
.project-hero::before{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;
  background:radial-gradient(circle at 74% 46%,rgba(0,128,255,.20),transparent 32%)!important
}
.project-hero::after{display:none!important}
.project-hero-grid{
  min-height:510px!important;display:grid!important;grid-template-columns:48% 52%!important;align-items:stretch!important;position:relative!important;z-index:2!important
}
.project-hero-copy{
  padding:70px 18px 58px 0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;position:relative!important;z-index:4!important
}
.project-hero-copy .eyebrow{font-size:16px!important;letter-spacing:.05em!important;color:#168dff!important;margin-bottom:10px!important}
.project-hero-copy h1{
  margin:0!important;max-width:640px!important;color:#fff!important;font-size:61px!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:820!important
}
.project-hero-copy p{
  margin:20px 0 0!important;max-width:610px!important;color:#c2cfdd!important;font-size:19px!important;line-height:1.42!important
}
.project-hero-actions{display:flex!important;align-items:center!important;gap:16px!important;margin-top:30px!important}
.project-primary-btn,.project-secondary-btn{
  min-height:58px!important;padding:0 27px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;border-radius:17px!important;text-decoration:none!important;font-weight:800!important;font-size:15px!important
}
.project-primary-btn{background:linear-gradient(135deg,#078cff,#0876f5)!important;color:#fff!important;box-shadow:0 12px 30px rgba(0,113,255,.26)!important}
.project-primary-btn svg{width:20px!important;height:20px!important}.project-primary-btn svg:last-child{width:19px!important}
.project-secondary-btn{background:rgba(2,13,27,.28)!important;color:#fff!important;border:1px solid rgba(137,195,255,.82)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important}
.project-secondary-btn svg{width:20px!important;height:20px!important}

.project-hero-art{
  position:relative!important;min-width:0!important;margin-right:calc((100vw - min(1160px, calc(100vw - 40px)))/-2)!important;overflow:hidden!important
}
.project-hero-art::before{
  content:""!important;position:absolute!important;left:-2px!important;top:0!important;bottom:0!important;width:31%!important;z-index:2!important;
  background:linear-gradient(90deg,#04142a 0%,rgba(4,20,42,.83) 28%,rgba(4,20,42,0) 100%)!important;pointer-events:none!important
}
.project-hero-art img{
  display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;filter:saturate(1.05) contrast(1.02)!important
}

/* Keep the catalog below airy, but make visual continuity cleaner */
.catalog-section{border-top:0!important}

/* ---------- Benefits / icons closer to mockup ---------- */
.benefits-grid{
  background:#fff!important;border:1px solid #e2e8ef!important;box-shadow:0 12px 34px rgba(7,27,52,.08)!important;color:#142235!important
}
.benefits-grid>div{color:#142235!important;border-right:1px solid #e6ebf1!important}
.benefits-grid span{color:#142235!important;font-weight:650!important}
.benefit-icon{color:#087eff!important}

/* ---------- Mobile header exactly in project spirit ---------- */
@media(max-width:760px){
  .project-topbar{display:none!important}
  .project-nav{
    min-height:68px!important;display:grid!important;grid-template-columns:42px 1fr 42px 48px!important;gap:8px!important;padding-top:0!important;padding-bottom:0!important
  }
  .project-logo{justify-content:center!important}
  .project-logo img{width:105px!important;max-height:52px!important}
  .project-links,.project-wa{display:none!important}
  .mobile-menu-btn,.mobile-search-btn,.mobile-wa-btn,.mobile-back-btn{
    display:flex!important;width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important;border:0!important;background:transparent!important;color:#fff!important;text-decoration:none!important;padding:0!important
  }
  .mobile-menu-btn svg,.mobile-search-btn svg,.mobile-back-btn svg{width:25px!important;height:25px!important}
  .mobile-wa-btn{background:#19c763!important;border-radius:12px!important}
  .mobile-wa-btn svg{width:25px!important;height:25px!important}
  .project-search{
    display:none!important;position:absolute!important;left:14px!important;right:14px!important;top:72px!important;width:auto!important;z-index:120!important;background:#071a30!important;box-shadow:0 14px 30px rgba(0,0,0,.28)!important
  }
  .project-search.mobile-search-open{display:flex!important}
  .project-links.mobile-open{
    display:flex!important;position:absolute!important;top:70px!important;left:14px!important;right:14px!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:9px!important;border:1px solid rgba(70,160,245,.24)!important;border-radius:13px!important;background:#071a30!important;box-shadow:0 18px 36px rgba(0,0,0,.30)!important
  }
  .project-links.mobile-open a{padding:13px!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
  .project-links.mobile-open a:last-child{border-bottom:0!important}
  .product-project-header .project-nav{grid-template-columns:42px 1fr 42px 48px!important}
  .product-project-header .project-logo{grid-column:2!important}
  .product-project-header .mobile-back-btn{display:flex!important;grid-column:1!important;grid-row:1!important}
  .product-project-header .project-back{display:none!important}
  .project-hero{min-height:auto!important}
  .project-hero-grid{min-height:auto!important;grid-template-columns:1fr!important}
  .project-hero-copy{padding:50px 0 34px!important}
  .project-hero-copy h1{font-size:43px!important;line-height:1.00!important}
  .project-hero-copy p{font-size:16px!important}
  .project-hero-actions{flex-wrap:wrap!important}
  .project-primary-btn,.project-secondary-btn{min-height:52px!important;padding:0 19px!important;font-size:14px!important}
  .project-hero-art{height:330px!important;margin:0 -20px!important}
  .project-hero-art::before{top:-1px!important;left:0!important;right:0!important;width:auto!important;height:35%!important;bottom:auto!important;background:linear-gradient(180deg,#04142a 0%,rgba(4,20,42,0) 100%)!important}
}
@media(max-width:430px){
  .project-logo img{width:94px!important}
  .project-hero-copy h1{font-size:38px!important}
  .project-hero-art{height:280px!important}
}