/* Contenedor visual (opcional, para centrar) */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* La esfera de agua en sí */
.water-sphere {
    width: 450px;
    height: 450px;
    
    /* Gradiente que simula agua */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(40, 174, 204, 0.3));
    
    /* Forma inicial irregular */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    
    /* Sombras para dar volumen 3D */
    box-shadow:
        inset 10px 10px 60px rgba(20, 125, 200, 0.15),
        20px 20px 60px rgba(20, 125, 200, 0.1);
    
    /* Borde sutil */
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    
    /* La animación de movimiento */
    animation: morph 8s ease-in-out infinite;
}

/* Animación de metamorfosis */
@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translateY(0);
    }
    34% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: translateY(-10px);
    }
    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translateY(5px);
    }
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .water-sphere {
        width: 300px;
        height: 300px;
    }
}

/* ================= OPTIMIZACIÓN MÓVIL ================= */
@media (max-width: 968px) {
    .water-sphere {
        width: 300px;
        height: 300px;
        
        /* OPTIMIZACIÓN CRÍTICA: */
        backdrop-filter: none;       /* Quita el desenfoque pesado */
        -webkit-backdrop-filter: none;
        box-shadow: 
            inset 5px 5px 30px rgba(20, 125, 200, 0.1), /* Sombra interna más ligera */
            10px 10px 30px rgba(20, 125, 200, 0.1);     /* Sombra externa más ligera */
            
        /* Forza a usar la GPU del móvil para que no se trabe */
        transform: translateZ(0); 
        will-change: border-radius, transform; 
    }
}
@media (max-width: 480px) {
    .water-sphere {
        width: 250px;
        height: 250px;
        animation-duration: 10s; /* Más lenta para que el navegador sufra menos */
    }
}