/*==========================================================
PUENTE DEL INCA
SCENE 03
EL MAR
==========================================================*/


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

.pi-scene-03{

    position:relative;

    overflow:hidden;

    background:#173839;

    padding:0;

}


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

.pi-scene03-editorial{

    position:relative;

    width:100%;

    min-height:105vh;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.pi-scene03-image{

    position:absolute;

    inset:0;

    margin:0;

    z-index:1;

}

.pi-scene03-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}


/*==========================================================
OVERLAY
==========================================================*/

.pi-scene03-editorial::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(23,56,57,.92) 0%,
        rgba(23,56,57,.68) 32%,
        rgba(23,56,57,.20) 58%,
        rgba(23,56,57,0) 100%
    );

    z-index:2;

}


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

.pi-scene03-copy{

    position:relative;

    z-index:5;

    width:min(560px,90vw);

    margin-right:auto;

    margin-left:8vw;

}

.pi-scene03-title{

    margin:1rem 0 2rem;

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

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

    line-height:.92;

    letter-spacing:-.04em;

    color:#F8F5EF;

}

.pi-scene03-text{

    max-width:460px;

    font-size:1.08rem;

    line-height:1.9;

    color:rgba(255,255,255,.86);

}


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

.pi-scene03-link{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:48px;

    color:#F8F5EF;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.82rem;

    font-weight:600;

}

.pi-scene03-link::after{

    content:"";

    width:70px;

    height:1px;

    background:#C79B53;

    transition:.35s;

}

.pi-scene03-link:hover{

    color:#F8F5EF;

}

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

    width:120px;

}


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

.pi-scene03-camaron{

    width:240px;

    height:240px;

    left:40px;

    bottom:80px;

}

.pi-scene03-camaron.decor{

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

}

.pi-scene03-naranja{

    width:220px;

    height:220px;

    right:120px;

    top:100px;

}

.pi-scene03-naranja.decor{

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

}

.pi-scene03-pulpo{

    width:320px;

    height:320px;

    right:-40px;

    bottom:-40px;

}

.pi-scene03-pulpo.decor{

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

}


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

@media(max-width:900px){

    .pi-scene03-editorial{

        min-height:auto;

    }

    .pi-scene03-copy{

        margin:120px auto;

        width:90%;

    }

    .pi-scene03-title{

        font-size:clamp(3rem,11vw,4.5rem);

    }

}