/* dlys v6.0 by Estudio LTV */ 
.comparison-container {padding: 50px 20px; text-align: center; background: var(--color-bg);} 

.comparison-slider{position: relative; width: 100%; max-width: 500px; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgb(var(--color-secundario) / 0.2);} .img-after{width: 100%; height: 100%; object-fit: cover; display: block;} 

.img-0{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/mb-01.webp'); z-index: 2; pointer-events: none;} 

.img-1{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/trabajo-destacado-antes.webp'); z-index: 2; pointer-events: none;} 

.img-2{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/microblading-hiperrealista-antes.webp'); z-index: 2; pointer-events: none;} 

.img-3{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/relleno-densidad-antes.webp'); z-index: 2; pointer-events: none;} 

.img-4{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/correcion-asimetria-antes.webp'); z-index: 2; pointer-events: none;} 

.img-5{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: left center; background-image: url('../../imagenes/microblading/pelo-pelo-antes.webp'); z-index: 2; pointer-events: none;} 

.slider-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; appearance: none; z-index: 5; cursor: ew-resize; margin: 0;} 
.slider-line{position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: rgb(var(--color-blanco)); z-index: 3; pointer-events: none;} 
.slider-button{position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: rgb(var(--color-blanco)); border-radius: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; box-shadow: 0 0 10px rgba(var(--color-secundario) / 0.3);} 
.slider-button::before{content: '◀ ▶'; color: rgb(var(--color-oscuro)); font-size: 12px; line-height: 40px; font-weight: bold;} 
.comparison-static{display: flex; gap: 2px; background: rgb(var(--color-borde)); border-radius: 8px; overflow: hidden;} 
.comparison-static .side{position: relative; width: 50%;} 
.comparison-static span{position: absolute; bottom: 5px; left: 5px; background: rgb(var(--color-secundario) / 0.6); color: rgb(var(--color-blanco)); font-size: 0.7rem; padding: 2px 6px; border-radius: 3px;}

.grid-galeria {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    margin-top:40px;
}

.gallery-item { margin: 0; }

.gallery-item .comparison-slider {
    width:100%;
    max-width:none;
}

.gallery-item figcaption {
    margin-top: 0.8rem;
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
}

.cta-gallery-wrapper {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width:1024px) { .grid-galeria { grid-template-columns:repeat(2,1fr); } }

@media (max-width:768px) { .grid-galeria { grid-template-columns:1fr; } }