/* ==========================================================================
   SEÇÃO DE PLANOS E PREÇOS
   ========================================================================== */

/* Configurações básicas dos cartões de planos */
.card-plano {
    border-radius: 24px !important;
    overflow: hidden;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de flutuar sutil ao passar o rato */
.card-plano:hover {
    transform: translateY(-5px);
}

/* Destaque visual com borda para o plano central PRO */
.card-pro {
    border: 2px solid #6c5ce7 !important;
}

/* Estrutura do Cabeçalho do Plano */
.plano-header {
    padding: 30px 20px;
}

/* Degradê Azul para Cinza-Escuro (Plano Básico) */
.header-basico {
    background: linear-gradient(135deg, #3a7bd5 0%, #3a6073 100%);
}

/* Degradê Magenta para Roxo (Plano PRO) */
.header-pro {
    background: linear-gradient(135deg, #d81b60 0%, #8e24aa 100%);
}

/* Degradê Vermelho para Coral (Plano PRO+) */
.header-pro-plus {
    background: linear-gradient(135deg, #e53935 0%, #e35d5b 100%);
}

/* Tipografia dos Preços */
.plano-preco {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 5px;
}

/* ==========================================================================
   LISTA DE RECURSOS (CHECKS E CRUCES)
   ========================================================================== */
.plano-recursos li {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Item Incluído no Plano (Check Verde) */
.plano-recursos li.incluso {
    color: #2d3436;
}
.plano-recursos li.incluso i {
    color: #2ecc71; /* Verde ideal para o visto */
    font-size: 1.1rem;
}

/* Item Excluído do Plano (Ícone de Traço Vermelho) */
.plano-recursos li.excluso {
    color: #b2bec3;
}
.plano-recursos li.excluso i {
    color: #ff7675; /* Vermelho suave para itens ausentes */
    font-size: 1.1rem;
}

/* ==========================================================================
   BOTÕES E BADGES ESPECÍFICOS
   ========================================================================== */

/* Botão Cinza dos Planos Laterais */
.btn-plano-secundario {
    background-color: #f1f2f6;
    color: #2f3640 !important;
    font-weight: 600;
    border-radius: 14px;
    padding: 12px;
    border: none;
    transition: background 0.2s ease;
}
.btn-plano-secundario:hover {
    background-color: #e4e7eb;
}

/* Botão em Degradê Roxo do Plano PRO */
.btn-plano-principal {
    background: linear-gradient(90deg, #3c40c6 0%, #575fcf 100%);
    color: white !important;
    font-weight: 600;
    border-radius: 14px;
    padding: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(60, 64, 198, 0.2);
    transition: all 0.2s ease;
}
.btn-plano-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(60, 64, 198, 0.3);
}

/* Tag Laranja Flutuante "Mais Popular" */
.badge-mais-popular {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffa502;
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 50px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(255, 165, 2, 0.3);
}