/**
 * Estilos para contadores animados
 */

.contador-animado {
    font-weight: bold;
    font-size: 1.2em;
    color: #19365e;
    transition: all 0.3s ease;
}

.contador-grande {
    font-size: 2.5em;
    font-weight: 900;
}

.contador-mediano {
    font-size: 1.8em;
    font-weight: 700;
    color: #19365e;
}

.contador-pequeno {
    font-size: 1.1em;
    font-weight: 600;
    color: #19365e;
}

/* Efecto de pulso durante la animación */
.contador-animando {
    animation: pulso 0.5s ease-in-out infinite alternate;
}

@keyframes pulso {
    from {
        opacity: 0.7;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Estilos para diferentes tipos de contadores */
.contador-monedas::before {
    content: "$ ";
    color: #f39c12;
    font-weight: bold;
}

.contador-porcentaje::after {
    content: "%";
    color: #9b59b6;
    font-weight: bold;
}

.contador-unidades::after {
    content: " unidades";
    color: #19365e;
    font-size: 0.8em;
    font-weight: normal;
}