/* ============================================
   CANAL K - SISTEMA DE LOADERS PROFESIONALES
   31 Efectos de Carga Avanzados
   ============================================ */

/* Contenedor base del loader */
#initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #0f1226;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    overflow: hidden;
    box-sizing: border-box;
    /* Asegurar centrado perfecto en móvil */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Asegurar que el contenedor tenga tamaño adecuado */
#initial-loader .loader-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Centrado absoluto como respaldo */
    flex-shrink: 0;
}

#initial-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas para partículas */
.loader-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   EFECTO 0: RAINBOW SPINNER (Original)
   ============================================ */
.loader-effect-0 .loader-container {
    width: 56px;
    height: 56px;
}

.loader-effect-0 .rainbow-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #ea4335;
    border-right-color: #fbbc04;
    border-bottom-color: #34a853;
    border-left-color: #4285f4;
    border-radius: 50%;
    animation: rainbow-spin 1.4s linear infinite;
    position: absolute;
    box-shadow: 0 0 20px rgba(66, 133, 244, 0.3);
}

.loader-effect-0 .rainbow-spinner::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #4285f4;
    border-right-color: #ea4335;
    border-bottom-color: #fbbc04;
    border-left-color: #34a853;
    animation: rainbow-spin-reverse 1.6s linear infinite;
    opacity: 0.8;
}

.loader-effect-0 .rainbow-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes rainbow-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rainbow-spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* ============================================
   EFECTO 1: K ROTANDO CON ANILLOS
   ============================================ */
.loader-effect-1 .loader-k {
    position: absolute;
    font-size: 64px;
    font-weight: 900;
    color: #667eea;
    z-index: 10;
    animation: k-rotate-3d 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}

.loader-effect-1 .loader-ring {
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: ring-rotate 2s linear infinite;
}

.loader-effect-1 .loader-ring:nth-child(2) {
    width: 100px;
    height: 100px;
    border-top-color: #667eea;
    border-right-color: transparent;
    animation-delay: -0.5s;
}

.loader-effect-1 .loader-ring:nth-child(3) {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    border-bottom-color: #f093fb;
    border-left-color: transparent;
    animation-delay: -1s;
}

@keyframes k-rotate-3d {
    0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(180deg) rotateX(20deg); }
}

@keyframes ring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   EFECTO 2: K PULSANTE CON PARTÍCULAS
   ============================================ */
.loader-effect-2 .loader-k {
    position: absolute;
    font-size: 72px;
    font-weight: 900;
    color: #4facfe;
    z-index: 10;
    animation: k-pulse-glow 1.5s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(79, 172, 254, 1);
}

@keyframes k-pulse-glow {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.8;
        filter: brightness(1.5);
    }
}

/* ============================================
   EFECTO 3: K FLOTANTE CON ORBITAS
   ============================================ */
.loader-effect-3 .loader-k {
    position: absolute;
    font-size: 60px;
    font-weight: 900;
    color: #00f2fe;
    z-index: 10;
    animation: k-float 2s ease-in-out infinite;
}

.loader-effect-3 .orbital-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f2fe;
}

.loader-effect-3 .orbital-dot:nth-child(2) {
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    animation: orbit-top 3s linear infinite;
}

.loader-effect-3 .orbital-dot:nth-child(3) {
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    animation: orbit-right 3s linear infinite;
}

.loader-effect-3 .orbital-dot:nth-child(4) {
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    animation: orbit-bottom 3s linear infinite;
}

.loader-effect-3 .orbital-dot:nth-child(5) {
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    animation: orbit-left 3s linear infinite;
}

