/* Variáveis de Cores (Mantidas) */
    :root {
        --green-primary: #10b981; 
        --green-dark: #059669;    
    }

    /* --- ISOLAMENTO PRINCIPAL --- */
    #custom-comparison-carousel * {
        box-sizing: border-box; /* Garante que todos os seus elementos sigam a mesma regra básica */
        /* Zera margens e paddings básicos para neutralizar conflitos */
        margin: 0; 
        padding: 0;
    }
    
    #custom-comparison-carousel {
        /* Garante que o container se comporte como esperado, independentemente do Elementor */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* --- Estilos do Carrossel Geral --- */
    .carousel-container {
        position: relative;
        width: 95%; 
        max-width: 400px; 
        height: 250px;    
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
    }

    .carousel-track {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide {
        min-width: 100%;
        height: 100%;
        flex-shrink: 0; 
        display: flex; /* Garante que o comparador interno seja um flex item */
        justify-content: center;
        align-items: center;
    }

    /* --- Comparador de Imagem (Ajustes de Posição) --- */
    .comparison-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .comparison-image {
        width: 100%; /* Fixa em 100% para evitar quebra de layout */
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        pointer-events: none; 
        /* !important para garantir que Elementor não force outras regras de imagem */
        max-width: 100% !important; 
        height: 100% !important; 
        display: block; 
    }

    .image-after {
        width: 50%;
    }
    
    /* ... (Resto do seu CSS customizado segue aqui) ... */
    
    /* Rótulos responsivos */
    .label {
        position: absolute;
        padding: 4px 8px;
        background-color: rgba(255, 255, 255, 0.85);
        color: #333;
        font-weight: bold;
        border-radius: 3px;
        z-index: 10;
        font-size: 0.7em; 
        text-transform: uppercase;
    }

    .label.before { top: 8px; left: 8px; }
    .label.after { top: 8px; right: 8px; }

    /* --- Controle Deslizante (Slider) --- */
    .slider-control {
        position: absolute;
        top: 0;
        left: 50%;
        width: 4px; 
        height: 100%;
        background-color: var(--green-primary); 
        cursor: ew-resize;
        z-index: 20;
        transform: translateX(-50%);
    }

    .slider-handle {
        position: absolute;
        top: 50%;
        width: 30px; 
        height: 30px;
        background-color: white;
        border: 3px solid var(--green-dark); 
        border-radius: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }

    .slider-handle::after {
        content: '↔'; 
        color: var(--green-dark); 
        font-size: 14px; 
        font-weight: bold;
    }

    /* Indicadores */
    .carousel-indicators { margin-top: 10px; }
    .indicator-dot { width: 8px; height: 8px; margin: 0 4px; }
    .indicator-dot.active { background-color: var(--green-primary); }


    /* --- MEDIA QUERY: TABLET E DESKTOP (acima de 768px) --- */
    @media (min-width: 768px) {
        .carousel-container {
            max-width: 700px; 
            height: 450px;    
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .label { padding: 6px 10px; font-size: 0.9em; }
        .slider-control { width: 6px; }
        .slider-handle { width: 44px; height: 44px; border: 4px solid var(--green-dark); }
        .slider-handle::after { font-size: 20px; }
        .indicator-dot { width: 10px; height: 10px; margin: 0 5px; display: none; }
    }