/* ==========================================================
   GARUDA HOME
   Alpha 0.2

   hero.css
========================================================== */

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

header{

    position:relative;

    min-height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:120px 25px 70px;

}

/*=========================================================
 Fondo Premium
=========================================================*/

header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 50% 15%,
        rgba(212,175,55,.10),
        transparent 42%),

        radial-gradient(circle at 20% 80%,
        rgba(255,255,255,.035),
        transparent 35%),

        radial-gradient(circle at 80% 60%,
        rgba(212,175,55,.05),
        transparent 28%);

    pointer-events:none;

}

header::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to bottom,
        rgba(11,18,32,.10),
        rgba(11,18,32,.65));

    pointer-events:none;

}

/*=========================================================
 Logo Principal
=========================================================*/

.hero-logo{

    position:relative;

    z-index:2;

    width:auto;

    height:45vh;

    max-height:420px;

    margin-bottom:35px;

    filter:

        drop-shadow(0 10px 30px rgba(0,0,0,.45));

    transition:.40s;

}

.hero-logo:hover{

    transform:scale(1.03);

}

/*=========================================================
 Título
=========================================================*/

.hero-title{

    position:relative;

    z-index:2;

    font-size:4rem;

    line-height:1.05;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:300;

    margin-bottom:20px;

}

.hero-title span{

    color:var(--color-gold);

    font-weight:700;

}

/*=========================================================
 Subtítulo
=========================================================*/

.hero-subtitle{

    position:relative;

    z-index:2;

    max-width:760px;

    margin-bottom:45px;

    color:var(--color-muted);

    font-size:1.25rem;

    line-height:1.8;

    font-weight:300;

}

/*=========================================================
 Indicador inferior
=========================================================*/

.hero-status{

    position:relative;

    z-index:2;

    margin-top:35px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#9ca3af;

    font-size:.92rem;

    letter-spacing:1px;

    text-transform:uppercase;

   text-align:center;

}

.hero-status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:

        0 0 10px #22c55e,

        0 0 20px #22c55e;

}

/*=========================================================
 Flecha
=========================================================*/

.scroll-indicator{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:3;

    animation:floatArrow 2.5s infinite;

    opacity:.75;

    font-size:1.6rem;

    color:var(--color-gold);

}

@keyframes floatArrow{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

/*=========================================================
 Responsive
=========================================================*/

@media(max-width:900px){

.hero-logo{

    width:170px;

}

.hero-title{

    font-size:3rem;

}

.hero-subtitle{

    font-size:1.1rem;



}}

@media(max-width:650px){

header{

    min-height:80vh;

}

.hero-logo{
    width:auto;
    height:45vh;
    max-height:420px;
    min-height:220px;
    object-fit:contain;
}

.hero-title{

    font-size:2.3rem;

}

.hero-subtitle{
    max-width:760px;
    margin:auto;
    line-height:1.8;
    font-size:1.25rem;


}

.hero-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:30px;
    min-height:100vh;
}

.hero-content{
    z-index:2;
}

.hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2;
}


.cta-btn{
    background:#d4af37;
    color:#111;
    font-weight:700;
}
}