/* =========================================
   ESTILOS PARA EL CATÁLOGO DE PRODUCTOS
   ========================================= */

/* 1. Animación de entrada suave */
.card-catalogo {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUpCatalogo 0.6s ease-out forwards;
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Efecto escalonado para las tarjetas (hasta 8 tarjetas) */
.card-catalogo:nth-child(1) { animation-delay: 0.1s; }
.card-catalogo:nth-child(2) { animation-delay: 0.2s; }
.card-catalogo:nth-child(3) { animation-delay: 0.3s; }
.card-catalogo:nth-child(4) { animation-delay: 0.4s; }
.card-catalogo:nth-child(5) { animation-delay: 0.5s; }
.card-catalogo:nth-child(6) { animation-delay: 0.6s; }
.card-catalogo:nth-child(7) { animation-delay: 0.7s; }
.card-catalogo:nth-child(8) { animation-delay: 0.8s; }

@keyframes fadeInUpCatalogo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Hover: elevación y sombra */
.card-catalogo:hover {
    transform: translateY(-5px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15) !important;
}

/* 4. Zoom suave a la imagen/icono al pasar el ratón */
.card-catalogo .card-img-top-container {
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.card-catalogo .card-img-top-container i,
.card-catalogo .card-img-top-container img {
    transition: transform 0.4s ease;
}

.card-catalogo:hover .card-img-top-container i,
.card-catalogo:hover .card-img-top-container img {
    transform: scale(1.1);
}

/* 5. Ajustes para Modo Oscuro */
[data-bs-theme="dark"] .card-catalogo .card-body {
    background-color: #2b3035;
    color: #e9ecef;
}
[data-bs-theme="dark"] .card-catalogo .card-title {
    color: #f8f9fa !important;
}
[data-bs-theme="dark"] .card-catalogo .bg-light {
    background-color: #1a1d20 !important;
}