@keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .float { animation: float 6s ease-in-out infinite; }
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
            50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); }
        }
        .glow { animation: glow 2s ease-in-out infinite; }
        @keyframes matrix {
            0% { transform: translateY(-100vh); opacity: 0; }
            100% { transform: translateY(100vh); opacity: 1; }
        }
        .matrix-rain { animation: matrix 3s linear infinite; }
        
        /* Mejoras para el menú móvil */
        @media (max-width: 1024px) {
            .mobile-menu-overlay {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
        }
        
   
        .mobile-menu-open {
            overflow: hidden;
        }
        

        html {
            scroll-behavior: smooth;
        }
        
   
        .hamburger-line {
            transform-origin: center;
        }
        
                        
        @media (max-width: 320px) {
            .text-xs-mobile {
                font-size: 0.75rem;
            }
        }
        

        @media (min-width: 480px) {
            .xs\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
          /* Optimización para tablets */
        @media (min-width: 768px) and (max-width: 1024px) {
            .tablet-optimized {
                padding: 1.5rem;
            }
        }
          /* Hide elements with x-cloak until Alpine.js loads */
        [x-cloak] {
            display: none !important;
        }
        
      
        .modal-backdrop {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        
   
        .modal-image {
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        
        .modal-image:hover {
            transform: scale(1.02);
        }
        

        .modal-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .modal-content::-webkit-scrollbar-track {
            background: rgba(31, 41, 55, 0.5);
            border-radius: 3px;
        }
        
        .modal-content::-webkit-scrollbar-thumb {
            background: rgba(6, 182, 212, 0.5);
            border-radius: 3px;
        }
        
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(6, 182, 212, 0.7);
        }