:root {
    /* Paleta Base Vest.Rio */
    --roxo: #9200D0;
    --roxo-escuro: #5e0087; /* Para gradientes premium */
    --roxo-claro: #f4e6fa; /* Fundo de destaque clínico */
    --amarelo: #F2C029;
    --laranja: #F2762E;
    --laranja-claro: #F29727;
    
    /* Cores Premium Medicina */
    --cor-fundo: #fdfdfd; /* Branco clínico puríssima */
    --cor-texto: #2b2b2b;
    --cor-texto-mutado: #555555;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html, body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
    /* TRAVA GLOBAL: Impede a página inteira de criar scroll lateral */
    overflow-x: hidden; 
}


/* ============================================== */
/* === ONDAS DE TRANSIÇÃO === */
/* ============================================== */
.wave-divider {
    position: relative;
    width: 100%;
    line-height: 0;
    direction: ltr; 
    /* A cor de fundo da onda sempre será a cor da seção DE CIMA */
    background-color: var(--wave-bg, #fdfdfd); 
    /* Margem negativa "puxa" a seção para matar a listra branca */
    margin-top: -2px;
    margin-bottom: -2px;
    z-index: 10;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 90px;
    shape-rendering: geometricPrecision;
}

.wave-bottom svg { 
    transform: rotate(180deg); 
}

/* Cores da ponta da onda (sempre a cor da seção DE BAIXO) */
.wave-roxo .shape-fill { fill: var(--roxo); }
.wave-amarelo .shape-fill { fill: var(--amarelo); }
.wave-branca .shape-fill {fill: #fdfdfd;}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 5;
}


/* ============================================== */
/* === HERO MED (FUNDO CLARO PREMIUM) === */
/* ============================================== */
.hero-med {
    padding: 15px 0 40px 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top right, #faf5fc 0%, #fdfdfd 50%);
}

/* ============================================== */
/* === ANIMAÇÕES MÉDICAS DE BACKGROUND === */
/* ============================================== */

/* Batimento Cardíaco (EKG) - Animação Subtilíssima e Clarinha */
.ekg-bg-animation {
    position: absolute;
    top: 50%; /* Centraliza verticalmente na hero section */
    transform: translateY(-50%); /* Ajuste de centralização */
    left: 0;
    width: 100%;
    height: 180px; /* Dobramos a altura para marcar mais presença */
    overflow: hidden;
    /* MUDANÇA: Aumentamos a opacidade para 35% e mudamos a cor para roxo para dar contraste */
    opacity: 0.8; 
    pointer-events: none;
    z-index: 1;
}

.ekg-line-subtle {
    position: absolute;
    top: 50%; /* Centraliza dentro da div */
    transform: translateY(-50%); /* Ajuste de centralização */
    left: 0;
    width: 100%;
    height: 120px; /* Aumentamos a altura da linha */
    /* MUDANÇA: Cor ROXA para contraste no branco puro */
    stroke: var(--roxo); 
    stroke-width: 2.5; /* Aumentamos ligeiramente a grossura da linha */
    fill: none;
    /* MUDANÇA: Aumentamos a velocidade para 15s para ser mais dinâmico */
    animation: drawEKGSubtle 5s linear infinite; 
}

@keyframes drawEKGSubtle {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

/* 2. CAPRICHADO: 12 Partículas Médicas e Infantis Flutuantes */
.medical-floating-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2; /* Atrás do texto e da imagem */
    pointer-events: none;
}

.float-icon {
    position: absolute;
    opacity: 0.15; /* Sutil */
    color: var(--roxo); /* Base roxa */
}

/* Espalhando os 20 ícones (maioria pelas laterais para desviar da foto central) */
.icon-1 { top: -5%; left: 5%; width: 60px; height: 60px; animation: drift1 40s linear infinite; }
.icon-2 { top: 15%; right: -5%; width: 80px; height: 80px; color: var(--amarelo); animation: drift2 45s linear infinite; }
.icon-3 { top: 40%; left: -2%; width: 50px; height: 50px; color: var(--laranja); animation: drift3 35s linear infinite; }
.icon-4 { bottom: 10%; right: 10%; width: 70px; height: 70px; animation: drift1 42s linear infinite reverse; }
.icon-5 { bottom: 30%; left: 15%; width: 90px; height: 90px; color: var(--roxo-escuro); animation: drift2 50s linear infinite; }

.icon-6 { top: 10%; right: 20%; width: 45px; height: 45px; animation: drift3 30s linear infinite; }
.icon-7 { top: 50%; right: -5%; width: 75px; height: 75px; color: var(--laranja); animation: drift1 48s linear infinite; }
.icon-8 { top: 75%; left: -5%; width: 55px; height: 55px; animation: drift2 38s linear infinite reverse; }
.icon-9 { bottom: 5%; left: 30%; width: 65px; height: 65px; color: var(--roxo-escuro); animation: drift3 45s linear infinite; }
.icon-10 { top: 5%; left: 40%; width: 85px; height: 85px; color: var(--amarelo); animation: drift1 55s linear infinite reverse; }

.icon-11 { top: 25%; left: 5%; width: 55px; height: 55px; animation: drift2 40s linear infinite; }
.icon-12 { top: 65%; right: 5%; width: 60px; height: 60px; color: var(--amarelo); animation: drift3 35s linear infinite; }
.icon-13 { bottom: 15%; left: 5%; width: 75px; height: 75px; color: var(--laranja); animation: drift1 50s linear infinite; }
.icon-14 { top: 35%; right: 15%; width: 50px; height: 50px; animation: drift2 42s linear infinite reverse; }
.icon-15 { top: 85%; right: 25%; width: 85px; height: 85px; color: var(--roxo-escuro); animation: drift3 48s linear infinite; }

.icon-16 { top: 15%; left: 25%; width: 45px; height: 45px; animation: drift1 38s linear infinite; }
.icon-17 { bottom: -5%; right: 35%; width: 70px; height: 70px; color: var(--laranja); animation: drift2 55s linear infinite; }
.icon-18 { top: -2%; right: 30%; width: 65px; height: 65px; animation: drift3 40s linear infinite reverse; }
.icon-19 { top: 55%; left: -5%; width: 80px; height: 80px; color: var(--roxo-escuro); animation: drift1 46s linear infinite; }
.icon-20 { bottom: 25%; right: -2%; width: 55px; height: 55px; color: var(--amarelo); animation: drift2 32s linear infinite; }


/* ROTA 1: Viagem Longa Horizontal/Vertical */
@keyframes drift1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(25vw, -15vh) rotate(120deg); }
    66% { transform: translate(-10vw, 20vh) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* ROTA 2: Viagem Zigue-Zague Invertido */
@keyframes drift2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-20vw, 25vh) rotate(-120deg); }
    66% { transform: translate(15vw, 10vh) rotate(-240deg); }
    100% { transform: translate(0, 0) rotate(-360deg); }
}

/* ROTA 3: Viagem Ampla Circular */
@keyframes drift3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30vw, 30vh) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

.logo-hero{
    margin: 0 auto 40px auto; /* Centraliza perfeitamente */
    display: block; /* Força a centralização */
    width: 100px; /* Limita o tamanho para não ficar gigantesca em monitores ultrawide */
    height: auto;



}

/* ============================================== */
/* === IMAGEM HERO (ELOAH E ALUNOS) === */
/* ============================================== */
.hero-eloah-img {
    max-width: 100%;
    width: 900px; /* Limita o tamanho para não ficar gigantesca em monitores ultrawide */
    height: auto;
    border-radius: 24px; /* Bordas suaves e amigáveis */
    box-shadow: 0 20px 40px rgba(146, 0, 208, 0.15); /* Sombra roxa elegante */
    margin: 0 auto 50px auto; /* Centraliza perfeitamente */
    display: block; /* Força a centralização */
    border: 4px solid #ffffff; /* Cobre com uma moldura branca premium */
    position: relative;
    z-index: 10;
}

/* Ajuste no mobile */
@media (max-width: 900px) {
    .hero-eloah-img {
        width: 100%;
        border-radius: 16px;
        margin-bottom: 40px;
    }
}


/* --- TEXTOS PRINCIPAIS --- */
.headline {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    color: var(--cor-texto);
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
    position: relative;
}

/* Destaque MEDICINA com o eletrocardiograma (Revertido e Animado) */
.highlight-med {
    color: var(--roxo);
    position: relative;
    display: inline-block;
}

.ekg-line-animated {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 25px;
    stroke: var(--amarelo);
    stroke-width: 3;
    fill: none;
    opacity: 0.8;
    animation: drawEKGMain 4s infinite ease-in-out; 
}

@keyframes drawEKGMain {
    0% { stroke-dashoffset: 1000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1000; }
}

.subheadline {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--cor-texto-mutado);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

