/* === RESET BÁSICO === */
body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

/* === NAVBAR === */
.navbar {
    border-bottom: 2px solid #00c853 !important;
}

.navbar-brand {
    font-weight: bold;
    color: #00c853 !important;
}

.nav-link {
    color: #ccc !important;
    transition: color 0.3s;
}

    .nav-link:hover {
        color: #00ff80 !important;
    }

/* === HERO CON DEGRADADO ANIMADO === */
#hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(-45deg, #00c853, #212121, #1b5e20, #000);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
    color: white;
    z-index: 1;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* === TÍTULO HERO BRILLANTE === */
#hero h1 {
    font-size: 3.5rem;
    text-shadow: 0 0 10px #00ff80, 0 0 20px #00ff80;
    animation: pulse 2.5s infinite alternate;
}

@keyframes pulse {
    from {
        text-shadow: 0 0 10px #00ff80;
    }

    to {
        text-shadow: 0 0 30px #00ff80;
    }
}

/* === FONDO ANIMADO SUAVE PARA EL RESTO DE LAS SECCIONES === */
section:not(#hero) {
    position: relative;
    background: linear-gradient(-45deg, #111, #222, #333, #000);
    background-size: 300% 300%;
    animation: bgShift 18s ease infinite;
    color: #e0e0e0;
}

@keyframes bgShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0%
        /* === BOTONES === */
        .btn-success {
    background-color: #00c853 !important;
    border: none;
}

.btn-outline-light:hover {
    background-color: #00c853 !important;
    color: #fff !important;
}

/* === SECCIONES GENERALES === */
section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

    section.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* === TARJETAS === */
.card {
    border: none;
    box-shadow: 0 0 10px rgba(0, 255, 128, 0.2);
    transition: transform 0.3s;
}

    .card:hover {
        transform: translateY(-5px);
    }

/* === FOOTER === */
footer {
    border-top: 2px solid #00c853 !important;
}







/* === EFECTO DE FADE-IN AL HACER SCROLL === */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s ease, transform 1s ease;
    }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }
}