/* HERO */
.cabecera {
    min-height: 150px;
    padding: 60px 20px;
    background: linear-gradient(90deg, #040313, #18012e);
    background-size: 400% 400%;
    animation: gradientMove 13s ease infinite;
}

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

.neon-title {
    font-size: 3rem;
    text-shadow:
        0 0 10px #f10000,
        0 0 20px #5c2121,
        0 0 40px #c78787;
}

/* NAV */
.nav-btn {
    margin: 0 10px;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #00ffff;
    transition: 0.3s;
}

.nav-btn:hover {
    background: #00ffff;
    color: #000;
}

/* CARDS */
.arcade-card {
    background: #0b0b1e;
    border: 2px solid #00ffff;
    box-shadow: 0 0 20px #00ffff55;
    transition: transform 0.3s;
        box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 16px 48px rgba(0, 0, 0, 0.18);
}

.arcade-card:hover {
    transform: scale(1.05);
}

.card-title {
    color: #00ffff;
}

/* BOTONES */

.btn-neon-disabled {
    background: transparent;
    border: 2px solid rgba(0, 255, 255, 0.35);
    color: rgba(0, 255, 255, 0.35);
    cursor: not-allowed;
    pointer-events: none;
    text-shadow: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-neon-blue {
    background: transparent;
    border: 2px solid #00ffff;
    color: #00ffff;
}

.btn-neon-green {
    border: 2px solid #00ff88;
    color: #00ff88;
}

.btn-neon-pink {
    border: 2px solid #ff00aa;
    color: #ff00aa;
}

.btn-neon-orange {
    border: 2px solid #ffaa00;
    color: #ffaa00;
}

.btn:hover {
    background-color: #49205c;
    color: #e0e0e0;
}

/* FOOTER */
.footer {
    margin-top: 80px;
    padding: 20px;
    color: #aaa;
    font-size: 0.9rem;
}
/* CARD ARCADE CON BORDE NEÓN */
.arcade-card {
    position: relative;
    background: #0b0b1e;
    border-radius: 14px;
    padding: 2px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* BORDE NEÓN */
.arcade-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        #ff0080,
        #00e0ff,
        #00ff88,
        #ffcc00,
        #ff0080
    );
    background-size: 400% 400%;
    animation: neonBorder 8s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* CONTENIDO INTERNO */
.arcade-card > * {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    background: #0b0b1e;
}

/* ANIMACIÓN */
@keyframes neonBorder {
    0% { background-position: 0% }
    100% { background-position: 400% }
}

/* HOVER */
.arcade-card:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 20px #00ffff88,
        0 0 40px #ff00aa44;
}
.card-text {
    color: #e2e2e2;
}
body {
       background: radial-gradient(circle at bottom, #1b0033, #000);
    color: #fff;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(90deg, #0a0733, #481b72);
    background-size: 400% 400%;
    animation: gradientMove 7s ease infinite;
}

.article-card {
    position: relative;
    background: #0b0b1e;
    border-radius: 14px;
    padding: 2px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 16px 48px rgba(0, 0, 0, 0.18);
}


.article-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        #01335c,
        #023e46,
        #050e27,
        #28052c,
        #1a0a53
    );
        background-size: 400% 400%;
    animation: neonBorder 18s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
.imgcarrusel {
    max-height: 400px;
    width: 100%;
    object-fit: contain;
}
.fluid-100 {
        max-height: 100px;
}
.fluid-200 {
        max-height: 200px;
}
.fluid-300 {
        max-height: 300px;
}
.fluid-500 {
        max-height: 500px;
}
.img-fluid {
    width: 100%;
    object-fit: contain;
}
.carousel-indicators [data-bs-target] {
    background-color: #00ffff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.4;
}

.carousel-indicators .active {
    opacity: 1;
    box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    0 16px 48px rgba(0,0,0,.18);
}

/* ===== FIX INTERACCIÓN ARTICLE CARD ===== */

.article-card {
    position: relative;
    z-index: 1;
}

/* El borde decorativo no debe capturar eventos */
.article-card::before {
    pointer-events: none;
}

/* El contenido real va arriba */
.article-card > * {
    position: relative;
    z-index: 2;
}
h1, h2, h3, h4, h5, h6, a, .btn{
    font-family: 'Orbitron', sans-serif;
}