/* ============================================== */
/* === BOX DE AUTORIDADE (REVERTIDO PARA O PILL SHAPE) === */
/* ============================================== */
.authority-new-container {
    max-width: 900px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.auth-main-headline {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    color: var(--cor-texto);
    line-height: 1.3;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.auth-counter-card {
    background: #ffffff;
    border: 2px solid var(--roxo-claro);
    border-radius: 20px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(146, 0, 208, 0.08);
    margin-bottom: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indica que tem interação no mouse */
}

/* Efeito de flutuação no hover */
.auth-counter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(146, 0, 208, 0.15);
    border-color: rgba(146, 0, 208, 0.3);
}

.auth-counter-copy {
    text-align: left;
    font-size: 1.3rem;
    color: var(--cor-texto-mutado);
    line-height: 1.6;
}

.auth-counter-copy strong {
    color: var(--roxo);
    font-weight: 800;
    font-size: 1.5rem;
    display: block;
    margin-top: 5px;
}

.auth-counter-number {
    font-size: 6rem;
    font-weight: 900;
    color: var(--laranja);
    line-height: 1;
    background: linear-gradient(90deg, var(--laranja), var(--amarelo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(242, 118, 46, 0.2);
}

/* Título de transição para o carrossel */
.testim-intro-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cor-texto);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    max-width: 700px;
    line-height: 1.5;
}

.testim-intro-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--amarelo);
    border-radius: 2px;
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 900px) {
    .auth-counter-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 35px 20px;
    }
    .auth-counter-copy {
        text-align: center;
        font-size: 1.1rem;
    }
    .auth-counter-copy strong {
        font-size: 1.3rem;
    }
    .auth-counter-number {
        font-size: 5rem;
    }
}

/* ============================================== */
/* === CARROSSEL DE DEPOIMENTOS (INALTERADO) === */
/* ============================================== */
.testimonials-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.testimonials-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; 
}

.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track { -ms-overflow-style: none; scrollbar-width: none; }

.testimonial-card {
    flex: 0 0 calc(25% - 15px); 
    scroll-snap-align: center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 3px solid #ffffff;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--roxo);
}

.testimonial-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: var(--roxo);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(146, 0, 208, 0.3);
}

.prev-btn { left: -10px; }
.next-btn { right: -10px; }


/* ============================================== */
/* === ANIMAÇÕES DE ENTRADA (CAPRICHO) === */
/* ============================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Delays para a entrada cascata */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }


/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .authority-box {
        flex-direction: column;
        border-radius: 20px; /* Volta a ser card no mobile */
        padding: 30px;
        gap: 20px;
        width: 100%;
    }
    .auth-divider {
        width: 100%;
        height: 2px;
    }
    .testimonial-card { flex: 0 0 85%; }
    .carousel-btn { display: flex; align-items: center; justify-content: center; }

    @media (max-width: 900px) {
        /* 1. MÁGICA AQUI: Esconde os <br> nos títulos apenas no celular */
        .headline br,
        .subheadline br,
        .auth-main-headline br {
            display: none;
        }
    
        /* 2. Ajusta os tamanhos para a quebra natural ficar elegante */
        .headline {
            font-size: 2.1rem; /* Reduz um pouquinho para caber a palavra MEDICINA inteira */
            padding: 0 10px;
        }
    
        .subheadline {
            font-size: 1.1rem;
            padding: 0 15px;
            margin-bottom: 40px;
        }
    
        .auth-main-headline {
            font-size: 1.6rem;
            padding: 0 10px;
        }
    
        /* (Abaixo continua o que já tinha de responsividade da Hero e Autoridade) */
        .authority-new-container { margin-bottom: 40px; }
        
        .auth-counter-card {
            flex-direction: column;
            text-align: center;
            gap: 20px;
            padding: 35px 20px;
        }
        .auth-counter-copy { text-align: center; font-size: 1.1rem; }
        .auth-counter-copy strong { font-size: 1.3rem; }
        .auth-counter-number { font-size: 5rem; }
        
        .testimonial-card { flex: 0 0 85%; }
        .carousel-btn { display: flex; align-items: center; justify-content: center; }
    }
}

/* ============================================== */
/* === SEÇÃO 2: METODOLOGIA (FUNDO CLARO) === */
/* ============================================== */
/* ============================================== */
/* === SEÇÃO 2: METODOLOGIA (FUNDO COM DOT PATTERN) === */
/* ============================================== */
.methodology-section {
    padding: 20px 0 60px 0;
    background-color: var(--cor-fundo);
    
    /* BACKGROUND PREENCHIDO E ELEGANTE: Dot Pattern sutil */
    background-image: radial-gradient(rgba(146, 0, 208, 0.06) 2px, transparent 2px);
    background-size: 35px 35px;
    background-position: center;
    position: relative;
    z-index: 10;
    overflow: hidden; /* Para os glows laterais não vazarem */
}

/* Glows suaves (reflexos) nos cantos para tirar o aspecto "vazio" */
.methodology-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(242, 192, 41, 0.04) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.methodology-section::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(146, 0, 208, 0.04) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Header Textos */
.method-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative; /* Para ficar acima do background */
    z-index: 2;
}

.method-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--cor-texto);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.highlight-purple {
    color: var(--roxo);
}

.method-subheadline {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--cor-texto-mutado);
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}

.method-subheadline strong {
    color: var(--roxo);
    font-weight: 800;
}

/* ============================================== */
/* === CARDS DE COMPARAÇÃO (VS) - NOVO DESIGN === */
/* ============================================== */
.comparison-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Reduzi o gap porque o card bom vai crescer */
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.compare-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 30px; /* Aumentei o padding para ficar mais imponente */
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, filter 0.4s ease;
}

.card-icon {
    width: 70px; /* Ícones maiores */
    height: 70px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg { width: 35px; height: 35px; }

/* --- O Jeito Errado (Rebaixado visualmente) --- */
.bad-way {
    background-color: #fffafa; /* Fundo com um tom muito leve de vermelho */
    border: 2px solid #ffcccc; /* Borda vermelha suave */
    opacity: 1; /* MÁGICA 1: Agora ele é 100% visível e sólido */
    transform: scale(0.98); /* Só um pouquinho menor para manter a hierarquia */
    box-shadow: 0 10px 20px rgba(255, 77, 77, 0.05); /* Sombra com tom de alerta */
}

.bad-icon { 
    background-color: #ffe6e6; 
    color: #ff4d4d; 
}

.bad-way h3 { 
    color: #cc0000; /* Título em vermelho escuro (Destaque Negativo) */
    font-weight: 800; 
    margin-bottom: 15px; 
    font-size: 1.2rem; 
}

.bad-way p { 
    color: #444; /* Texto mais escuro para facilitar a leitura */
    font-weight: 500; 
    line-height: 1.5; 
}

.bad-way:hover {
    transform: scale(1);
    box-shadow: 0 15px 30px rgba(255, 77, 77, 0.12);
    border-color: #ffb3b3;
}

/* --- O Jeito Certo (Sistema Vest.Rio - Destaque AMARELO) --- */
.good-way {
    border: 3px solid var(--amarelo); /* Borda Amarela Forte */
    box-shadow: 0 20px 50px rgba(242, 192, 41, 0.15);
    overflow: visible; /* Precisa ser visible para a pílula do topo aparecer */
    /* MÁGICA: O card é naturalmente maior e salta para a frente */
    transform: scale(1.08); 
    z-index: 5;
    animation: pulseGoodCardYellow 3s infinite ease-in-out;
}

/* A nova Pílula de "Recomendado" no topo */
.recommended-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--amarelo), var(--laranja));
    color: #ffffff;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 8px 24px;
    border-radius: 50px;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(242, 118, 46, 0.3);
    white-space: nowrap;
}

/* Ícone com gradiente amarelo/laranja */
.good-icon { 
    background: linear-gradient(135deg, rgba(242,192,41,0.2), rgba(242,118,46,0.2)); 
    color: var(--laranja); 
    border: 2px solid rgba(242, 118, 46, 0.3);
}

.good-way h3 { color: var(--cor-texto); font-weight: 900; margin-bottom: 15px; font-size: 1.5rem; }
.good-way p { color: var(--cor-texto-mutado); font-weight: 600; line-height: 1.5; font-size: 1.1rem; }

/* Keyframe de Pulsar (Respiração contínua AMARELA) */
@keyframes pulseGoodCardYellow {
    0% { transform: scale(1.08); box-shadow: 0 20px 40px rgba(242, 192, 41, 0.15); }
    50% { transform: scale(1.1); box-shadow: 0 30px 60px rgba(242, 192, 41, 0.25); }
    100% { transform: scale(1.08); box-shadow: 0 20px 40px rgba(242, 192, 41, 0.15); }
}

.good-way:hover {
    animation-play-state: paused;
    transform: scale(1.12) translateY(-5px);
    box-shadow: 0 35px 70px rgba(242, 192, 41, 0.35);
}

