/* =========================================================
 ALEJO BEFORE & AFTER
 AJUSTADO PARA:
 - MOSTRAR AS IMAGENS POR COMPLETO
 - EXIBIR 50/50 INICIALMENTE
 - ANTES E DEPOIS SE COMPLETAREM AO DESLIZAR
========================================================= */

.alejo-ba-gallery,
.alejo-ba-gallery *{
    box-sizing:border-box;
}

.alejo-ba-gallery{
    --alejo-ba-blue:#074b91;
    --alejo-ba-red:#ff2d3a;
    --alejo-ba-text:#102743;

    width:100%;
    font-family:'Poppins',Arial,sans-serif;
}

.alejo-ba-grid{
    display:grid;
    grid-template-columns:repeat(var(--alejo-ba-columns,2),minmax(0,1fr));
    gap:24px;
}

.alejo-ba-item{
    min-width:0;
}

.alejo-ba-item-title{
    margin:0 0 11px;
    color:var(--alejo-ba-text);
    font-size:17px;
    line-height:1.3;
    font-weight:700;
}

.alejo-ba-compare{
    --position:50%;
    position:relative;
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:18px;
    isolation:isolate;
    user-select:none;
    background:#e9eef4;
    box-shadow:0 13px 32px rgba(4,63,125,.13);
}

.alejo-ba-media-layer{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9eef4;
}

.alejo-ba-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center center;
    pointer-events:none;
    background:#e9eef4;
}

/* Camada do DEPOIS fica inteira ao fundo */
.alejo-ba-after-layer{
    z-index:1;
}

/* Camada do ANTES fica inteira, mas é recortada via clip-path */
.alejo-ba-before-layer{
    z-index:2;
    clip-path:inset(0 calc(100% - var(--position)) 0 0);
}

.alejo-ba-badge{
    position:absolute;
    top:14px;
    z-index:6;
    padding:7px 12px;
    border-radius:50px;
    color:#ffffff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
    pointer-events:none;
    box-shadow:0 4px 13px rgba(0,0,0,.16);
}

.alejo-ba-badge-before{
    left:14px;
    background:rgba(7,75,145,.94);
}

.alejo-ba-badge-after{
    right:14px;
    background:rgba(255,45,58,.94);
}

.alejo-ba-divider{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--position);
    z-index:5;
    width:3px;
    transform:translateX(-50%);
    background:#ffffff;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.08),
        0 0 12px rgba(0,0,0,.22);
    pointer-events:none;
}

.alejo-ba-handle{
    position:absolute;
    left:50%;
    top:50%;
    width:48px;
    height:48px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:3px solid #ffffff;
    background:var(--alejo-ba-red);
    color:#ffffff;
    box-shadow:0 7px 20px rgba(0,0,0,.26);
}

.alejo-ba-handle svg{
    width:25px;
    height:25px;
    fill:currentColor;
}

.alejo-ba-range{
    position:absolute;
    inset:0;
    z-index:10;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:ew-resize;
}

/* Tablet */
@media(max-width:900px){
    .alejo-ba-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* Mobile */
@media(max-width:620px){
    .alejo-ba-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .alejo-ba-compare{
        border-radius:14px;
    }

    .alejo-ba-handle{
        width:43px;
        height:43px;
    }

    .alejo-ba-handle svg{
        width:22px;
        height:22px;
    }
}