/* 🎭 FOUNDER PHOTO - SEAMLESS ANIMATION EFFECT */

.founder-photo {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
}

/* 🖼️ IMAGEN PRINCIPAL - SIEMPRE VISIBLE SIN EFECTOS DE ESCALA */
.founder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    position: relative;
    display: block;
    transition: filter 0.4s ease;
    /* ELIMINAMOS transform para evitar el salto visual */
}

/* 🖱️ HOVER = SOLO CAMBIO DE FILTRO EN LA IMAGEN (sin escala) */
@media (hover: hover) {
    .founder-photo:hover .founder-img {
        filter: grayscale(0%) contrast(1.1);
        /* NO transform: scale() para evitar salto */
    }
}

/* 🎥 VIDEO - APARECE ENCIMA PARA SIMULAR ANIMACIÓN */
.founder-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0;
    z-index: 2; /* Encima de la imagen */
    transition: opacity 0.4s ease;
}

/* 🖱️ HOVER = VIDEO APARECE ENCIMA (EFECTO ANIMACIÓN) */
@media (hover: hover) {
    .founder-photo:hover .founder-video {
        opacity: 1; /* Video aparece encima */
    }
    
    /* Imagen NO desaparece - se queda abajo */
}

/* 📱 MOBILE - CLICK PARA TOGGLE */
.founder-photo.video-active .founder-video {
    opacity: 1;
}

/* 🔧 SOBRESCRIBIR CSS PRINCIPAL - Eliminar efectos de escala que causan salto */
.founder-photo:hover img {
    transform: none !important; /* Eliminar escala que causa salto visual */
    filter: grayscale(0%) contrast(1.1) !important;
}