/* =========================================================
   KPS WebTools - Estilos de Imágenes
   ========================================================= */

/* --- Estilos base para los contenedores de efectos de imagen --- */
.kpswebtools-img-light-01,
.kpswebtools-img-shadow-01,
.kpswebtools-img-shadow-02,
.kpswebtools-img-shadow-03,
.kpswebtools-img-fade-01,
.kpswebtools-img-fade-02,
.kpswebtools-img-sweep-01,
.kpswebtools-img-sweep-02,
.kpswebtools-img-border-01,
.kpswebtools-img-border-02,
.kpswebtools-img-rotate-01,
.kpswebtools-img-rotate-02,
.kpswebtools-img-blur-01,
.kpswebtools-img-blur-02,
.kpswebtools-img-flash-01,
.kpswebtools-img-shine-01,
.kpswebtools-img-shine-02,
.kpswebtools-img-circle-01,
.kpswebtools-img-circle-02 {
    position: relative; /* Clave: limita el efecto a este contenedor */
    overflow: hidden; /* Clave: recorta el efecto para que no se salga */
    display: block;
    border-radius: 8px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
}

.kpswebtools-img-light-01 img,
.kpswebtools-img-shadow-01 img,
.kpswebtools-img-shadow-02 img,
.kpswebtools-img-shadow-03 img,
.kpswebtools-img-zoom-01 img,
.kpswebtools-img-zoom-02 img,
.kpswebtools-img-filter-01 img,
.kpswebtools-img-filter-02 img,
.kpswebtools-img-filter-03 img,
.kpswebtools-img-filter-04 img,
.kpswebtools-img-rotate-01 img,
.kpswebtools-img-rotate-02 img,
.kpswebtools-img-blur-01 img,
.kpswebtools-img-blur-02 img,
.kpswebtools-img-flash-01 img,
.kpswebtools-img-shine-01 img,
.kpswebtools-img-shine-02 img,
.kpswebtools-img-circle-01 img,
.kpswebtools-img-circle-02 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* --- kpswebtools-img-light-01: Efecto de luz diagonal --- */
.kpswebtools-img-light-01::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: transform 0.6s ease;
    z-index: 1;
}
.kpswebtools-img-light-01:hover::before {
    transform: skewX(-25deg) translateX(300%);
}

/* --- kpswebtools-img-shadow-01: Efecto de sombra diagonal --- */
.kpswebtools-img-shadow-01::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    transform: skewX(-25deg);
    transition: transform 0.6s ease;
    z-index: 1;
}
.kpswebtools-img-shadow-01:hover::before {
    transform: skewX(-25deg) translateX(300%);
}

/* --- kpswebtools-img-shadow-02: Efecto de oscurecimiento circular (expandir) --- */
.kpswebtools-img-shadow-02::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
}
.kpswebtools-img-shadow-02:hover::before {
    width: 250%;
    height: 250%;
}

/* --- kpswebtools-img-shadow-03: Efecto de oscurecimiento circular (contraer) --- */
.kpswebtools-img-shadow-03::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.5s ease-out;
    z-index: 1;
}
.kpswebtools-img-shadow-03:hover::before {
    transform: translate(-50%, -50%) scale(0);
}

/* --- kpswebtools-img-zoom-01: Efecto de Zoom (Ampliar) --- */
.kpswebtools-img-zoom-01 img {
    transition: transform 0.3s ease;
}
.kpswebtools-img-zoom-01:hover img {
    transform: scale(1.3);
}

/* --- kpswebtools-img-zoom-02: Efecto de Zoom (Reducir) --- */
.kpswebtools-img-zoom-02 img {
    transform: scale(1.3);
    transition: transform 0.3s ease;
}
.kpswebtools-img-zoom-02:hover img {
    transform: scale(1);
}

/* --- kpswebtools-img-filter-01: Desaturación (B/N a Color) --- */
.kpswebtools-img-filter-01 img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}
.kpswebtools-img-filter-01:hover img {
    filter: grayscale(0%);
}

/* --- kpswebtools-img-filter-02: Desaturación (Color a B/N) --- */
.kpswebtools-img-filter-02 img {
    filter: grayscale(0%);
    transition: filter 0.3s ease;
}
.kpswebtools-img-filter-02:hover img {
    filter: grayscale(100%);
}

/* --- kpswebtools-img-filter-03: Sepia (Sepia a Color) --- */
.kpswebtools-img-filter-03 img {
    filter: sepia(100%);
    transition: filter 0.3s ease;
}
.kpswebtools-img-filter-03:hover img {
    filter: sepia(0%);
}

