:root{
  --cc77-bg:#030812;
  --cc77-bg2:#07111f;
  --cc77-panel:rgba(6,16,30,.92);
  --cc77-panel-2:rgba(10,23,41,.96);
  --cc77-line:rgba(72,147,180,.18);
  --cc77-line-strong:rgba(112,198,226,.28);
  --cc77-text:#f4fbff;
  --cc77-muted:#9aafc2;
  --cc77-accent:#0f7f97;
  --cc77-accent-2:#15457c;
  --cc77-glow:rgba(18,179,214,.26);
  --cc77-shadow:0 26px 70px rgba(0,0,0,.30);
}
html{scroll-padding-top:96px}
body{background:radial-gradient(circle at 14% -10%, rgba(20,153,195,.08), transparent 28%),radial-gradient(circle at 92% 0%, rgba(18,64,116,.09), transparent 24%),linear-gradient(180deg,#02050d 0%,#040b16 45%,#02050d 100%)!important;color:var(--cc77-text)!important}
body::before{opacity:.52}
.container{width:min(1500px,calc(100% - 28px))}
.topbar{
  height:94px!important;
  background:rgba(2,6,14,.82)!important;
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.topbar.is-scrolled{box-shadow:0 18px 38px rgba(0,0,0,.25)!important}
.topbar-inner{height:94px!important;gap:18px!important}
.brand-logo{
  position:relative;
  min-width:330px!important;
  min-height:84px!important;
  height:84px!important;
  padding:8px 14px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(97,176,214,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px rgba(0,0,0,.22);
}
.brand-logo::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(89,201,228,.08),transparent);
  opacity:.9;
}
.brand-logo img{
  width:auto!important;
  height:auto!important;
  max-width:min(360px,32vw)!important;
  max-height:68px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
  filter:drop-shadow(0 0 18px rgba(31,164,210,.14)) drop-shadow(0 8px 18px rgba(0,0,0,.28))!important;
}
.top-actions{gap:12px!important}
.navlink,.cart-chip{height:40px!important;padding:0 16px!important;border-color:rgba(95,168,195,.16)!important;background:rgba(255,255,255,.035)!important}
.navlink:hover,.cart-chip:hover{border-color:rgba(114,203,231,.3)!important;background:rgba(255,255,255,.06)!important}
.hero{margin-top:22px!important;padding:0!important}
.hero-grid{grid-template-columns:minmax(420px,580px) minmax(0,1fr)!important;gap:38px!important;padding:42px clamp(22px,4vw,58px)!important}
.logo-panel,.logo-panel-final{
  position:relative;
  min-height:500px!important;
  padding:34px!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 22%, rgba(31,174,212,.10), transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.014));
  border-radius:32px!important;
  border:1px solid rgba(98,177,209,.16)!important;
}
.logo-panel::after,.logo-panel-final::after{
  content:"";position:absolute;inset:14px;border-radius:26px;border:1px solid rgba(255,255,255,.035);pointer-events:none;
}
.logo-panel img,.logo-panel-final img{
  width:min(100%,560px)!important;
  max-height:430px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
}
.hero h1{max-width:12ch!important;font-family:Orbitron,system-ui!important;font-size:clamp(38px,4.7vw,74px)!important}
.hero p{max-width:60ch!important;color:#cbdae7!important}
.hero-clean-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.secondary-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 22px;border-radius:18px;
  border:1px solid rgba(96,172,200,.18);background:rgba(255,255,255,.03);font-weight:800;color:#edf8fd
}
.primary-cta,.secondary-cta,.service-order-btn,.whatsapp-send,.add-btn,.smart-reco-add{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.primary-cta:hover,.secondary-cta:hover,.service-order-btn:hover,.whatsapp-send:hover,.add-btn:hover,.smart-reco-add:hover{transform:translateY(-1px)}
.service-priority{
  position:relative;overflow:hidden;
  margin-top:18px!important;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:center;
  padding:26px 28px!important;border-radius:28px!important;
  background:linear-gradient(140deg,rgba(10,24,43,.95),rgba(4,11,22,.98))!important;
  box-shadow:var(--cc77-shadow);
}
.service-priority::before{content:"";position:absolute;inset:auto -10% -40% auto;width:380px;height:380px;background:radial-gradient(circle,rgba(18,170,208,.10),transparent 60%);pointer-events:none}
.service-priority .kicker{margin-bottom:10px!important}
.service-priority h2{margin:0 0 12px;font-size:clamp(24px,2.5vw,38px);font-family:Orbitron,system-ui!important;line-height:1.08}
.service-priority p{margin:0;color:#c4d4df;max-width:70ch}
.service-pills{margin-top:16px!important}
.service-pills span{background:rgba(255,255,255,.05)!important;border:1px solid rgba(98,177,209,.14)!important}
.service-actions-pro{display:flex!important;flex-direction:column;gap:12px;align-items:stretch}
.service-actions-pro button,.service-actions-pro a,.service-actions-pro .service-order-btn{width:100%}
.showcase,.combo-offers,.catalog,.service-top,.product-buy-card,.product-image-card,.card,.combo-card,.service-cards article{border-color:var(--cc77-line)!important;box-shadow:var(--cc77-shadow)}
.showcase-head h2,.combo-head h2{font-family:Orbitron,system-ui!important;font-size:clamp(18px,2vw,24px)!important}
.combo-head{align-items:end!important}
.combo-head h2{margin:0 0 2px!important}
.combo-head a{padding:10px 14px;border-radius:14px;border:1px solid rgba(98,177,209,.16);background:rgba(255,255,255,.03)}
.tools{
  position:sticky;top:102px;z-index:18;
  padding:12px;border-radius:20px;background:rgba(3,10,19,.88);backdrop-filter:blur(14px);
  border:1px solid rgba(96,172,200,.14);box-shadow:0 18px 38px rgba(0,0,0,.15)
}
.tools input,.tools select{min-height:48px;border-radius:16px!important;background:rgba(255,255,255,.04)!important;border-color:rgba(96,172,200,.14)!important}
.quick-filter-bar{display:flex;gap:10px;overflow:auto;padding:2px 1px 8px;scroll-snap-type:x proximity}
.quick-filter-bar::-webkit-scrollbar{height:6px}
.quick-filter-bar button{scroll-snap-align:start;white-space:nowrap;border-radius:999px;background:rgba(255,255,255,.03)!important;border:1px solid rgba(98,177,209,.14)!important}
.quick-filter-bar button:hover{background:rgba(255,255,255,.06)!important}
.sidebar{position:sticky;top:102px}
.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:16px!important}
.card,.combo-card,.related-card{border-radius:22px!important;overflow:hidden}
.thumb,.related-pic,.product-image-card .image-fit-detail{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.03);border-radius:20px!important}
.card .thumb,.combo-card .thumb{aspect-ratio:1/1}
.thumb img,.related-pic img,.product-image-card img{padding:14px!important}
.product-page-hero{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start;margin:22px 0 14px}
.product-buy-card{position:sticky;top:106px;padding:24px!important;border-radius:28px!important}
.product-image-card{padding:18px!important;border-radius:28px!important;min-height:560px;display:grid;place-items:center}
.product-image-card img{max-height:520px!important}
.product-trust-row{gap:8px!important;flex-wrap:wrap}
.product-trust-row span,.product-discount-note{border:1px solid rgba(98,177,209,.14)!important;background:rgba(255,255,255,.035)!important}
.product-specs{margin-top:16px}
.product-specs div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.related-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
.footer{padding-bottom:110px!important;color:#a7bbca!important}
.float-wa{box-shadow:0 18px 35px rgba(0,0,0,.24)!important}
.mobile-product-bar{
  position:fixed;left:12px;right:12px;bottom:82px;z-index:95;
  display:none;gap:12px;align-items:center;justify-content:space-between;
  padding:12px;border-radius:20px;background:rgba(4,13,25,.95);backdrop-filter:blur(18px);
  border:1px solid rgba(96,172,200,.16);box-shadow:0 20px 34px rgba(0,0,0,.28)
}
.mobile-product-bar .mpb-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.mobile-product-bar strong{font-size:12px;line-height:1.15;color:#ecf8fd;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mobile-product-bar span{font-weight:900;color:#77ebff}
.mobile-product-bar .primary-cta{height:46px!important;padding:0 16px!important;border-radius:14px!important;white-space:nowrap}
.mobile-dock{backdrop-filter:blur(18px)!important;background:rgba(3,9,17,.92)!important;border-top:1px solid rgba(96,172,200,.16)!important}
@media (max-width:1180px){
  .product-page-hero{grid-template-columns:1fr!important}
  .product-buy-card{position:relative!important;top:auto!important}
}
@media (max-width:980px){
  html{scroll-padding-top:84px}
  .topbar,.topbar-inner{height:82px!important}
  .brand-logo{min-width:250px!important;height:72px!important;min-height:72px!important;padding:7px 12px!important}
  .brand-logo img{max-width:260px!important;max-height:58px!important}
  .top-actions .navlink:first-child{display:none}
  .hero-grid{grid-template-columns:1fr!important;gap:24px!important;padding:28px 20px 30px!important}
  .logo-panel,.logo-panel-final{min-height:390px!important;padding:24px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,440px)!important;max-height:320px!important}
  .service-priority{grid-template-columns:1fr!important;padding:22px!important}
  .catalog{grid-template-columns:1fr!important}
  .sidebar{position:static!important;order:2}
  .content{order:1}
  .tools{position:static!important;top:auto!important}
}
@media (max-width:720px){
  .container{width:min(100% - 18px, 1500px)}
  .top-actions{gap:8px!important}
  .navlink{display:none!important}
  .cart-chip{padding:0 12px!important}
  .hero{border-radius:26px!important}
  .hero h1{font-size:clamp(31px,9vw,44px)!important;max-width:100%!important}
  .hero p{font-size:15px!important}
  .logo-panel,.logo-panel-final{min-height:320px!important;padding:18px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,350px)!important;max-height:260px!important}
  .showcase-head,.combo-head{flex-direction:column;align-items:flex-start!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .card .title{font-size:12px!important}
  .service-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product-image-card{min-height:340px!important;padding:12px!important}
  .product-image-card img{max-height:300px!important}
  .mobile-product-bar{display:flex}
}
@media (max-width:480px){
  .topbar,.topbar-inner{height:76px!important}
  .brand-logo{min-width:200px!important;height:66px!important;min-height:66px!important;padding:6px 10px!important;border-radius:18px!important}
  .brand-logo img{max-width:220px!important;max-height:52px!important}
  .hero-grid{padding:22px 14px 24px!important}
  .logo-panel,.logo-panel-final{min-height:286px!important;padding:14px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,300px)!important;max-height:225px!important}
  .service-priority h2{font-size:26px!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer{padding-bottom:118px!important}
}