/* Estilos para o site Projeto RM2 */

/* Reset e estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    padding: 80px 0;
}

/* Header e navegação */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #1D3557;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    position: relative;
    padding-left: 140px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 110px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

nav ul {
    display: flex;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 5px 0;
    position: relative;
}

nav ul li a:hover {
    color: #FFD700;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FFD700;
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* Seção Hero */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: url('../images/8090.png') no-repeat center center;
    background-size: cover;
    color: #fff;
    margin-top: 0;
    padding-top: 80px;
}

.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 700px;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 500;
    color: #FFD700;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #FFD700;
    color: #1D3557;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #E7C658;
    color: #1D3557;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Seção de Benefícios */
.beneficios-section {
    background-color:#1D3557;
    color: #fff;
}

.beneficios-section h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #fff;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.beneficio-card {
    background-color: #0D1B2A;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.beneficio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.beneficio-card .icon {
    font-size: 40px;
    color: #FFD700;
    margin-bottom: 20px;
}

.beneficio-card h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
}

.beneficio-card p {
    color: #adb5bd;
}

/* Seção de Estatísticas */
.estatisticas-section {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 100px 0;
    overflow: hidden;
}

.estatisticas-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.estatisticas-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.75); 
}

.estatisticas-section .container {
    position: relative;
    z-index: 3;
}

.estatisticas-section h2 {
    font-size: 36px;
    margin-bottom: 50px;
}

.estatisticas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.estatistica-card h3 {
    font-size: 48px;
    color: #FFD700;
    margin-bottom: 10px;
}

.estatistica-card p {
    font-size: 18px;
}


/* ================================================================ */
/*      CSS DA SEÇÃO DE OFERTA FINAL (COM IMAGEM DE FUNDO)        */
/* ================================================================ */

.projeto-section {
    position: relative;
    padding: 100px 0;
    background: url('../images/imagem5.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.projeto-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1;
}

.projeto-section .container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.section-title-light {
    color: #fff;
    font-size: 36px;
    margin-bottom: 10px;
}

.section-subtitle-gold {
    color: #FFD700;
    font-size: 20px;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

/* Animação de entrada para o card */
.curso-card-unico {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.curso-card-unico.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos do Card Único */
.cursos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
}

.curso-card-unico {
    display: flex;
    text-align: left;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    width: 100%;
    border: 1px solid #FFD700;
    position: relative;
}

.curso-card-unico:hover {
    transform: scale(1.03) translateY(0);
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.25);
}

.curso-card-unico-img {
    flex: 0 0 40%;
}

.curso-card-unico-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curso-card-unico-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.curso-card-unico-content h3 {
    font-size: 28px;
    color: #1D3557;
    margin-bottom: 15px;
}

.curso-card-unico-content p {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
}

.curso-card-unico-content ul {
    margin-bottom: 25px;
    padding-left: 20px;
    flex-grow: 1;
}

.curso-card-unico-content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #333;
    font-size: 16px;
}

.curso-card-unico-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: 700;
}

.curso-button-principal {
    display: block;
    width: 100%;
    background-color: #FFD700;
    color: #1D3557;
    padding: 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #1D3557;
}

