﻿.random-products {
    margin-bottom: 2.5rem;
}

.random-products-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.random-products-title {
    font-size: 1.18rem;
    font-weight: 600;
    color: #23428D;
    letter-spacing: 0.02em;
}

.random-products-icon {
    color: #F6BE00;
    font-size: 1.35rem;
    vertical-align: middle;
}

.random-products-fade-in {
    opacity: 1;
    animation: fadeInRandomProducts 0.35s;
}

.random-products-fade-out {
    opacity: 0.2;
    animation: fadeOutRandomProducts 0.35s;
}

@keyframes fadeInRandomProducts {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutRandomProducts {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.2;
    }
}


@media (max-width: 700px) {
    .random-products-grid {
        flex-direction: column;
        gap: 1.1rem;
        align-items: stretch;
    }
}


.random-products {
    margin-bottom: 2.5rem;
}

.random-products-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.random-products-title {
    font-size: 1.18rem;
    font-weight: 600;
    color: #23428D;
    letter-spacing: 0.02em;
}

.random-products-icon {
    color: #F6BE00;
    font-size: 1.35rem;
    vertical-align: middle;
}

/* FadeIn/Out (puedes dejarlo para el efecto de rotación aleatoria) */
.random-products-fade-in {
    opacity: 1;
    animation: fadeInRandomProducts 0.35s;
}

.random-products-fade-out {
    opacity: 0.2;
    animation: fadeOutRandomProducts 0.35s;
}

@keyframes fadeInRandomProducts {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutRandomProducts {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.2;
    }
}
