/*=========================================================
    PROGRAMA
=========================================================*/

.program{
    position:relative;

    padding:110px 24px;

    overflow:hidden;

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

.program-container{
    width:min(900px, 100%);

    margin-inline:auto;
}

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

    color:var(--plateado-dark);

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

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

    font-family:var(--font-title);
    font-size:clamp(3.5rem, 8vw, 6rem);
    font-weight:500;
    line-height:.95;
    text-align:center;
}

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

    margin:34px auto 65px;

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

/*=========================================================
    LÍNEA DEL TIEMPO
=========================================================*/

.program-timeline{
    position:relative;
}

.program-timeline::before{
    content:"";

    position:absolute;

    top:12px;
    bottom:12px;
    left:189.5px;

    width:1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--plateado) 8%,
            var(--plateado) 92%,
            transparent
        );
}

.program-item{
    position:relative;

    display:grid;
    grid-template-columns:150px 80px 1fr;

    align-items:start;

    min-height:125px;
}

.program-time{
    padding-top:3px;

    color:var(--vino);

    font-size:1rem;
    font-weight:600;
    letter-spacing:2px;
    text-align:right;
}

.program-marker{
    position:relative;

    display:flex;
    justify-content:center;

    min-height:100%;
}

.program-icon{
    position:relative;
    z-index:2;

    width:42px;
    height:42px;

    padding:8px;

    border:1px solid rgba(200,204,211,.72);
    border-radius:50%;

    background:var(--crema);

    object-fit:contain;

    box-shadow:
        0 8px 18px rgba(71,19,31,.10);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.program-item:hover .program-icon{
    transform:
        translateY(-3px)
        scale(1.06);

    border-color:rgba(106,36,52,.38);

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

.program-content{
    padding-bottom:42px;
}

.program-content h3{
    margin-bottom:8px;

    color:var(--vino);

    font-family:var(--font-title);
    font-size:2rem;
    font-weight:500;
    line-height:1;
}

.program-content p{
    max-width:500px;

    color:var(--texto);

    font-size:1.05rem;
    line-height:1.65;
}

/*=========================================================
    ANIMACIONES
=========================================================*/

.program-eyebrow,
.program-title,
.program-divider,
.program-item{
    opacity:0;

    transform:translateY(28px);

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

.program.is-visible .program-eyebrow{
    opacity:1;
    transform:none;
}

.program.is-visible .program-title{
    opacity:1;
    transform:none;

    transition-delay:.12s;
}

.program.is-visible .program-divider{
    opacity:1;
    transform:none;

    transition-delay:.24s;
}

.program.is-visible .program-item{
    opacity:1;
    transform:none;
}

.program.is-visible .program-item:nth-child(1){
    transition-delay:.32s;
}

.program.is-visible .program-item:nth-child(2){
    transition-delay:.42s;
}

.program.is-visible .program-item:nth-child(3){
    transition-delay:.52s;
}

.program.is-visible .program-item:nth-child(4){
    transition-delay:.62s;
}

.program.is-visible .program-item:nth-child(5){
    transition-delay:.72s;
}

.program.is-visible .program-item:nth-child(6){
    transition-delay:.82s;
}

.program.is-visible .program-item:nth-child(7){
    transition-delay:.92s;
}

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

@media (max-width:700px){

    .program{
        padding:85px 20px;
    }

    .program-timeline::before{
        left:20px;
    }

    .program-item{
        grid-template-columns:40px 1fr;

        min-height:auto;

        padding-bottom:42px;
    }

    .program-time{
        grid-column:2;

        margin-bottom:10px;
        padding:0;

        text-align:left;
    }

    .program-marker{
    grid-column:1;
    grid-row:1 / span 2;

    justify-content:flex-start;
}

.program-icon{
    width:40px;
    height:40px;

    padding:7px;
}

    .program-content{
        grid-column:2;

        padding-bottom:0;
    }

    .program-content h3{
        font-size:1.8rem;
    }

}

@media (max-width:420px){

    .program-title{
        font-size:3.5rem;
    }

    .program-content p{
        font-size:1rem;
    }

}