.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    background-color: var(--primary-900);
    border: 1px solid var(--primary-700);
    border-radius: 6px;
    padding-block: 8px;

}

.hero__image_container img{
    border-radius: 6px
}

.hero__title {
    font-family: var(--hero-font);
    font-size: clamp(2.75rem, 5vw, 3.7rem);
    font-optical-sizing: auto;
    color: var(--accent-violet);  
    font-weight: 500;
    margin-block: 24px;
   
}

.hero .container > article {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 8px;
}

.hero__description{
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.8;
    text-align: justify;
}

.hero__image_container img {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(12px);
    animation: heroImage 1.4s ease forwards;
    animation-delay: 0.2s;
    border-radius: 6px; /* tu estilo */
}

@keyframes heroImage {
    0% {
        opacity: 0;
        transform: scale(1.15);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Animacion para el hero_description: slide-up + fade-in */
.hero__title,
.hero__description {
    opacity: 0;
    transform: translateY(28px);
    animation: heroText 1s ease forwards;
}

.hero__title {
    animation-delay: 0.4s;
}

.hero__description {
    animation-delay: 0.6s;
}

@keyframes heroText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    .hero .container {
        flex-direction: row;
        justify-content: space-between;
    }
    .hero__description {
        text-align: left;
        max-width: 633px;
    }
    .hero .container > article {        
        padding-inline: 24px;
    }
}