/* --- Estructura para acomodar el Texto y el Avatar --- */
.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    text-align: left;
}

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* --- ESTILOS Y ANIMACIONES DEL AVATAR SVG --- */
.avatar-container {
    flex-shrink: 0;
}

.astrit-avatar {
    width: 280px;
    height: 280px;
    filter: drop-shadow(0px 10px 15px rgba(177, 156, 217, 0.4));
}

.personaje {
    animation: flotarPersonaje 4s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes flotarPersonaje {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.ojos {
    transform-origin: 100px 102px;
    animation: parpadear 4s infinite;
}

@keyframes parpadear {
    0%, 46%, 50%, 100% { transform: scaleY(1); }
    48% { transform: scaleY(0.1); }
}