/* Estilo del círculo */
.cursor {
    position: absolute;
    width: 20px;
    /* Tamaño del círculo */
    height: 20px;
    /* Tamaño del círculo */
    background-color: white;
    /* Color negro */
    border-radius: 50%;
    /* Hace que sea un círculo */
    pointer-events: none;
    /* Asegura que el círculo no interfiera con los eventos de clic */
    transform: translate(-50%, -50%);
    /* Centra el círculo respecto al puntero */
    z-index: 9999;
    /* Asegura que el círculo se vea por encima de otros elementos */
    filter: blur(2px);
    mix-blend-mode: difference;
    /*    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease; */
}

/* Desactiva el cursor estándar cuando hay hover */
* {
    cursor: none;
}

/* Estilo general del enlace */
a {
    color: inherit;
    /* Hereda el color del elemento padre */
    text-decoration: none;
    /* Elimina el subrayado por defecto */
}

/* Estilo cuando el enlace está en hover (solo para escritorio) */
a.hover-effect:hover {
    color: yellow;
    /* Cambia el color a amarillo en hover */
}

/* Estilo cuando el enlace está siendo clickeado (active) */
a:active {
    color: yellow;
    /* Cambia el color a amarillo cuando se hace clic */
    filter: blur(1.6px);
    /* Aplica el blur en el clic */
}


#conoceme:hover {
    filter: blur(1.6px);
    /* Cambia el color a amarillo en hover */
}

#conoceme:active {
    color: yellow;
    filter: blur(1.6px);
}

#cerrar-gsap:hover svg path {
    stroke: yellow;
    filter: blur(1.6px);
}

.carita:hover {
    color: yellow;
    filter: blur(1.6px);
}

/*
 Para el caso del hover de la casita 
#casita-home.hover-effect:hover svg path {
    stroke: yellow;
    filter: blur(1.6px);
}
*/

/* Para el caso del hover de la casita */
#casita-home:hover svg path {
    stroke: yellow;
    filter: blur(1.6px);
}

/* Estilo de los elementos de navegación */
.slider-nav a {
    opacity: 1;
    transition: opacity ease 250ms;
}

/*
 Estilo cuando el enlace está en hover 
.slider-nav a.hover-effect:hover {
    filter: blur(1.6px);
}*/
