/* TOPO NOVO: foto do Marcos com a modelo como fundo, texto do site por cima.
   Celular usa hero-codigo-da-ia.jpg (vertical); desktop usa hero-codigo-da-ia-desktop.jpg (horizontal).
   Pra voltar ao topo da Ruama: apague a linha <link id="hero-codigo-da-ia-css"> do index.html
   (ou copie _backup-topo-original/index.html por cima). */
:root{--cda-1:#14c46b;--cda-2:#6dffb0}

/* celular: foto no topo, largura total; o resto do fundo e preto (a foto termina preta) */
@media(max-width:767px){
  .elementor-9876 .elementor-element.elementor-element-706628d:not(.elementor-motion-effects-element-type-background),
  .elementor-9876 .elementor-element.elementor-element-706628d>.elementor-motion-effects-container>.elementor-motion-effects-layer{
    background-color:#000 !important;
    background-image:url(uploads/2026/10/hero-codigo-da-ia.jpg) !important;
    background-size:100% auto !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
  }
}
/* desktop: a MESMA foto do celular, adaptada. Usa uma copia com margem preta em cima (hero-desktop-pad.jpg) pra foto nao ficar
   colada na borda nem apagar o balao; o cenario esmaece so no lado esquerdo e nas bordas. Escala com a largura da tela. */
@media(min-width:768px){
  .elementor-9876 .elementor-element-706628d{--H:clamp(720px,40vw,880px);--O:max(0px,calc((100vw - 1196px)/2 - 20px));
    --PH:calc(var(--H)*1.58);--IW:calc(var(--PH)*.4528);--PT:calc(var(--PH)*.0943);
    --min-height:var(--H);min-height:var(--H) !important}
  .elementor-9876 .elementor-element.elementor-element-706628d:not(.elementor-motion-effects-element-type-background),
  .elementor-9876 .elementor-element.elementor-element-706628d>.elementor-motion-effects-container>.elementor-motion-effects-layer{
    background-color:#000 !important;
    background-image:
      linear-gradient(180deg,#000 0,rgba(0,0,0,0) 100%),
      linear-gradient(180deg,#000 0,rgba(0,0,0,0) 100%),
      linear-gradient(0deg,#000 0,rgba(0,0,0,0) 26%),
      linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%),
      linear-gradient(270deg,#000 0,rgba(0,0,0,0) 100%),
      url(uploads/2026/10/hero-desktop-pad.jpg?v=1) !important;
    background-size:calc(var(--IW)*.62) calc(var(--H)*.09),calc(var(--IW)*.38) 12px,100% 100%,200px 100%,60px 100%,auto var(--PH) !important;
    background-position:
      right calc(var(--O) + var(--IW)*.38) top calc(var(--PT) - 2px),
      right var(--O) top calc(var(--PT) - 2px),
      0 0,
      right calc(var(--O) + var(--IW) - 200px) top 0,
      right var(--O) top 0,
      right var(--O) top 0 !important;
    background-repeat:no-repeat !important;
  }
}

/* acentos em verde (celular e desktop) */
@media all{
.elementor-9876 .elementor-element-706628d .txt-degrade{
  background-image:linear-gradient(to right,var(--cda-1),var(--cda-2)) !important;
}
.elementor-9876 .elementor-element-706628d .btn-cta{
  background:linear-gradient(90deg,#0c9d52 0%,var(--cda-1) 60%,#3bea8c 100%) !important;
  box-shadow:0 4px 16px rgb(20 196 107 / .45) !important;
}
.elementor-9876 .elementor-element-706628d .btn-cta:hover{box-shadow:0 6px 24px rgb(20 196 107 / .65) !important}
.elementor-9876 .elementor-element-706628d .glowbox-borders,
.elementor-9876 .elementor-element-706628d .glowbox-glow{
  background-image:conic-gradient(from 0 at 50% 50%,#14c46b 0deg,#b8ffd9 60deg,#b8ffd9 300deg,#14c46b 360deg) !important;
}
.elementor-9876 .elementor-element-706628d .btn-cta-box{border-color:rgb(20 196 107 / .25) !important}

/* logo e cantos decorativos do topo em verde */
.elementor-9876 .elementor-element-706628d .elementor-element-09e8598 img{content:url(uploads/2026/02/Logo-codigo-verde.svg?v=5)}
.elementor-9876 .elementor-element-706628d.tech-top-corners::before{
  background:linear-gradient(#14c46b,#14c46b) left top/80px 1px no-repeat,linear-gradient(#14c46b,#14c46b) left top/1px 80px no-repeat,linear-gradient(#14c46b,#14c46b) left top/22px 2px no-repeat,linear-gradient(#14c46b,#14c46b) left top/2px 22px no-repeat}
.elementor-9876 .elementor-element-706628d.tech-top-corners::after{
  background:linear-gradient(#6dffb0,#6dffb0) right top/80px 1px no-repeat,linear-gradient(#6dffb0,#6dffb0) right top/1px 80px no-repeat,linear-gradient(#6dffb0,#6dffb0) right top/22px 2px no-repeat,linear-gradient(#6dffb0,#6dffb0) right top/2px 22px no-repeat}
}
@media(min-width:768px){
  .elementor-9876 .elementor-element-706628d.tech-top-corners::before{background-size:200px 1px,1px 200px,28px 2px,2px 28px}
  .elementor-9876 .elementor-element-706628d.tech-top-corners::after{background-size:200px 1px,1px 200px,28px 2px,2px 28px}
}