/* Brilho de fundo amarelo */
.glow-effect-yellow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(242, 192, 41, 0.08) 0%, transparent 70%);
    animation: rotateGlow 10s linear infinite;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%; /* Garante que não crie quinas duras ao girar */
}

/* O Badge "VS" */
.vs-badge {
    width: 65px;
    height: 65px;
    background: var(--roxo); /* O VS fica roxo para dar um contraponto legal */
    color: #ffffff;
    font-weight: 900;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 5px solid var(--cor-fundo);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 10;
    flex-shrink: 0;
}

/* Responsividade Mobile para os Cards e VS Badge */
@media (max-width: 900px) {
    .comparison-wrapper { 
        flex-direction: column !important; 
        /* Um gap enorme para garantir que nada se toque */
        gap: 30px !important; 
        margin-top: 40px !important; 
    }
    
    .bad-way { 
        transform: scale(1) !important; 
    }
    
    /* Matando qualquer position absolute antigo na força bruta */
    .vs-badge {
        position: static !important; /* Volta pro fluxo normal da página (fila indiana) */
        transform: none !important;
        margin: 15px auto !important; /* Centraliza horizontalmente e dá margem */
    }
    
    .good-way { 
        transform: scale(1) !important; 
        /* Empurra a caixa pra baixo para a pílula não encostar no VS */
        margin-top: 25px !important; 
    }
    
    /* Ajuste para a pílula não vazar na telinha do celular */
    .recommended-badge {
        width: 85% !important;
        white-space: normal !important;
        text-align: center !important;
        top: -25px !important;
    }
}

/* ============================================== */
/* === CONTAINER INTERATIVO DOS EIXOS === */
/* ============================================== */
.how-it-works-wrapper { margin-top: 40px; }

.eixos-interactive-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    /* Sombras e Bordas mesclando Roxo e Amarelo */
    box-shadow: 0 20px 50px rgba(146, 0, 208, 0.1); 
    border: 2px solid rgba(242, 192, 41, 0.4); 
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Area dos Botões (Abas) */
.eixos-tabs {
    display: flex;
    background-color: #fdfdfd;
    border-bottom: 1px solid #eaeaea;
}

.eixo-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 4px solid transparent;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.eixo-number {
    width: 40px;
    height: 40px;
    background-color: #eaeaea;
    color: #888;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.eixo-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #666;
    text-align: left;
    transition: color 0.3s ease;
}

