/*==========================================================
PUENTE DEL INCA
SCENE 02
EDITORIAL
v3
==========================================================*/


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

.pi-scene-02{

    position:relative;

    overflow:hidden;

    background:#F7F3EC;

    padding:160px 0;

}


/*==========================================================
LAYOUT
==========================================================*/

.pi-scene02-editorial{

    position:relative;

    width:min(1600px,92vw);

    margin:auto;

    display:grid;

    grid-template-columns:480px 1fr;

    gap:7vw;

    align-items:center;

}


/*==========================================================
COPY
==========================================================*/

.pi-scene02-copy{

    position:relative;

    z-index:20;

}


.pi-scene02-title{

    margin:18px 0 42px;

    font-family:var(--font-heading);

    font-size:clamp(4rem,5vw,5.7rem);

    line-height:.90;

    letter-spacing:-.04em;

    color:#173839;

}


.pi-scene02-text{

    max-width:420px;

    font-size:1.08rem;

    line-height:2;

    color:#666;

    margin-bottom:55px;

}


/*==========================================================
LINK
==========================================================*/

.pi-scene02-link{

    display:inline-flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.82rem;

    font-weight:600;

    color:#173839;

}


.pi-scene02-link::after{

    content:"";

    width:70px;

    height:1px;

    background:#C79B53;

    transition:.35s;

}


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

    width:120px;

}


/*==========================================================
FOTOGRAFÍA
==========================================================*/

.pi-scene02-photo{

    position:relative;

    margin:0;

    transform:translateX(5%);

    z-index:10;

}


.pi-scene02-photo img{

    display:block;

    width:100%;

    max-width:980px;

    height:auto;

    box-shadow:0 45px 90px rgba(0,0,0,.12);

}


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

.pi-scene02-fish{

    position:absolute;

    width:240px;

    height:240px;

    left:-40px;

    top:70px;

    background-image:url("https://puentedelinca.cl/wp-content/uploads/2026/07/Pez01.webp");

    background-size:contain;

    background-repeat:no-repeat;

    opacity:.12;

    z-index:2;

}


.pi-scene02-branch-left{

    position:absolute;

    width:360px;

    height:360px;

    left:-110px;

    bottom:-120px;

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

    background-size:contain;

    background-repeat:no-repeat;

    opacity:.10;

    z-index:1;

}


.pi-scene02-branch-right{

    position:absolute;

    width:300px;

    height:300px;

    right:-90px;

    top:180px;

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

    background-size:contain;

    background-repeat:no-repeat;

    opacity:.08;

    z-index:1;

}


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

@media (max-width:1100px){

    .pi-scene02-editorial{

        grid-template-columns:1fr;

        gap:70px;

    }

    .pi-scene02-photo{

        transform:none;

    }

}


@media (max-width:768px){

    .pi-scene-02{

        padding:90px 0;

    }

    .pi-scene02-title{

        font-size:3.2rem;

    }

    .pi-scene02-fish,

    .pi-scene02-branch-left,

    .pi-scene02-branch-right{

        display:none;

    }

}