@keyframes k-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes orbit-top {
    0% { transform: translateX(-50%) rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes orbit-right {
    0% { transform: translateY(-50%) rotate(0deg) translateY(40px) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg) translateY(40px) rotate(-360deg); }
}

@keyframes orbit-bottom {
    0% { transform: translateX(-50%) rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes orbit-left {
    0% { transform: translateY(-50%) rotate(0deg) translateY(40px) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg) translateY(40px) rotate(-360deg); }
}

/* ============================================
   EFECTO 4: K MORPHING CON GRADIENTE
   ============================================ */
.loader-effect-4 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    background: linear-gradient(45deg, #667eea, #f093fb, #4facfe, #00f2fe);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 10;
    animation: k-morph-gradient 3s ease-in-out infinite, k-skew 2s ease-in-out infinite;
}

@keyframes k-morph-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes k-skew {
    0%, 100% { transform: skew(0deg) scale(1); }
    25% { transform: skew(-5deg) scale(1.1); }
    75% { transform: skew(5deg) scale(1.1); }
}

/* ============================================
   EFECTO 5: K CON WAVE EFFECT
   ============================================ */
.loader-effect-5 .loader-k {
    position: absolute;
    font-size: 80px;
    font-weight: 900;
    color: #f093fb;
    z-index: 10;
    animation: k-wave 1.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes k-wave {
    0%, 100% { 
        transform: scaleY(1) scaleX(1);
    }
    25% { 
        transform: scaleY(1.3) scaleX(0.9);
    }
    50% { 
        transform: scaleY(0.8) scaleX(1.1);
    }
    75% { 
        transform: scaleY(1.1) scaleX(0.95);
    }
}

/* ============================================
   EFECTO 6: SPINNER MÚLTIPLE CON PARTÍCULAS
   ============================================ */
.loader-effect-6 .spinner-multi {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-fast 0.8s linear infinite;
}

.loader-effect-6 .spinner-multi::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 80px;
    height: 80px;
    border: 4px solid rgba(240, 147, 251, 0.2);
    border-right-color: #f093fb;
    border-radius: 50%;
    animation: spin-medium 1s linear infinite reverse;
}

.loader-effect-6 .spinner-multi::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 60px;
    height: 60px;
    border: 4px solid rgba(79, 172, 254, 0.2);
    border-bottom-color: #4facfe;
    border-radius: 50%;
    animation: spin-slow 1.2s linear infinite;
}

@keyframes spin-fast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-medium {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   EFECTO 7: K ROTANDO CON ESTRELLAS
   ============================================ */
.loader-effect-7 .loader-k {
    position: absolute;
    font-size: 68px;
    font-weight: 900;
    color: #ffd700;
    z-index: 10;
    animation: k-rotate-star 2.5s ease-in-out infinite;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
}

.loader-effect-7 .star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffd700;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: star-float 2s ease-in-out infinite;
}

.loader-effect-7 .star:nth-child(2) { top: 10px; left: 20px; animation-delay: 0s; }
.loader-effect-7 .star:nth-child(3) { top: 20px; right: 15px; animation-delay: 0.3s; }
.loader-effect-7 .star:nth-child(4) { bottom: 15px; left: 25px; animation-delay: 0.6s; }
.loader-effect-7 .star:nth-child(5) { bottom: 25px; right: 20px; animation-delay: 0.9s; }

@keyframes k-rotate-star {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
}

@keyframes star-float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(10px, -10px) scale(1.3); opacity: 1; }
}

/* ============================================
   EFECTO 8: K CON BURBUJAS FLOTANTES
   ============================================ */
.loader-effect-8 .loader-k {
    position: absolute;
    font-size: 65px;
    font-weight: 900;
    color: #00f2fe;
    z-index: 10;
    animation: k-bubble 2s ease-in-out infinite;
}

.loader-effect-8 .bubble {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 254, 0.6);
    background: rgba(0, 242, 254, 0.1);
    animation: bubble-rise 3s ease-in-out infinite;
}

.loader-effect-8 .bubble:nth-child(2) {
    width: 20px;
    height: 20px;
    bottom: 10px;
    left: 20px;
    animation-delay: 0s;
}

.loader-effect-8 .bubble:nth-child(3) {
    width: 15px;
    height: 15px;
    bottom: 30px;
    right: 25px;
    animation-delay: 0.5s;
}

