.hero{

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 84px;

    background-image:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("../assets/images/hero/hernan3.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}

.hero-content{

    max-width: 600px;
    margin-left: 160px;
    margin-top: 80px;
    z-index: 2;


}

.hero-subtitle{

    font-size:18px;
    letter-spacing:4px;
    font-weight:600;
    color:var(--gold);
    margin-bottom:25px;

 }

.hero-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:3px;

    font-size:.85rem;

    font-weight:600;

}
.hero h1{

    font-family:'Cormorant Garamond', serif;

    font-size:5rem;

    line-height:1.1;

    margin-bottom:20px;

}

.hero p{

    font-size:1.2rem;

    line-height:1.8;

    color:#ddd;

    margin-bottom:40px;

}

.hero-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 40px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition: all .35s ease;

    min-width: 190px;

    height: 58px;
}

.hero-btn i{

    margin-left: 10px;

    transition: transform .35s ease;

}
.hero-btn-primary{

    background: var(--gold);

    color: #111;

    box-shadow: 0 10px 30px rgba(239,184,16,.20);

}

.hero-btn-primary:hover{

    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(239,184,16,.35);

}

.hero-btn-primary:hover i{

    transform: translateX(6px);

}

.hero-btn-secondary{

    border: 1px solid var(--gold);

    color: var(--white);

    background: transparent;

}

.hero-btn-secondary:hover{

    background: rgba(239,184,16,.10);

    transform: translateY(-4px);

}
.hero-btn:hover{

    transform:translateY(-5px);

    background:#D8B44A;
    

}

.hero-buttons{

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 40px;

    flex-wrap: wrap;

}

/* ======================================================
   HERO - BURBUJAS SUTILES
====================================================== */

.hero-bubble{

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(239,184,16,.32);

    border: 1px solid rgba(255,210,70,.55);

    box-shadow:
            0 0 9px rgba(239,184,16,.40),
    0 0 14px rgba(239,184,16,.18);

    pointer-events: none;

    z-index: 1;

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

}


/* ======================================================
   POSICIONES
====================================================== */

.bubble-1{
    left: 7%;
    bottom: 5%;
    width: 5px;
    height: 5px;
    animation-delay: -1s;
}

.bubble-2{
    left: 13%;
    bottom: 18%;
    width: 4px;
    height: 4px;
    animation-delay: -4s;
}

.bubble-3{
    left: 19%;
    bottom: 8%;
    width: 7px;
    height: 7px;
    animation-delay: -6s;
}

.bubble-4{
    left: 25%;
    bottom: 28%;
    width: 5px;
    height: 5px;
    animation-delay: -2s;
}

.bubble-5{
    left: 32%;
    bottom: 12%;
    width: 4px;
    height: 4px;
    animation-delay: -7s;
}

.bubble-6{
    left: 38%;
    bottom: 22%;
    width: 7px;
    height: 7px;
    animation-delay: -3s;
}

.bubble-7{
    left: 44%;
    bottom: 6%;
    width: 5px;
    height: 5px;
    animation-delay: -5s;
}

.bubble-8{
    left: 50%;
    bottom: 18%;
    width: 4px;
    height: 4px;
    animation-delay: -8s;
}

.bubble-9{
    left: 56%;
    bottom: 10%;
    width: 6px;
    height: 6px;
    animation-delay: -2.5s;
}

.bubble-10{
    left: 62%;
    bottom: 25%;
    width: 5px;
    height: 5px;
    animation-delay: -6s;
}

.bubble-11{
    left: 68%;
    bottom: 7%;
    width: 4px;
    height: 4px;
    animation-delay: -4s;
}

.bubble-12{
    left: 73%;
    bottom: 20%;
    width: 7px;
    height: 7px;
    animation-delay: -7s;
}

.bubble-13{
    left: 79%;
    bottom: 10%;
    width: 5px;
    height: 5px;
    animation-delay: -1.5s;
}

.bubble-14{
    left: 84%;
    bottom: 28%;
    width: 4px;
    height: 4px;
    animation-delay: -5s;
}

.bubble-15{
    left: 90%;
    bottom: 6%;
    width: 6px;
    height: 6px;
    animation-delay: -3.5s;
}

.bubble-16{
    left: 95%;
    bottom: 18%;
    width: 5px;
    height: 5px;
    animation-delay: -8s;
}


/* ======================================================
   MOVIMIENTO
====================================================== */

@keyframes bubbleRise{

    0%{

        transform:
            translateY(20px)
            translateX(0)
            scale(.7);

        opacity: 0;

    }

    20%{

        opacity: .75;

    }

    50%{

        transform:
            translateY(-70px)
            translateX(8px)
            scale(1);

        opacity: .75;

    }

    75%{

        opacity: .65;

    }

    100%{

        transform:
            translateY(-140px)
            translateX(-6px)
            scale(.75);

        opacity: 0;

    }

}