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

.story{

    position:relative;

    z-index:5;

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:180px 24px 110px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            var(--crema) 0%,
            #fffdf9 50%,
            var(--crema) 100%
        );

    transform:translateY(-70px);

    margin-bottom:-70px;

    border-radius:60px 60px 0 0;

    box-shadow:
        0 -12px 40px rgba(70,55,48,.045);

}

.story-container{
    position:relative;
    z-index:var(--z-content);

    width:min(var(--container), 100%);

    margin-inline:auto;

    display:grid;
    grid-template-columns:minmax(280px, .9fr) minmax(320px, 1.1fr);

    align-items:center;

    gap:clamp(50px, 8vw, 110px);
}

/*=========================================================
    IMAGEN
=========================================================*/

.story-image-wrapper{
    position:relative;

    width:min(100%, 480px);

    margin-inline:auto;
}

.story-image-wrapper::before{
    content:"";

    position:absolute;

    inset:-18px 18px 18px -18px;

    border:1px solid rgba(142,148,156,.48);

    border-radius:
        48% 52% 46% 54% /
        58% 44% 56% 42%;

    pointer-events:none;
}

.story-image{
    width:100%;
    aspect-ratio:4 / 5;

    object-fit:cover;
    object-position:center;

    border-radius:
        48% 52% 46% 54% /
        58% 44% 56% 42%;

    box-shadow:
        0 28px 65px rgba(71,19,31,.16);
}

/*=========================================================
    CONTENIDO
=========================================================*/

.story-content{
    max-width:620px;
}

.story-eyebrow{
    margin-bottom:12px;

    color:var(--plateado-dark);

    font-size:.78rem;
    letter-spacing:4px;
    text-transform:uppercase;
}

.story-title{
    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(3.2rem, 7vw, 5.8rem);
    font-weight:500;
    line-height:.95;
}

.story-divider{
    width:120px;
    height:1px;

    margin:32px 0;

    background:
        linear-gradient(
            90deg,
            var(--vino),
            var(--plateado),
            transparent
        );
}

.story-text{
    margin-bottom:18px;

    color:var(--texto);

    font-size:clamp(1.05rem, 2vw, 1.25rem);
    line-height:1.8;
}

.story-signature{
    margin-top:34px;

    color:var(--vino);

    font-family:var(--font-title);
    font-size:2.1rem;
}

/*=========================================================
    DECORACIÓN
=========================================================*/

.story-decoration{
    position:absolute;

    width:320px;
    height:320px;

    border:1px solid rgba(106,36,52,.08);

    border-radius:50%;
}

.story-decoration-left{
    left:-180px;
    top:90px;
}

.story-decoration-right{
    right:-190px;
    bottom:70px;
}

/*=========================================================
    ANIMACIÓN DE ENTRADA
=========================================================*/

.story-image-wrapper,
.story-content{
    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.story.is-visible .story-image-wrapper{
    opacity:1;

    transform:translateY(0);

    transition-delay:.1s;
}

.story.is-visible .story-content{
    opacity:1;

    transform:translateY(0);

    transition-delay:.3s;
}

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

@media (max-width:800px){

    .story{
        padding:85px 24px;
    }

    .story-container{
        grid-template-columns:1fr;

        gap:60px;
    }

    .story-content{
        text-align:center;

        margin-inline:auto;
    }

    .story-divider{
        margin-inline:auto;
    }

    .story-image-wrapper{
        width:min(88%, 430px);
    }

}

@media (max-width:480px){

    .story{
        padding:70px 20px;
    }

    .story-image-wrapper::before{
        inset:-12px 12px 12px -12px;
    }

    .story-title{
        font-size:3.4rem;
    }

}