@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
/* --- Contenedor de la Grilla (Responsivo) --- */
.product-grid {
    display: grid;
    /* En PC: Forzamos exactamente 4 columnas */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 20px;
    margin: 0 auto 50px auto;
    max-width: 1200px;
}
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    }
}
/* --- Ajustes Críticos para Móviles (2 Columnas) --- */
@media (max-width: 576px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Forzamos 2 columnas */
        gap: 10px;
        padding: 10px;
    }
    
    .carousel {
        height: auto !important;
    }
    .card-content {
        padding: 8px;
    }

    .card-content h3 {
        font-size: 1.1rem; /* Título un poco más pequeño */
    }
    .discount-badge {
        font-size: 0.75rem;
        padding: 2px 8px;
        top: 5px;
        right: 5px;
    }

    .old-price {
        font-size: 0.75rem;
    }

    .price, .price-bcv {
        font-size: 0.5rem; /* Precios ajustados */
    }

    .badge {
        font-size: 0.6rem !important; /* Categorías más pequeñas */
        padding: 4px 8px !important;
    }
}

/* --- La Tarjeta --- */
.card {
    background-color: #262626 !important;
    border: 1px solid rgba(255, 0, 128, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Obliga a todas las tarjetas de la misma fila a medir lo mismo */
    transition: all 0.3s ease-in-out !important;
}

/* --- Marco del Carrusel (Fijo pero ajustable) --- */
.carousel {
    width: 100%;
    height: auto !important; 
    overflow: hidden;
    background-color: #1a1a1a;
    border-radius: 15px 15px 0 0;
    aspect-ratio: 1 / 1;
}

/* --- Ajuste de la Imagen --- */
.carousel-inner, .carousel-item {
    height: 100% !important;
}

.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    transition: transform 0.5s ease;
}

/* --- Contenido de la Tarjeta --- */
.card-content {
    padding: 15px;
    background: linear-gradient(to bottom, #262626, #1f1f1f);
    flex-grow: 1; /* Esto hace que el contenido rellene el espacio y el precio quede abajo */
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    font-family: 'Patrick Hand', cursive;
    color: #ffffff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

/* --- Precio y Footer --- */
.card-footer {
    background: transparent !important;
    border: none !important;
    padding-top: 10px;
    margin-top: auto; /* Empuja el precio al final de la tarjeta */
}
.old-price {
    text-decoration: line-through;
    color: #888888;
    font-size: 0.8rem;
    margin-right: 8px;
    font-family: 'Montserrat', sans-serif;
}

.price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #ff0080;
    font-size: 1.05rem;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.3);
}
.price-bcv {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 1rem;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.3);
}

/* Efectos Hover */
.card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 0, 128, 0.5) !important;
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.2) !important;
}

.card:hover .carousel-item img {
    transform: scale(1.08);
}

/* --- Definición de la Animación --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Un salto un poco más sutil */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Clase para las tarjetas --- */
.reveal-card {
    opacity: 0; 
    animation: fadeInUp 0.5s ease-out forwards;
}

/* --- Efecto Cascada para 4 columnas --- */
/* Usamos :nth-child(4n + X) para que el efecto se repita cada 4 tarjetas */

.reveal-card:nth-child(4n+1) { animation-delay: 0.1s; } /* Primera de cada fila */
.reveal-card:nth-child(4n+2) { animation-delay: 0.2s; } /* Segunda de cada fila */
.reveal-card:nth-child(4n+3) { animation-delay: 0.3s; } /* Tercera de cada fila */
.reveal-card:nth-child(4n+4) { animation-delay: 0.4s; } /* Cuarta de cada fila */

/* Ajuste opcional para móviles (donde hay 1 o 2 columnas) */
@media (max-width: 991px) {
    .reveal-card:nth-child(n) {
        animation-delay: 0.2s; /* En móvil es mejor que aparezcan casi juntas */
    }
}

.product-categories {
    min-height: 45px; /* Ajusta este valor según el espacio que quieras reservar */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}