.titulo{
    text-align: left;
    color: #ff0202;
    width: 60%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
}

.accordion{
    width:100%;
    margin:auto;
}

.panel{
    overflow:hidden;
    height:90px;
    transition:.8s cubic-bezier(.25,.8,.25,1);
    border-bottom:1px solid #ddd;
    background:#dddddd;
}

.panel.active{
    height:550px;
    margin-bottom:0%;
}

.header-c{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    padding:0 60px;
}

.header-c h2{
    color: #ff0202;
}

.content{
    display:flex;
    height:460px;
}

.text{
    width:50%;
    padding:70px;
    display:flex;
    align-items:center;
    text-align:justify;
    line-height:2;
    font-size:1.2em;
}

.image{
    width:50%;
    overflow:hidden;
}

.image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.2);
    opacity:0;
    transition:1s;
}

.panel.active img{
    transform:scale(1);
    opacity:1;
}

.text{
    opacity:0;
    transform:translateX(-60px);
    transition:.7s;
}

.panel.active .text{
    opacity:1;
    transform:translateX(0);
}

.header-c span{
    transition:.4s;
    font-size:40px;
}

.panel.active span{
    transform:rotate(45deg);
}

/* Responsive */
@media (max-width: 1024px){
    .content{
        height: 420px;
    }

    .header-c{
        padding: 0 30px;
    }

    .text{
        padding: 50px;
        font-size: 1.05em;
    }

    .panel.active{
        height: 500px;
    }

    .titulo{
        width: 80%;
    }
}

@media (max-width: 768px){
    /* Mantener transiciones del acordeón sin que cambie tan “rápido” al hacer scroll */
    .panel{
        height: 90px;
        transition: .8s cubic-bezier(.25,.8,.25,1);
    }

    .titulo{
        width: 92%;
    }

    .panel.active{
        height: 520px; /* Treshold visual en tablet */
    }


    .header-c{
        padding: 0 16px;
        height: 70px;
    }

    .header-c span{
        font-size: 32px;
    }

    .content{
        flex-direction: column;
        height: auto;
    }

    .text{
        width: 100%;
        padding: 24px 16px;
        font-size: 1em;
        transform: none;
    }

    .image{
        width: 100%;
        height: 260px;
    }

    .image img{
        height: 100%;
    }
}

@media (max-width: 480px){
    .titulo{
        width: 100%;
        font-size: 1.1rem;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .header-c{
        height: 64px;
    }

    .header-c h2{
        font-size: 1.05rem;
    }

    .text{
        padding: 20px 14px;
        font-size: 0.95em;
        line-height: 1.6;
    }

    .image{
        height: 220px;
    }
}