/*
         * Contenedor principal para aislar los estilos de la animación.
         * Aplicamos aquí los estilos de fondo y fuente que antes estaban en el body.
         */
         .animation-wrapper-isolated {
            /* Estilos que antes estaban en body */
            font-family: 'VT323', monospace; /* Fuente retro */
            /* Ajustes para que ocupe la pantalla y centre el contenido si es necesario */
            min-height: 30vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Evitar scrollbars */
            position: relative; /* Necesario si los hijos usan posicionamiento absoluto */
        }

        /* Reset básico para incluir bordes y padding en el tamaño del elemento */
        /* Este reset puede mantenerse global o ser más específico si lo necesitas */
        *,
        *:before,
        *:after{
            box-sizing: border-box;
        }

        /* Estilos para enlaces DENTRO del contenedor aislado */
        .animation-wrapper-isolated a:link {
            text-decoration: none;
            color: #FFF;
        }

        .animation-wrapper-isolated a:visited {
            text-decoration: none;
            color: #FFF;
        }

        /* Contenedor de la lista (ul) DENTRO del contenedor aislado */
        .animation-wrapper-isolated ul {
            position: absolute; /* Posicionamiento absoluto para centrar */
            top: 50%; /* Centrado vertical */
            left: 50%; /* Centrado horizontal */
            transform: translate(-50%, -50%); /* Ajuste para centrar basado en el tamaño del elemento */
            margin: 0;
            padding: 0;
            display: flex; /* Usa flexbox para alinear los li */
            flex-direction: column; /* Apila los elementos verticalmente */
            align-items: center; /* Centra los elementos li horizontalmente dentro del ul */
        }

        /* Estilos comunes para los elementos de la lista (li) DENTRO del contenedor aislado */
        .animation-wrapper-isolated ul li {
            list-style: none; /* Elimina los puntos de la lista */
            background: transparent; /* Fondo transparente */
            width: 25px; /* Ancho de los elementos */
            height: 25px; /* Altura de los elementos */
            margin: 10px 0; /* Margen vertical de 10px, horizontal de 0 */
            animation: upThenDownVerticalOriginal 2s ease-in-out infinite; /* Aplica la animación vertical */
        }

        /* Estilos para el encabezado h1 DENTRO del contenedor aislado */
        .animation-wrapper-isolated h1 {
            position: absolute; /* Posicionamiento absoluto para colocarlo debajo de la lista */
            top: calc(50% + 150px); /* Ajustamos la posición para que esté debajo de la lista centrada */
            left: 50%; /* Centrado horizontal */
            transform: translate(-50%, 0); /* Ajuste para centrar */
            font-size: 2.5em; /* Tamaño de fuente */
            color: #FFF; /* Color blanco */
            text-shadow: 0px 0px 20px #FF14AB; /* Sombra de texto inicial */
            animation: glow 2s ease-in-out infinite; /* Aplica la animación glow */
            white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
        }

        /* Estilos específicos para cada elemento li (bordes, sombras y retrasos de animación) DENTRO del contenedor aislado */
        .animation-wrapper-isolated ul li:nth-of-type(1) {
            border: 3px solid #FFF;
            box-shadow: 0px 0px 20px #00E6F0, 0px 0px 40px #00E6F0; /* Sombra azul/cian */
            animation-delay: 0.2s; /* Retraso de animación */
        }
        .animation-wrapper-isolated ul li:nth-of-type(2) {
            border: 3px solid #FFF;
            box-shadow: 0px 0px 20px #00FF00, 0px 0px 40px #00FF00; /* Sombra verde */
            animation-delay: 0.4s;
        }
        .animation-wrapper-isolated ul li:nth-of-type(3) {
            border: 3px solid #FFF;
            box-shadow: 0px 0px 20px #FFFF00, 0px 0px 40px #FFFF00; /* Sombra amarilla */
            animation-delay: 0.6s;
        }
        .animation-wrapper-isolated ul li:nth-of-type(4) {
            border: 3px solid #FFF;
            box-shadow: 0px 0px 20px #FF6800, 0px 0px 40px #FF6800; /* Sombra naranja */
            animation-delay: 0.8s;
        }
        .animation-wrapper-isolated ul li:nth-of-type(5) {
            border: 3px solid #FFF;
            box-shadow: 0px 0px 20px #FF14AB, 0px 0px 40px #FF14AB; /* Sombra rosa/magenta */
            animation-delay: 1s;
        }

        /* Definición de la animación para el texto h1 (glow) */
        @keyframes glow {
            0% {
                text-shadow: 0px 0px 20px #FF14AB, 0px 0px 0px #FFFF00; /* Sombra rosa principal, amarilla secundaria (casi invisible) */
            }
            50% {
                text-shadow: 0px 0px 10px #FF14AB, 0px 0px 20px #FFFF00; /* Sombra rosa menos intensa, amarilla más intensa */
            }
            100% {
                text-shadow: 0px 0px 20px #FF14AB, 0px 0px 0px #FFFF00; /* Vuelve al estado inicial */
            }
        }

        /* Definición de la animación para los elementos li (upThenDownVerticalOriginal) */
        @keyframes upThenDownVerticalOriginal {
            0% {
                transform: translateY(0px) rotate(90deg); /* Posición inicial: en el centro vertical, rotado 90 grados */
                border-radius: 0%; /* Borde cuadrado */
            }
            12% {
                border-radius: 25%; /* Bordes ligeramente redondeados */
            }
            25% {
                transform: translateY(-20px) rotate(0deg); /* Se mueve 20px hacia arriba, rotación a 0 grados */
                border-radius: 0%; /* Vuelve a ser cuadrado */
            }
            37% {
                border-radius: 25%; /* Bordes ligeramente redondeados */
            }
            50% {
                transform: translateY(0px) rotate(-90deg); /* Vuelve al centro vertical, rotado -90 grados */
                border-radius: 0%; /* Vuelve a ser cuadrado */
            }
            75% {
                transform: translateY(20px) rotate(0deg); /* Se mueve 20px hacia abajo, rotación a 0 grados */
                border-radius: 50%; /* Bordes completamente redondeados (círculo) */
            }
            100% {
                transform: translateY(0px) rotate(90deg); /* Vuelve al centro vertical, rotado 90 grados (estado inicial del ciclo) */
                border-radius: 0%; /* Vuelve a ser cuadrado */
            }
        }