/* ============================
Badges Valor - Hero
============================ */

.hero-badges
{
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 20px;
		margin-top: -10px;
		justify-content: center;
}

.hero-badge
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: #C0392B;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 3px;
    line-height: 1;
}

.hero-badge::before
{
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: rgba(255,255,255,0.85);
    border-radius: 50%;
    flex-shrink: 0;
    animation: dot-blink 1.4s ease-in-out infinite;
}

/* Escalonar el parpadeo para que no pulsen todos al mismo tiempo */
.hero-badge:nth-child(1)::before { animation-delay: 0s;    }
.hero-badge:nth-child(2)::before { animation-delay: 0.25s; }
.hero-badge:nth-child(3)::before { animation-delay: 0.5s;  }

@keyframes dot-blink {
    0%,  100% { opacity: 1;    transform: scale(1);    }
    50%        { opacity: 0.15; transform: scale(0.7);  }
}

@media (max-width: 575px) {
    .hero-badges {
        flex-direction: column;
        align-items: center;
    }
    .hero-badge {
        width: 70%;
        justify-content: center;
        font-size: 11px;
        padding: 8px 12px;
    }
}