/* ==============================================================
   UBERGEEK — NOSSOS PRODUTOS V11.3F
   Hero 3D isolado das regras antigas
   ============================================================== */

:root{
  --ug-product-yellow:#ffd60a;
  --ug-product-dark:#15191f;
  --ug-product-light:#f4f6f9;
}

/* A página muda de tema; o hero permanece preto. */
body[data-page="solutions"]{
  overflow-x:hidden;
}
html[data-theme="dark"] body[data-page="solutions"]{
  background:var(--ug-product-dark)!important;
  color:#f7f9fc!important;
}
html[data-theme="light"] body[data-page="solutions"]{
  background:var(--ug-product-light)!important;
  color:#07101c!important;
}
body[data-page="solutions"]::before,
body[data-page="solutions"]>.noise{
  display:none!important;
}

/* HERO fixo em preto */
.catalog-hero--robot,
html[data-theme="dark"] .catalog-hero--robot,
html[data-theme="light"] .catalog-hero--robot{
  position:relative!important;
  min-height:790px!important;
  height:min(90svh,860px)!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  padding:98px 0 28px!important;
  background:#000!important;
  color:#fff!important;
  isolation:isolate;
}
.catalog-hero--robot::before,
.catalog-hero--robot::after{
  display:none!important;
  content:none!important;
  background:none!important;
}
.catalog-hero--robot .hero-grid,
.catalog-hero--robot .hero-webgl{
  display:none!important;
}