.loader-effect-8 .bubble:nth-child(4) {
    width: 25px;
    height: 25px;
    bottom: 50px;
    left: 50%;
    animation-delay: 1s;
}

@keyframes k-bubble {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes bubble-rise {
    0% { transform: translateY(0) scale(0.8); opacity: 0.6; }
    50% { transform: translateY(-40px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
}

/* ============================================
   EFECTO 9: K CON RAYOS DE LUZ
   ============================================ */
.loader-effect-9 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    color: #fff;
    z-index: 10;
    animation: k-glow-pulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
}

.loader-effect-9 .light-ray {
    position: absolute;
    width: 3px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform-origin: bottom center;
    animation: ray-rotate 2s linear infinite;
}

.loader-effect-9 .light-ray:nth-child(2) { animation-delay: 0s; }
.loader-effect-9 .light-ray:nth-child(3) { animation-delay: 0.25s; }
.loader-effect-9 .light-ray:nth-child(4) { animation-delay: 0.5s; }
.loader-effect-9 .light-ray:nth-child(5) { animation-delay: 0.75s; }
.loader-effect-9 .light-ray:nth-child(6) { animation-delay: 1s; }
.loader-effect-9 .light-ray:nth-child(7) { animation-delay: 1.25s; }
.loader-effect-9 .light-ray:nth-child(8) { animation-delay: 1.5s; }

@keyframes k-glow-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

@keyframes ray-rotate {
    0% { transform: rotate(0deg); opacity: 0.3; }
    50% { opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0.3; }
}

/* ============================================
   EFECTO 10: K CON PARTÍCULAS EXPLOSIVAS
   ============================================ */
.loader-effect-10 .loader-k {
    position: absolute;
    font-size: 72px;
    font-weight: 900;
    color: #f093fb;
    z-index: 10;
    animation: k-explode 2s ease-in-out infinite;
}

.loader-effect-10 .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f093fb;
    border-radius: 50%;
    box-shadow: 0 0 8px #f093fb;
    animation: particle-explode 2s ease-out infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes k-explode {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes particle-explode {
    0% { 
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* ============================================
   EFECTO 11: K CON ONDAS CONCÉNTRICAS
   ============================================ */
.loader-effect-11 .loader-k {
    position: absolute;
    font-size: 66px;
    font-weight: 900;
    color: #4facfe;
    z-index: 10;
    animation: k-wave-pulse 1.8s ease-in-out infinite;
}

.loader-effect-11 .wave {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid #4facfe;
    border-radius: 50%;
    animation: wave-expand 2s ease-out infinite;
}

.loader-effect-11 .wave:nth-child(2) { animation-delay: 0s; }
.loader-effect-11 .wave:nth-child(3) { animation-delay: 0.4s; }
.loader-effect-11 .wave:nth-child(4) { animation-delay: 0.8s; }

@keyframes k-wave-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes wave-expand {
    0% { 
        transform: scale(0.8);
        opacity: 1;
    }
    100% { 
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================
   EFECTO 12: K CON CUBO 3D ROTANDO
   ============================================ */
.loader-effect-12 .loader-k {
    position: absolute;
    font-size: 60px;
    font-weight: 900;
    color: #667eea;
    z-index: 10;
    animation: k-cube-rotate 3s ease-in-out infinite;
    transform-style: preserve-3d;
}

.loader-effect-12 .cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(102, 126, 234, 0.5);
    background: rgba(102, 126, 234, 0.1);
    animation: cube-spin 4s linear infinite;
}

@keyframes k-cube-rotate {
    0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
    33% { transform: rotateY(120deg) rotateX(20deg); }
    66% { transform: rotateY(240deg) rotateX(-20deg); }
}

@keyframes cube-spin {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ============================================
   EFECTO 13: K CON LÍNEAS ENERGÉTICAS
   ============================================ */
.loader-effect-13 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    color: #00f2fe;
    z-index: 10;
    animation: k-energy 2s ease-in-out infinite;
}

.loader-effect-13 .energy-line {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00f2fe, transparent);
    animation: energy-flow 1.5s linear infinite;
}

.loader-effect-13 .energy-line:nth-child(2) {
    width: 100px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.loader-effect-13 .energy-line:nth-child(3) {
    width: 100px;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.5s;
}

@keyframes k-energy {
    0%, 100% { filter: drop-shadow(0 0 10px #00f2fe); }
    50% { filter: drop-shadow(0 0 30px #00f2fe); }
}

@keyframes energy-flow {
    0% { transform: translateX(-50%) scaleX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}

/* ============================================
   EFECTO 14: K CON ESPIRAL ROTATORIA
   ============================================ */
.loader-effect-14 .loader-k {
    position: absolute;
    font-size: 64px;
    font-weight: 900;
    color: #f093fb;
    z-index: 10;
    animation: k-spiral 2.5s ease-in-out infinite;
}

.loader-effect-14 .spiral-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #f093fb;
    border-radius: 50%;
    box-shadow: 0 0 10px #f093fb;
    animation: spiral-rotate 3s linear infinite;
}

@keyframes k-spiral {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

@keyframes spiral-rotate {
    0% { 
        transform: rotate(0deg) translateX(50px) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg) translateX(50px) rotate(-360deg);
        opacity: 0.3;
    }
}

/* ============================================
   EFECTO 15: K CON CÍRCULOS PULSANTES
   ============================================ */
.loader-effect-15 .loader-k {
    position: absolute;
    font-size: 68px;
    font-weight: 900;
    color: #ffd700;
    z-index: 10;
    animation: k-pulse-circles 2s ease-in-out infinite;
}

.loader-effect-15 .pulse-circle {
    position: absolute;
    border: 2px solid #ffd700;
    border-radius: 50%;
    animation: circle-pulse 2s ease-out infinite;
}

.loader-effect-15 .pulse-circle:nth-child(2) {
    width: 90px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.loader-effect-15 .pulse-circle:nth-child(3) {
    width: 110px;
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.3s;
}

.loader-effect-15 .pulse-circle:nth-child(4) {
    width: 130px;
    height: 130px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.6s;
}

@keyframes k-pulse-circles {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes circle-pulse {
    0% { 
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   EFECTO 16: DOTS BOUNCING
   ============================================ */
.loader-effect-16 .bounce-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #667eea;
    border-radius: 50%;
    animation: bounce-dot 1.4s ease-in-out infinite;
}

.loader-effect-16 .bounce-dot:nth-child(1) { left: 0; animation-delay: 0s; }
.loader-effect-16 .bounce-dot:nth-child(2) { left: 30px; animation-delay: 0.2s; }
.loader-effect-16 .bounce-dot:nth-child(3) { left: 60px; animation-delay: 0.4s; }
.loader-effect-16 .bounce-dot:nth-child(4) { left: 90px; animation-delay: 0.6s; }

@keyframes bounce-dot {
    0%, 80%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-30px) scale(1.2); }
}

/* ============================================
   EFECTO 17: BARS WAVE
   ============================================ */
.loader-effect-17 .wave-bar {
    position: absolute;
    width: 8px;
    height: 60px;
    background: linear-gradient(to top, #667eea, #f093fb);
    border-radius: 4px;
    animation: wave-bar 1.2s ease-in-out infinite;
}

.loader-effect-17 .wave-bar:nth-child(1) { left: 0; animation-delay: 0s; }
.loader-effect-17 .wave-bar:nth-child(2) { left: 15px; animation-delay: 0.1s; }
.loader-effect-17 .wave-bar:nth-child(3) { left: 30px; animation-delay: 0.2s; }
.loader-effect-17 .wave-bar:nth-child(4) { left: 45px; animation-delay: 0.3s; }
.loader-effect-17 .wave-bar:nth-child(5) { left: 60px; animation-delay: 0.4s; }

@keyframes wave-bar {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

/* ============================================
   EFECTO 18: CIRCULAR PROGRESS
   ============================================ */
.loader-effect-18 .circular-progress {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 6px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: circular-spin 1s linear infinite;
}

.loader-effect-18 .circular-progress::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    top: 6px;
    left: 6px;
    border: 4px solid rgba(240, 147, 251, 0.2);
    border-right-color: #f093fb;
    border-radius: 50%;
    animation: circular-spin-reverse 1.2s linear infinite;
}

@keyframes circular-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes circular-spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* ============================================
   EFECTO 19: PULSE RINGS
   ============================================ */
.loader-effect-19 .pulse-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid #4facfe;
    border-radius: 50%;
    animation: pulse-ring-expand 2s ease-out infinite;
}

.loader-effect-19 .pulse-ring:nth-child(1) { animation-delay: 0s; }
.loader-effect-19 .pulse-ring:nth-child(2) { animation-delay: 0.5s; }
.loader-effect-19 .pulse-ring:nth-child(3) { animation-delay: 1s; }

@keyframes pulse-ring-expand {
    0% { 
        transform: scale(0.5);
        opacity: 1;
    }
    100% { 
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================
   EFECTO 20: GRID LOADER
   ============================================ */
.loader-effect-20 .loader-container {
    display: grid;
    grid-template-columns: repeat(3, 20px);
    grid-template-rows: repeat(3, 20px);
    gap: 5px;
    width: auto;
    height: auto;
}

.loader-effect-20 .grid-dot {
    width: 20px;
    height: 20px;
    background: #667eea;
    border-radius: 50%;
    animation: grid-pulse 1.4s ease-in-out infinite;
}

.loader-effect-20 .grid-dot:nth-child(1) { animation-delay: 0s; }
.loader-effect-20 .grid-dot:nth-child(2) { animation-delay: 0.1s; }
.loader-effect-20 .grid-dot:nth-child(3) { animation-delay: 0.2s; }
.loader-effect-20 .grid-dot:nth-child(4) { animation-delay: 0.3s; }
.loader-effect-20 .grid-dot:nth-child(5) { animation-delay: 0.4s; }
.loader-effect-20 .grid-dot:nth-child(6) { animation-delay: 0.5s; }
.loader-effect-20 .grid-dot:nth-child(7) { animation-delay: 0.6s; }
.loader-effect-20 .grid-dot:nth-child(8) { animation-delay: 0.7s; }
.loader-effect-20 .grid-dot:nth-child(9) { animation-delay: 0.8s; }

@keyframes grid-pulse {
    0%, 100% { transform: scale(0.5); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
}

/* ============================================
   EFECTO 21: K CON HEXÁGONOS ROTANDO
   ============================================ */
.loader-effect-21 .loader-k {
    position: absolute;
    font-size: 65px;
    font-weight: 900;
    color: #667eea;
    z-index: 10;
    animation: k-hex-rotate 2s ease-in-out infinite;
}

.loader-effect-21 .hexagon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.3);
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    border: 2px solid #667eea;
    animation: hex-rotate 3s linear infinite;
}

.loader-effect-21 .hexagon:nth-child(2) { top: -50px; left: 50%; transform: translateX(-50%); }
.loader-effect-21 .hexagon:nth-child(3) { right: -50px; top: 50%; transform: translateY(-50%); }
.loader-effect-21 .hexagon:nth-child(4) { bottom: -50px; left: 50%; transform: translateX(-50%); }
.loader-effect-21 .hexagon:nth-child(5) { left: -50px; top: 50%; transform: translateY(-50%); }

@keyframes k-hex-rotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

@keyframes hex-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   EFECTO 22: K CON PARTÍCULAS MAGNÉTICAS
   ============================================ */
.loader-effect-22 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    color: #f093fb;
    z-index: 10;
    animation: k-magnetic 2s ease-in-out infinite;
}

.loader-effect-22 .magnetic-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #f093fb;
    border-radius: 50%;
    box-shadow: 0 0 15px #f093fb;
    animation: magnetic-attract 3s ease-in-out infinite;
    top: 50%;
    left: 50%;
}

@keyframes k-magnetic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes magnetic-attract {
    0% { 
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translate(-50%, -50%) translate(var(--mx, 0), var(--my, 0)) scale(1.5);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.8;
    }
}

/* ============================================
   EFECTO 23: K CON FLECHA ROTATORIA
   ============================================ */
.loader-effect-23 .loader-k {
    position: absolute;
    font-size: 68px;
    font-weight: 900;
    color: #00f2fe;
    z-index: 10;
    animation: k-arrow-pulse 1.8s ease-in-out infinite;
}

.loader-effect-23 .arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    animation: arrow-rotate 2s linear infinite;
}

.loader-effect-23 .arrow:nth-child(2) {
    border-width: 0 15px 30px 15px;
    border-color: transparent transparent #00f2fe transparent;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.loader-effect-23 .arrow:nth-child(3) {
    border-width: 30px 15px 0 15px;
    border-color: #00f2fe transparent transparent transparent;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes k-arrow-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

@keyframes arrow-rotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* ============================================
   EFECTO 24: K CON CRISTALES ROTANDO
   ============================================ */
.loader-effect-24 .loader-k {
    position: absolute;
    font-size: 66px;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea, #f093fb, #4facfe);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 10;
    animation: k-crystal 2.5s ease-in-out infinite;
}

.loader-effect-24 .crystal {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(102, 126, 234, 0.4);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    border: 2px solid #667eea;
    animation: crystal-rotate 4s linear infinite;
}

.loader-effect-24 .crystal:nth-child(2) { top: -45px; left: 50%; transform: translateX(-50%); }
.loader-effect-24 .crystal:nth-child(3) { right: -45px; top: 50%; transform: translateY(-50%); }
.loader-effect-24 .crystal:nth-child(4) { bottom: -45px; left: 50%; transform: translateX(-50%); }
.loader-effect-24 .crystal:nth-child(5) { left: -45px; top: 50%; transform: translateY(-50%); }

@keyframes k-crystal {
    0%, 100% { 
        transform: rotate(0deg);
        background-position: 0% 50%;
    }
    50% { 
        transform: rotate(10deg);
        background-position: 100% 50%;
    }
}

@keyframes crystal-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
    100% { transform: translate(-50%, -50%) rotate(360deg) rotate(0deg) scale(1); }
}

/* ============================================
   EFECTO 25: K CON SISTEMA SOLAR
   ============================================ */
.loader-effect-25 .loader-k {
    position: absolute;
    font-size: 60px;
    font-weight: 900;
    color: #ffd700;
    z-index: 10;
    animation: k-solar 3s ease-in-out infinite;
}

.loader-effect-25 .planet {
    position: absolute;
    border-radius: 50%;
    animation: planet-orbit 4s linear infinite;
}

.loader-effect-25 .planet:nth-child(2) {
    width: 12px;
    height: 12px;
    background: #4facfe;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.loader-effect-25 .planet:nth-child(3) {
    width: 10px;
    height: 10px;
    background: #f093fb;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 1s;
}

.loader-effect-25 .planet:nth-child(4) {
    width: 14px;
    height: 14px;
    background: #00f2fe;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2s;
}

@keyframes k-solar {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

@keyframes planet-orbit {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(50px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg);
    }
}

/* ============================================
   EFECTO 26: K CON RELOJ ANALÓGICO
   ============================================ */
.loader-effect-26 .loader-k {
    position: absolute;
    font-size: 64px;
    font-weight: 900;
    color: #667eea;
    z-index: 10;
    animation: k-clock 2s ease-in-out infinite;
}

.loader-effect-26 .clock-hand {
    position: absolute;
    background: #667eea;
    transform-origin: bottom center;
    animation: clock-tick 2s linear infinite;
}

.loader-effect-26 .clock-hand.hour {
    width: 4px;
    height: 40px;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 4s;
}

.loader-effect-26 .clock-hand.minute {
    width: 3px;
    height: 50px;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 2s;
}

@keyframes k-clock {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes clock-tick {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* ============================================
   EFECTO 27: K CON CORAZONES FLOTANTES
   ============================================ */
.loader-effect-27 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    color: #f093fb;
    z-index: 10;
    animation: k-heart 2s ease-in-out infinite;
}

.loader-effect-27 .heart {
    position: absolute;
    width: 20px;
    height: 18px;
    background: #f093fb;
    transform: rotate(-45deg);
    animation: heart-float 3s ease-in-out infinite;
}

.loader-effect-27 .heart::before,
.loader-effect-27 .heart::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f093fb;
    border-radius: 50% 50% 0 0;
}

.loader-effect-27 .heart::before {
    top: -10px;
    left: 0;
    transform: rotate(45deg);
}

.loader-effect-27 .heart::after {
    top: -10px;
    left: 10px;
    transform: rotate(-45deg);
}

.loader-effect-27 .heart:nth-child(2) { top: -40px; left: 20px; animation-delay: 0s; }
.loader-effect-27 .heart:nth-child(3) { top: -30px; right: 15px; animation-delay: 0.5s; }
.loader-effect-27 .heart:nth-child(4) { bottom: -35px; left: 25px; animation-delay: 1s; }

@keyframes k-heart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes heart-float {
    0%, 100% { 
        transform: translate(0, 0) rotate(-45deg) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translate(10px, -20px) rotate(-45deg) scale(1.2);
        opacity: 1;
    }
}

/* ============================================
   EFECTO 28: K CON RAYOS X
   ============================================ */
.loader-effect-28 .loader-k {
    position: absolute;
    font-size: 72px;
    font-weight: 900;
    color: #00f2fe;
    z-index: 10;
    animation: k-xray 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #00f2fe);
}

.loader-effect-28 .x-ray {
    position: absolute;
    width: 3px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #00f2fe, transparent);
    animation: xray-scan 2s linear infinite;
}

.loader-effect-28 .x-ray:nth-child(2) {
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    animation-delay: 0s;
}

.loader-effect-28 .x-ray:nth-child(3) {
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    animation-delay: 0.5s;
}

@keyframes k-xray {
    0%, 100% { filter: drop-shadow(0 0 20px #00f2fe) brightness(1); }
    50% { filter: drop-shadow(0 0 40px #00f2fe) brightness(1.5); }
}

@keyframes xray-scan {
    0% { 
        transform: translateX(-50%) rotate(45deg) scaleY(0);
        opacity: 0;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        transform: translateX(-50%) rotate(45deg) scaleY(1);
        opacity: 0;
    }
}

/* ============================================
   EFECTO 29: K CON MOLÉCULAS
   ============================================ */
.loader-effect-29 .loader-k {
    position: absolute;
    font-size: 68px;
    font-weight: 900;
    color: #4facfe;
    z-index: 10;
    animation: k-molecule 2.5s ease-in-out infinite;
}

.loader-effect-29 .atom {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #4facfe;
    border-radius: 50%;
    box-shadow: 0 0 15px #4facfe;
    animation: atom-orbit 3s linear infinite;
}

.loader-effect-29 .atom:nth-child(2) { top: -45px; left: 50%; animation-delay: 0s; }
.loader-effect-29 .atom:nth-child(3) { right: -45px; top: 50%; animation-delay: 1s; }
.loader-effect-29 .atom:nth-child(4) { bottom: -45px; left: 50%; animation-delay: 2s; }

.loader-effect-29 .bond {
    position: absolute;
    width: 2px;
    height: 60px;
    background: rgba(79, 172, 254, 0.5);
    top: 50%;
    left: 50%;
    transform-origin: top center;
    animation: bond-rotate 3s linear infinite;
}

.loader-effect-29 .bond:nth-child(5) { transform: translate(-50%, -50%) rotate(0deg); }
.loader-effect-29 .bond:nth-child(6) { transform: translate(-50%, -50%) rotate(120deg); }
.loader-effect-29 .bond:nth-child(7) { transform: translate(-50%, -50%) rotate(240deg); }

@keyframes k-molecule {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

@keyframes atom-orbit {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(45px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(45px) rotate(-360deg);
    }
}

@keyframes bond-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   EFECTO 30: K CON GALAXIA ROTATORIA
   ============================================ */
.loader-effect-30 .loader-k {
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    color: #fff;
    z-index: 10;
    animation: k-galaxy 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

.loader-effect-30 .galaxy-arm {
    position: absolute;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: galaxy-spin 4s linear infinite;
    transform-origin: center;
}

.loader-effect-30 .galaxy-arm:nth-child(2) { animation-delay: 0s; }
.loader-effect-30 .galaxy-arm:nth-child(3) { animation-delay: 0.5s; transform: rotate(45deg); }
.loader-effect-30 .galaxy-arm:nth-child(4) { animation-delay: 1s; transform: rotate(90deg); }
.loader-effect-30 .galaxy-arm:nth-child(5) { animation-delay: 1.5s; transform: rotate(135deg); }

@keyframes k-galaxy {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.1) rotate(5deg);
        filter: brightness(1.3);
    }
}

@keyframes galaxy-spin {
    0% { 
        transform: rotate(0deg) scaleX(0.5);
        opacity: 0.5;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg) scaleX(0.5);
        opacity: 0.5;
    }
}

/* ============================================
   ANIMACIÓN DE FADE OUT
   ============================================ */
@keyframes fade-out-spinner {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* Ocultar contenido hasta que se cargue */
body#index-page:not(.loaded) > *:not(#initial-loader) {
    opacity: 0;
}

body#index-page.loaded > *:not(#initial-loader) {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* ============================================
   CONTENIDO PERSONALIZADO DEL LOADER
   ============================================ */

/* Texto personalizado */
.loader-k .loader-custom-text {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1;
}

/* Imagen personalizada */
.loader-k .loader-custom-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Ajustar tamaño de imagen según el efecto */
.loader-effect-1 .loader-custom-image,
.loader-effect-2 .loader-custom-image,
.loader-effect-3 .loader-custom-image,
.loader-effect-4 .loader-custom-image,
.loader-effect-5 .loader-custom-image {
    width: 64px;
    height: 64px;
}

.loader-effect-7 .loader-custom-image,
.loader-effect-8 .loader-custom-image,
.loader-effect-9 .loader-custom-image,
.loader-effect-10 .loader-custom-image,
.loader-effect-11 .loader-custom-image {
    width: 72px;
    height: 72px;
}

.loader-effect-12 .loader-custom-image,
.loader-effect-13 .loader-custom-image,
.loader-effect-14 .loader-custom-image,
.loader-effect-15 .loader-custom-image {
    width: 60px;
    height: 60px;
}

.loader-effect-21 .loader-custom-image,
.loader-effect-22 .loader-custom-image,
.loader-effect-23 .loader-custom-image,
.loader-effect-24 .loader-custom-image,
.loader-effect-25 .loader-custom-image,
.loader-effect-26 .loader-custom-image,
.loader-effect-27 .loader-custom-image,
.loader-effect-28 .loader-custom-image,
.loader-effect-29 .loader-custom-image,
.loader-effect-30 .loader-custom-image {
    width: 68px;
    height: 68px;
}

/* Asegurar que las imágenes hereden las animaciones del contenedor */
.loader-k .loader-custom-image {
    animation: inherit;
    transform-origin: center center;
}

/* Media queries para asegurar centrado perfecto en móviles */
@media (max-width: 768px) {
    #initial-loader {
        /* Forzar centrado en móviles */
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #initial-loader .loader-container {
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Ajustar tamaño de imágenes en móviles */
    .loader-k .loader-custom-image {
        max-width: 80%;
        max-height: 80%;
    }
}