/* ============================================================
   M3 TECHNOLOGY — PREMIUM V2
   Implementação mais fiel ao preview aprovado
   ============================================================ */
:root{
  --m3-navy:#04101f;
  --m3-navy2:#07192d;
  --m3-blue:#087df7;
  --m3-blue2:#0a9cff;
  --m3-line:rgba(42,151,255,.6);
  --m3-text:#eef6ff;
  --m3-muted:#9db0c8;
}

.site-header{
  position:relative!important;
  z-index:60!important;
  background:linear-gradient(110deg,var(--m3-navy),var(--m3-navy2))!important;
  border:0!important;
  box-shadow:0 10px 30px rgba(0,16,38,.16)!important;
}
.site-header::before{display:none!important}
.site-header::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:2px!important;
  background:linear-gradient(90deg,transparent,var(--m3-blue2) 20%,var(--m3-blue) 80%,transparent)!important;
  opacity:.95!important;
}
.utility-bar{
  min-height:30px!important;background:rgba(0,0,0,.12)!important;border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.utility-inner{
  min-height:30px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;
  color:var(--m3-muted)!important;font-size:11px!important;letter-spacing:.015em!important;
}
.utility-inner>div{display:flex!important;gap:24px!important;align-items:center!important}

.site-header .premium-nav{
  min-height:76px!important;display:flex!important;align-items:center!important;gap:26px!important;
}
.site-header .logo-image-link{display:flex!important;align-items:center!important;flex:0 0 auto!important;text-decoration:none!important}
.site-header .logo-image-link img{width:104px!important;height:auto!important;max-height:56px!important;object-fit:contain!important;filter:drop-shadow(0 6px 16px rgba(0,95,255,.18))!important}
.site-header nav{margin:0!important;display:flex!important;gap:28px!important;align-items:center!important}
.site-header nav a,.site-header .back-link{color:var(--m3-text)!important;text-decoration:none!important;font-weight:700!important;font-size:14px!important}
.site-header nav a:hover,.site-header .back-link:hover{color:#73c1ff!important}

.header-search{
  margin-left:auto!important;width:min(340px,30vw)!important;height:42px!important;display:flex!important;align-items:center!important;
  overflow:hidden!important;border:1px solid rgba(79,169,255,.32)!important;border-radius:14px!important;background:rgba(6,28,53,.72)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important
}
.header-search input{
  flex:1!important;min-width:0!important;height:100%!important;border:0!important;outline:0!important;background:transparent!important;
  color:#fff!important;padding:0 14px!important;font-size:13px!important
}
.header-search input::placeholder{color:#8297b2!important}
.header-search button{
  width:44px!important;height:42px!important;border:0!important;background:transparent!important;color:#fff!important;font-size:22px!important;cursor:pointer!important
}
.site-header .header-wa{
  flex:0 0 auto!important;margin:0!important;padding:12px 18px!important;border-radius:13px!important;
  background:linear-gradient(135deg,#0789ff,#0871eb)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 8px 22px rgba(0,113,255,.24)!important;font-weight:800!important
}
.product-nav .back-link{padding-left:20px!important;border-left:1px solid rgba(255,255,255,.15)!important}

/* HOME: integração visual real do header com o hero */
body:not(:has(.product-page)) .hero{
  margin-top:0!important;border-top:0!important;
  background:
    radial-gradient(circle at 72% 45%,rgba(0,144,255,.32),transparent 20%),
    radial-gradient(circle at 72% 45%,rgba(0,91,255,.16),transparent 39%),
    linear-gradient(115deg,#020b16 0%,#061a31 62%,#0b2b50 100%)!important;
  position:relative!important;overflow:hidden!important
}
body:not(:has(.product-page)) .hero::after{
  content:""!important;position:absolute!important;width:540px!important;height:540px!important;right:7%!important;top:50%!important;
  transform:translateY(-50%)!important;border-radius:50%!important;border:1px solid rgba(32,150,255,.11)!important;
  box-shadow:0 0 0 65px rgba(32,150,255,.035),0 0 0 135px rgba(32,150,255,.025)!important;pointer-events:none!important
}
.hero .container{position:relative!important;z-index:2!important}
.hero-actions .btn:first-child{
  background:linear-gradient(135deg,#0789ff,#0871eb)!important;color:#fff!important;border-color:#0b8cff!important;
  box-shadow:0 10px 28px rgba(0,118,255,.22)!important
}
.hero-actions .btn.secondary{
  background:rgba(255,255,255,.02)!important;color:#fff!important;border:1px solid rgba(134,194,255,.72)!important
}

/* PRODUCT: reduz o excesso de branco e aproxima do preview */
body:has(.product-page){
  background:linear-gradient(180deg,#f5f9fe 0,#fff 230px)!important;
}
body:has(.product-page) .product-page{
  background:transparent!important;padding-top:34px!important
}
.product-page .container.product-detail{
  padding:22px!important;border-radius:22px!important;background:rgba(255,255,255,.82)!important;
  box-shadow:0 12px 40px rgba(9,33,65,.045)!important;border:1px solid #e7eef6!important;
}
.product-page .description-section{
  background:#fff!important;border:1px solid #e7eef6!important;border-radius:18px!important;padding:26px!important;
  box-shadow:0 10px 30px rgba(9,33,65,.035)!important
}
.product-page .spec-section{
  background:#fff!important;border:1px solid #e7eef6!important;border-radius:18px!important;padding:26px!important;
  box-shadow:0 10px 30px rgba(9,33,65,.035)!important
}

/* Benefits */
.product-benefits{padding:20px 0 34px!important;background:#fff!important}
.benefits-grid{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;overflow:hidden!important;border-radius:18px!important;
  background:linear-gradient(110deg,#061322,#08223d)!important;border:1px solid rgba(13,126,247,.3)!important;
  box-shadow:0 15px 38px rgba(5,24,48,.12)!important
}
.benefits-grid>div{
  min-height:88px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;
  padding:16px!important;color:#fff!important;border-right:1px solid rgba(255,255,255,.09)!important
}
.benefits-grid>div:last-child{border-right:0!important}
.benefits-grid strong{font-size:27px!important;color:#0b8cff!important}
.benefits-grid span{font-size:14px!important;line-height:1.35!important}

/* footer */
.premium-footer, body:not(:has(.product-page)) footer{
  background:linear-gradient(110deg,#04101f,#07192d)!important;color:#aab9cd!important;border-top:1px solid rgba(8,125,247,.38)!important
}
.premium-footer-inner, body:not(:has(.product-page)) .footer{
  min-height:88px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important
}
.premium-footer .logo-image-link img{width:74px!important;height:auto!important}
.premium-footer a, body:not(:has(.product-page)) footer a{color:#aab9cd!important;text-decoration:none!important}

/* mobile */
@media(max-width:900px){
  .utility-inner>div span:first-child{display:none!important}
  .site-header .premium-nav{gap:14px!important}
  .site-header .logo-image-link img{width:88px!important}
  .header-search{width:min(280px,34vw)!important}
  .site-header nav{gap:15px!important}
}
@media(max-width:700px){
  .utility-bar{display:none!important}
  .site-header .premium-nav{min-height:66px!important}
  .site-header nav{display:none!important}
  .header-search{margin-left:auto!important;width:44px!important;border:0!important;background:transparent!important}
  .header-search input{display:none!important}
  .header-search button{font-size:25px!important}
  .site-header .header-wa{padding:10px 12px!important;font-size:0!important}
  .site-header .header-wa::after{content:"◉"!important;font-size:22px!important}
  .product-nav .back-link{margin-right:auto!important;padding-left:12px!important;font-size:12px!important}
  .benefits-grid{grid-template-columns:1fr 1fr!important}
  .benefits-grid>div{border-bottom:1px solid rgba(255,255,255,.08)!important}
}
@media(max-width:480px){
  .site-header .logo-image-link img{width:76px!important}
  .product-nav .back-link{max-width:130px!important;white-space:nowrap!important}
  .benefits-grid{grid-template-columns:1fr!important}
  .premium-footer-inner{flex-direction:column!important;justify-content:center!important;padding:22px 0!important}
}


/* ============================================================
   M3 TECHNOLOGY — PREMIUM V3 FINAL
   Refinamentos finais de acabamento sobre a V2 aprovada
   ============================================================ */

/* Mais precisão no header */
.site-header .premium-nav{
  max-width:1180px !important;
}
.site-header .logo-image-link img{
  transform:translateY(1px);
}
.header-search{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}
.header-search:focus-within{
  border-color:rgba(58,166,255,.78) !important;
  background:rgba(6,31,59,.95) !important;
  box-shadow:0 0 0 3px rgba(8,125,247,.10),0 8px 22px rgba(0,41,88,.16) !important;
}

/* Hero: mais profundidade, sem alterar textos nem estrutura */
body:not(:has(.product-page)) .hero{
  min-height:470px !important;
}
body:not(:has(.product-page)) .hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) !important;
  background-size:64px 64px !important;
  mask-image:linear-gradient(to right,transparent 34%,#000 70%,transparent 100%) !important;
  opacity:.45 !important;
}
.hero .device-card{
  border-color:rgba(135,197,255,.28) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(88,165,235,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 44px rgba(0,34,80,.20),
    0 0 46px rgba(0,140,255,.08) !important;
  backdrop-filter:blur(8px) !important;
}
.hero .orb{
  filter:saturate(1.08) !important;
  opacity:.92 !important;
}

/* Catálogo: cards mais refinados sem mudar a grade */
.catalog-section .product-card{
  border-color:#e4eaf1 !important;
  box-shadow:0 8px 28px rgba(13,35,64,.045) !important;
}
.catalog-section .product-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 16px 38px rgba(13,35,64,.085) !important;
}
.catalog-section .product-image{
  background:linear-gradient(180deg,#f7f9fc,#f1f5f9) !important;
}
.catalog-section .card-price{
  letter-spacing:-.02em !important;
}

/* Página de produto: menos sensação de caixas pesadas */
.product-page .container.product-detail,
.product-page .description-section,
.product-page .spec-section{
  border-color:#e8edf4 !important;
  box-shadow:0 8px 26px rgba(9,33,65,.035) !important;
}
.product-page .container.product-detail{
  padding:18px !important;
}
.product-page .description-section,
.product-page .spec-section{
  padding:24px !important;
}
.product-page .description-section .description-body{
  color:#536276 !important;
}
.product-page .description-section .description-body br + br{
  margin-top:16px !important;
}
.product-page .spec-table{
  box-shadow:none !important;
  border-color:#e7ecf2 !important;
}
.product-page .detail-copy .btn.wide{
  box-shadow:0 10px 22px rgba(5,19,36,.11) !important;
}
.product-page .detail-copy .btn.wide:hover{
  transform:translateY(-1px) !important;
}

/* Miniaturas: seleção/foco mais elegante */
.product-page .gallery-thumbs > button{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
.product-page .gallery-thumbs > button:hover,
.product-page .gallery-thumbs > button:focus{
  transform:translateY(-2px) !important;
}

/* Ícones lineares desenhados em CSS */
.benefit-icon{
  position:relative !important;
  display:block !important;
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  color:#0b8cff !important;
  border:2px solid currentColor !important;
  border-radius:7px !important;
  box-sizing:border-box !important;
}
.icon-truck::before{
  content:"" !important;
  position:absolute !important;
  left:4px !important; right:4px !important; bottom:6px !important;
  height:8px !important; border:2px solid currentColor !important; border-radius:2px !important;
}
.icon-truck::after{
  content:"••" !important; position:absolute !important; left:4px !important; bottom:-8px !important;
  font-size:18px !important; letter-spacing:5px !important; line-height:1 !important;
}
.icon-shield{
  border-radius:50% 50% 42% 42% / 32% 32% 68% 68% !important;
}
.icon-shield::after{
  content:"✓" !important; position:absolute !important; inset:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:17px !important; font-weight:900 !important;
}
.icon-headset{
  border-radius:50% !important;
  border-bottom-color:transparent !important;
}
.icon-headset::before,.icon-headset::after{
  content:"" !important; position:absolute !important; top:14px !important;
  width:5px !important; height:9px !important; border-radius:3px !important; background:currentColor !important;
}
.icon-headset::before{left:-2px !important}.icon-headset::after{right:-2px !important}
.icon-card{
  border-radius:6px !important;
}
.icon-card::before{
  content:"" !important; position:absolute !important; left:3px !important; right:3px !important; top:7px !important;
  height:3px !important; background:currentColor !important;
}
.icon-card::after{
  content:"" !important; position:absolute !important; left:5px !important; bottom:5px !important;
  width:8px !important; height:3px !important; border-radius:2px !important; background:currentColor !important;
}

/* Barra de benefícios: um pouco mais compacta */
.product-benefits{
  padding-top:16px !important;
}
.benefits-grid{
  border-radius:16px !important;
}
.benefits-grid>div{
  min-height:82px !important;
  gap:13px !important;
}
.benefits-grid span{
  font-weight:600 !important;
  color:#edf5ff !important;
}

/* Rodapés consistentes + corrige logo invisível na Home */
body:not(:has(.product-page)) footer .footer,
.premium-footer-inner{
  max-width:1100px !important;
}
.footer-brand,
.premium-footer .logo-image-link{
  display:flex !important;
  align-items:center !important;
}
.footer-brand img,
.premium-footer .logo-image-link img{
  display:block !important;
  width:78px !important;
  height:auto !important;
  opacity:1 !important;
  filter:none !important;
}
body:not(:has(.product-page)) footer{
  min-height:92px !important;
}
body:not(:has(.product-page)) footer .footer{
  min-height:92px !important;
}

/* CTA da Home mais integrado à identidade */
.contact .contact-box{
  border:1px solid rgba(25,116,211,.16) !important;
  box-shadow:0 14px 38px rgba(5,25,49,.08) !important;
}
.contact .contact-actions .btn{
  transition:transform .18s ease,box-shadow .18s ease !important;
}
.contact .contact-actions .btn:hover{
  transform:translateY(-1px) !important;
}

/* Desktop largo: ligeiro refinamento da proporção do produto */
@media(min-width:1100px){
  .product-page .container.product-detail{
    grid-template-columns:minmax(0,1fr) minmax(390px,.94fr) !important;
    gap:34px !important;
  }
}

/* Tablet/mobile - apenas acabamento; revisão completa mobile fica para a etapa posterior */
@media(max-width:700px){
  body:not(:has(.product-page)) .hero{
    min-height:auto !important;
  }
  .product-page .container.product-detail,
  .product-page .description-section,
  .product-page .spec-section{
    border-radius:15px !important;
  }
  .footer-brand img,
  .premium-footer .logo-image-link img{
    width:70px !important;
  }
}