/* Efectos cromados y tornasol */
:root {
    --chrome-base: linear-gradient(135deg, #e2e2e2, #ffffff, #b8b8b8, #e2e2e2);
    --chrome-dark: linear-gradient(45deg, #1a1a1a, #2c2c2c, #1a1a1a);
    --chrome-highlight: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
    --rainbow-gradient: linear-gradient(90deg, 
        #ff0080, #ff4d00, #ffff00, #00ff80, 
        #0080ff, #8000ff, #ff0080);
}

/* Fondo base con efecto cromado */
body {
    background: var(--chrome-dark);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg,
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0.1) 100%);
    animation: chromeShift 10s ease infinite;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rainbow-gradient);
    opacity: 0.1;
    mix-blend-mode: overlay;
    animation: rainbowShift 15s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Sección con efecto cromado */
.power-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(26,26,26,0.9),
        rgba(44,44,44,0.9),
        rgba(26,26,26,0.9));
    backdrop-filter: blur(10px);
}

.power-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 10px);
    animation: gridShift 20s linear infinite;
}

.power-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 45%,
        rgba(255,255,255,0.1) 55%,
        transparent 100%);
    animation: chromeSwipe 5s ease-in-out infinite;
}

/* Tarjeta con efecto cromado */
.power-card {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.1));
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.power-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rainbow-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.power-card:hover::before {
    opacity: 0.1;
}

.power-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: 
        radial-gradient(circle at center,
            rgba(255,255,255,0.1) 0%,
            transparent 70%);
    animation: chromePulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* Animaciones */
@keyframes chromeShift {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes chromeSwipe {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    50% {
        transform: translateX(0%) skewX(-15deg);
    }
    100% {
        transform: translateX(100%) skewX(-15deg);
    }
}

@keyframes gridShift {
    0% {
        transform: translateY(0) perspective(500px) rotateX(10deg);
    }
    100% {
        transform: translateY(50px) perspective(500px) rotateX(10deg);
    }
}

@keyframes chromePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

/* Efectos de hover mejorados */
.power-hover-chrome {
    position: relative;
    overflow: hidden;
}

.power-hover-chrome::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: var(--rainbow-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: rotate(30deg);
    z-index: -1;
}

.power-hover-chrome:hover::before {
    opacity: 0.1;
}

/* Textos con efecto cromado */
.chrome-text {
    background: linear-gradient(90deg,
        #ffffff 0%,
        #e2e2e2 25%,
        #ffffff 50%,
        #e2e2e2 75%,
        #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textShift 5s linear infinite;
}

@keyframes textShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* Mejoras para el hero section */
.hero-enhanced {
    position: relative;
    overflow: hidden;
}

.hero-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%,
            rgba(255,0,128,0.1) 0%,
            transparent 50%),
        radial-gradient(circle at 70% 70%,
            rgba(0,128,255,0.1) 0%,
            transparent 50%);
    animation: heroGlow 10s ease infinite;
}

.hero-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 10px);
    animation: gridShift 20s linear infinite;
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}