#artpop {
    position: relative;
    background-color: black;
}

/* Fondo de la sección escopado al contenido (igual que .blog-bg / .webapp-bg /
   .portfolio-bg / .contact-bg): así .section-title queda fuera, sobre negro
   plano, en vez de vivir dentro de esta misma caja con imagen de fondo. */
.artpop-bg {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Mismo recurso que .blog-bg/.webapp-bg/.portfolio-bg: degradado oscuro
       superpuesto a la imagen de fondo (antes era un radial-gradient, que
       oscurecía el centro más que los bordes y dejaba las video-card de los
       extremos del grid sobre un fondo más vivo que la del medio). En tono
       morado-negro para que la cortina roja, muy saturada, quede en la
       paleta del resto del sitio y no le robe protagonismo a los vídeos. */
    /* Fallback para navegadores que no entienden image-set(). */
    background-image:
        linear-gradient(180deg, rgba(20, 10, 22, 0.55) 0%, rgba(20, 10, 22, 0.85) 100%),
        url("img/artpop-bg.png");
    background-image:
        linear-gradient(180deg, rgba(20, 10, 22, 0.55) 0%, rgba(20, 10, 22, 0.85) 100%),
        image-set(
            url("img/artpop-bg.avif") type("image/avif"),
            url("img/artpop-bg.webp") type("image/webp"),
            url("img/artpop-bg.png") type("image/png")
        );
    background-position: center;
    background-size: cover;
    padding: 100px 0;
}

.artpop-bg::before,
.artpop-bg::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px; /* Ajusta la altura del degradado */
    pointer-events: none; /* No bloquea interacciones */
}

/* Degradado superior */
.artpop-bg::before {
    top: 0;
    background: linear-gradient(to bottom, black, transparent);
}

/* Degradado inferior */
.artpop-bg::after {
    bottom: 0;
    background: linear-gradient(to top, black, transparent);
}

.artpop-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    /* Flex + wrap en vez de grid: con grid (auto-fit + 1fr), cuando el
       3er elemento pasa a su propia fila, esa fila conserva las mismas
       columnas que la fila de arriba y la tarjeta ocupa solo la primera,
       quedando pegada a la izquierda con un hueco invisible a la derecha.
       Con flex, justify-content centra cada fila según lo que contiene
       de verdad, tenga 1, 2 o 3 tarjetas. */
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 50px;
}

.video-card {
    /* Ancho fijo (sin grow) en vez de estirarse a ocupar el espacio
       sobrante: así una tarjeta sola en su fila (caso de arriba) no se
       ensancha hasta ocupar todo el ancho, y todas miden lo mismo
       independientemente de cuántas caigan en cada fila. */
    flex: 0 1 340px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 16 / 9;
}

@keyframes videoCardReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.video-card {
    opacity: 0;
}

.video-card.is-visible {
    animation: videoCardReveal 1.2s ease-out forwards;
}

.video-card:nth-child(2).is-visible {
    animation-delay: 0.2s;
}

.video-card:nth-child(3).is-visible {
    animation-delay: 0.4s;
}

.video-card:hover {
    background: rgba(195, 135, 191, 0.15);
    box-shadow: 0 0 20px rgba(195, 135, 191, 0.5);
}

.video-card iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1300px) {
    .video-card {
        flex-basis: 300px;
    }
}

@media (max-width: 992px) {
    .artpop-grid {
        gap: 30px;
        padding: 0 30px;
    }

    .video-card {
        flex-basis: 280px;
    }
}

@media (max-width: 768px) {
    .artpop-grid {
        gap: 20px;
        padding: 0 20px;
    }

    .video-card {
        flex-basis: 100%;
    }

    .artpop-bg {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card {
        opacity: 1;
    }

    .video-card.is-visible {
        animation: none;
    }
}