/* Estilo geral do corpo da página */
body {
    background-color: #f3e5f5; /* Cor de fundo lilás claro */
    color: #4a148c; /* Cor do texto roxo escuro */
}

/* Estilo dos cards dos planos */
.plan-card {
    background-color: #d1c4e9; /* Cor de fundo lilás suave */
    border: 1px solid #9575cd; /* Cor da borda roxa média */
}

/* Estilo da seção de benefícios */
.benefits-section {
    background-color: #ce93d8; /* Cor de fundo lilás médio */
    color: white; /* Cor do texto branca */
    padding: 30px; /* Espaçamento interno */
}

/* Estilo do banner de promoção */
.promo-banner {
    background-color: #800080; /* Cor de fundo roxa para o banner */
    color: white; /* Cor do texto branca */
    padding: 20px 0; /* Espaçamento acima e abaixo */
    font-size: 1.5rem; /* Tamanho da fonte */
    font-weight: bold; /* Fonte em negrito */
    text-align: center; /* Alinhamento do texto ao centro */
    animation: slideIn 1s ease-out; /* Animação de entrada suave */
}

/* Definição da animação de deslizar o banner */
@keyframes slideIn {
    0% { transform: translateY(-100%); } /* Começa fora da tela */
    100% { transform: translateY(0); } /* Entra completamente na tela */
}

/* Estilo do botão de chamada para ação */
.cta-button {
    background-color: #800080; /* Cor de fundo roxa */
    color: white; /* Cor do texto branca */
    font-weight: bold; /* Fonte em negrito */
    transition: background-color 0.3s; /* Efeito de transição suave na cor do fundo */
}

/* Estilo do botão quando o mouse passa por cima */
.cta-button:hover {
    background-color: #4a148c; /* Cor de fundo roxa escura ao passar o mouse */
    color: white; /* Cor do texto branca */
}

/* Estilo da contagem regressiva */
.countdown {
    font-size: 2rem; /* Tamanho da fonte maior */
    font-weight: bold; /* Fonte em negrito */
    color: red; /* Cor do texto vermelha */
}