/* 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(300px, 1fr)); gap: 1.5rem; padding: 2rem; }

/* Estilo de las tarjetas */
.set-card { position: relative; text-decoration: none; border-radius: 12px; overflow: hidden; 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.7); color: #fff; font-size: 1rem; font-weight: 600; padding: 1rem; opacity: 0; transform: translateY(100%); transition: all 0.3s ease; text-align: center; }
.set-card:hover .set-card-title { opacity: 1; transform: translateY(0); }

/* 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; }



/* Estilo de las páginas de sets */
.car-page { font-family: 'Poppins', sans-serif; background-color: #000; color: #eee; padding: 2rem; max-width: 900px; margin: auto; }
.car-page h2 { color: #ffffff; text-transform: uppercase; margin-top: 2rem; font-size: 1.4rem; }
.car-page p { line-height: 1.6; margin-bottom: 2rem; }
.car-page img { width: 100%; margin: 1rem 0; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: transform 0.3s ease; }
.car-page img:hover { transform: scale(1.02); }

    /*Animaciones al abrir la pagina de sets*/
    @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
    .car-page > * {opacity: 0; animation: fadeSlideUp 0.6s ease-out forwards;}
    .car-page > *:nth-child(1) { animation-delay: 0s; }
    .car-page > *:nth-child(2) { animation-delay: 0.2s; }
    .car-page > *:nth-child(3) { animation-delay: 0.4s; }
    .car-page > *:nth-child(4) { animation-delay: 0.6s; }
    .car-page > *:nth-child(5) { animation-delay: 0.8s; }
    .car-page > *:nth-child(6) { animation-delay: 1s; }
    .car-page > *:nth-child(7) { animation-delay: 1.2s; }
    .car-page > *:nth-child(8) { animation-delay: 1.4s; }
    .car-page > *:nth-child(9) { animation-delay: 1.6s; }
    .car-page > *:nth-child(10) { animation-delay: 1.8s; }

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}