/*====================================
        NUESTRA HISTORIA
====================================*/

.history-section{

    background:#fff;
    padding:110px 0;
    position:relative;

}

/* Flores decorativas — se colocan con imágenes reales */
.contacto__deco-left {
    position: absolute;
    left: -20px;
    bottom: -10px;
    width: 220px;
    pointer-events: none;
    z-index: 1;
    opacity: .9;
}

.contacto__deco-right {
    position: absolute;
    right: -20px;
    bottom: -10px;
    width: 220px;
    pointer-events: none;
    z-index: 1;
    opacity: .9;
    transform: scaleX(-1);
}

.history-title{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    margin-bottom:90px;

}

.history-title span{

    display:block;
    color:#b62b63;
    font-weight:600;
    margin-bottom:10px;
    text-align:center;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.9rem;

}

.history-title h2{

    font-size:3rem;
    color:#24304d;
    margin:0;
    text-align:center;

}

.flower{

    width:90px;
    opacity:.95;

}

.flower-right{

    transform:scaleX(-1);

}

/*========================*/

.history-line{

    position:relative;
    max-width:900px;
    margin:auto;

}

.history-line::before{

    content:"";
    position:absolute;

    left:32px;
    top:0;
    bottom:0;

    width:3px;

    background:linear-gradient(
        to bottom,
        #d7b58c,
        #b62b63,
        #24304d
    );

}

/*========================*/

.history-item{

    position:relative;
    display:flex;
    align-items:flex-start;
    margin-bottom:70px;

}

.history-item:last-child{

    margin-bottom:0;

}

/*========================*/

.history-circle{

    width:22px;
    height:22px;

    border-radius:50%;

    background:#fff;

    border:5px solid #b62b63;

    position:relative;

    z-index:2;

    margin-right:40px;

    margin-left:22px;

    transition:.3s;

}

.history-circle.active{

    background:#b62b63;

    box-shadow:0 0 0 8px rgba(182,43,99,.15);

}

/*========================*/

.history-card{

    flex:1;

    background:#F8F4EE;

    padding:35px;

    border-radius:18px;

    transition:.35s;

    border:1px solid rgba(0,0,0,.05);

}

.history-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.year{

    display:inline-block;

    color:#b62b63;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:12px;

    letter-spacing:1px;

}

.history-card h3{

    margin:0 0 15px;

    color:#24304d;

    font-size:1.5rem;

}

.history-card p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*====================================
        RESPONSIVE
====================================*/

@media(max-width:768px){

    .history-title{

        gap:10px;

    }

    .history-title h2{

        font-size:2.2rem;

    }

    .flower{

        width:55px;

    }

    .history-line::before{

        left:22px;

    }

    .history-circle{

        margin-left:12px;
        margin-right:25px;

    }

    .history-card{

        padding:25px;

    }

}

/* Responsive flores */
@media (max-width: 860px) {
    .contacto__deco-left,
    .contacto__deco-right {
        width: 100px;
        opacity: 0.5;
    }
}

@media (max-width: 640px) {
    .contacto__deco-left,
    .contacto__deco-right {
        width: 70px;
        opacity: 0.35;
    }
}

@media (max-width: 400px) {
    .contacto__deco-left,
    .contacto__deco-right {
        display: none;
    }
}

/*==============================
    INTRODUCCIÓN HISTORIA
==============================*/

.history-intro{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

    color:#666;

    font-size:1.08rem;

    line-height:2;

    position:relative;

}

/* Línea decorativa */

.history-intro::after{

    content:"";

    display:block;

    width:90px;

    height:3px;

    background:#B62B63;

    margin:30px auto 0;

    border-radius:10px;

}