/* Products and Grid */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.product-grid .product-card {
    flex: 0 0 calc(25% - 18.75px);
}

@media (max-width: 768px) {
    .product-grid {
        gap: 15px;
    }

    .product-grid .product-card {
        flex: 0 0 calc(50% - 7.5px);
    }
}

.product-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-gold);
}

.product-card:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    transform: translateY(-10px);
}

.product-card.active {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 1px var(--accent-yellow), 0 0 12px rgba(255, 204, 0, 0.35);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* Efecto de carga: mientras la imagen real no termina de decodificar,
       se ve un fondo de "ruido estático" tipo TV vieja (SVG de ruido puro
       en CSS, sin ningún archivo nuevo) en vez del blanco vacío del barrido
       nativo del navegador. En cuanto <img> dispara 'load', app.js (o
       ui-helpers.js) le agrega la clase .is-loaded y aquí se hace crossfade
       a la imagen real. Cero imágenes generadas de más — nada de la
       explosión de variantes que hacía WordPress. */
    background-color: #1a1a1a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: staticNoise 0.4s steps(4) infinite;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.product-card img.is-loaded {
    opacity: 1;
    animation: none;
    background-image: none;
}

@keyframes staticNoise {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 120px;
    }
}

.product-card-body {
    padding: 20px;
}

.product-grid .product-card-body h3 {
    /* !important a propósito: alguna regla externa (confirmado: una extensión
       de Chrome del navegador de prueba, "div div h3 { color: white !important }")
       le ganaba a esta declaración normal. No debería haber CSS propio del
       proyecto con esa especificidad genérica, pero por seguridad se deja
       !important aquí para que el título del tour SIEMPRE se vea, pase lo
       que pase en el entorno del visitante. */
    color: var(--primary) !important;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.product-card-body .price {
    color: var(--accent-gold);
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.stars {
    color: var(--accent-yellow);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.btn-primary-solid-red {
    background: var(--ferrari-red);
    border: none;
    border-radius: 2px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary-solid-red:hover {
    background: #ff3b1a;
    box-shadow: 0 4px 15px rgba(255, 40, 0, 0.4);
}