/* Pantalla de carga */
        .intro {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            animation: fadeOut 2s 3s forwards; /* Se oculta después de 3s */
        }

        /* Imagen animada */
        .logo {
            width: 150px; /* Tamaño de la imagen */
            opacity: 0;
            animation: fadeIn 2s forwards, scaleUp 2s forwards;
        }

        /* Animaciones */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes scaleUp {
            from { transform: scale(0.8); }
            to { transform: scale(1); }
        }

        @keyframes fadeOut {
            to { opacity: 0; visibility: hidden; }
        }

        /* Contenido principal */
        .content {
            display: none;
            text-align: center;
            padding: 50px;
        }