.curso-button-principal:hover {
    background-color: #E7C658;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


.preco-destaque {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #f0f8ff; /* Um azul bem claro para criar um "box" */
    border: 1px dashed #1D3557; /* Borda tracejada para chamar a atenção */
    border-radius: 8px;
    font-size: 18px; /* Aumenta o tamanho da fonte */
    color: #333;
}

.preco-destaque strong {
    color: #1D3557; /* Cor do preço */
    font-size: 22px; /* Tamanho da fonte do preço ainda maior */
    display: block; /* Faz o preço ir para a linha de baixo (opcional) */
    margin-top: 5px;
}


.bloco-preco-oferta {
    background-color: #f0f8ff;
    border: 2px solid #FFD700; /* Borda dourada para destaque */
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.preco-ancorado {
    font-size: 16px;
    color: #666;
}

.preco-ancorado span {
    text-decoration: line-through; /* Preço "De" riscado */
    color: #dc3545; /* Vermelho para o preço riscado */
}

.preco-principal {
    font-size: 48px; /* Tamanho gigante para o preço parcelado */
    font-weight: 700;
    color: #1D3557; /* Azul escuro */
    line-height: 1.2;
    margin: 5px 0;
}

.preco-avista {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Animação de pulsação para o CTA (se ainda não tiver) */
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.cta-pulse {
    animation: pulse-animation 2s infinite;
}


/* Seção de Newsletter */
.newsletter-section {
    background-color: #1D3557;
    color: #fff;
    padding: 80px 0;
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.newsletter-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-form input {
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.checkbox-container input {
    margin-top: 5px;
}

.newsletter-button {
    background-color: #FFD700;
    color: #1D3557;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newsletter-button:hover {
    background-color: #E7C658;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Footer */
footer {
    background-color: #0D1B2A;
    color: #fff;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo img {
    height: 110px;
    margin-bottom: 15px;
}

.footer-logo p {
    color: #FFD700;
}

.footer-links h4, .footer-contact h4 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4::after, .footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #FFD700;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a:hover {
    color: #FFD700;
    padding-left: 5px;
}

.footer-contact p {
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #1D3557;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: #FFD700;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modal para formulários de captura */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
}

.close-modal:hover {
    color: #FFD700;
}

.modal-content h3 {
    font-size: 24px;
    color: #1D3557;
    margin-bottom: 10px;
}

.modal-content p {
    color: #666;
    margin-bottom: 20px;
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"] {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.lead-button {
    background-color: #FFD700;
    color: #1D3557;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lead-button:hover {
    background-color: #E7C658;
}

.form-message {
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
}

.form-message.success {
    color: #28a745;
}

.form-message.error {
    color: #dc3545;
}

/* Responsividade */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-content h2 {
        font-size: 20px;
    }
    
    section {
        padding: 60px 0;
    }
    
    .estatistica-card h3 {
        font-size: 36px;
    }
    
    header .container {
        padding-left: 120px;
    }

    .logo img {
        height: 90px;
    }

    .curso-card-unico {
        flex-direction: column;
    }

    .curso-card-unico-img {
        flex: 0 0 250px;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    nav {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 70px);
        background-color: #1D3557;
        transition: all 0.3s ease;
        z-index: 999;
    }
    
    nav.active {
        left: 0;
    }
    
    nav ul {
        flex-direction: column;
        padding: 20px;
    }
    
    nav ul li {
        margin: 15px 0;
    }
    
    .hero-content h1 {
        font-size: 30px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .beneficios-section h2, .preparacao-section h2, .estatisticas-section h2, .newsletter-content h2, .section-title-light {
        font-size: 28px;
    }
    
    .section-subtitle-gold {
        font-size: 18px;
    }
    
    .estatistica-card h3 {
        font-size: 30px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo {
        align-items: center;
    }
    
    .footer-links h4::after, .footer-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-icons {
        justify-content: center;
    }

    header .container {
        padding-left: 110px;
    }
    
    .logo img {
        height: 80px;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 24px;
    }
    
    .cta-button, .recurso-button, .curso-button-principal, .newsletter-button, .lead-button {
        width: 100%;
        text-align: center;
    }
    
    .estatisticas-grid {
        grid-template-columns: 1fr;
    }
    
    .estatistica-card {
        margin-bottom: 30px;
    }
    
    .modal-content {
        padding: 20px;
    }

    header .container {
        padding-left: 95px;
    }
    
    .logo img {
        height: 70px;
    }
    
    .logo h1 {
        font-size: 20px;
    }

    .curso-card-unico-content {
        padding: 25px;
    }

    .curso-card-unico-content h3 {
        font-size: 24px;
    }
}

/* Estilo específico para o link Área de Membros */
.area-membros-link {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.area-membros-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ================================================================ */
/*      ESTILOS DA NOVA SEÇÃO HÍBRIDA DE PROVA SOCIAL             */
/* ================================================================ */

.prova-social-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}


.whatsapp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 50px;
    justify-content: center;
}

.whatsapp-print {
    max-width: 250px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.whatsapp-print:hover {
    transform: scale(1.05);
}

.whatsapp-print img {
    width: 100%;
    height: auto;
    display: block;
}

.cases-sucesso-titulo {
    text-align: center;
    margin: 60px 0 40px 0;
}

.cases-sucesso-titulo h3 {
    font-size: 28px;
    color: #1D3557;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.cases-sucesso-titulo h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #FFD700;
}

/* Reutilizando estilos da seção de depoimentos anterior */
.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.depoimento-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    border-left: 5px solid #FFD700;
    transition: all 0.3s ease;
}

.depoimento-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.depoimento-autor {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.depoimento-autor img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #1D3557;
}

.autor-info h4 {
    margin: 0;
    font-size: 18px;
    color: #1D3557;
}

.autor-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.depoimento-texto p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    font-style: italic;
}

.depoimento-texto p::before {
    content: '“';
    font-size: 24px;
    font-weight: 700;
    color: #1D3557;
    margin-right: 5px;
}

.depoimento-texto p::after {
    content: '”';
    font-size: 24px;
    font-weight: 700;
    color: #1D3557;
    margin-left: 5px;
}

/* Classe para o título principal da seção (H2) */
.section-title-dark {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
    color: #fff;
}

/* Classe para o parágrafo descritivo abaixo do título */
.section-desc {
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste de responsividade para o novo título */
@media (max-width: 768px) {
    .section-title-dark {
        font-size: 28px;
    }
}

/* ================================================================ */
/*      CSS CORRIGIDO E FINAL: SEÇÃO "NOSSA MISSÃO"               */
/* ================================================================ */

.sobre-projeto-section {
    background-color: #1D3557; /* Fundo azul escuro */
    padding: 100px 0;
    color: #fff; /* Cor padrão do texto para branco */
}

.sobre-projeto-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ESTILIZAÇÃO DO TÍTULO "NOSSA MISSÃO" */
.sobre-projeto-content .section-title-dark,
.sobre-projeto-content .section-title-light { /* Seleciona ambas as classes para garantir */
    color: #fff; /* Força o texto do título a ser branco */
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

/* O SUBLINHADO DOURADO */
.sobre-projeto-content .section-title-dark::after,
.sobre-projeto-content .section-title-light::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #FFD700; /* A COR DOURADA */
    border-radius: 2px;
}

/* ESTILOS PARA O TEXTO ABAIXO DO TÍTULO */
.sobre-projeto-text {
    text-align: center; /* Centraliza os parágrafos para um tom de "manifesto" */
    margin-top: 30px;
}

.sobre-projeto-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #f0f0f0; 
    margin-bottom: 20px;
}

.sobre-projeto-text p:last-child {
    margin-bottom: 0;
}

/* A regra para o ícone não é mais necessária, mas não faz mal mantê-la ou removê-la */
.sobre-projeto-icon {
    display: none; /* Garante que o ícone não apareça, mesmo que o HTML não seja alterado */
}



/* ================================================================ */
/*      ESTILOS DA NOVA SEÇÃO COMO FUNCIONA                       */
/* ================================================================ */

.como-funciona-section {
    background-color: #f8f9fa; /* Alterna a cor de fundo */
    padding: 80px 0;
}

.passos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 50px;
    align-items: stretch; /* Garante que os cards tenham a mesma altura */
}

.passo-card {
    background-color: #fff;
    padding: 35px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s ease;
    border-top: 4px solid #1D3557;
}

.passo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.passo-numero {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFD700;
    color: #1D3557;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    border: 3px solid #fff;
}

.passo-icon {
    font-size: 36px;
    color: #1D3557;
    margin-bottom: 20px;
}

.passo-card h3 {
    font-size: 20px;
    color: #1D3557;
    margin-bottom: 15px;
}

.passo-card p {
    color: #666;
    line-height: 1.6;
}

/* Destaque para o último passo */
.passo-final {
    border-top-color: #FFD700;
}

.passo-final .passo-icon {
    color: #FFD700;
}

/* Centraliza o último card se ele ficar sozinho em uma linha */
@media (min-width: 1200px) {
    .passos-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 820px) and (max-width: 1199px) {
    .passos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .passo-final {
        grid-column: 2 / 3; /* Centraliza o último card na grade de 3 colunas */
    }
}

@media (min-width: 550px) and (max-width: 819px) {
    .passos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================ */
/*      CSS FINAL E COMPLETO DA SEÇÃO DE APRESENTAÇÃO             */
/* ================================================================ */

.plataforma-demo-section {
    background-color: #f8f9fa; /* Fundo cinza claro para destacar */
    padding: 100px 0;
    overflow: hidden; /* Evita que elementos vazem */
}

.plataforma-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
    align-items: center;
    gap: 60px;
}

/* --- Estilos do Mockup do Notebook --- */
.plataforma-mockup-wrapper {
    perspective: 1500px; /* Cria o efeito de perspectiva 3D */
}

.notebook-mockup {
    /* COR CORRIGIDA: Notebook mais escuro para contraste */
    background: #b0b8c1; 
    border-radius: 15px 15px 0 0;
    padding: 20px 20px 0 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: rotateX(10deg) rotateY(-15deg); /* Efeito 3D de inclinação */
    transition: transform 0.5s ease;
}

.plataforma-mockup-wrapper:hover .notebook-mockup {
    transform: rotateX(0) rotateY(0); /* Remove a inclinação ao passar o mouse */
}

.notebook-screen {
    background: #111; /* Fundo preto para a tela */
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 16 / 10; 
}

.notebook-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notebook-base {
    /* COR CORRIGIDA: Base do notebook mais escura */
    background: #a1a9b3; 
    height: 15px;
    width: 120%;
    position: absolute;
    bottom: -15px;
    left: -10%;
    border-radius: 0 0 15px 15px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1);
}

/* --- Estilos dos Textos de Apoio --- */
.plataforma-texto-wrapper .section-title-dark {
    text-align: left; /* Alinha o título à esquerda */
    font-size: 32px;
    /* COR CORRIGIDA: Título em azul escuro */
    color: #1D3557; 
}

.plataforma-texto-wrapper .section-desc {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
}

.plataforma-features-list {
    list-style: none;
    padding: 0;
}

.plataforma-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.plataforma-features-list i {
    font-size: 24px;
    color: #1D3557;
    margin-top: 5px;
}

.plataforma-features-list h4 {
    font-size: 18px;
    color: #1D3557;
    margin-bottom: 5px;
}

.plataforma-features-list p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}


/* --- Responsividade da Seção --- */
@media (max-width: 992px) {
    .plataforma-demo-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
        gap: 40px;
    }
    .plataforma-texto-wrapper {
        order: -1; /* Coloca o texto ANTES do mockup no mobile */
        text-align: center;
    }
    .plataforma-texto-wrapper .section-title-dark,
    .plataforma-texto-wrapper .section-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .notebook-mockup {
        /* Remove o efeito 3D em telas menores para simplicidade */
        transform: none; 
    }
}





