.elementor-kit-6{--e-global-color-primary:#A355FF;--e-global-color-secondary:#54595F;--e-global-color-text:#BEAECC;--e-global-color-accent:#FFD400;--e-global-color-a3f76d6:#0B0318;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Space Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 a{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --black-if:#0b0b0b; --roxo-dark-if:#1C0A3A; --roxo-medium-if:#5B1EC4; --roxo-if:#A355FF; --amarelo-if:#FFD400; --branco-if:#FBF7FF; --titulos-if:DM Sans; --texto-if:Space Grotesk; }
/* Start custom CSS */body {
  cursor: url('https://ifagencia.com.br/wp-content/uploads/2026/07/if-cursor.png') 0 0, auto;
}

html, body {
  overflow-x: clip;
}


/* ==========================================================
   BOTÃO COM BRILHO QUE SEGUE O MOUSE
   Classe do widget: btn-glow
   ========================================================== */

.btn-glow .elementor-button,
.elementor-button.btn-glow,
.abas-glow .e-n-tab-title {

  /* ---------- PAINEL DE CONTROLE ---------- */
  --glow-color:    #A355FF;   /* cor do foco de luz interno */
  --border-color:  #ffffff;   /* cor do brilho na borda */
  --glow-size:     150px;     /* diâmetro do foco de luz */
  --glow-opacity:  0.55;      /* intensidade do foco (0 a 1) */
  --border-size:   220px;     /* diâmetro do brilho da borda */
  --border-width:  1.5px;     /* espessura da borda */
  --glow-speed:    0.35s;     /* velocidade do fade in/out */
  /* ---------------------------------------- */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
}

/* Mantém texto e ícone acima das camadas de brilho */
.btn-glow .elementor-button .elementor-button-content-wrapper,
.elementor-button.btn-glow .elementor-button-content-wrapper,
.abas-glow .e-n-tab-title-text {
  position: relative;
  z-index: 2;
}

/* CAMADA 1 — foco de luz interno */
.btn-glow .elementor-button::before,
.elementor-button.btn-glow::before,
.abas-glow .e-n-tab-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--glow-speed) ease;
  background: radial-gradient(
    var(--glow-size) circle at var(--mx, 50%) var(--my, 50%),
    var(--glow-color),
    transparent 70%
  );
}

/* CAMADA 2 — brilho na borda
   O truque: um retângulo preenchido com o gradiente, onde a máscara
   recorta o miolo e deixa visível apenas a espessura da borda. */
