/* Estilo de la página de selección de sets */
body { margin: 0; font-family: 'Poppins', sans-serif; background: #000; color: #ffffff; }
.page-title { text-align: center; margin-top: 2rem; font-size: 2rem; font-weight: 700; color: #ffffff; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; padding: 2rem; }

/* Estilo de las tarjetas */
.set-card { position: relative; text-decoration: none; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(6px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s, box-shadow 0.2s; }
.set-card:hover { transform: scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.set-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.set-card-title {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 1rem; font-weight: 600; padding: 1rem; text-align: center; backdrop-filter: blur(4px);}


/* Estilo del botón return */
.return-btn {position: absolute; top: 1rem; left: 1rem; background: var(--primary, #db0000); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: background 0.3s ease; z-index: 10;}
.return-btn:hover {background: #b00000;}


    /* Animaciones de las tarjetas al iniciar */
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .set-card { animation: fadeInUp 2s ease forwards; opacity: 0; }
    .grid .set-card:nth-child(1) { animation-delay: 0s; }
    .grid .set-card:nth-child(2) { animation-delay: 0.1s; }
    .grid .set-card:nth-child(3) { animation-delay: 0.2s; }