:root {
    --epsilon-topbar-height: 34px;
}
/* ========================================
   HEADER COMPLETO
   ======================================== */

.elementor-location-header.elementor-1561 {
    position: sticky;
    top: calc(-1 * var(--epsilon-topbar-height));
    z-index: 9999;
}

/* ========================================
   NAV ATOMIC
   ======================================== */

.epsilon-main-nav {
    position: relative;
		background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
		border-bottom: 1px solid rgba(15, 28, 51, 0.08);}	
	
@media (max-width: 1024px) {
    :root {
        --epsilon-topbar-height: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --epsilon-topbar-height: 56px;
    }
}

	/*------------- Background - hero - puntos - ------------- */
	.subtle-grid-background {
  position: absolute;
  inset: 0;
  z-index: -10;
  background-color: rgba(22, 95, 240, 0.094);

  pointer-events: none;

  background-color: #ffffff;
  background-image: radial-gradient(
    circle,
    #e5e7eb 1px,
    transparent 1px
  );
  background-size: 24px 24px;

  -webkit-mask-image: radial-gradient(
    ellipse 60% 50% at 50% 0%,
    #000000 70%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse 60% 50% at 50% 0%,
    #000000 70%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
	/*------------- Featured card ------------- */
.elementor .feature-card:hover .feature-card__icon {
color: var(--brand2);
background-color: rgba(22, 95, 240, 0.094);
}
.icon-lineal svg {
	fill: none !important;
	stroke: currentColor;
}
.jet-elements-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
	stroke: currentColor;
}
.elementor-icon i, .elementor-icon svg {
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
    fill: none !important;
    stroke: currentColor;
}

/*------------- Background - gradient-ribbons ------------- */	
    .gradient-ribbon {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 70vh;

    /* stripe-gradient: franjas de color tipo ribbon */
    background: linear-gradient(
        120deg,
        #00F260,
        #0575E6,
        #7B2CBF,
        #3A86FF

    );

    background-size: 300% 300%;
    border-radius: 50% 30% 70% 40% / 40% 60% 40% 60%;
    opacity: 0.6;
    filter: blur(60px);
    pointer-events: none;
    z-index: -10;
		transform: translate3d(0, 0, 0) rotate(3deg);
/*     transform: rotate(12deg) translateZ(0); */
    will-change: transform;
    animation: gradientDrift 20s ease infinite;
}
	
	@keyframes gradientDrift {
    0%   { background-position: 0% 50%; filter: hue-rotate(0deg) blur(60px);}
    50%  { background-position: 100% 50%; filter: hue-rotate(0deg) blur(60px);}
    100% { background-position: 0% 50%; filter: hue-rotate(0deg) blur(60px);}
}