@charset "utf-8";

/*==================================================
HERO
INDIGO INMOBILIARIA
==================================================*/


.hero
{

    position:relative;

    display:flex;

    align-items:center;

    min-height:calc(100vh - 140px);

    padding:170px 0 120px;

    overflow:hidden;

    isolation:isolate;

}



/*==================================================
IMAGE
==================================================*/


.hero-image
{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:-3;

    animation:heroZoom 20s ease infinite alternate;

}



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


.hero-overlay
{

    position:absolute;

    inset:0;

    z-index:-2;


    background:


    linear-gradient(
        90deg,
        rgba(10,27,22,.88) 0%,
        rgba(10,27,22,.70) 35%,
        rgba(10,27,22,.40) 75%,
        rgba(10,27,22,.55) 100%
    );


}



/*==================================================
LIGHT EFFECT
==================================================*/


.hero::after
{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:600px;

    height:600px;

    background:

    radial-gradient(
        circle,
        rgba(200,155,60,.25),
        transparent 70%
    );

    z-index:-1;

    filter:blur(30px);

}



/*==================================================
CONTENT
==================================================*/


.hero-content
{

    max-width:760px;

    position:relative;

}



/*==================================================
BADGE
==================================================*/


.hero-badge
{

    display:inline-flex;

    align-items:center;

    gap:.6rem;


    padding:.75rem 1.4rem;


    margin-bottom:2rem;


    border-radius:50px;


    background:

    rgba(255,255,255,.12);


    border:1px solid rgba(255,255,255,.25);


    color:#e7d7af;


    backdrop-filter:blur(12px);


    font-size:.90rem;

    font-weight:600;

    letter-spacing:.5px;


}




/*==================================================
TITLE
==================================================*/


.hero h1
{

    position:relative;


    margin-bottom:1.5rem;


    color:#fff;


    font-size:4.4rem;


    line-height:1.08;


    font-weight:800;


    letter-spacing:-2px;


}



/* linea decorativa */


.hero h1::after
{

    content:"";


    display:block;


    width:90px;


    height:4px;


    margin-top:1.5rem;


    border-radius:20px;


    background:#c89b3c;


}





/*==================================================
TEXT
==================================================*/


.hero p
{

    max-width:620px;


    margin-bottom:2.5rem;


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


    font-size:1.18rem;


    line-height:1.8;


}



/*==================================================
BUTTONS
==================================================*/


.hero-buttons
{

    display:flex;

    gap:1rem;

}




.hero .btn-primary
{

    background:#c89b3c;


    color:#fff;


    padding:1rem 2.2rem;


    border-radius:50px;


    font-weight:700;


    box-shadow:

    0 15px 35px rgba(200,155,60,.30);


    transition:.35s;


}



.hero .btn-primary:hover
{

    transform:translateY(-5px);


    box-shadow:

    0 25px 50px rgba(200,155,60,.40);


}





.hero .btn-secondary
{

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


    color:#fff;


    padding:1rem 2.2rem;


    border-radius:50px;


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


    backdrop-filter:blur(10px);


    transition:.35s;


}



.hero .btn-secondary:hover
{

    background:#fff;


    color:#12483c;


}



/*==================================================
ANIMATION
==================================================*/


@keyframes heroZoom
{

    from
    {

        transform:scale(1);

    }


    to
    {

        transform:scale(1.07);

    }

}




@keyframes heroContent
{

    from
    {

        opacity:0;

        transform:translateY(40px);

    }


    to
    {

        opacity:1;

        transform:translateY(0);

    }

}



.hero-content
{

    animation:heroContent 1s ease forwards;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:1200px)
{


    .hero
    {

        min-height:700px;

        padding:150px 0 100px;

    }


    .hero h1
    {

        font-size:3.6rem;

    }


    .hero p
    {

        font-size:1.10rem;

    }


}



/*==================================================
TABLET / MOBILE
==================================================*/

@media(max-width:992px)
{


    .hero
    {

        min-height:auto;

        padding:140px 0 90px;

        text-align:center;

    }



    .hero-content
    {

        max-width:100%;

        margin:auto;

    }



    .hero-overlay
    {

        background:

        linear-gradient(
            180deg,
            rgba(10,27,22,.75),
            rgba(10,27,22,.90)
        );

    }



    .hero::after
    {

        width:350px;

        height:350px;

        right:-120px;

        bottom:-120px;

    }



    .hero h1
    {

        font-size:3rem;

        letter-spacing:-1px;

    }



    .hero h1::after
    {

        margin-left:auto;

        margin-right:auto;

    }



    .hero p
    {

        margin-left:auto;

        margin-right:auto;

        font-size:1.05rem;

    }



    .hero-buttons
    {

        justify-content:center;

    }


}




/*==================================================
MOBILE
==================================================*/

@media(max-width:768px)
{


    .hero
    {

        padding:120px 0 80px;

    }



    .hero-image
    {

        object-position:center;

    }



    .hero-badge
    {

        font-size:.78rem;

        padding:.65rem 1.1rem;

        margin-bottom:1.5rem;

    }



    .hero h1
    {

        font-size:2.35rem;

        line-height:1.15;

        margin-bottom:1.2rem;

    }



    .hero p
    {

        font-size:1rem;

        line-height:1.7;

        margin-bottom:2rem;

    }



    .hero-buttons
    {

        flex-direction:column;

        width:100%;

        gap:.9rem;

    }



    .hero .btn-primary,
    .hero .btn-secondary
    {

        width:100%;

        padding:1rem;

    }



}



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

@media(max-width:576px)
{


    .hero
    {

        padding:110px 0 70px;

    }



    .hero h1
    {

        font-size:2rem;

    }



    .hero-badge
    {

        max-width:100%;

        justify-content:center;

    }



    .hero-overlay
    {

        background:

        linear-gradient(
            180deg,
            rgba(10,27,22,.82),
            rgba(10,27,22,.94)
        );

    }



}