/* --- ANIMACIONES Y CLASES PERSONALIZADAS --- */

.hero-slider {
    transition: opacity 1s ease-in-out;
}

.hero-slide {
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity 1s ease-in-out, transform 5s ease-out;
    transform: scale(1.05);
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

.zoom-hover img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-hover:hover img {
    transform: scale(1.05);
}

.structural-line {
    position: relative;
}

.structural-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -24px;
    bottom: 0;
    width: 1px;
    background-color: rgba(17, 17, 17, 0.1);
}

.accordion-card {
    flex: 1;
    transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.accordion-card:hover {
    flex: 2.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.accordion-img-container {
    width: 100%;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.accordion-card:hover .accordion-img-container {
    width: 40%;
}

.accordion-content {
    width: 0;
    opacity: 0;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease 0.1s;
}

.accordion-card:hover .accordion-content {
    width: 60%;
    opacity: 1;
}

@media (max-width: 768px) {
    .accordion-card {
        flex-direction: column;
        flex: auto !important;
        height: auto !important;
    }

    .accordion-img-container {
        width: 100% !important;
        height: 200px;
    }

    .accordion-content {
        width: 100% !important;
        opacity: 1;
        height: 0;
        padding: 0 1.5rem !important;
        transition: height 0.5s ease, padding 0.5s ease;
    }

    .accordion-card:hover .accordion-content {
        height: auto;
        padding: 1.5rem !important;
    }
}