@font-face {
  font-family: BasierSquareBold;
  src: url(fonts/BasierSquare-Bold.otf);
}
@font-face {
  font-family: BasierSquareRegular;
  src: url(fonts/BasierSquare-Regular.otf);
}
@font-face {
  font-family: SupplyBold;
  src: url(fonts/Supply-Bold.otf) format("opentype");
}
@font-face {
  font-family: SupplyRegular;
  src: url(fonts/Supply-Regular.otf) format("opentype");
}


/* =============================================================================
   GRADIENTE ORBITAL OPTIMIZADO - Sin glitches
   ============================================================================= */

/* IMPORTANTE: Eliminar el fondo negro de YooTheme */
#animated-gradient-bg.uk-section-default {
    background: linear-gradient(
        226deg,
        #4A93FF -41.98%,
        #00ABFF -28.53%,
        #00C3FB -15.08%,
        #00D8EE -1.62%,
        #00EADC 11.83%,
        #00F8C6 25.28%,
        #00FFAC 40.23%,
        #00FF8F 53.68%,
        #00FF70 67.13%,
        #8EFF4F 80.59%,
        #CCFB2C 94.04%,
        #F5FE05 107.49%
    ) !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Forzar sobre TODOS los estilos de UK-section */
#animated-gradient-bg.uk-section-default,
#animated-gradient-bg.uk-section-default.uk-inverse-dark,
#animated-gradient-bg.uk-section-default.uk-inverse-light {
    background-color: #00ff70 !important;
}

/* Si tiene uk-dark, también sobrescribir */
#animated-gradient-bg.uk-dark {
    background: transparent !important;
    background-color: transparent !important;
}

/* Capa 1 - Mancha azul VIBRANTE */
#animated-gradient-bg.uk-section-default::before {
    content: '';
    position: absolute;
    width: 1100px;
    height: 1100px;
    background: radial-gradient(
        circle,
        rgba(74, 147, 255, 1) 0%,
        rgba(0, 171, 255, 1) 15%,
        rgba(0, 195, 251, 0.85) 35%,
        rgba(0, 216, 238, 0.5) 55%,
        transparent 70%
    );
    filter: blur(60px);
    animation: orbitExtreme1 10s ease-in-out infinite;
    z-index: 0;
    mix-blend-mode: screen;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: none;
}

/* Capa 2 - Mancha verde/cyan VIBRANTE */
#animated-gradient-bg.uk-section-default::after {
    content: '';
    position: absolute;
    width: 1200px;
    height: 1200px;
    background: radial-gradient(
        circle,
        rgba(0, 255, 172, 1) 0%,
        rgba(0, 255, 112, 1) 15%,
        rgba(0, 248, 198, 0.9) 35%,
        rgba(142, 255, 79, 0.6) 55%,
        transparent 70%
    );
    filter: blur(70px);
    animation: orbitExtreme2 13s ease-in-out infinite;
    z-index: 0;
    mix-blend-mode: screen;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: none;
}

/* Contenido por encima */
#animated-gradient-bg.uk-section-default > *,
#animated-gradient-bg.uk-section-default .uk-container,
#animated-gradient-bg.uk-section-default .uk-container > * {
    position: relative;
    z-index: 5;
}

/* Capa 3 - Mancha amarilla SÚPER VIBRANTE (CORREGIDA) */
#animated-gradient-bg.uk-section-default .uk-container::before {
    content: '';
    position: absolute;
    width: 1050px;
    height: 1050px;
    background: radial-gradient(
        circle,
        rgba(245, 254, 5, 1) 0%,
        rgba(230, 245, 0, 1) 10%,
        rgba(204, 251, 44, 1) 25%,
        rgba(180, 235, 35, 0.85) 40%,
        rgba(142, 255, 79, 0.6) 55%,
        transparent 70%  /* ✅ CORREGIDO: era 30% */
    );
    filter: blur(65px);
    animation: orbitExtreme3 8s ease-in-out infinite;
    z-index: 0;
    mix-blend-mode: screen;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: none;
}

/* Capa 4 - Mancha cyan/turquesa VIBRANTE */
#animated-gradient-bg.uk-section-default .uk-container::after {
    content: '';
    position: absolute;
    width: 1150px;
    height: 1150px;
    background: radial-gradient(
        circle,
        rgba(0, 216, 238, 1) 0%,
        rgba(0, 234, 220, 1) 15%,
        rgba(0, 248, 198, 0.9) 35%,
        rgba(0, 255, 172, 0.7) 50%,
        transparent 70%
    );
    filter: blur(75px);
    animation: orbitExtreme4 11s ease-in-out infinite;
    z-index: 0;
    mix-blend-mode: screen;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: none;
}

/* =============================================================================
   ANIMACIONES ORBITALES - OPTIMIZADAS para Chrome
   ============================================================================= */

