body {
    margin: 0;
    overflow: hidden; /* Evita barras de desplazamiento */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; /* Fuente serif elegante similar a la imagen */
}

.animation-container {
    position: relative;
    text-align: center;
}

.bear {
    position: absolute;
    top: -120px; /* Posición inicial, por encima del texto */
    left: -200px; /* Fuera de la pantalla a la izquierda */
    width: 140px; /* Tamaño del oso */
    height: auto;
    opacity: 1;
    z-index: 10;
    /* La animación de 'correr' se define aquí */
    animation: runBear 5s linear forwards;
    animation-delay: 1s; /* Un pequeño retraso antes de empezar */
}

.bear svg {
    width: 100%;
    height: auto;
}

.text {
    font-size: 7rem; /* Tamaño del texto */
    color: #000;
    display: flex;
    justify-content: center;
    margin: 0;
    font-weight: 300;
}

.text span {
    display: inline-block;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out; /* Suavidad al caer */
    position: relative;
}

/* La coma tiene una clase separada si quieres ajustarla */
.comma {
    margin-left: 0.1rem;
}

/* Clase que se agrega cuando una letra "cae" */
.fall {
    transform: translateY(250px) rotate(35deg); /* Cae y rota un poco */
    opacity: 0; /* Desaparece al caer */
}

/* Definición de la animación de 'correr' para el oso */
@keyframes runBear {
    0% { left: -200px; }
    100% { left: 100vw; } /* Corre hasta el final de la pantalla */
}

footer {
    position: absolute; /* Saca al footer del flujo normal para que no estorbe */
    bottom: 20px;       /* Lo pega a 20 píxeles del borde inferior */
    left: 0;
    width: 100%;        /* Hace que ocupe todo el ancho */
    text-align: center; /* Centra el texto */
    font-family: sans-serif; /* Pon la fuente que prefieras */
    font-size: 14px;
    color: #666;        /* Un color gris sutil */
    z-index: 10;        /* Asegura que quede por encima del fondo */
}

/* Opcional: darle un color bonito al enlace para que no salga el azul por defecto */
footer a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}