.resultados {
    padding: 80px 5%;
    background: linear-gradient(to bottom, var(--bg-creme) 45%, var(--primary-color) 45%);
}

.resultados-header { text-align: center; margin-bottom: 40px; }
.resultados-header h2 { font-family: var(--font-title); font-size: 3.5rem; color: var(--text-dark); }

/* Antes e Depois */
.comparison-container {
    max-width: 900px;
    height: 500px;
    margin: 0 auto 80px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.img-before, .img-after {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
}

.img-before { 
    width: 50%; 
    border-right: 3px solid white; 
    z-index: 1; 
    
    /* SOLUÇÃO: Fixamos o tamanho do fundo para ser igual ao do container pai (900px) */
    /* E garantimos que o início da imagem esteja sempre no topo esquerdo (0 0) */
    background-size: 900px 500px !important; 
    background-position: left top !important;
    background-repeat: no-repeat;
}

.slider {
    position: absolute; width: 100%; height: 100%;
    top: 0; left: 0; opacity: 0; cursor: ew-resize; z-index: 3;
}

.slider-button {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; background: rgb(255, 255, 255); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-color); z-index: 2; pointer-events: none;
}

.slider-button i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px;
}

/* Grid Inferior */
.resultados-grid {
    display: flex; align-items: center; gap: 40px;
    max-width: 1100px; margin: 0 auto; color: white;
}

.resultados-text { flex: 1; color: white; font-size: 1.3rem;}
.resultados-carousel-wrapper { flex: 1; max-width: 480px; position: relative; }

.carousel-main-container { display: flex; align-items: center; gap: 15px; position: relative; }

.carousel-items {
    display: flex; overflow: hidden; border-radius: 15px;
    scroll-behavior: smooth; width: 100%;
}

.carousel-item { min-width: 100%; height: 350px; }
.carousel-item img { width: 100%; height: 100%; object-fit: cover; }

.prev-btn, .next-btn {
    background: white; border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; color: var(--primary-color);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

/* O efeito pílula suave */
.dot.active {
    background: var(--white);
    width: 32px; /* Expansão horizontal */
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Mobile - Bloco Único e Corrigido */
@media (max-width: 768px) {
    .resultados { 
        /* Mantive os 85% que você ajustou para a área bege ficar grande */
        background: linear-gradient(to bottom, var(--bg-creme) 30%, var(--primary-color) 30%);
    }

    .resultados-grid { 
        flex-direction: column; 
        text-align: center; 
        color: var(--text-dark); 
    }

    .resultados-text { 
        flex: 1; 
        color: var(--text-dark); /* Ajustado para escuro pois o fundo aqui é bege */
    }

    /* Ajuste do Container Antes e Depois */
    .comparison-container { 
        height: 300px; 
        width: 100%;
        max-width: 100%;
    }

    /* RESOLUÇÃO DO SEU PROBLEMA: Imagem de Antes Fixa no Mobile */
    .img-before { 
        /* Forçamos o fundo a ter o tamanho exato do container mobile */
        /* '100vw' garante que a largura seja a da tela e '300px' a altura do container */
        background-size: 100vw 300px !important; 
        background-position: left center !important;
        background-repeat: no-repeat;
    }

    .carousel-item { 
        height: 400px; 
    }

    /* Estilo dos indicadores (Pílulas) no Mobile */
    .dot { 
        background: rgba(0, 0, 0, 0.2);
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    } 
    .dot.active { 
        background: var(--primary-color); 
        width: 28px;
        box-shadow: 0 0 8px rgba(196, 154, 132, 0.5);
    }
}