/* Animación 1 - Recorrido COMPLETO de esquina a esquina */
@keyframes orbitExtreme1 {
    0% {
        top: -15%;
        left: -15%;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    20% {
        top: 10%;
        left: 80%;
        transform: translate3d(-70%, 0, 0) scale(1.6);
    }
    40% {
        top: 50%;
        left: 105%;
        transform: translate3d(-100%, -50%, 0) scale(1.2);
    }
    60% {
        top: 85%;
        left: 80%;
        transform: translate3d(-80%, -80%, 0) scale(0.7);
    }
    80% {
        top: 95%;
        left: 5%;
        transform: translate3d(-20%, -100%, 0) scale(1.4);
    }
    100% {
        top: -15%;
        left: -15%;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
}

/* Animación 2 - Movimiento DIAGONAL completo opuesto */
@keyframes orbitExtreme2 {
    0% {
        top: 95%;
        right: -15%;
        transform: translate3d(0, 0, 0) scale(0.9);
    }
    20% {
        top: 70%;
        right: 75%;
        transform: translate3d(60%, 0, 0) scale(1.5);
    }
    40% {
        top: 40%;
        right: 100%;
        transform: translate3d(100%, -40%, 0) scale(1.1);
    }
    60% {
        top: 10%;
        right: 80%;
        transform: translate3d(80%, -20%, 0) scale(0.75);
    }
    80% {
        top: -10%;
        right: 5%;
        transform: translate3d(30%, -100%, 0) scale(1.35);
    }
    100% {
        top: 95%;
        right: -15%;
        transform: translate3d(0, 0, 0) scale(0.9);
    }
}

/* Animación 3 - Movimiento en ZIGZAG extremo */
@keyframes orbitExtreme3 {
    0% {
        top: 50%;
        left: -15%;
        transform: translate3d(0, -50%, 0) scale(1);
    }
    16% {
        top: 5%;
        left: 30%;
        transform: translate3d(-30%, 0, 0) scale(1.7);
    }
    33% {
        top: 15%;
        left: 90%;
        transform: translate3d(-100%, 0, 0) scale(0.9);
    }
    50% {
        top: 50%;
        left: 105%;
        transform: translate3d(-100%, -50%, 0) scale(1.3);
    }
    66% {
        top: 85%;
        left: 70%;
        transform: translate3d(-70%, -100%, 0) scale(0.6);
    }
    83% {
        top: 95%;
        left: 10%;
        transform: translate3d(0, -100%, 0) scale(1.5);
    }
    100% {
        top: 50%;
        left: -15%;
        transform: translate3d(0, -50%, 0) scale(1);
    }
}

/* Animación 4 - Movimiento CIRCULAR muy amplio + ROTACIÓN */
@keyframes orbitExtreme4 {
    0% {
        top: 25%;
        left: 15%;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    20% {
        top: 5%;
        left: 55%;
        transform: translate3d(-50%, 0, 0) scale(1.4) rotate(72deg);
    }
    40% {
        top: 20%;
        left: 90%;
        transform: translate3d(-100%, -20%, 0) scale(0.8) rotate(144deg);
    }
    60% {
        top: 70%;
        left: 85%;
        transform: translate3d(-85%, -70%, 0) scale(1.5) rotate(216deg);
    }
    80% {
        top: 85%;
        left: 30%;
        transform: translate3d(-30%, -100%, 0) scale(0.9) rotate(288deg);
    }
    100% {
        top: 25%;
        left: 15%;
        transform: translate3d(0, 0, 0) scale(1) rotate(360deg);
    }
}

/* =============================================================================
   VARIANTES
   ============================================================================= */

/* Movimiento ULTRA rápido - Clase: ultrafast */
#animated-gradient-bg.ultrafast::before {
    animation: orbitExtreme1 5s ease-in-out infinite;
}

#animated-gradient-bg.ultrafast::after {
    animation: orbitExtreme2 6s ease-in-out infinite;
}

#animated-gradient-bg.ultrafast .uk-container::before {
    animation: orbitExtreme3 4s ease-in-out infinite;
}

#animated-gradient-bg.ultrafast .uk-container::after {
    animation: orbitExtreme4 5.5s ease-in-out infinite;
}

/* Movimiento rápido - Clase: fast */
#animated-gradient-bg.fast::before {
    animation: orbitExtreme1 7s ease-in-out infinite;
}

#animated-gradient-bg.fast::after {
    animation: orbitExtreme2 9s ease-in-out infinite;
}

#animated-gradient-bg.fast .uk-container::before {
    animation: orbitExtreme3 6s ease-in-out infinite;
}

#animated-gradient-bg.fast .uk-container::after {
    animation: orbitExtreme4 8s ease-in-out infinite;
}

/* Movimiento más pausado - Clase: smooth */
#animated-gradient-bg.smooth::before {
    animation: orbitExtreme1 15s ease-in-out infinite;
}

#animated-gradient-bg.smooth::after {
    animation: orbitExtreme2 18s ease-in-out infinite;
}

#animated-gradient-bg.smooth .uk-container::before {
    animation: orbitExtreme3 13s ease-in-out infinite;
}

#animated-gradient-bg.smooth .uk-container::after {
    animation: orbitExtreme4 16s ease-in-out infinite;
}

/* Manchas GIGANTES - Clase: mega */
#animated-gradient-bg.mega::before {
    width: 1400px;
    height: 1400px;
    filter: blur(90px);
}

#animated-gradient-bg.mega::after {
    width: 1500px;
    height: 1500px;
    filter: blur(100px);
}

#animated-gradient-bg.mega .uk-container::before {
    width: 1350px;
    height: 1350px;
    filter: blur(95px);
}

#animated-gradient-bg.mega .uk-container::after {
    width: 1450px;
    height: 1450px;
    filter: blur(105px);
}

/* Colores SÚPER SATURADOS - Clase: vivid */
#animated-gradient-bg.vivid::before,
#animated-gradient-bg.vivid::after,
#animated-gradient-bg.vivid .uk-container::before,
#animated-gradient-bg.vivid .uk-container::after {
    filter: blur(70px) saturate(2.5);
}

/* Mix blend más intenso - Clase: intense */
#animated-gradient-bg.intense::before,
#animated-gradient-bg.intense::after,
#animated-gradient-bg.intense .uk-container::before,
#animated-gradient-bg.intense .uk-container::after {
    mix-blend-mode: hard-light;
}