/* ================================================================ */
/*      ESTILOS FINAIS E CORRIGIDOS DA SEÇÃO DE BÔNUS             */
/* ================================================================ */

.bonus-section {
    background-color: #1D3557;
    color: #fff;
    padding: 80px 0;
    
}

/* NOVO: Deixa o parágrafo descritivo da seção de bônus dourado */
.bonus-section .section-desc {
    color: #FFD700;
    font-weight: 500; /* Deixa a fonte um pouco mais encorpada para leitura */
}



.bonus-grid-final {
    display: grid;
    /* A MUDANÇA PRINCIPAL: Cria duas colunas */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Reduzindo um pouco o espaço para caber melhor */
    max-width: 1200px; /* Aumentando a largura máxima para acomodar os dois cards */
    margin: 50px auto 0 auto;
}

/* Adicionando responsividade para o grid */
@media (max-width: 992px) {
    .bonus-grid-final {
        /* Em telas médias, volta a ser uma coluna para não espremer o conteúdo */
        grid-template-columns: 1fr;
        max-width: 700px; /* Ajusta a largura máxima para um card por linha */
    }
}

/* Ajustes para Celulares */
@media (max-width: 768px) {
    .bonus-card-final {
        flex-direction: column; /* A imagem vai para cima do texto */
    }

    .bonus-card-img {
        /* Remove qualquer largura mínima que possa estar causando problemas */
        min-width: auto; 
        width: 100%; /* Garante que a imagem ocupe toda a largura do card */
        height: 200px; /* Altura fixa para a imagem no mobile, para manter a proporção */
        flex-basis: auto; /* Reseta a base do flexbox */
    }

    .bonus-card-content {
        padding: 25px; /* Reduz um pouco o padding interno no mobile */
    }

    .bonus-card-content h3 {
        font-size: 20px; /* Reduz o tamanho do título do bônus no mobile */
    }
}