.btn-glow .elementor-button::after,
.elementor-button.btn-glow::after,
.abas-glow .e-n-tab-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--border-width);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--glow-speed) ease;
  background: radial-gradient(
    var(--border-size) circle at var(--mx, 50%) var(--my, 50%),
    var(--border-color),
    transparent 65%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Ativa os efeitos apenas em dispositivos com mouse de verdade */
@media (hover: hover) and (pointer: fine) {
  .btn-glow .elementor-button:hover::before,
  .elementor-button.btn-glow:hover::before,
  .abas-glow .e-n-tab-title:hover::before {
    opacity: var(--glow-opacity);
  }

  .btn-glow .elementor-button:hover::after,
  .elementor-button.btn-glow:hover::after,
  .abas-glow .e-n-tab-title:hover::after {
    opacity: 1;
  }
}
/* Acessibilidade: respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
  .btn-glow .elementor-button::before,
  .btn-glow .elementor-button::after,
  .elementor-button.btn-glow::before,
  .elementor-button.btn-glow::after {
    transition: none;
  }
}

/* ==========================================================
   TEXTO SVG COM FOCO DE LUZ
   ========================================================== */

.svg-wrap {
  width: 100%;
  line-height: 0;
}

.svg-wrap .svg-luz {
  display: block;
  width: 100%;
  height: auto;
}

/* Espessura do traço — o SVG vem com 2.61 */
.svg-wrap .svg-luz path[stroke] {
  stroke-width: 2.6;
}
/* ==========================================================
   MOTOR DE ANIMAÇÃO POR SCROLL — não editar
   ========================================================== */

@property --o {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* ---------- Trilho e palco ---------- */

.seq {
  --p: 1;                 /* progresso 0→1, escrito pelo JS */
  position: relative;
}

.seq-palco {
  position: sticky;
  top: 0;
}

/* ---------- Revelação: elementos em linha (palavras) ---------- */

.rv {
  --start: 0;             /* quando começa, de 0 a 1 */
  --speed: 14;            /* quanto maior, mais rápido aparece */
  --shift: 0.45em;        /* deslocamento vertical inicial */

  display: inline-block;
  --o: clamp(0, (var(--p) - var(--start)) * var(--speed), 1);
  opacity: var(--o);
  transform: translateY(calc((1 - var(--o)) * var(--shift)));
  will-change: opacity, transform;
}

/* ---------- Revelação: widgets inteiros ---------- */

.rv-bloco {
  --start: 0;
  --speed: 10;
  --shift: 0.5em;

  --o: clamp(0, (var(--p) - var(--start)) * var(--speed), 1);
  opacity: var(--o);
  transform: translateY(calc((1 - var(--o)) * var(--shift)));
  will-change: opacity, transform;
}

/* ---------- Texto com gradiente ---------- */

.grad {
  background: var(--grad, linear-gradient(100deg, #7C3AED, #A78BFA 50%, #8B5CF6));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Risco sobre um título ---------- */

.rv-risco .elementor-heading-title {
  position: relative;
  display: inline-block;
}

.rv-risco .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: -1.5%;
  top: 52%;
  width: 103%;
  height: 0.055em;
  border-radius: 2px;
  background: var(--risco-cor, #E9E4F5);
  transform-origin: var(--risco-origem, left center);
  --o: clamp(0, (var(--p) - var(--risco-start, 0.26)) * var(--risco-speed, 6), 1);
  transform: scaleX(var(--o));
}

/* ---------- Acessibilidade ---------- */

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-bloco { --o: 1 !important; transform: none !important; }
  .rv-risco .elementor-heading-title::after { transform: scaleX(1) !important; }
}

/* ---------- Classes de tempo ---------- */
.t05 { --start: .05 } .t10 { --start: .10 } .t15 { --start: .15 }
.t20 { --start: .20 } .t25 { --start: .25 } .t30 { --start: .30 }
.t35 { --start: .35 } .t40 { --start: .40 } .t45 { --start: .45 }
.t50 { --start: .50 } .t55 { --start: .55 } .t60 { --start: .60 }
.t65 { --start: .65 } .t70 { --start: .70 } .t75 { --start: .75 }
.t80 { --start: .80 } .t85 { --start: .85 }.t90 { --start: .90 } .t95 { --start: .95 }


/* ---------- Letra por letra ---------- */

.rv-letras { --step: .02; }   /* intervalo entre letras */

.rv-letras .rv { white-space: pre; }

/* ---------- Estilos de revelação ---------- */

.anim-baixo .rv,  .anim-baixo.rv-bloco {
  transform: translateY(calc((var(--o) - 1) * var(--shift)));
}

.anim-lado .rv,   .anim-lado.rv-bloco {
  transform: translateX(calc((1 - var(--o)) * var(--shift)));
}

.anim-escala .rv, .anim-escala.rv-bloco {
  transform: scale(calc(.75 + var(--o) * .25));
}

.anim-blur .rv,   .anim-blur.rv-bloco {
  transform: none;
  filter: blur(calc((1 - var(--o)) * 8px));
}

.anim-giro .rv,   .anim-giro.rv-bloco {
  transform: translateY(calc((1 - var(--o)) * var(--shift)))
             rotate(calc((1 - var(--o)) * -8deg));
  transform-origin: bottom left;
}

.anim-seco .rv,   .anim-seco.rv-bloco {
  transform: none;
}

@property --p {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

/* ==========================================================
   REVELAÇÃO UNIVERSAL — funciona em qualquer elemento
   Classe: rv-auto
   ========================================================== */

@property --rvp { syntax: '<number>'; initial-value: 1; inherits: false; }

.rv-auto {
  --rvp: 1;
  --dist: 70px;
  --dir-x: 0;
  --dir-y: 1;
  --escala: 1;

  opacity: var(--rvp);
  transform:
    translate(
      calc((1 - var(--rvp)) * var(--dist) * var(--dir-x)),
      calc((1 - var(--rvp)) * var(--dist) * var(--dir-y))
    )
    scale(calc(var(--escala) + var(--rvp) * (1 - var(--escala))));
  will-change: opacity, transform;
}

/* ---------- Variações de direção ---------- */
.rv-auto.rv-cima      { --dir-y: -1; }
.rv-auto.rv-esquerda  { --dir-x: 1;  --dir-y: 0; }
.rv-auto.rv-direita   { --dir-x: -1; --dir-y: 0; }
.rv-auto.rv-zoom      { --escala: .88; --dist: 0px; }
.rv-auto.rv-parado    { --dist: 0px; }

/* ---------- Mobile: movimento lateral vira vertical ---------- */
@media (max-width: 767px) {
  .rv-auto.rv-esquerda,
  .rv-auto.rv-direita {
    --dir-x: 0;
    --dir-y: 1;
  }
}

/* ---------- Só aparece, nunca some ---------- */
.rv-auto.rv-uma-vez.rv-feito { --rvp: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .rv-auto {
    --rvp: 1 !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.rv-auto {
  transition: none !important;
}
/* ==========================================================
   FOCO DE LUZ NO TEXTO COM GRADIENTE
   ========================================================== */

@property --spot {
  syntax: '<color>';
  initial-value: transparent;
  inherits: true;
}

.grad-hover .elementor-heading-title {
  --spot: transparent;
  --spot-cor: #ca9cff;      /* cor do foco de luz */
  --spot-size: 160px;       /* diâmetro do foco */
  --spot-speed: .35s;       /* velocidade do fade */
  transition: --spot var(--spot-speed) ease;
}

/* A luz entra como camada extra dentro do mesmo recorte de texto */
.grad-hover .grad {
  background-image:
    radial-gradient(
      var(--spot-size) circle at var(--mx, 50%) var(--my, 50%),
      var(--spot),
      transparent 70%
    ),
    var(--grad, linear-gradient(100deg, #7C3AED, #A78BFA 50%, #8B5CF6));
}

@media (hover: hover) and (pointer: fine) {
  .grad-hover .elementor-heading-title:hover { --spot: var(--spot-cor); }
}

@media (prefers-reduced-motion: reduce) {
  .grad-hover .elementor-heading-title { transition: none; }
}/* ==========================================================
   FOCO DE LUZ NO TEXTO COM GRADIENTE
   ========================================================== */

@property --spot {
  syntax: '<color>';
  initial-value: transparent;
  inherits: true;
}

.grad-hover .elementor-heading-title {
  --spot: transparent;
  --spot-cor: #ca9cff;      /* cor do foco de luz */
  --spot-size: 160px;       /* diâmetro do foco */
  --spot-speed: .35s;       /* velocidade do fade */
  transition: --spot var(--spot-speed) ease;
}

/* A luz entra como camada extra dentro do mesmo recorte de texto */
.grad-hover .grad {
  background-image:
    radial-gradient(
      var(--spot-size) circle at var(--mx, 50%) var(--my, 50%),
      var(--spot),
      transparent 70%
    ),
    var(--grad, linear-gradient(100deg, #7C3AED, #A78BFA 50%, #8B5CF6));
}

@media (hover: hover) and (pointer: fine) {
  .grad-hover .elementor-heading-title:hover { --spot: var(--spot-cor); }
}

@media (prefers-reduced-motion: reduce) {
  .grad-hover .elementor-heading-title { transition: none; }
}

/* ==========================================================
   MALHA DE PONTOS REATIVA
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .malha {
    position: relative;


    --pt-cor:    rgba(151,123,181,.22);   /* pontos em repouso */
    --pt-cor-on: rgba(71,24,152,.95);   /* pontos acesos */
    --pt-gap:    40px;                    /* espaçamento da grade */
    --pt-raio:   350px;                   /* alcance do cursor */
  }

  .malha::before,
  .malha::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    clip-path: inset(0);
  }

  /* Camada base — sempre visível */
  .malha::before {
    background-image: radial-gradient(circle, var(--pt-cor) 1.1px, transparent 1.1px);
    background-size: var(--pt-gap) var(--pt-gap);
  }

  /* Camada acesa — recortada pela posição do cursor */
  .malha::after {
    background-image: radial-gradient(circle, var(--pt-cor-on) 2.2px, transparent 2.2px);
    background-size: var(--pt-gap) var(--pt-gap);
    opacity: 0;
    transition: opacity .5s ease;
    will-change: opacity;

    -webkit-mask-image: radial-gradient(
      var(--pt-raio) circle at var(--gx, 50%) var(--gy, 50%),
      #000 0%, rgba(0,0,0,.35) 45%, transparent 70%
    );
            mask-image: radial-gradient(
      var(--pt-raio) circle at var(--gx, 50%) var(--gy, 50%),
      #000 0%, rgba(0,0,0,.35) 45%, transparent 70%
    );
  }

  .malha.malha-on::after { opacity: 1; }

  .malha > * { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .malha::after { display: none; }
}

/* ==========================================================
   TEXTO MAGNÉTICO
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .ima .rv {
    --forca: 1;
    transform:
      translate(
        var(--dx, 0px),
        calc((1 - var(--o)) * var(--shift, .45em) + var(--dy, 0px))
      )
      scale(var(--ds, 1));
  }
}

@property --oi { syntax: '<number>'; initial-value: 0; inherits: false; }
@property --oo { syntax: '<number>'; initial-value: 0; inherits: false; }

.io {
  --in: 0; --in-speed: 6;
  --out: 1; --out-speed: 6;
  --oi: clamp(0, (var(--p) - var(--in))  * var(--in-speed),  1);
  --oo: clamp(0, (var(--p) - var(--out)) * var(--out-speed), 1);
  will-change: transform, opacity;
}

.io-x {
  --dist: 120vw;
  transform: translateX(calc((1 - var(--oi)) * var(--dist) - var(--oo) * var(--dist)));
  opacity: clamp(0, var(--oi) * 6, 1);
}

.io-y {
  opacity: calc(clamp(0, var(--oi) * 3, 1) * (1 - var(--oo)));
  transform: translateY(calc((1 - var(--oi)) * .5em));
}

.io-blur { filter: blur(calc(((1 - var(--oi)) + var(--oo)) * 12px)); }

.corta { overflow: hidden; }

/* Deixa tudo visível no editor */
.elementor-editor-active .io {
  --oi: 1 !important; --oo: 0 !important;
  opacity: 1 !important; transform: none !important; filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .io-x, .io-y { transform: none; opacity: 1; }
  .io-blur { filter: none; }
}

/* ===============Cards aparecem com Scroll ===========*/

@property --cv { syntax: '<number>'; initial-value: 1; inherits: false; }

@media (prefers-reduced-motion: no-preference) {
  .case-card {
    --cv: 1;
    opacity: var(--cv);
    transform: translateY(calc((1 - var(--cv)) * 40px));
    will-change: opacity, transform;
  }
}

/* ==========================================================
   TEXTO EM NEGRITO COM GRADIENTE
   Use <b>palavra</b> ou <strong>palavra</strong> em qualquer
   campo de texto do site
   ========================================================== */

b,
strong {
  background-image: var(--grad-texto, linear-gradient(100deg, #A884FF, #713CF4));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ==========================================================
   CARROSSEL HORIZONTAL DE CASES — Home
   ========================================================== */

.hx {
  overflow: hidden;
}

.hx-track .elementor-loop-container {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: var(--hx-gap, 24px);

  transform: translateX(calc(var(--p) * (100vw - 100%)));
  will-change: transform;
}

/* Cards: altura fixa, largura pela proporção da imagem */
.hx-track .case-card {
  height: var(--hx-altura, 62vh) !important;
  width: auto !important;
  flex: 0 0 auto;
  overflow: hidden;

  /* Neutraliza a revelação usada na página de Cases */
  --cv: 1 !important;
  transform: none;
}

.hx-track .case-card .card-img,
.hx-track .case-card .card-img .elementor-widget-container,
.hx-track .case-card .card-img figure {
  height: 100%;
  margin: 0;
  display: block;
  line-height: 0;
}

.hx-track .case-card .card-img img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

@media (max-width: 1024px) {
  .hx-track .case-card {
    height: 62svh !important;
    width: 46svh !important;
    flex: 0 0 auto;
  }

  .hx-track .case-card .card-img,
  .hx-track .case-card .card-img .elementor-widget-container,
  .hx-track .case-card .card-img figure {
    width: 100% !important;
    height: 100% !important;
  }

  .hx-track .case-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  .hx-track .elementor-loop-container {
    gap: 12px;
  }
}/* End custom CSS */