/* Estilo para o container dos planos de preço (Desktop) */
.planos-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 20px;
}

/* =============================================================== */
/* CSS PARA DEIXAR A OFERTA COMPACTA E AJUSTADA NO CELULAR       */
/* =============================================================== */

@media (max-width: 768px) {

    /* --- AJUSTES GERAIS PARA OS DOIS PLANOS --- */
    .plano-premium, .plano-basico {
        padding: 18px 15px !important;
    }

    .plano-premium img, .plano-basico img {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .plano-premium ul, .plano-basico ul {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    /* --- AJUSTES FINOS (PARA O PLANO PREMIUM) --- */
    .plano-premium ul li {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .plano-premium p {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        font-size: 16px !important;
    }

    .plano-premium p strong {
      font-size: 26px !important;
    }

    .plano-premium button {
        font-size: 18px !important;
        padding: 15px 20px !important;
    }

    /* --- AJUSTES FINOS (PARA O PLANO BÁSICO) --- */
    .plano-basico ul li {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .plano-basico p {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        font-size: 18px !important;
    }

    .plano-basico p strong {
        font-size: 28px !important;
    }

    .plano-basico button {
        font-size: 18px !important;
        padding: 15px 20px !important;
    }
}
/* =============================================================== */
/* ANIMAÇÃO DE PULSO PARA O PACOTE PREMIUM                         */
/* =============================================================== */

/* Aplica a animação ao bloco do plano premium */
.plano-premium {
  animation: pulso-verde 2s ease-in-out infinite;
}

/* Define como a animação deve se comportar */
@keyframes pulso-verde {
  0% {
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 255, 0, 1); /* Aumenta o brilho no meio da animação */
  }
  100% {
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.7);
  }
}