/*==============================================================
HERO
FelipeOliveros.cl
==============================================================*/

.hero{

    position:relative;

    min-height:135vh;

    padding-top:120px;
    padding-bottom:120px;

    background:#090909;
    color:#fff;

}

.hero .container{

    position:relative;

    z-index:5;

}

.hero-wrapper{

    display:grid;

    grid-template-columns:56% 44%;

    gap:70px;

    align-items:center;

    margin-top:40px;
    margin-bottom:180px;

}

.hero-content{

    max-width:700px;

}

.hero-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:540px;

}
/*==============================================================
TEXTOS
==============================================================*/

.hero-label{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

    color:var(--color-gold);

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.82rem;

    font-weight:600;

}

.hero-label::after{

    content:"";

    width:70px;

    height:1px;

    background:var(--color-gold);

}

.hero h1{

    font-size:5.4rem;

    line-height:.90;

    letter-spacing:-.05em;

    font-weight:700;

    margin-bottom:34px;

}

.hero h1 span{

    color:var(--color-gold);

}

.hero p{

    max-width:500px;

    font-size:1.18rem;

    line-height:1.75;

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

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:36px;

    margin-top:38px;

}

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:20px 42px;

    border-radius:8px;

    background:var(--color-gold);

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.btn-gold{

    position:relative;

    overflow:hidden;

}
.btn-gold::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:1s;

}

.btn-gold:hover::before{

    left:140%;

}

.hero-link{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    text-decoration:none;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.82rem;

}
/*==============================================================
BACKGROUND
==============================================================*/

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}



/*==============================================================
GRID
==============================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size:80px 80px;

    opacity:.25;

}



/*==============================================================
GLOW
==============================================================*/

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;

}

.hero-glow-1{

    width:520px;
    height:520px;

    background:#D5A64D;

    top:-180px;
    left:-150px;

}

.hero-glow-2{

    width:600px;
    height:600px;

    background:#7D5C1F;

    bottom:-250px;
    right:-220px;

}



/*==============================================================
LINES
==============================================================*/

.hero-lines{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        135deg,
        transparent 48%,
        rgba(213,166,77,.08) 49%,
        rgba(213,166,77,.08) 50%,
        transparent 51%
    );

    background-size:700px 700px;

    opacity:.45;

}
/*==============================================================
MONOGRAM
==============================================================*/
.hero-monogram{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    font-size:28rem;

    font-weight:800;

    line-height:1;

    letter-spacing:-0.08em;

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

    user-select:none;

    pointer-events:none;

    animation:floatHero 8s ease-in-out infinite;

}
/*==============================================================
HERO FOOTER
==============================================================*/

.hero-footer{

    display:grid;

    grid-template-columns:260px 1fr 220px;

    align-items:flex-start;

    gap:55px;

    padding-top:0;
}

.hero-intro p{

    font-size:1rem;

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

    line-height:1.9;

    max-width:240px;

}

.hero-stats{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:45px;

}

.stat{

    position:relative;

    display:flex;

    flex-direction:column;

    padding-left:28px;

}
.stat::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:1px;

    height:68px;

    background:linear-gradient(

        to bottom,

        rgba(198,155,88,.55),

        rgba(198,155,88,.08)

    );

}

.stat strong{

    font-size:3rem;
    
       line-height:1;

    color:white;

}

.stat span{

    margin-top:10px;

    font-size:.95rem;

    line-height:1.6;

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

}

.hero-services-icons{

    display:flex;

    gap:22px;

}

.hero-services-icons{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:28px;

}
.hero-services-icons img{

    width:28px;
    height:28px;

    opacity:.72;

    transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease;

    filter:brightness(0) saturate(100%) invert(73%) sepia(44%) saturate(620%) hue-rotate(357deg);

}
.hero-services-icons a:hover img{

    opacity:1;

    transform:translateY(-4px) scale(1.12);

    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(44%)
        saturate(620%)
        hue-rotate(357deg)
        drop-shadow(0 0 8px rgba(198,155,88,.45))
        drop-shadow(0 0 18px rgba(198,155,88,.20));

}
/*==============================================================
SCROLL
==============================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:55px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}

.hero-scroll span{

    width:1px;

    height:70px;

    background:rgba(255,255,255,.3);

}

.hero-scroll p{

    font-size:.72rem;

    letter-spacing:.22em;

    text-transform:uppercase;

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

}
/*==============================================================
HERO ANIMATIONS
==============================================================*/

/* Estado inicial */

.hero-label,
.hero h1,
.hero p,
.hero-buttons,
.hero-footer,
.hero-visual{

    opacity:0;

    transform:translateY(40px);

}

/* Activo */

.hero.loaded .hero-label{

    animation:heroFade .8s ease forwards;

}

.hero.loaded h1{

    animation:heroFade .8s .2s ease forwards;

}