/* === ESTADO ATIVO (O MIX DE CORES) === */
.eixo-tab.active {
    background: linear-gradient(to bottom, #ffffff, #fffdf5); /* Fundo com leve brilho amarelo */
    border-bottom: 4px solid var(--amarelo); /* Destaque amarelo na base */
}

.eixo-tab.active .eixo-number {
    background-color: var(--roxo); /* Círculo Roxo */
    color: var(--amarelo); /* Número Amarelo saltando aos olhos */
    box-shadow: 0 5px 15px rgba(146, 0, 208, 0.3);
}

.eixo-tab.active .eixo-title {
    color: var(--roxo); /* Título Roxo Forte */
}

/* ============================================== */
/* === O EFEITO 3D (DADO GIRANDO) === */
/* ============================================== */
.eixos-content-area {
    padding: 60px 40px;
    position: relative; /* <-- Isso trava o texto dentro da caixa! */
    min-height: 280px; /* Altura segura para os textos não amassarem */
    perspective: 1200px; 
    overflow: hidden; 
}

.eixo-content {
    display: none; 
    position: absolute; /* Coloca todas as abas empilhadas no mesmo lugar */
    top: 60px;
    left: 40px;
    width: calc(100% - 80px);
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.eixo-content.active {
    display: block;
    transform: translateZ(0) rotateY(0deg);
}

/* --- CLASSES DINÂMICAS DE ROTAÇÃO (Injetadas pelo JS) --- */
.roll-out-left { display: block; animation: rollOutLeft 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.roll-in-right { display: block; animation: rollInRight 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.roll-out-right { display: block; animation: rollOutRight 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.roll-in-left { display: block; animation: rollInLeft 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

/* 1. Girando para a Esquerda (Avançar: 1 -> 2) */
@keyframes rollOutLeft {
    0% { opacity: 1; transform: translateZ(0) rotateY(0deg); }
    100% { opacity: 0; transform: translateZ(-200px) rotateY(-90deg); }
}
@keyframes rollInRight {
    0% { opacity: 0; transform: translateZ(-200px) rotateY(90deg); }
    100% { opacity: 1; transform: translateZ(0) rotateY(0deg); }
}

/* 2. Girando para a Direita (Voltar: 2 -> 1) */
@keyframes rollOutRight {
    0% { opacity: 1; transform: translateZ(0) rotateY(0deg); }
    100% { opacity: 0; transform: translateZ(-200px) rotateY(90deg); }
}
@keyframes rollInLeft {
    0% { opacity: 0; transform: translateZ(-200px) rotateY(-90deg); }
    100% { opacity: 1; transform: translateZ(0) rotateY(0deg); }
}

.content-headline { font-size: 1.8rem; color: var(--roxo); font-weight: 900; margin-bottom: 15px; }
.content-text { font-size: 1.15rem; line-height: 1.6; color: var(--cor-texto-mutado); font-weight: 500; }

/* Ajuste mobile para a nova posição absoluta e altura */
@media (max-width: 900px) {
    .eixos-content-area { padding: 40px 20px; min-height: 350px; }
    .eixo-content { top: 40px; left: 20px; width: calc(100% - 40px); }
}

/* ============================================== */
/* === SEÇÃO 3: MÓDULOS (FUNDO ROXO) === */
/* ============================================== */
/* ============================================== */
/* === SEÇÃO 3: MÓDULOS (DARK SaaS CARDS SÓLIDOS) === */
/* ============================================== */
.modules-section {
    padding: 50px 0 70px 0;
    background-color: var(--roxo);
    color: #ffffff;
    position: relative;
    z-index: 5;
    /*overflow: hidden;*/
}

/* --- Marca d'água de Fundo --- */
.giant-watermark-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Coloca o brasão POR CIMA dos cards */
    z-index: 10; 
    /* Deixa a imagem "fantasma" para o mouse passar direto por ela e clicar nos botões */
    pointer-events: none; 
}

.giant-watermark-bg svg {
    display: none; /* Garante que o SVG antigo suma */
}

.giant-watermark-bg img {
    position: absolute;
    top: 50%;
    left: 50%;
    /* O tamanho anterior que você gostou */
    width: 900px; 
    height: auto;
    /* Mantém centralizado e com a inclinação original */
    transform: translate(-50%, -50%) rotate(-15deg);
    /* Um brilho suave (7%) para aparecer bem por cima dos cards */
    opacity: 0.07; 
    filter: grayscale(100%) brightness(200%);
}

/* Reduz no mobile para não estourar a tela */
@media (max-width: 900px) {
    .giant-watermark-bg img {
        width: 800px;
    }
}

.giant-watermark-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Coloca o brasão POR CIMA dos cards */
    z-index: 10; 
    /* Deixa a imagem "fantasma" para o mouse passar direto por ela e clicar nos botões */
    pointer-events: none; 
}

.giant-watermark-bg2 svg {
    display: none; /* Garante que o SVG antigo suma */
}

.giant-watermark-bg2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    /* O tamanho anterior que você gostou */
    width: 900px; 
    height: auto;
    /* Mantém centralizado e com a inclinação original */
    transform: translate(-50%, -50%) rotate(30deg);
    /* Um brilho suave (7%) para aparecer bem por cima dos cards */
    opacity: 0.08; 
    filter: grayscale(100%) brightness(200%);
}

/* Reduz no mobile para não estourar a tela */
@media (max-width: 900px) {
    .giant-watermark-bg2 img {
        width: 800px;
    }
}

.modules-section .container {
    position: relative;
    z-index: 5;
}

/* --- Nova Headline Premium (Texto Dourado) --- */
.modules-header-premium {
    text-align: center;
    margin-bottom: 50px;
}

.headline-premium {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    text-transform: uppercase;
}

.text-gradient-gold {
    background: linear-gradient(90deg, var(--amarelo) 0%, var(--laranja) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-gradient-roxo {
    background: linear-gradient(90deg, var(--roxo) 20%, var(--roxo-escuro) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ============================================== */
/* === GRID DE CARDS (LAYOUT SaaS SÓLIDO) === */
/* ============================================== */
.subjects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto 60px auto;
}

.subject-card.solid-card {
    background-color: #ffffff; /* Fundo branco absoluto */
    border: 2px solid rgba(146, 0, 208, 0.15); /* Borda roxa bem suave */
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(146, 0, 208, 0.08); /* Sombra roxa difusa */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subject-card.solid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(146, 0, 208, 0.15);
}

/* --- Cabeçalho do Card e Ícone --- */
.subject-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.subject-icon.solid-icon {
    width: 65px;
    height: 65px;
    background-color: rgba(146, 0, 208, 0.05); /* Fundo levemente roxo */
    border: 2px solid rgba(146, 0, 208, 0.2); 
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2.2rem; 
    box-shadow: inset 0 2px 10px rgba(146, 0, 208, 0.05); 
}

.subject-titles { text-align: left; }
.subject-titles h3 { font-size: 2.2rem; font-weight: 900; line-height: 1; margin-bottom: 5px; color: var(--roxo); } /* Texto Roxo */
.subject-titles span { font-size: 0.95rem; color: var(--roxo); opacity: 0.7; font-weight: 700; } /* Texto Roxo Suave */

/* Pílula de Subtítulo Sólida */
.subject-pill-info.solid-pill {
    display: inline-block;
    background-color: rgba(146, 0, 208, 0.05); 
    border: 1px solid rgba(146, 0, 208, 0.2); 
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--roxo); /* Texto Roxo */
    margin-bottom: 30px;
    align-self: flex-start;
}

/* --- Lista de Matérias (Com Separação Roxa) --- */
.subject-list.solid-list {
    list-style: none;
    margin-bottom: 40px;
}

.subject-list.solid-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 10px;
    border-bottom: 1px solid rgba(146, 0, 208, 0.1); /* Linha roxa clarinha */
    font-size: 1.05rem;
    font-weight: 700; 
    color: var(--roxo); /* Texto Roxo */
    transition: background 0.2s ease, padding-left 0.2s ease;
}

.subject-list.solid-list li:last-child { border-bottom: none; }

.subject-list.solid-list li:hover {
    background-color: rgba(146, 0, 208, 0.03); 
    padding-left: 15px;
    border-radius: 8px;
}

.subject-list.solid-list .emoji {
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); 
}

/* Modificador para listas mais longas (Química) */
.list-compact li {
    padding: 12px 10px;
    font-size: 0.95rem;
}

/* --- Box de Estatísticas de Questões Sólido --- */
.subject-stats-box.solid-stats {
    margin-top: auto; 
    background-color: #fdfdfd; 
    border: 1px solid rgba(146, 0, 208, 0.15);
    padding: 25px;
    border-radius: 16px;
    text-align: left;
}

.stats-desc {
    font-size: 0.9rem;
    color: var(--roxo);
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 600;
}

.stats-highlight {
    font-size: 1.1rem;
    color: var(--roxo); /* Destaque Roxo Forte */
    font-weight: 900;
    margin-bottom: 20px;
}

/* --- A Barra de Progresso --- */
.stats-vertical-bars {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espaço entre cada barra */
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--roxo); /* Letras roxas acompanhando o novo design */
}

.stat-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-track {
    width: 100%;
    height: 8px;
    background: rgba(146, 0, 208, 0.08); /* Fundo da pista cinza/roxo clarinho */
    border-radius: 10px;
    overflow: hidden;
}

/* A barra colorida que vai crescer */
.stat-fill {
    height: 100%;
    width: 0; /* Começa invisível (0%) */
    border-radius: 10px;
    /* MÁGICA 1: Apaguei a linha do "transition" que estava causando o bug de engasgo */
}

/* Cores das barras */
.fill-amarelo { background: var(--amarelo); }
.fill-laranja { background: var(--laranja); }
.fill-roxo { background: var(--roxo); }

/* MÁGICA 2: Criamos um roteiro de filme (Keyframe) que obriga a começar do 0 sempre */
@keyframes growBarAnim {
    0% { width: 0; }
    100% { width: var(--target-width); }
}

/* Quando o JS injeta a classe animate, ele roda o filme acima */
.stat-row.animate .stat-fill {
    /* 2.5s dita o tempo (bem mais devagar). forwards manda travar no tamanho final */
    animation: growBarAnim 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ============================================== */
/* === CAIXA DE AVISOS FINAIS (A QUE VOCÊ GOSTOU) === */
/* ============================================== */
.modules-features {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: rgba(0, 0, 0, 0.15); 
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 15px; 
}

.feature-item svg { 
    width: 24px; 
    height: 24px; 
    color: #25D366; 
    flex-shrink: 0; 
    margin-top: 2px; 
}

.feature-item p { 
    font-size: 1.1rem; 
    line-height: 1.5; 
    color: #fdfdfd; 
    font-weight: 500; 
}

/* Alerta de ENEM */
.alert-feature svg { color: var(--vermelho-alerta); }
.alert-feature p { color: #ffcccc; text-decoration: line-through; opacity: 0.8; }

/* Destaque Nota Máxima */
.highlight-feature {
    background-color: rgba(242, 192, 41, 0.1);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(242, 192, 41, 0.3);
    margin-top: 10px;
}
.highlight-feature svg { color: var(--amarelo); }
.highlight-feature p strong { color: var(--amarelo); font-weight: 900; }

/* --- RESPONSIVIDADE MOBILE DA SEÇÃO 3 --- */
@media (max-width: 900px) {
    .subjects-grid {
        grid-template-columns: 1fr; /* Empilha os cartões no celular */
        gap: 30px;
    }
    .subject-card.solid-card { padding: 30px 20px; }
    .subject-titles h3 { font-size: 1.8rem; }
    .modules-features { padding: 30px 20px; }
}

/* ============================================== */
/* === SEPARADOR GLOW (LINHA) === */
/* ============================================== */
.glow-separator {
    width: 100%;
    height: 2px;
    /* Linha que some nas pontas e brilha no meio */
    background: linear-gradient(90deg, transparent 0%, rgba(242, 192, 41, 0.6) 50%, transparent 100%);
    position: relative;
    z-index: 10;
    box-shadow: 0 0 20px rgba(242, 192, 41, 0.8);
}

/* ============================================== */
/* === SEÇÃO 4: SIMULADOS (FUNDO ROXO) === */
/* ============================================== */
.simulados-section {
    padding: 60px 0 50px 0;
    background-color: var(--roxo);
    color: #ffffff;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

/* --- NOVO: Cabeçalho da Seção --- */
.simulados-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 10;
}

.pill-badge-yellow {
    display: inline-block;
    background-color: rgba(242, 192, 41, 0.15);
    color: var(--amarelo);
    border: 1px solid rgba(242, 192, 41, 0.4);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 24px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.simulados-headline {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.highlight-yellow { color: var(--amarelo); }

.simulados-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================== */
/* === LADO ESQUERDO (O NÚMERO 8 ANIMADO) === */
/* ============================================== */
.simulados-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.glass-circle {
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05); 
    border: 2px solid rgba(242, 192, 41, 0.3); /* Borda agora é amarela */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* MÁGICA: A animação de "Respiração/Pulsar" do 8 */
.giant-number {
    font-size: 11rem; /* Ficou ainda maior */
    font-weight: 900;
    color: var(--amarelo);
    line-height: 1;
    letter-spacing: -5px;
    display: inline-block; /* Necessário para o transform funcionar no <span> */
    animation: numberPulse 3s infinite ease-in-out; /* O Efeito dinâmico */
}

@keyframes numberPulse {
    0% { transform: scale(1); text-shadow: 0 5px 15px rgba(242, 192, 41, 0.4); }
    50% { transform: scale(1.15); text-shadow: 0 15px 40px rgba(242, 192, 41, 0.8); }
    100% { transform: scale(1); text-shadow: 0 5px 15px rgba(242, 192, 41, 0.4); }
}

.circle-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(242, 192, 41, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}

.visual-title {
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    margin-top: -30px; 
    z-index: 2;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* ============================================== */
/* === LADO DIREITO (CARTÕES BRANCOS) === */
/* ============================================== */
.simulados-info {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* MÁGICA: Os cartões agora são brancos e pulam para frente */
.info-block.light-card {
    display: flex;
    align-items: center; 
    background: #ffffff; /* Fundo Branco Total */
    border: none; /* Tiramos a borda para ficar mais limpo */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra escura para destacar do roxo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-block.light-card:hover {
    transform: translateX(15px); /* Desliza para a direita */
    box-shadow: 0 20px 50px rgba(242, 192, 41, 0.2); /* Sombra fica levemente amarela no hover */
}

/* Ícones com as cores invertidas */
.info-block.light-card .info-icon {
    width: 65px;
    height: 65px;
    background: rgba(146, 0, 208, 0.08); /* Fundo lilás */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    flex-shrink: 0;
    border: 2px solid rgba(146, 0, 208, 0.2); /* Borda roxa */
}

.info-block.light-card .info-icon svg {
    width: 32px;
    height: 32px;
    color: var(--roxo); /* Ícone roxo */
}

/* Textos adaptados para o fundo branco */
.info-block.light-card .info-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cor-texto-mutado); /* Cinza escuro para leitura perfeita */
    font-weight: 500;
    margin: 0;
}

.info-block.light-card .info-text p strong {
    color: var(--roxo); /* Negritos em roxo para bater com a identidade */
    font-weight: 800;
}

/* ============================================== */
/* === RESPONSIVIDADE (MOBILE) === */
/* ============================================== */
@media (max-width: 900px) {
    .simulados-header { margin-bottom: 40px; }
    .simulados-headline { font-size: 1.8rem; }
    
    .simulados-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    
    .info-block.light-card:hover {
        transform: translateY(-8px); /* No mobile flutua pra cima */
    }
    
    .info-block.light-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    
    .info-block.light-card .info-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* ============================================== */
/* === SEÇÃO 5: REDAÇÃO (FUNDO BRANCO) === */
/* ============================================== */
.redacao-section {
    padding: 40px 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    position: relative;
    z-index: 5;
    /* A LINHA MÁGICA: Corta o excesso do prontuário médico que estava vazando */
    overflow: hidden; 
    
    /* Textura sutil de cruzes (Padrão Médico) */
    background-image: 
        linear-gradient(rgba(146, 0, 208, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(146, 0, 208, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; 
}

/* NOVO: Marca D'água do Prontuário */
.med-watermark-redacao {
    position: absolute;
    top: 45%; /* Desceu para sair de cima do gráfico */
    right: -10%; /* Foi para a extrema direita, cortando um pouco na borda */
    left: auto; /* Remove a trava da esquerda */
    width: 650px;
    height: 650px;
    z-index: 1; /* Atrás de tudo */
    pointer-events: none;
    transform: rotate(15deg); /* Inclinei para a direita para dar fluidez */
}

.med-watermark-redacao svg {
    width: 100%;
    height: 100%;
    color: var(--roxo);
    opacity: 0.03; 
}

/* Garante que o container fique por cima do fundo */
.redacao-section .container {
    position: relative;
    z-index: 5;
}

/* --- Cabeçalho e Badges --- */
.redacao-header {
    text-align: center;
    margin-bottom: 60px;
}

.pill-badge-outline {
    display: inline-block;
    border: 1px solid var(--roxo-claro);
    background-color: rgba(146, 0, 208, 0.05);
    color: var(--roxo);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 24px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.center-badge {
    margin: 0 auto 30px auto;
    display: flex;
    width: fit-content;
}

.redacao-headline {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Texto com Gradiente Premium */
.text-gradient {
    background: linear-gradient(90deg, var(--laranja) 0%, var(--amarelo) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.redacao-subheadline {
    font-size: 1.2rem;
    color: var(--cor-texto-mutado);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================== */
/* === GRÁFICO ANIMADO (10.3 vs 16.7) === */
/* ============================================== */
.chart-comparison-horizontal {
    display: flex;
    flex-direction: column;
    gap: 35px; /* Espaço entre as duas barras */
    margin: 60px auto 80px auto;
    max-width: 800px; /* Largura máxima para não ficar esticado demais */
    width: 100%;
}

.chart-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Container dos Textos e Números */
.chart-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.chart-labels p {
    font-size: 1.1rem;
    color: #777;
    font-weight: 600;
    margin: 0;
}

.chart-labels h4 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #888;
    margin: 0;
    line-height: 0.9;
}

/* Cores ativas para a barra do Vest.Rio */
.chart-labels.data-good p {
    color: var(--cor-texto);
    font-weight: 700;
}

.chart-labels.data-good h4 {
    color: var(--laranja);
}

/* A "pista" vazia onde a barra corre */
.bar-track {
    width: 100%;
    height: 35px; /* Espessura da barra */
    background-color: #f0f0f5;
    border-radius: 20px;
    overflow: hidden;
}

/* A barra colorida que vai crescer */
.chart-bar-fill {
    height: 100%;
    width: 0; /* Começa em 0 para a animação funcionar */
    border-radius: 20px;
}

/* Estilo Barra Ruim */
.chart-bar-fill.bar-bad {
    background-color: #d8d8e6;
    opacity: 0.8;
}

/* Estilo Barra Boa (Vest.Rio) */
.chart-bar-fill.bar-good {
    /* Gradiente na horizontal (90deg) */
    background: linear-gradient(90deg, var(--roxo) 0%, var(--laranja) 100%);
    box-shadow: 0 10px 20px rgba(146, 0, 208, 0.2);
}

/* --- ANIMAÇÃO (Controlada pelo JS) --- */
@keyframes growHorizontal {
    from { width: 0; }
    to { width: var(--target-width); }
}

.chart-comparison-horizontal.animate-bars .chart-bar-fill {
    /* Animação suave de 1.5s com easing */
    animation: growHorizontal 5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Responsividade Mobile */
@media (max-width: 900px) {
    .chart-labels p { font-size: 0.95rem; }
    .chart-labels h4 { font-size: 2rem; }
    .bar-track { height: 28px; }
}

/* ============================================== */
/* === CARDS DE METODOLOGIA (01, 02, 03) === */
/* ============================================== */

.redacao-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 80px auto;
}

.step-card {
    /* MÁGICA: Aqui aplicamos dois fundos. O primeiro é o interno (roxo), 
       o segundo é o gradiente da borda (roxo para laranja). */
    background: 
        linear-gradient(145deg, var(--roxo) 0%, #6e009e 100%) padding-box,
        linear-gradient(90deg, var(--roxo) 0%, var(--laranja) 100%) border-box;
    
    /* A borda DEVE ser transparente para o gradiente de baixo aparecer */
    border: 3px solid transparent; 
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    
    /* Sombra projetada */
    box-shadow: 0 20px 40px rgba(146, 0, 208, 0.25); 
    
    /* Transição suave e elástica */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    overflow: hidden;
    text-align: left;
    z-index: 1; 
}

/* Reflexo de luz sutil no canto do card */
.step-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.step-card:hover {
    transform: translateY(-12px);
    /* No hover, a sombra se expande e ganha um brilho sutil laranja 
       para combinar com a parte laranja da borda gradiente! */
    box-shadow: 0 35px 60px rgba(146, 0, 208, 0.4), 0 15px 30px rgba(242, 118, 46, 0.25);
}

/* Número gigante e fosco no fundo do card (Agora branco transparente) */
.step-number-bg {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 6rem;
    font-weight: 900;
    color: rgb(242, 192, 41, 0.35); /* Marca d'água branca bem fraquinha */
    line-height: 1;
    z-index: 1;
}

.step-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff; /* Título em branco absoluto */
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.step-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85); /* Texto descritivo um pouco mais suave para leitura */
    position: relative;
    z-index: 2;
}

.step-desc strong {
    color: var(--amarelo); /* Destaques em negrito ficam amarelos */
}

/* Lista de Checks Customizada adaptada pro fundo escuro */
.step-check-list {
    list-style: none;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.step-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff; /* Texto dos checks em branco */
}

.step-check-list svg {
    width: 20px;
    height: 20px;
    color: var(--amarelo); /* Trocamos o verde genérico pelo amarelo da marca Vest.Rio */
}

/*carrosel 2*/   
.redacao-testimonials-area {
    margin-top: 80px;
    position: relative;
    z-index: 5;
}

.redacao-carousel-clean {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.redacao-track-clean {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: 20px 0; /* Respiro para as sombras não cortarem */
}

/* Esconde a barra de rolagem */
.redacao-track-clean::-webkit-scrollbar { display: none; }
.redacao-track-clean { -ms-overflow-style: none; scrollbar-width: none; }

/* Cartão do Print Limpo */
.redacao-card-img {
    /* Mostra exatamente 3 por vez no desktop (descontando o gap) */
    flex: 0 0 calc(33.333% - 20px); 
    scroll-snap-align: center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Sombra elegante */
    transition: transform 0.3s ease;
    background-color: #fff;
}

.redacao-card-img:hover {
    transform: translateY(-5px); /* Dá uma leve levantada ao passar o mouse */
}

.redacao-card-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Botões Laterais Livres */
.nav-btn {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    color: var(--roxo);
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: var(--roxo);
    color: #ffffff;
    transform: scale(1.1);
}

.nav-btn svg { width: 24px; height: 24px; }


/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 900px) {
    .redacao-carousel-clean {
        /* No mobile, botões flutuam sobre as imagens */
        display: block; 
    }
    
    .redacao-track-clean {
        gap: 15px;
        padding: 10px 5px;
    }
    
    .redacao-card-img {
        /* Mostra EXATAMENTE 1 por vez no celular */
        flex: 0 0 100%; 
    }
    
    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
    }
    
    .left-btn { left: -10px; }
    .right-btn { right: -10px; }
    
    .nav-btn:hover { transform: translateY(-50%) scale(1.05); }
    .nav-btn svg { width: 20px; height: 20px; }
}
/* ============================================== */
/* === CARROSSEL DE REDAÇÃO === */
/* ============================================== */
.redacao-testimonials-area {
    margin-top: 60px;
    position: relative;
    z-index: 5;
}

.redacao-carousel-wrapper-fixed {
    /* Fundo suave para os depoimentos flutuarem em cima */
    background-color: #f8f9fc;
    border-radius: 30px;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #eaeaea;
}

.redacao-track-fixed {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: 20px 10px; /* Espaço para o hover 3D */
}

.redacao-track-fixed::-webkit-scrollbar { display: none; }
.redacao-track-fixed { -ms-overflow-style: none; scrollbar-width: none; }

.redacao-card-chat {
    flex: 0 0 calc(33.33% - 20px); /* Mostra 3 conversas por vez no desktop */
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
}

/* ============================================== */
/* === MOCKUP DE CHAT (O BALÃO) === */
/* ============================================== */
.chat-mockup-wrapper {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea;
    width: 100%;
    max-width: 300px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden; /* Corta a imagem dentro das bordas */
}

/* Interatividade: Flutua e brilha no hover */
.chat-mockup-wrapper:hover {
    transform: translateY(-10px) rotateX(5deg); /* Efeito 3D sutil */
    box-shadow: 0 20px 50px rgba(146, 0, 208, 0.1);
    border-color: rgba(146, 0, 208, 0.2);
}

/* --- HEADER DO CHAT --- */
.chat-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eaeaea;
    gap: 10px;
}

.avatar-placeholder {
    width: 32px;
    height: 32px;
    background-color: #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-username {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cor-texto);
    flex: 1;
}

/* --- ESTILOS ESPECÍFICOS (INSTA/WPP) --- */
.style-instagram .insta-icon { width: 18px; height: 18px; color: #888; }
.style-whatsapp .chat-header { background-color: #075E54; color: white; }
.style-whatsapp .chat-username { color: white; }
.style-whatsapp .chat-status { font-size: 0.75rem; color: rgba(255,255,255,0.7); }
.style-whatsapp .avatar-placeholder { background-color: #128C7E; }

/* --- CONTEÚDO (A IMAGEM DO PRINT) --- */
.chat-content {
    width: 100%;
    line-height: 0; /* Remove espaços extras */
}

.chat-content img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- RABICHO DO BALÃO --- */
.chat-balloon-tail {
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    transform: rotate(45deg);
    z-index: -1;
}

.style-whatsapp .chat-balloon-tail { background: #ffffff; }

/* ============================================== */
/* === BOTÕES DE NAVEGAÇÃO PREMIUM === */
/* ============================================== */
.nav-btn {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    color: var(--roxo);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: var(--roxo);
    color: #ffffff;
    transform: scale(1.1);
}

.nav-btn svg { width: 24px; height: 24px; }

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 900px) {
    .redacao-carousel-wrapper-fixed { padding: 40px 15px; }
    .redacao-track-fixed { gap: 20px; padding: 15px 5px; }
    
    .redacao-card-chat {
        flex: 0 0 85%; /* Mostra 1 por vez no celular */
    }
    
    .chat-mockup-wrapper { max-width: none; } /* Preenche a largura do card */
    
    .nav-btn { width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%); }
    .left-btn { left: 5px; }
    .right-btn { right: 5px; }
    .nav-btn svg { width: 20px; height: 20px; }
}

/* ============================================== */
/* === SEÇÃO 6: BÔNUS (SaaS PREMIUM - EXACT MATCH) === */
/* ============================================== */
.bonus-section-clean {
    background: var(--cor-fundo); 
    text-align: center;
    border-top: 1px solid rgba(146,0,208,0.07); 
    border-bottom: 1px solid rgba(146,0,208,0.07);
    padding: 50px 0 70px 0;
    position: relative;
    z-index: 5;
}

.bonus-headline-purple {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--roxo);
    line-height: 1.2;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.highlight-orange { color: var(--laranja); }

.total-bonus {
    display: inline-block;
    background: linear-gradient(135deg, rgba(242,192,41,0.1), rgba(242,118,46,0.06));
    border: 1px solid rgba(242,192,41,0.3); 
    color: #8a5f00;
    padding: 12px 28px; 
    border-radius: 50px; 
    font-size: 1.1rem; 
    margin: 15px auto 50px;
}

.total-bonus strong { 
    font-weight: 900; 
    color: #cc7a00; 
}

.bonus-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
    max-width: 1000px; 
    margin: 0 auto; 
}

/* ============================================== */
/* === CARDS COM ANIMAÇÃO "COMET TAIL" (CORRIGIDO) === */
/* ============================================== */
/* ============================================== */
/* === NOVA ESTRUTURA DE BÔNUS (BENTO GRID)   === */
/* ============================================== */

.bonus-grid { 
    display: grid; 
    /* Cria 2 colunas iguais */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
    max-width: 1050px; 
    margin: 0 auto; 
}

/* Base de todos os Cards (Design Dark Premium) */
.bcard {
    background: linear-gradient(145deg,var(--roxo) 15%, #1a082e 85%);
    border: 1px solid rgba(146, 0, 208, 0.3);
    border-radius: 30px;
    padding: 50px 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    
    /* MUDANÇA AQUI: Centraliza a Tag, Ícone e Preço usando o meio do card como base */
    align-items: center; 
    text-align: center; /* Centraliza o texto para ficar uniforme com os ícones */
    
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Brilho interno no topo do card */
.bcard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    pointer-events: none;
}

.bcard:hover {
    transform: translateY(-8px);
    border-color: var(--amarelo);
    box-shadow: 0 30px 60px rgba(146, 0, 208, 0.3);
}

/* === TIPOGRAFIA DOS CARDS (Adaptado para fundo escuro) === */
.bcard-tag { 
    display: inline-block; 
    background: linear-gradient(135deg, var(--roxo), var(--laranja)); 
    color: white; 
    padding: 6px 16px; 
    border-radius: 50px; 
    font-size: 0.75rem; 
    font-weight: 800; 
    letter-spacing: 1px; 
    margin-bottom: 20px; 
}

.bcard-icon { 
    font-size: 3.5rem; 
    margin-bottom: 20px; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); 
}

.bcard h3 { 
    font-weight: 900; 
    font-size: 1.6rem; 
    margin-bottom: 15px; 
    color: #ffffff; 
}

.bcard p { 
    font-size: 1.05rem; 
    color: rgba(255, 255, 255, 0.7); 
    line-height: 1.6; 
    margin-bottom: 30px; 
}

.bcard-price { 
    display: flex; 
    align-items: center; 
    justify-content: center; /* MUDANÇA AQUI: Garante que o preço fique no meio */
    gap: 15px; 
    margin-top: auto; 
}

.price-was { 
    color: rgba(255, 255, 255, 0.4); 
    text-decoration: line-through; 
    text-decoration-color: #ff3333 !important;
    text-decoration-thickness: 2.2px !important;
    font-size: 1.4rem !important;
    font-weight: 600;
}

.price-free { 
    background: linear-gradient(135deg, var(--amarelo), var(--laranja)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-size: 1.5rem; 
    font-weight: 900; 
}

/* ============================================== */
/* === CARD ALFRED (FULL WIDTH)               === */
/* ============================================== */
.bcard-alfred {
    grid-column: 1 / -1; /* Ocupa as duas colunas */
    display: flex;
    flex-direction: row; /* GARANTE QUE O CELULAR E O TEXTO FIQUEM LADO A LADO */
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px 60px;
}

.bcard-text-area {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    
    /* MUDANÇA AQUI: Centraliza os elementos e texto na metade esquerda do Alfred */
    align-items: center; 
    text-align: center;
}

/* ============================================== */
/* === O SEU CÓDIGO DO MOCKUP (AJUSTADO)      === */
/* ============================================== */
.alfred-visual-content {
    flex: 1; /* Ocupa a direita */
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    perspective: 2000px; 
}

.phone-case {
    width: 190px;
    height: 380px;
    background-color: #1a1a1a; 
    border-radius: 35px;
    position: relative;
    box-shadow: 
      0 0 0 2px #2a2a2a,
      0 0 0 5px #555, 
      20px 20px 40px rgba(0,0,0,0.5),
      inset 0 0 10px rgba(255,255,255,0.1);
    transform: rotateY(-20deg) rotateX(10deg);
    transform-style: preserve-3d;
    animation: floatPhone 6s ease-in-out infinite;
    border: 8px solid #0a0a0a; 
    z-index: 2;
}

.dynamic-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 24px;
    background-color: #000;
    border-radius: 15px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.camera-lens {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at top left, #444, #050505);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.3);
}

.reflection {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(115deg, rgba(255,255,255,0.15) 0%, transparent 35%, transparent 60%, rgba(255,255,255,0.05) 100%);
    z-index: 5;
    pointer-events: none;
    border-radius: 25px;
}

.screen-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px; 
    background-color: #111;
    position: relative;
    z-index: 1;
}

.volume-up, .volume-down, .power-btn {
    position: absolute;
    background-color: #444;
    width: 3px;
    border-radius: 2px 0 0 2px;
    transform: translateZ(-3px); 
}

.volume-up { height: 35px; top: 90px; left: -11px; }
.volume-down { height: 35px; top: 135px; left: -11px; }
.power-btn { height: 50px; top: 110px; right: -11px; border-radius: 0 2px 2px 0; }

@keyframes floatPhone {
    0%, 100% { transform: rotateY(-20deg) rotateX(10deg) translateY(0); }
    50% { transform: rotateY(-15deg) rotateX(5deg) translateY(-15px); }
}

/* ============================================== */
/* === RESPONSIVIDADE MOBILE DA SEÇÃO BÔNUS   === */
/* ============================================== */
@media (max-width: 900px) {
    .bonus-grid { grid-template-columns: 1fr; gap: 25px; }
    
    .bcard { padding: 35px 25px; text-align: center; }
    
    .bcard-alfred { 
        flex-direction: column; 
        padding: 40px 20px; 
        gap: 30px; 
    }
    
    .bcard-text-area { align-items: center; }
    .bcard-price { justify-content: center; }
    
    .phone-case {
        transform: rotateY(-10deg) rotateX(0deg);
        animation: floatPhoneMobile 5s ease-in-out infinite;
    }

    @keyframes floatPhoneMobile {
        0%, 100% { transform: rotateY(-10deg) translateY(0); }
        50% { transform: rotateY(-5deg) translateY(-15px); }
    }
}
.price-was { 
    color: #999; 
    text-decoration: line-through; 
    font-size: 0.9rem; 
    font-weight: 600;
}

.price-free { 
    background: linear-gradient(135deg, var(--roxo), var(--laranja)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    font-size: 1.2rem; 
    font-weight: 900; 
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .bonus-grid { 
        grid-template-columns: 1fr; 
        padding: 0 15px; 
    }
    .bcard-mid { transform: scale(1); }
    .bcard-mid:hover { transform: translateY(-8px); }
}

/* ============================================== */
/* === BOX DE GARANTIA (DENTRO DA SEÇÃO BÔNUS) === */
/* ============================================== */
.guarantee-box {
    background-color: #f4f4f8; /* Fundo cinza clarinho para destacar */
    border: 1px solid #eaeaea;
    border-radius: 24px;
    padding: 50px 60px;
    margin: 60px auto 0 auto; /* Espaçamento do banner laranja */
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.guarantee-content {
    flex: 1.5;
    text-align: left;
}

.guarantee-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--roxo);
    margin-bottom: 20px;
    line-height: 1.2;
}

.guarantee-desc {
    font-size: 1.1rem;
    color: var(--cor-texto-mutado);
    line-height: 1.6;
    font-weight: 500;
}

/* Espaço do Selo */
.guarantee-seal-placeholder {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guarantee-seal-placeholder img {
    max-width: 220px; /* Garante que o seu selo real não fique gigante */
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15)); /* Dá um efeito 3D no selo */
}

.guarantee-seal-placeholder {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.garantia-img {
    max-width: 250px; /* Tamanho ideal para um selo */
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15)); /* Dá um efeito 3D flutuante no selo */
    transition: transform 0.3s ease;
}

.garantia-img:hover {
    transform: scale(1.05) rotate(-5deg); /* Interação charmosa ao passar o mouse */
}

@media (max-width: 900px) {
    .guarantee-box {
        /* Essa é a linha mágica que inverte a ordem e joga o selo para cima */
        flex-direction: column-reverse; 
        padding: 40px 25px;
        text-align: center;
        gap: 30px;
    }
    
    .guarantee-content { 
        text-align: center; 
    }
    
    .guarantee-title { 
        font-size: 1.8rem; 
    }
    
    .garantia-img {
        max-width: 200px; /* Reduz um pouquinho no celular para a tela respirar */
    }
}


/* ============================================== */
/* === SEÇÃO DE VENDAS (OFERTA FINAL)          === */
/* ============================================== */
.oferta-section {
    padding: 70px 0 120px 0;
    background: radial-gradient(circle at top left, #faf5fc 0%, #fdfdfd 60%);
    background-image: radial-gradient(rgba(146, 0, 208, 0.06) 2px, transparent 2px);
    background-size: 35px 35px;
    position: relative;
    overflow: hidden;
}

.oferta-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(242, 118, 46, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Badge topo */
.oferta-badge-pill {
    margin-bottom: 20px !important;
}

/* Título principal */
.oferta-main-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 900;
    color: var(--cor-texto);
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 50px;
    line-height: 1.1;
}

/* Card principal: layout 2 colunas */
.oferta-card {
    background: #ffffff;
    border-radius: 28px;
    border: 1px solid rgba(146, 0, 208, 0.1);
    box-shadow: 0 20px 60px rgba(146, 0, 208, 0.1);
    display: flex;
    align-items: stretch;
    max-width: 1050px;
    margin: 0 auto;
    overflow: hidden;
}

/* Coluna esquerda */
.oferta-col-left {
    flex: 1.3;
    padding: 50px 50px 45px 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Lista de itens */
.oferta-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 35px;
}

.oferta-checklist li {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.oferta-checklist li .check-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 1px;
}

.oferta-checklist li span:last-child {
    flex: 1;
    min-width: 0;
}

.oferta-checklist li.li-bonus {
    color: var(--cor-texto-mutado);
    font-size: 0.93rem;
}

.oferta-checklist li strong {
    color: var(--cor-texto);
}

/* Tag de bônus */
.oferta-bonus-tag {
    background: linear-gradient(135deg, #fffbea, #fff3cd);
    border: 1px solid #f2c029;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    color: #7a5c00;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.oferta-bonus-tag strong {
    font-size: 1.1rem;
    color: #5a3e00;
}

/* Divisor vertical */
.oferta-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(146, 0, 208, 0.12), transparent);
    flex-shrink: 0;
}

/* Coluna direita */
.oferta-col-right {
    flex: 1;
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(160deg, #fdfaff 0%, #ffffff 100%);
}

/* Logo área */
.oferta-logo-area {
    margin-bottom: 5px;
}

.oferta-logo-text {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--cor-texto);
}

.oferta-logo-dot {
    color: var(--roxo);
}

.oferta-logo-area {
    margin-bottom: 15px; /* Dei um pequeno respiro extra para a imagem */
}

/* NOVO: Estilo para a imagem da logo na oferta */
.oferta-logo-img {
    width: 140px; /* Tamanho ideal para leitura sem roubar a atenção do preço */
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); /* Sombrinha super sutil para destacar do fundo */
}

/* Preço */
.oferta-preco-wrapper {
    text-align: center;
    line-height: 1.2;
}

.oferta-parcelado {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.oferta-parcelas {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cor-texto-mutado);
}

.oferta-valor-parc {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--cor-texto);
}

.oferta-ou {
    font-size: 0.85rem;
    color: var(--cor-texto-mutado);
    font-weight: 500;
    margin-bottom: 2px;
}

.oferta-avista {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-texto-mutado);
    opacity: 0.7;
}

/* Botão CTA principal */
.btn-oferta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--roxo), var(--laranja));
    background-size: 200% 200%;
    color: white;
    text-decoration: none;
    padding: 20px 32px;
    border-radius: 60px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    text-align: center;
    line-height: 1.3;
    animation: gradientShift 3s ease infinite;
    box-shadow: 0 8px 30px rgba(146, 0, 208, 0.28);
    width: 100%;
    justify-content: center;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.btn-oferta:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 44px rgba(146, 0, 208, 0.42);
}

.pulse-btn {
    animation: gradientShift 3s ease infinite, pulseShadow 2s ease-in-out infinite;
}

@keyframes pulseShadow {
    0%, 100% { box-shadow: 0 8px 30px rgba(146, 0, 208, 0.28); }
    50% { box-shadow: 0 8px 50px rgba(146, 0, 208, 0.5); }
}

.btn-arrow {
    font-size: 1.2rem;
}

/* Garantia */
.oferta-garantia {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cor-texto-mutado);
}

.oferta-garantia svg {
    width: 18px;
    height: 18px;
    color: var(--roxo);
    flex-shrink: 0;
}

.oferta-obs {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: 500;
    margin-top: -6px;
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 900px) {
    .oferta-section {
        padding: 70px 0 90px 0;
    }

    .oferta-card {
        flex-direction: column;
    }

    .oferta-col-left {
        padding: 35px 25px 30px 25px;
    }

    .oferta-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(146, 0, 208, 0.12), transparent);
    }

    .oferta-col-right {
        padding: 35px 25px 40px 25px;
    }

    .oferta-checklist li {
        font-size: 0.95rem;
    }

    .oferta-valor-parc {
        font-size: 2rem;
    }
}

/* ============================================== */
.quimica-page {
    display: none; /* Esconde todas as páginas por padrão */
    animation: fadeInList 0.4s ease forwards;
    margin-bottom: 0 !important; /* Reseta margem da lista base */
}

.quimica-page.active {
    display: block; /* Mostra apenas a ativa */
}

@keyframes fadeInList {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Controles de Paginação */
.quimica-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 40px; /* Mantém o espaçamento para a caixa de estatísticas */
    padding: 0 10px;
}

.carousel-dots {
    display: flex;
    gap: 6px;
}

.carousel-dots .dot-indicator {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.carousel-dots .dot-indicator.active {
    background-color: var(--amarelo);
    width: 20px; /* Alarga o pontinho ativo para virar uma pílula */
    border-radius: 10px;
}

/* Botão de Próxima Página */
.btn-next-list {
    background-color: #9200d010;
    border: 1px solid #5e008734;
    color: var(--roxo);
    padding: 8px 16px;
    border-radius: 50px;    
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.btn-next-list svg { width: 16px; height: 16px; }

.btn-next-list:hover {
    background-color: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--roxo); /* Contraste forte ao passar o mouse */
    transform: scale(1.05);
}

/* ============================================== */
/* === IMAGENS DOS ÍCONES DOS CARDS DE MATÉRIA === */
/* ============================================== */

/* Controla o tamanho das imagens png dentro dos quadrados dos cartões */
.img-icon-subject {
    width: 40px;  
    height: 40px;
    object-fit: contain; 
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); 
}

/* ============================================== */
/* === MARCA D'ÁGUA GIGANTE (SÍMBOLO MEDICINA) === */
/* ============================================== */

/* Oculta o SVG antigo se ele ainda existir no código */
.giant-watermark-bg svg {
    display: none;
}

/* Aplica o estilo na nova tag de imagem <img> */
.giant-watermark-bg img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px; 
    height: auto;
    transform: translate(-50%, -50%) rotate(-15deg);
    opacity: 0.04; 
    filter: grayscale(100%) brightness(200%);
}

/* Reduz a marca d'água no mobile para não estourar a tela */
@media (max-width: 900px) {
    .giant-watermark-bg img {
        width: 600px;
    }
}

/* ============================================== */
/* === FOOTER (RODAPÉ PROFISSIONAL)           === */
/* ============================================== */
.main-footer {
    padding: 20px 0 40px 0;
    background-color: #ffffff; /* Fundo branco limpo */
    border-top: 1px solid rgba(146, 0, 208, 0.08); /* Linha divisória sutil */
    position: relative;
    z-index: 10;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-logo {
    width: 90px;
    height: auto;
    /* Efeito premium: a logo fica levemente desbotada e ganha cor no hover */
    filter: grayscale(50%);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.footer-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.footer-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-info p {
    font-size: 0.9rem;
    color: var(--cor-texto-mutado);
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.3px;
}

.footer-company {
    font-weight: 700 !important;
    color: var(--roxo-escuro) !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
}

.footer-copyright {
    margin-top: 15px !important;
    font-size: 0.8rem !important;
    opacity: 0.6;
}

/* Ajuste sutil para o mobile */
@media (max-width: 900px) {
    .main-footer {
        padding: 60px 0 40px 0;
    }
    
    .footer-logo {
        width: 75px;
    }
    
    .footer-info p {
        font-size: 0.85rem;
    }
}

/* secao FAQ */

#secao-faq {
    background-color: var(--cor-fundo);
    padding: 40px 0 80px 0;
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(146, 0, 208, 0.08); /* Separação sutil */
}

/* --- Cabeçalho do FAQ --- */
.faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}


.faq-header h2 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 15px;
} 

