/* Contenedor padre unificado para el fondo interactivo que sigue el cursor */

.interactive-bg-wrapper {
    position: relative !important;
    z-index: 1;
    overflow: hidden !important;
    background: #ffffff !important; /* Fondo blanco garantizado */
}

.interactive-bg-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    /* Ajustamos el tamaño a 700x700px y lo centramos en el 0,0 para que el transform lo mueva desde el centro del cursor */
    top: -350px !important;
    left: -350px !important;
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle at center, rgba(244, 138, 0, 0.45) 0%, rgba(244, 138, 0, 0.2) 40%, transparent 350px) no-repeat center center !important;
    /* Usamos variables CSS inyectadas por JavaScript */
    transform: translate(var(--mouse-x, -9999px), var(--mouse-y, -9999px)) !important;
    pointer-events: none !important;
    z-index: -1 !important;
    /* Transición suave para que persiga el cursor con un ligero retraso elegante */
    transition: transform 0.15s ease-out !important;
    opacity: 0; /* Oculto por defecto hasta que el cursor entra */
}

/* Cuando el wrapper tiene la clase 'cursor-inside', mostramos la esfera */
.interactive-bg-wrapper.cursor-inside::before {
    opacity: 1;
    transition: transform 0.15s ease-out, opacity 0.5s ease !important;
}

/* Hacemos que las secciones internas sean transparentes para que el fondo del wrapper sea visible a través de ellas */
.lines-section, .catalog-section {
    background: transparent !important;
}

/* reach-section-static mantiene su propio fondo oscuro (gestionado por .reach-bg) */
.reach-section-static {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.reach-section-static::before {
    display: none !important;
    content: none !important;
}