@charset "utf-8";

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

.hero{
    position:relative;

    display:flex;
    align-items:center;

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

    padding:90px 0 80px;

    overflow:hidden;

    isolation:isolate;
}


/*==================================================*
* IMAGEN
*==================================================*/

.hero-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    z-index:-3;

    animation:heroZoom 20s ease-in-out 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,.68) 38%,
            rgba(10,27,22,.40) 75%,
            rgba(10,27,22,.52) 100%
        );
}


/*==================================================*
* EFECTO DE LUZ
*==================================================*/

.hero::after{
    content:"";

    position:absolute;

    right:-200px;
    bottom:-200px;

    width:600px;
    height:600px;

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

    z-index:-1;

    filter:blur(30px);

    pointer-events:none;
}


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

.hero-content{
    position:relative;

    width:100%;
    max-width:760px;

    animation:heroContent .9s ease forwards;
}


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

.hero-badge{
    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:.5rem 1.25rem;

    margin-bottom:1rem;

    border-radius:50px;

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

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

    color:#e7d7af;

    backdrop-filter:blur(12px);

    font-size:.88rem;
    font-weight:600;

    letter-spacing:.4px;
}


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

.hero h1{
    position:relative;

    margin:0 0 1.25rem;

    color:#fff;

    font-size:clamp(3rem,5vw,4.2rem);

    line-height:1.06;

    font-weight:800;

    letter-spacing:-2px;
}


/* Línea decorativa */

.hero h1::after{
    content:"";

    display:block;

    width:80px;
    height:4px;

    margin-top:1.1rem;

    border-radius:20px;

    background:#c89b3c;
}


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

.hero p{
    max-width:620px;

    margin:0 0 2rem;

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

    font-size:1.08rem;

    line-height:1.7;
}


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

.hero-buttons{
    display:flex;

    align-items:center;

    gap:.9rem;
}


/* Botón principal */

.hero .btn-primary{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:.9rem 2rem;

    border-radius:50px;

    background:#c89b3c;

    color:#fff;

    font-weight:700;

    box-shadow:
        0 12px 30px rgba(200,155,60,.28);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.hero .btn-primary:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(200,155,60,.38);
}


/* Botón secundario */

.hero .btn-secondary{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:.9rem 2rem;

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

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.hero .btn-secondary:hover{
    background:#fff;

    color:#12483c;

    transform:translateY(-3px);
}


/*==================================================*
* ANIMACIONES
*==================================================*/

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }

}

@keyframes heroContent{

    from{
        opacity:0;

        transform:translateY(25px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }

}


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

@media(max-width:1200px){

    .hero{
        min-height:calc(100vh - 100px);

        padding:75px 0 70px;
    }

    .hero h1{
        font-size:3.5rem;
    }

    .hero p{
        font-size:1.05rem;
    }

}


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

@media(max-width:992px){

    .hero{
        min-height:auto;

        padding:75px 0 70px;

        text-align:center;
    }

    .hero-content{
        max-width:720px;

        margin:0 auto;
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(10,27,22,.72),
                rgba(10,27,22,.90)
            );
    }

    .hero::after{
        width:350px;
        height:350px;

        right:-120px;
        bottom:-120px;
    }

    .hero-badge{
        margin-bottom:1rem;
    }

    .hero h1{
        margin-bottom:1.15rem;

        font-size:3rem;

        letter-spacing:-1px;
    }

    .hero h1::after{
        margin-left:auto;
        margin-right:auto;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;

        margin-bottom:1.8rem;

        font-size:1rem;
    }

    .hero-buttons{
        justify-content:center;
    }

}


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

@media(max-width:768px){

    .hero{
        min-height:auto;

        padding:55px 0 50px;

        align-items:center;
    }

    .hero-content{
        width:100%;

        padding:0 10px;

        box-sizing:border-box;
    }

    .hero-image{
        object-position:center center;
    }

    .hero-badge{
        margin-bottom:1rem;

        padding:.5rem 1rem;

        font-size:.75rem;
    }

    .hero h1{
        margin-bottom:1rem;

        font-size:2.25rem;

        line-height:1.12;

        letter-spacing:-.8px;
    }

    .hero h1::after{
        width:65px;

        height:3px;

        margin-top:.9rem;
    }

    .hero p{
        max-width:550px;

        margin-bottom:1.6rem;

        font-size:.96rem;

        line-height:1.6;
    }

    .hero-buttons{
        flex-direction:column;

        width:100%;

        gap:.7rem;
    }

    .hero .btn-primary,
    .hero .btn-secondary{
        width:100%;

        box-sizing:border-box;

        padding:.85rem 1rem;
    }

}


/*==================================================*
* MOBILE PEQUEÑO
*==================================================*/

@media(max-width:576px){

    .hero{
        padding:45px 0 40px;
    }

    .hero-content{
        padding:0 8px;
    }

    .hero-badge{
        padding:.45rem .9rem;

        font-size:.72rem;
    }

    .hero h1{
        font-size:2rem;

        line-height:1.1;
    }

    .hero p{
        font-size:.92rem;

        line-height:1.55;

        margin-bottom:1.4rem;
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(10,27,22,.80),
                rgba(10,27,22,.93)
            );
    }

}


/*==================================================*
* TELEFONOS MUY PEQUEÑOS
*==================================================*/

@media(max-width:380px){

    .hero{
        padding:38px 0 35px;
    }

    .hero h1{
        font-size:1.8rem;
    }

    .hero p{
        font-size:.88rem;
    }

    .hero .btn-primary,
    .hero .btn-secondary{
        padding:.8rem 1rem;
    }

}


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

@media(prefers-reduced-motion:reduce){

    .hero-image,
    .hero-content{
        animation:none;
    }

    .hero .btn-primary,
    .hero .btn-secondary{
        transition:none;
    }

}