*::selection {
    background-color: #fff;
    color: #000;
}

/* Animación de zoom lento para gradients */
@keyframes gradientZoom {
    0%, 100% {
        background-size: 100% 100%;
    }
    50% {
        background-size: 200% 200%;
    }
}

.bg-gradient-colors {
    background-size: cover;
    background-position: center;
    background-size: 100% 100%;
    background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
    background-image:
        linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0)),
        radial-gradient(75% 100% at 90% 120%, #ff9b20 30%, #073AFF00 100%),
        radial-gradient(75% 100% at 10% 120%, #ff2a74 30%, #073AFF00 100%),
        linear-gradient(125deg, #45FD6FFF 0%, #41ba50 100%);
}

.gradient-image {
    background-size: cover;
    background-position: center;
    background-size: 100% 100%;
    background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
    background-image:
        radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),
        radial-gradient(18% 28% at 22% 67%, #FFFFFF59 6%, #073AFF00 100%),
        radial-gradient(18% 28% at 80% 103%, #161313FF 0%, #073AFF00 100%),
        radial-gradient(18% 28% at 19% 105%, #161313FF 0%, #073AFF00 100%),
        radial-gradient(70% 53% at 101% 4%, #41ba50 0%, #073AFF00 100%),
        radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),
        radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),
        radial-gradient(31% 43% at 36% 107%, #100505FF 0%, #073AFF00 100%),
        radial-gradient(21% 37% at 60% -16%, #D3FF6D9C 24%, #073AFF00 100%),
        radial-gradient(35% 56% at 12% 39%, #ff2a74 9%, #073AFF00 100%),
        radial-gradient(74% 86% at 29% 22%, #ff9b20 24%, #073AFF00 100%),
        linear-gradient(125deg, #964040FF 1%, #41ba50 75%);
    animation: gradientZoom 10s ease-in-out infinite;
    }

/* Scroll margin para navegación suave */
section {
    scroll-margin-top: 120px;
}

/* Animaciones para las FAQ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-content.active {
    max-height: 200px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 0;
}

.faq-toggle i {
    transition: transform 0.3s ease-out;
}

.faq-toggle.active i {
    transform: rotate(180deg);
}

/* Animaciones de entrada */
@keyframes splitSlide {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes opacitySlide {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes opacityFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.split-slide {
    animation: splitSlide 0.8s ease-out forwards;
    animation-play-state: paused;
}

.opacity-slide {
    animation: opacitySlide 0.6s ease-out forwards;
    animation-play-state: paused;
}

.opacity-fade {
    animation: opacityFade 0.8s ease-out forwards;
    animation-play-state: paused;
}

/* Efectos hover para las cards */
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}