/* Bloco 1 */

/* E9 DIGITAL - ESTILO PÁGINA DE PLANOS UP SELL */

/* Estilos Gerais */
body { font-family: 'Roboto', sans-serif; margin: 0; background-color: #faf9f6; color: #343a40; line-height: 1.6; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }
.section-title { text-align: center; font-family: 'Poppins', sans-serif; font-size: 2.8em; margin-bottom: 5px; color: #050a34; margin-top: 0; }
.section-subtitle { text-align: center; font-size: 1.5em; color: #050a34; margin-top: 0; margin-bottom: 60px; font-weight: bold;}
.section-title-with-icon { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 5px; }
.title-icon { height: 60px; width: auto; }

/* Botão Padrão */
.btn { background-color: #050a34; color: white; padding: 12px 28px; text-decoration: none; border-radius: 5px; font-weight: bold; font-family: 'Poppins', sans-serif; transition: all 0.3s ease; display: inline-block; border: 2px solid #050a34; cursor: pointer; }
.btn:hover { background-color: #4de223; color: #050a34; transform: translateY(-2px); border-color: #4de223; }

/* Efeito "Saltado" para Blocos */
.plano {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 10px 20px rgba(0,0,0,0.04);
    border-radius: 8px;
}

/* Seção Planos */
#planos-apis { padding-top: 40px; }
.planos-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 20px; }

/* Ajustei overflow para hidden APENAS no Profissional para a fita cortar certo, nos outros mantive visible */
.plano { text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: visible; display: flex; flex-direction: column; border: 2px solid #ddd; }

.plano:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.plano.gratis { border: 2px solid #6c757d; }
.plano-header { color: white; padding: 15px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: 600; }
.plano-header h3 { margin: 0; font-size: 1.1em; font-weight: bold; }
.plano-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.plano-body * { font-weight: bold; }

/* Cores dos Headers */
.plano.gratis .plano-header { background-color: #6c757d; }
.plano.intermediario .plano-header { background-color: #4de223; color: #050a34; }
.plano.profissional .plano-header { background-color: #8A2BE2; }
.plano.expert .plano-header { background-color: #111111; }

/* Preços */
.plano .preco { font-family: 'Poppins', sans-serif; font-size: 2.5em; margin-bottom: 5px; color: #050a34; }
.plano .preco-detalhe { font-size: 0.9em; margin-top: -5px; margin-bottom: 15px; opacity: .8; }

/* Listas */
.plano ul { list-style: none; padding: 0; margin: 15px 0; text-align: left; flex-grow: 1; font-size: 0.9em;}
.plano ul li { margin-bottom: 10px; }
.plano .extra-features { text-align: center; margin-top: 15px; font-size: 0.9em; }

.title-logo {
    max-height: 200px;
    width: auto;
}

/* Bordas Coloridas */
.plano.intermediario { border: 2px solid #4de223; }
.plano.profissional { border: 2px solid #8A2BE2; overflow: hidden; /* Necessário para a fita */ }
.plano.expert { border: 2px solid #111111; }


/* --- NOVOS ADICIONAIS (INTEGRAÇÃO V9) --- */

/* 1. Ícones de Check Verde */
.plano ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.plano ul li i {
    color: #2ecc71; /* Verde Check */
    font-size: 1.1em;
    margin-top: 3px;
}

/* 2. Preço Antigo (Risco Vermelho) */
.preco-antigo {
    color: #e74c3c;
    text-decoration: line-through;
    font-size: 0.9em;
    margin-top: -10px;
    margin-bottom: 5px;
}

/* 3. Fita "Mais Vendido" */
.badge-destaque {
    position: absolute;
    top: 20px;
    right: -35px;
    background: #ff9f43; /* Laranja Destaque */
    color: #fff;
    font-weight: bold;
    font-size: 0.7em;
    padding: 5px 40px;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

/* 4. Botão Outline (Para o Grátis) */
.btn-outline {
    background-color: transparent;
    border: 2px solid #6c757d;
    color: #6c757d;
}
.btn-outline:hover {
    background-color: #6c757d;
    color: white;
}