/*======================================
HISTORIA
======================================*/
.historia .container{
    max-width: 1380px !important;
    width: 92%;
    margin: 0 auto;
}
.historia{
    padding:70px 0 0;
    background:#fff;
}

.historia-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/*======================================
HEADER
======================================*/

.historia-head{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
}

.historia-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff3f2;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#e53935;
    font-size:20px;
    flex-shrink:0;
}

.historia-tag{
    color:#e53935;
    font-size:14px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.historia-line{
    flex:1;
    height:2px;
    background:#e53935;
}

/*======================================
TEXTOS
======================================*/

.historia h2{
    font-size:54px;
    line-height:1.02;
    font-weight:900;
    text-transform:uppercase;
    color:#222;
    margin-bottom:25px;
}

.historia h2 span{
    color:#e53935;
}

.historia p{
    font-size:19px;
    line-height:1.85;
    color:#555;
    margin-bottom:22px;
}

/*======================================
SLIDER
======================================*/

.historia-slider{
    position:relative;
    overflow:hidden;
    border-radius:28px;
}

.historia-slide{
    display:none;
}

.historia-slide.active{
    display:block;
}

.historia-slide img{
    width:100%;
    height:480px;
    object-fit:cover;
    display:block;
}

.historia-prev,
.historia-next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:54px;
    height:54px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#e53935;
    font-size:22px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:.3s;
    z-index:5;
}

.historia-prev{
    left:18px;
}

.historia-next{
    right:18px;
}

.historia-prev:hover,
.historia-next:hover{

    transform:translateY(-50%) scale(1.05);
}

/*======================================
DOTS
======================================*/

.historia-dots{

    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}

.historia-dots span{

    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    opacity:.9;
}

.historia-dots span.active{
    background:#e53935;
}

/*======================================
CTA
======================================*/

.historia-cta{

    margin-top:45px;
    background:#f8f8f8;
    border-radius:28px;
    padding:50px;
    text-align:center;
}

.historia-cta h3{

    font-size:30px;
    line-height:1.2;
    font-weight:900;
    color:#222;
    margin-bottom:14px;
}

.historia-cta p{

    font-size:20px;
    color:#666;
    margin-bottom:30px;
}

/*======================================
BOTONES
======================================*/

.historia-buttons{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.historia-buttons a{

    min-width:270px;
    padding:16px 34px;
    border-radius:12px;
    text-decoration:none;
    text-align:center;
    font-size:16px;
    font-weight:800;
    transition:.35s;
}

.btn-primary{

    background:#e53935;
    color:#fff;
    border:2px solid #e53935;
}

.btn-primary:hover{

    background:#cb2f2c;
    border-color:#cb2f2c;
    transform:translateY(-2px);
}

.btn-outline{

    background:#fff;
    color:#e53935;
    border:2px solid #e53935;
}

.btn-outline:hover{

    background:#e53935;
    color:#fff;
    transform:translateY(-2px);
}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

    .historia-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .historia h2{
        font-size:44px;
    }

    .historia-slide img{
        height:400px;
    }

    .historia-cta{
        padding:40px 30px;
    }

    .historia-cta h3{
        font-size:24px;
    }

}

/*======================================
MOBILE
======================================*/

@media(max-width:768px){

    .historia{
        padding:55px 0 0;
    }

    .historia-grid{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .historia-head{
        gap:12px;
        margin-bottom:18px;
    }

    .historia-icon{
        width:42px;
        height:42px;
        font-size:17px;
    }

    .historia-tag{
        font-size:12px;
    }

    .historia h2{
        font-size:30px;
    }

    .historia p{
        font-size:15px;
        line-height:1.7;
    }

    .historia-slide img{
        height:300px;
    }

    .historia-prev,
    .historia-next{
        width:44px;
        height:44px;
        font-size:18px;
    }

    .historia-cta{

        margin-top:35px;
        padding:35px 20px;
        border-radius:20px;
    }

    .historia-cta h3{

        font-size:24px;
    }

    .historia-cta p{

        font-size:15px;
        margin-bottom:24px;
    }

    .historia-buttons{

        flex-direction:column;
        width:100%;
    }

    .historia-buttons a{

        width:100%;
        min-width:100%;
    }

}