.bonus-card-final {
    display: flex; /* A CHAVE: coloca a imagem e o conteúdo lado a lado */
    background-color: #0D1B2A;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-card-final:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.bonus-card-img {
    flex: 0 0 40%; /* A imagem ocupará 40% da largura do card */
    min-width: 250px; /* Largura mínima para a imagem */
}

.bonus-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bonus-card-content {
    flex: 1; /* O conteúdo ocupa o espaço restante */
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.bonus-card-tag {
    background-color: #1D3557;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
    align-self: flex-start; /* Alinha a tag no início */
}

.bonus-card-content h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

.bonus-card-content p {
   color: #adb5bd;
    font-size: 16px;
    line-height: 1.6;
    flex-grow: 1; /* Empurra o valor para o final */
}

.bonus-card-valor {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
}

.bonus-card-valor span {
    font-weight: 500;
    color: #fff;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .bonus-card-final {
        flex-direction: column; /* Em telas pequenas, a imagem vai para cima */
  
    }
    .bonus-card-img {
        min-width: 100%;
        height: 200px; /* Altura fixa para a imagem no mobile */
    }
}

/* Estilos para o CTA e valor total (mantidos) */
.bonus-cta-wrapper {
    text-align: center;
    margin-top: 60px;
}

.bonus-cta-wrapper .cta-button {
    margin-bottom: 20px;
    font-size: 18px;
}