.faq-header p {
    font-size: 1.1rem;
    color: var(--cor-texto-mutado);
}

/* --- Layout Principal (2 Colunas) --- */
.interactive-faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
    max-width: 1050px;
    margin: 0 auto;
    align-items: flex-start;
}

/* ============================================== */
/* === COLUNA ESQUERDA: LISTA DE PERGUNTAS    === */
/* ============================================== */
.faq-questions-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 480px; 
    overflow-y: auto;
    padding-right: 15px; 
}

/* Customização da Barra de Rolagem (Fina e Roxa) */
.faq-questions-column::-webkit-scrollbar { width: 6px; }
.faq-questions-column::-webkit-scrollbar-track { background: rgba(146, 0, 208, 0.05); border-radius: 10px; }
.faq-questions-column::-webkit-scrollbar-thumb { background: var(--roxo); border-radius: 10px; }

/* --------------------------------------------------- */
/* FIX DO JS: CLASSES DINÂMICAS QUE O SEU SCRIPT CRIA  */
/* --------------------------------------------------- */

/* O "envelope" que o JS cria ao redor do botão */
.faq-accordion-item {
    width: 100%;
    border-radius: 16px;
    transition: all 0.3s ease;
}

/* A RESPOSTA INJETADA PELO JS: Tem que sumir no desktop! */
.faq-mobile-answer {
    display: none; 
}