/* --- kpswebtools-img-filter-04: Sepia (Color a Sepia) --- */
.kpswebtools-img-filter-04 img {
    filter: sepia(0%);
    transition: filter 0.3s ease;
}
.kpswebtools-img-filter-04:hover img {
    filter: sepia(100%);
}

/* --- kpswebtools-img-bounce-01: Efecto de Rebote --- */
.kpswebtools-img-bounce-01 img {
    transform: scale(1); /* Estado inicial */
    transition: transform 0.05s ease-out;
}
.kpswebtools-img-bounce-01:hover img {
    animation: kps-bounce 0.5s ease-in-out;
}

@keyframes kps-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.85);
    }
}
/* --- Efecto de Desvanecimiento (Fade) --- */
.kpswebtools-img-fade-01:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.4s ease;
}
.kpswebtools-img-fade-01:hover:before {
    background-color: rgba(0, 0, 0, 0.4);
}

.kpswebtools-img-fade-02:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.4s ease;
}
.kpswebtools-img-fade-02:hover:before {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Efecto de Barrido Vertical --- */
.kpswebtools-img-sweep-01:before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: top 0.4s ease;
}
.kpswebtools-img-sweep-01:hover:before {
    top: 0;
}
.kpswebtools-img-sweep-02:before {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: bottom 0.4s ease;
}
.kpswebtools-img-sweep-02:hover:before {
    bottom: 0;
}

/* --- Efecto de Borde Expandido --- */
.kpswebtools-img-border-01:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 3px solid #000;
    opacity: 0;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}
.kpswebtools-img-border-01:hover:after {
    width: 90%;
    height: 90%;
    opacity: 1;
}
.kpswebtools-img-border-02:after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 0;
    height: 0;
    border: 3px solid #000;
    opacity: 0;
    transition: all 0.4s ease;
}
.kpswebtools-img-border-02:hover:after {
    width: 80%;
    height: 80%;
    top: 5%;
    left: 5%;
    opacity: 1;
}

/* --- NUEVOS EFECTOS ADAPTADOS --- */

/* --- Efecto de Rotación y Zoom (Rotate) --- */
.kpswebtools-img-rotate-01 img {
    transform: rotate(0deg) scale(1);
    transition: transform 0.3s ease-in-out;
}
.kpswebtools-img-rotate-01:hover img {
    transform: rotate(15deg) scale(1.4);
}
.kpswebtools-img-rotate-02 img {
    transform: rotate(0deg) scale(1.4);
    transition: transform 0.3s ease-in-out;
}
.kpswebtools-img-rotate-02:hover img {
    transform: rotate(15deg) scale(1);
}

/* --- Efecto de Desenfoque (Blur) --- */
.kpswebtools-img-blur-01 img {
    filter: blur(0px);
    transition: filter 0.3s ease-in-out;
}
.kpswebtools-img-blur-01:hover img {
    filter: blur(3px);
}
.kpswebtools-img-blur-02 img {
    filter: blur(3px);
    transition: filter 0.3s ease-in-out;
}
.kpswebtools-img-blur-02:hover img {
    filter: blur(0px);
}

/* --- Efecto de Destello (Flash) --- */
.kpswebtools-img-flash-01 img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.kpswebtools-img-flash-01:hover img {
    animation: kps-flash 1.5s;
}
@keyframes kps-flash {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* --- Efecto de Resplandor (Shine) --- */
.kpswebtools-img-shine-01:before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}
.kpswebtools-img-shine-01:hover:before {
    animation: kps-shine-left 0.75s;
}
@keyframes kps-shine-left {
    100% { left: 125%; }
}
.kpswebtools-img-shine-02:before {
    content: '';
    position: absolute;
    top: 0;
    right: -75%;
    z-index: 2;
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(25deg);
}
.kpswebtools-img-shine-02:hover:before {
    animation: kps-shine-right 0.75s;
}
@keyframes kps-shine-right {
    100% { right: 125%; }
}

/* --- Efecto de Onda Circular (Circle) --- */
.kpswebtools-img-circle-01:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.kpswebtools-img-circle-01:hover:before {
    animation: kps-circle-expand 0.75s;
}
@keyframes kps-circle-expand {
    0% { opacity: 1; }
    40% { opacity: 1; }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
.kpswebtools-img-circle-02:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 200%;
    height: 200%;
    background: rgba(255,255,255,0);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.75s ease;
}
.kpswebtools-img-circle-02:hover:before {
    width: 0;
    height: 0;
    opacity: 0;
}

/* --- Estilo para la fila seleccionada --- */
.kps-effect-selected {
    background-color: #dbffce !important; /* Un color suave para el resaltado */
    border-right: 4px solid #85c478 !important; /* Una barra lateral para mayor visibilidad */
}