.bonus-total-valor {
    font-size: 18px;
    font-weight: 600;
}

.bonus-total-valor .valor-cortado {
    text-decoration: line-through;
    color: #dc3545;
    margin: 0 10px;
}

.bonus-total-valor .valor-gratis {
    color: #28a745;
    background-color: #e7f7ec;
    padding: 5px 10px;
    border-radius: 5px;
}

/* ================================================================ */
/*      SUBSTITUIÇÃO FINAL: SEÇÃO DE GARANTIA COM BOX AZUL        */
/* ================================================================ */

.garantia-v2-section {
    background-color: #f8f9fa; /* Fundo da seção em cinza claro */
    padding: 80px 0;
}

.garantia-v2-box {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    /* A MUDANÇA PRINCIPAL: Fundo do box em azul escuro */
    background-color: #1D3557; 
    padding: 50px;
    border-radius: 15px;
    /* Removemos a borda superior, pois o próprio fundo já dá o destaque */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.garantia-v2-selo {
    flex: 0 0 200px;
    align-self: flex-start;
}

.garantia-v2-selo img {
    max-width: 100%;
    height: auto;
}

.garantia-v2-content {
    flex: 1;
}

/* Ajustando as cores do texto para serem legíveis no novo fundo azul */
.garantia-v2-content h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    font-size: 32px;
    font-weight: 700;
    color: #fff; /* Título em branco */
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.garantia-v2-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #f0f0f0; /* Texto em branco suave */
    margin-bottom: 20px;
}

.garantia-v2-final {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Linha divisória branca translúcida */
    font-size: 18px !important;
    color: #fff; /* Frase final em branco */
}

/* Responsividade (ajustada para o novo design) */
@media (max-width: 768px) {
    .garantia-v2-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 25px;
    }

    .garantia-v2-selo {
        flex: 0 0 150px;
        width: 150px;
        align-self: center;
    }

    .garantia-v2-content h2 {
        text-align: center;
        font-size: 26px;
    }
}


/* ================================================================ */
/*      SUBSTITUIÇÃO FINAL: SEÇÃO DE FAQ COM FUNDO CINZA CLARO    */
/* ================================================================ */

.faq-section {
    background-color: #f8f9fa; /* Fundo cinza claro, igual à Garantia */
    padding: 80px 0;
}

/* Título e descrição voltam a ser escuros */
.faq-section .section-title-dark {
    color: #1D3557;
}

.faq-section .section-desc {
    color: #666;
}

.faq-accordion {
    max-width: 800px;
    margin: 50px auto 0 auto;
    background-color: #fff; /* Fundo branco para o acordeão, para destacar */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    padding: 10px 30px;
}

.faq-item {
    border-bottom: 1px solid #e9ecef; /* Borda cinza claro */
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1D3557; /* Pergunta em azul escuro */
    cursor: pointer;
}

.faq-question i {
    transition: transform 0.3s ease;
    font-size: 16px;
    color: #1D3557; /* Seta em azul escuro */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: transparent; /* Fundo da resposta transparente */
}

.faq-answer p {
    padding: 0 10px 20px 10px;
    font-size: 16px;
    line-height: 1.7;
    color: #4A4A4A; /* Texto da resposta em cinza escuro */
}

/* Estilos para o estado ativo (quando a pergunta é clicada) */
.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #FFD700; /* Seta fica dourada quando ativa */
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

/* ================================================================ */
/*      NOVO: AJUSTE DE COR PARA TÍTULOS ESPECÍFICOS              */
/* ================================================================ */
/* Este bloco força a cor dos títulos das seções claras para o azul escuro */

.prova-social-section .section-title-dark,
.como-funciona-section .section-title-dark,
.comparativo-section .section-title-dark {
    color: #1D3557 !important;
}