/* Estilos adicionais para otimização dos botões CTA */

/* Melhorar visibilidade do botão CTA fixo */
.fixed-cta {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fixed-cta.hidden {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

.fixed-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito de destaque para os CTAs */
.cta-button.highlight {
    animation: highlight 1s ease;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.8);
}

@keyframes highlight {
    0% {
        box-shadow: 0 0 5px rgba(255, 107, 53, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 107, 53, 0.5);
    }
}

/* Efeito de pulsação mais suave para os CTAs */
.cta-button.pulse {
    animation: gentlePulse 2s infinite;
}

@keyframes gentlePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

/* Efeito de entrada para elementos quando entram na viewport */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Melhorar a aparência dos CTAs em dispositivos móveis */
@media (max-width: 767px) {
    .fixed-cta {
        padding: var(--spacing-xs);
    }
    
    .fixed-cta .cta-button {
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .cta-large {
        font-size: 1.1rem;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* Melhorar a visibilidade do preço (quando adicionado) */
.price-tag {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.price-tag .original {
    text-decoration: line-through;
    color: var(--color-dark-gray);
    font-size: 1.2rem;
    opacity: 0.7;
    margin-right: var(--spacing-sm);
}

.price-tag .current {
    color: var(--color-accent);
}

.price-tag .installment {
    font-size: 1rem;
    display: block;
    margin-top: var(--spacing-xs);
    font-weight: 500;
}

/* Melhorar a aparência dos botões em hover em dispositivos desktop */
@media (min-width: 768px) {
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }
}