/*==========================================================
PUENTE DEL INCA
TRANSITION
v2
==========================================================*/


/*==========================================================
SECCIÓN
==========================================================*/

.pi-transition{

    position:relative;

    overflow:hidden;

    background:#F7F3EC;

    padding:0;

}

.pi-transition::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(18,53,53,.08);

}

.pi-transition::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:rgba(18,53,53,.08);

}


/*==========================================================
CONTENEDOR
==========================================================*/

.pi-transition-grid{

    position:relative;

    width:min(1500px,92vw);

    min-height:285px;

    margin:auto;

    display:grid;

    grid-template-columns:36% 64%;

    align-items:center;

}


/*==========================================================
DIVISIÓN CENTRAL
==========================================================*/

.pi-transition-grid::after{

    content:"";

    position:absolute;

    left:36%;

    top:28px;

    bottom:28px;

    width:1px;

    background:rgba(18,53,53,.08);

}


/*==========================================================
ILUSTRACIÓN
==========================================================*/

.pi-transition-illustration{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    height:100%;

}

.pi-transition-illustration img{

    width:430px;

    max-width:92%;

    opacity:.30;

}


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

.pi-transition-content{

    position:relative;

    padding-left:90px;

    max-width:600px;

}

.pi-transition-eyebrow{

    display:block;

    margin-bottom:18px;

    font-size:.70rem;

    font-weight:700;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:#8A744D;

}

.pi-transition-text{

    margin:0;

    font-size:1rem;

    line-height:2;

    color:#666666;

}

.pi-transition-link{

    display:inline-flex;

    align-items:center;

    gap:16px;

    margin-top:28px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.74rem;

    font-weight:700;

    color:#173839;

}

.pi-transition-link::after{

    content:"";

    width:42px;

    height:1px;

    background:#C79B53;

    transition:.35s;

}

.pi-transition-link:hover::after{

    width:78px;

}


/*==========================================================
MARCO EDITORIAL
==========================================================*/

.pi-transition-content::before{

    content:"";

    position:absolute;

    left:48px;

    top:40px;

    width:1px;

    height:150px;

    background:rgba(18,53,53,.08);

}


/*==========================================================
DECORACIONES
==========================================================*/

.pi-transition-branch-left{

    position:absolute;

    left:-55px;

    bottom:-70px;

    width:270px;

    height:270px;

    background:url("https://puentedelinca.cl/wp-content/uploads/2026/07/Rama02.webp") center/contain no-repeat;

    opacity:.16;

}

.pi-transition-branch-right{

    position:absolute;

    right:-40px;

    top:-45px;

    width:240px;

    height:240px;

    background:url("https://puentedelinca.cl/wp-content/uploads/2026/07/Rama04.webp") center/contain no-repeat;

    opacity:.14;

}


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

@media(max-width:1100px){

    .pi-transition{

        padding:70px 0;

    }

    .pi-transition-grid{

        min-height:auto;

        grid-template-columns:1fr;

        gap:50px;

    }

    .pi-transition-grid::after{

        display:none;

    }

    .pi-transition-content{

        padding-left:0;

        margin:auto;

        text-align:center;

    }

    .pi-transition-content::before{

        display:none;

    }

}

@media(max-width:768px){

    .pi-transition-illustration img{

        width:260px;

    }

    .pi-transition-branch-left,

    .pi-transition-branch-right{

        display:none;

    }

}