.hero.loaded p{

    animation:heroFade .8s .4s ease forwards;

}

.hero.loaded .hero-buttons{

    animation:heroFade .8s .6s ease forwards;

}

.hero.loaded .hero-visual{

    animation:heroFade .8s .8s ease forwards;

}

.hero.loaded .hero-footer{

    animation:heroFade .8s 1s ease forwards;

}



/*==============================================================
KEYFRAMES
==============================================================*/

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==============================================================
BACKGROUND MOTION
==============================================================*/

.hero-grid{

    animation:gridMove 40s linear infinite;

}

.hero-lines{

    animation:linesMove 25s ease-in-out infinite alternate;

}

.hero-glow{

    animation:glowPulse 10s ease-in-out infinite;

}
@keyframes gridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:80px 80px;

    }

}

@keyframes linesMove{

    from{

        transform:translateX(-20px);

    }

    to{

        transform:translateX(20px);

    }

}

@keyframes glowPulse{

    0%{

        transform:scale(1);

        opacity:.22;

    }

    50%{

        transform:scale(1.12);

        opacity:.35;

    }

    100%{

        transform:scale(1);

        opacity:.22;

    }

}
/*==============================================================
SCROLL INDICATOR
==============================================================*/

.hero-indicator{

    position:absolute;

    left:50%;

    bottom:350px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    z-index:50;

}

.hero-indicator span{

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

    font-size:.72rem;

    letter-spacing:.35em;

    text-transform:uppercase;

}

.indicator-line{

    width:1px;

    height:60px;

    background:linear-gradient(
        to bottom,
        rgba(200,169,106,.95),
        rgba(200,169,106,.15)
    );

    animation:indicatorMove 2s ease-in-out infinite;

}

@keyframes indicatorMove{

    0%,100%{

        transform:scaleY(.6);

        opacity:.4;

    }

    50%{

        transform:scaleY(1);

        opacity:1;

    }

}
/*==============================================================
SCROLL INDICATOR HIDE
==============================================================*/

.hero-indicator{

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.hero-indicator.hidden{

    opacity:0;

    transform:translateX(-50%) translateY(20px);

    pointer-events:none;

}

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

@media (max-width:768px){

    .hero{

        min-height:auto;
        padding:170px 0 80px;

    }

    .hero-wrapper{

        display:block;
        margin:0;

    }

    .hero-content{

    width:100%;
    max-width:none;

    margin:0 auto;

    text-align:center;

    }

    .hero-visual{

        display:none;

    }

    .hero-label{

        justify-content:center;

    }

    .hero-label::after{

        display:none;

    }

.hero h1{

    width:100%;

    max-width:none;

    margin:0 auto 34px;

    font-size:clamp(5.3rem,16vw,6.8rem);

    line-height:.88;

    letter-spacing:-.055em;

}

    .hero p{

        max-width:100%;

        font-size:1.28rem;

        line-height:1.8;

        margin:0 auto;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

        gap:22px;

    }

}

/*==============================================================
HERO FOOTER MOBILE
==============================================================*/

@media (max-width:768px){

    .hero-footer{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:48px;

        padding-top:70px;

        text-align:center;

    }

    .hero-intro{

        max-width:520px;

    }

    .hero-intro p{

        max-width:none;

        margin:0 auto;

        font-size:1.15rem;

        line-height:1.8;

    }

    .hero-stats{

        width:100%;

        display:flex;

        justify-content:space-around;

        gap:20px;

    }

    .stat{

        padding:0;

        align-items:center;

        text-align:center;

    }

    .stat::before{

        display:none;

    }

    .stat strong{

        font-size:3.5rem;

    }

    .stat span{

        margin-top:12px;

        font-size:.92rem;

        line-height:1.5;

    }

    .hero-services-icons{

        justify-content:center;

        gap:30px;

        width:100%;

    }

}

/*==============================================================
HERO SMALL MOBILE
==============================================================*/

@media (max-width:480px){

    .hero{

        padding:155px 0 70px;

    }

    .hero h1{

        font-size:4.4rem;

        line-height:.9;

        letter-spacing:-.03em;

    }

    .hero p{

        font-size:1.12rem;

        line-height:1.75;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:360px;

    }

    .hero-link{

        justify-content:center;

    }

    .hero-stats{

        flex-direction:column;

        gap:34px;

    }

    .stat{

        width:100%;

    }

    .stat strong{

        display:block;

        margin-bottom:10px;

        font-size:3.8rem;

    }

    .hero-services-icons{

        gap:22px;

        flex-wrap:wrap;

    }

    .hero-services-icons img{

        width:28px;

        height:28px;

    }

}

/*==============================================================
HERO MOBILE CLEAN
==============================================================*/

@media (max-width:768px){

    .hero-label{

        display:none;

    }

    .hero{

        padding-top:140px;

    }

}