.contenido-burbuja {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ajusta esto según el tamaño del contenedor que desees */
    overflow: hidden; /* Oculta cualquier desbordamiento */
    position: relative; /* Añadido para permitir el posicionamiento absoluto dentro del contenedor */
}

.burbuja {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px; /* Ajusta el tamaño según sea necesario */
    border-radius: 50%; /* Hace que el contenedor tenga forma de burbuja (círculo) */
}

.imagen-centrada {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Asegura que la imagen se ajuste correctamente dentro de la burbuja */
}

.texto-en-movimiento {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: 'MiTipografia5';
    font-size: 100px; /* Ajusta el tamaño del texto según sea necesario */
    color: white; /* Ajusta el color del texto según sea necesario */
    animation: movimientoLineal 25s linear infinite; /* Ajusta el tiempo según sea necesario */
}

.contenido-texto {
    display: flex;
    align-items: center;
}

.logo-en-movimiento {
    width: 100px;
    margin: 0 10px; /* Espacio entre el logo y el texto */
}

@keyframes movimientoLineal {
    0% {
        transform: translateX(-20%);
    }
    50%{
        transform: translateX(-10);
    }
    100% {
        transform: translateX(-50%);
    }
}

/******************************************MEDIA QUERIE PARA 480px*******************************/

@media (max-width: 480px) {
    .contenido-burbuja {
        height: 50vh; /* Ajusta la altura para pantallas pequeñas */
        padding: 10px; /* Agrega un padding para evitar el desbordamiento */
    }

    .burbuja {
        width: 100%; /* Ajusta el tamaño de la burbuja para que ocupe todo el ancho disponible */
        height: auto; /* Ajusta la altura automáticamente */
    }

    .imagen-centrada {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ajusta la imagen para que se ajuste dentro del contenedor */
    }

    .texto-en-movimiento {
        font-size: 1.5rem; /* Ajusta el tamaño de la fuente para pantallas pequeñas */
    }

    .logo-en-movimiento {
        width: 50px; /* Reduce el tamaño del logo para pantallas pequeñas */
        margin: 0 5px; /* Ajusta el espacio entre el logo y el texto */
    }
}