/*==================================================
PUENTE DEL INCA
HERO v5 · Editorial
==================================================*/

.pi-hero{

    position:relative;

    min-height:100dvh;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            90deg,
            rgba(19,47,48,.92) 0%,
            rgba(19,47,48,.76) 26%,
            rgba(19,47,48,.42) 48%,
            rgba(19,47,48,.08) 72%,
            rgba(19,47,48,0) 100%
        ),
        url("https://puentedelinca.cl/wp-content/uploads/2026/06/Hero-Puente-2026-Final.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}


/*======================================
LUZ
======================================*/

.pi-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 72% 22%,
    rgba(255,255,255,.14),
    transparent 35%),

    radial-gradient(circle at 18% 25%,
    rgba(255,255,255,.06),
    transparent 40%);

    mix-blend-mode:soft-light;

    pointer-events:none;

}


/*======================================
VIÑETA
======================================*/

.pi-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.08),
        transparent 20%,
        transparent 82%,
        rgba(0,0,0,.26)
    );

    pointer-events:none;

}


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

.pi-container{

    position:relative;

    z-index:5;

    width:min(1500px,90vw);

    margin:auto;

}


.pi-editorial{

    width:640px;

    padding-top:2vh;

    margin-left:-20px;

}


/*======================================
EYEBROW
======================================*/

.pi-eyebrow{

    display:block;

    margin-bottom:26px;

    font-size:.78rem;

    letter-spacing:.42em;

    text-transform:uppercase;

    color:#C79B53;

}


/*======================================
TÍTULO
======================================*/

.pi-editorial-title{

    margin:0;

    max-width:10ch;

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

    font-weight:300;

    font-size:clamp(4.3rem,5.8vw,6.5rem);

    line-height:.93;

    letter-spacing:-.03em;

    color:#F7F3EC;

}


/*======================================
SUBTÍTULO
======================================*/

.pi-subtitle{

    margin-top:34px;

    max-width:520px;

    font-size:1.08rem;

    line-height:1.85;

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

}


/*======================================
LOGO
======================================*/

.pi-hero__logo{

    width:250px;

    margin-top:42px;

    opacity:.55;

    animation:logoFloat 9s ease-in-out infinite;

}


/*======================================
BOTONES
======================================*/

.pi-hero__buttons{

    display:flex;

    gap:18px;

    margin-top:34px;

    flex-wrap:wrap;

}


/*======================================
ANIMACIÓN
======================================*/

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media (max-width:1200px){

    .pi-editorial{

        width:560px;

        margin-left:0;

    }

}


@media (max-width:768px){

    .pi-hero{

        min-height:auto;

        padding:120px 0 80px;

        background-position:72% center;

    }

    .pi-editorial{

        width:100%;

    }

    .pi-editorial-title{

        font-size:clamp(3.2rem,12vw,4.8rem);

        max-width:100%;

    }

    .pi-hero__buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .pi-hero__logo{

        width:150px;

    }

}