/* --------------------------------------------------- */

/* Botões das Perguntas */
.faq-interactive-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(146, 0, 208, 0.15);
    padding: 20px 25px;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-texto);
    cursor: pointer;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.faq-interactive-btn span { flex: 1; padding-right: 15px; }

.faq-interactive-btn i {
    color: #ccc;
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Interações do Botão (Hover e Ativo) */
.faq-interactive-btn:hover {
    border-color: var(--roxo);
    transform: translateX(8px);
    box-shadow: 0 8px 25px rgba(146, 0, 208, 0.08);
}

.faq-interactive-btn:hover i { color: var(--roxo); }

.faq-interactive-btn.active {
    border: 2px solid var(--roxo);
    background-color: rgba(146, 0, 208, 0.04);
    color: var(--roxo);
    transform: translateX(8px);
}

.faq-interactive-btn.active i {
    color: var(--roxo);
    transform: rotate(90deg);
}


/* ============================================== */
/* === COLUNA DIREITA: CARD DO ALFRED (RESPOSTA) === */
/* ============================================== */
.faq-answer-column {
    position: sticky;
    top: 100px; 
}

.faq-answer-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(146, 0, 208, 0.15);
    box-shadow: 0 25px 50px rgba(146, 0, 208, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.faq-card-header {
    background-color: #fafafa;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eaeaea;
}

.faq-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid rgba(146, 0, 208, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.faq-avatar img { width: 80%; height: auto; object-fit: contain; }

.faq-header-info { display: flex; flex-direction: column; gap: 2px; }
.faq-brand-title { font-weight: 900; font-size: 1.15rem; color: var(--cor-texto); }

.faq-status {
    font-size: 0.85rem;
    color: #2ecc71; 
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    border-radius: 50%;
    animation: pulseOnline 2s infinite;
}

@keyframes pulseOnline {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.faq-card-body {
    padding: 35px 30px;
    min-height: 280px; 
    max-height: 330px; /* LIMITA O CRESCIMENTO MÁXIMO DO CARD */
    background: #ffffff;
    overflow-y: auto; /* ADICIONA A ROLAGEM SE O TEXTO PASSAR DO LIMITE */
}

/* Customização da Barra de Rolagem da Resposta (Fina e Roxa) */
.faq-card-body::-webkit-scrollbar { 
    width: 6px; 
}
.faq-card-body::-webkit-scrollbar-track { 
    background: rgba(146, 0, 208, 0.05); 
    border-radius: 10px; 
    margin: 15px 0; /* Deixa um respiro nas pontas da barra */
}
.faq-card-body::-webkit-scrollbar-thumb { 
    background: var(--roxo); 
    border-radius: 10px; 
}

#faq-dynamic-answer {
    font-family: 'Consolas', 'Courier New', monospace; 
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cor-texto-mutado);
    margin: 0;
}

/* ============================================== */
/* === RESPONSIVIDADE (A MÁGICA DO SEU JS AQUI) === */
/* ============================================== */
@media (max-width: 992px) {
    .interactive-faq-layout {
        grid-template-columns: 1fr;
    }
    
    /* Some com o painel lateral */
    .faq-answer-column { display: none !important; }

    /* Libera a rolagem natural */
    .faq-questions-column {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        gap: 12px;
    }

    /* O card da sanfona (injetado pelo JS) ganha estilo quando ativo */
    .faq-accordion-item {
        border: 1px solid rgba(146, 0, 208, 0.15);
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }

    .faq-accordion-item.active {
        background-color: var(--roxo);
        border-color: var(--roxo);
    }

    /* O botão dentro da sanfona */
    .faq-interactive-btn {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 18px 20px; 
    }

    .faq-interactive-btn:hover {
        transform: none; /* Sem pulo para os lados no celular */
        border-color: transparent;
    }

    .faq-interactive-btn.active {
        background: transparent;
        color: #fff; /* Letras brancas no fundo roxo */
        border: none;
        box-shadow: none;
        transform: none;
    }

    .faq-interactive-btn.active i { color: #fff; }

    /* A resposta mobile aparece fluida! */
    .faq-accordion-item.active .faq-mobile-answer {
        display: block;
        padding: 0 20px 20px 20px;
        color: rgba(255, 255, 255, 0.95);
        font-size: 1rem;
        line-height: 1.6;
        animation: fadeIn 0.4s ease-in-out forwards;
    }
}