/* Copy */
.catalog-hero--robot .catalog-hero-copy{
  position:relative!important;
  z-index:10!important;
  width:min(520px,34vw)!important;
  max-width:520px!important;
  margin:0!important;
  margin-left:clamp(38px,4.6vw,84px)!important;
  padding:0!important;
  pointer-events:none;
}
.catalog-hero--robot .hero-label{
  display:inline-flex!important;
  align-items:center!important;
  min-height:38px;
  padding:0 15px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  font:700 11px/1 Oxanium,Raleway,sans-serif!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.catalog-hero--robot .catalog-hero-copy h1,
html[data-theme="dark"] .catalog-hero--robot .catalog-hero-copy h1,
html[data-theme="light"] .catalog-hero--robot .catalog-hero-copy h1{
  max-width:510px!important;
  margin:20px 0 18px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:900 clamp(52px,5vw,82px)/.91 Montserrat,Raleway,system-ui,sans-serif!important;
  letter-spacing:-.06em!important;
  text-transform:none!important;
  text-shadow:none!important;
}
.catalog-hero--robot .catalog-hero-copy h1 .hero-interativas,
html[data-theme="dark"] .catalog-hero--robot .catalog-hero-copy h1 .hero-interativas,
html[data-theme="light"] .catalog-hero--robot .catalog-hero-copy h1 .hero-interativas{
  display:block!important;
  color:var(--ug-product-yellow)!important;
  -webkit-text-fill-color:var(--ug-product-yellow)!important;
}
.catalog-hero--robot .catalog-hero-copy h1 .hero-second-line{
  display:block!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.catalog-hero--robot .catalog-hero-copy p{
  max-width:475px!important;
  margin:0!important;
  color:rgba(255,255,255,.84)!important;
  font:500 clamp(16px,1.18vw,20px)/1.55 Raleway,system-ui,sans-serif!important;
}

/* Grande área real do model-viewer.
   O canvas começa bem à esquerda e termina exatamente na borda direita. */
.catalog-robot-stage{
  position:absolute!important;
  z-index:4!important;
  left:24%!important;
  right:0!important;
  top:56px!important;
  bottom:0!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  background:transparent!important;
  touch-action:pan-y!important;
}
.catalog-robot-frame,
.catalog-robot-orbiter{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
  animation:none!important;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))!important;
  transform:none;
}
.catalog-robot-orbiter::before{
  display:none!important;
  content:none!important;
}
.catalog-hero--robot model-viewer{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:710px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  pointer-events:auto!important;
  --poster-color:transparent!important;
  --progress-bar-height:0px!important;
  --progress-bar-color:transparent!important;
}
.catalog-hero--robot .robot-loading,
.catalog-robot-stage [slot="progress-bar"],
.catalog-robot-stage .loading{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.catalog-robot-stage::after{
  display:none!important;
  content:none!important;
}

/* Restante da página */
html[data-theme="dark"] body[data-page="solutions"] .catalog-section{
  background:var(--ug-product-dark)!important;
  color:#f7f9fc!important;
}
html[data-theme="light"] body[data-page="solutions"] .catalog-section{
  background:var(--ug-product-light)!important;
  color:#07101c!important;
}
html[data-theme="dark"] body[data-page="solutions"] .mini-cta{
  background:#1b2027!important;
  color:#f7f9fc!important;
}
html[data-theme="light"] body[data-page="solutions"] .mini-cta{
  background:#e9edf3!important;
  color:#07101c!important;
}

/* Responsivo */
@media(max-width:1360px){
  .catalog-hero--robot .catalog-hero-copy{
    width:min(500px,37vw)!important;
    margin-left:clamp(28px,4vw,58px)!important;
  }
  .catalog-robot-stage{
    left:28%!important;
  }
}
@media(max-width:1100px){
  .catalog-hero--robot{
    min-height:820px!important;
    height:auto!important;
    display:block!important;
    padding-top:118px!important;
  }
  .catalog-hero--robot .catalog-hero-copy{
    width:auto!important;
    max-width:600px!important;
    margin-left:clamp(24px,5vw,56px)!important;
    margin-right:24px!important;
  }
  .catalog-robot-stage{
    left:18%!important;
    right:0!important;
    top:300px!important;
    bottom:0!important;
    height:520px!important;
  }
  .catalog-hero--robot model-viewer{
    min-height:520px!important;
  }
}
@media(max-width:700px){
  .catalog-hero--robot{
    min-height:780px!important;
    padding-top:106px!important;
  }
  .catalog-hero--robot .catalog-hero-copy{
    margin-left:22px!important;
    margin-right:22px!important;
  }
  .catalog-hero--robot .catalog-hero-copy h1{
    font-size:clamp(44px,13vw,62px)!important;
    max-width:none!important;
  }
  .catalog-hero--robot .catalog-hero-copy p{
    max-width:92vw!important;
  }
  .catalog-robot-stage{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    height:400px!important;
  }
  .catalog-hero--robot model-viewer{
    min-height:400px!important;
  }
}


/* Contato do catálogo: contraste dos rótulos e redes sociais no tema escuro. */
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-contact-action:not(.ug-contact-action--primary) strong,
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-contact-details strong,
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-social a,
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-social a span,
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-social a svg {
  color: #f5f5f7 !important;
}
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-social a svg,
html[data-theme="dark"] body[data-page="solutions"] .ug-contact-footer .ug-social a svg path {
  fill: currentColor !important;
}


/* Redes sociais do contato: área clicável e hover nos dois temas. */
body[data-page="solutions"] .ug-contact-footer .ug-contact-glow {
  pointer-events: none !important;
}
body[data-page="solutions"] .ug-contact-footer .ug-social {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
}
body[data-page="solutions"] .ug-contact-footer .ug-social a,
body[data-page="solutions"] .ug-contact-footer .ug-social a * {
  cursor: pointer !important;
}
body[data-page="solutions"] .ug-contact-footer .ug-social a {
  pointer-events: auto !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
html[data-theme] body[data-page="solutions"] .ug-contact-footer .ug-social a:is(:hover, :focus-visible) {
  background: #2775ff !important;
  border-color: #2775ff !important;
  color: #fff !important;
}
html[data-theme] body[data-page="solutions"] .ug-contact-footer .ug-social a:is(:hover, :focus-visible) span,
html[data-theme] body[data-page="solutions"] .ug-contact-footer .ug-social a:is(:hover, :focus-visible) svg {
  color: #fff !important;
}
html[data-theme] body[data-page="solutions"] .ug-contact-footer .ug-social a svg,
html[data-theme] body[data-page="solutions"] .ug-contact-footer .ug-social a svg path {
  fill: currentColor !important;
}
body[data-page="solutions"] .ug-contact-footer .ug-social a:focus-visible {
  outline: 2px solid #2775ff;
  outline-offset: 4px;
}


/* Locomotive Scroll oculta seções fora da tela com opacity:0 e
   pointer-events:none. Os pointer-events:auto do robô precisam acompanhar
   esse estado, para que o modelo invisível não intercepte os links abaixo.
   Sem rolagem suave ou com o hero em exibição, a interação fica intacta. */
html.has-scroll-smooth body[data-page="solutions"] #produtos-hero[data-scroll-section]:not([data-scroll-section-inview]) #catalogRobotStage,
html.has-scroll-smooth body[data-page="solutions"] #produtos-hero[data-scroll-section]:not([data-scroll-section-inview]) #catalogRobotStage * {
  pointer-events: none !important;
  visibility: hidden !important;
}
