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

.c9-hero-slider{
    position:relative;

    width:100%;
    height:620px;

    overflow:hidden;

    background:#111;
}


/* ============================================================
   SLIDES
============================================================ */

.c9-hero-slides{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
}


.c9-hero-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    opacity:0;

    visibility:hidden;

    transition:
        opacity 1.3s ease,
        visibility 1.3s ease;
}


.c9-hero-slide.activo{
    opacity:1;
    visibility:visible;

    z-index:2;
}


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

.c9-hero-slide img{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    left:0;
    top:0;

    transform:scale(1);
    image-rendering:auto;

    will-change:transform;
}


/* ============================================================
   MOVIMIENTO TIPO CINEMATOGRÁFICO
============================================================ */

.c9-hero-slide.activo img{
    animation:
        c9HeroMovimiento
        10s
        linear
        forwards;
}


@keyframes c9HeroMovimiento{

    0%{
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    100%{
        transform:
            scale(1.025)
            translate3d(-.3%,-.2%,0);
    }

}


/* ============================================================
   VARIACIONES DE MOVIMIENTO
============================================================ */

.c9-hero-slide:nth-child(2n).activo img{
    animation-name:
        c9HeroMovimientoDerecha;
}


@keyframes c9HeroMovimientoDerecha{

    0%{
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    100%{
        transform:
            scale(1.025)
            translate3d(.3%,-.2%,0);
    }

}


.c9-hero-slide:nth-child(3n).activo img{
    animation-name:
        c9HeroMovimientoCentro;
}


@keyframes c9HeroMovimientoCentro{

    0%{
        transform:
            scale(1);
    }

    100%{
        transform:
            scale(1.025);
    }

}


/* ============================================================
   CAPA OSCURA
============================================================ */

.c9-hero-overlay{
    position:absolute;
    inset:0;

    z-index:5;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.46) 38%,
            rgba(0,0,0,.18) 70%,
            rgba(0,0,0,.08) 100%
        );

    pointer-events:none;
}


/* ============================================================
   CONTENIDO
============================================================ */

.c9-hero-contenido{
    position:relative;

    z-index:10;

    width:90%;
    max-width:1380px;
    height:100%;

    margin:0 auto;

    display:flex;

    align-items:center;
}


.c9-hero-contenido-inner{
    width:100%;
    max-width:720px;

    color:#fff;
}


.c9-hero-mini{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    padding:10px 16px;
}


/* VENTA */

.c9-hero-mini.es-venta{
    background:#a30000;
    color:#ffffff;
}


/* ALQUILER */

.c9-hero-mini.es-alquiler{
    background:#168447;
    color:#ffffff;
}


.c9-hero-contenido h1{
    margin:0 0 20px;
    color:#fff;
    font-family:'Poppins', sans-serif;

    font-size:64px;
    line-height:.95;

    font-weight:800;
    font-style:italic;

    letter-spacing:-3.5px;

    text-transform:none;

    max-width:800px;
}


.c9-hero-contenido p{
    max-width:570px;

    margin:
        0
        0
        30px;

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

    font-size:16px;
    line-height:1.7;

    font-weight:400;
}


/* ============================================================
   DATOS DE LA PROPIEDAD
============================================================ */

.c9-hero-ubicacion{
    margin:
        -5px
        0
        15px;

    display:flex;
    align-items:center;

    gap:8px;

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

    font-size:14px;
    font-weight:500;
}


.c9-hero-ubicacion i{
    color:#ffffff;

    font-size:13px;
}


.c9-hero-precio{
    margin-bottom:15px;

    color:#ffffff;

    font-size:27px;
    line-height:1.2;

    font-weight:700;

    letter-spacing:-.5px;
}


.c9-hero-datos{
    margin-bottom:25px;

    display:flex;
    align-items:center;

    gap:22px;

    flex-wrap:wrap;
}


.c9-hero-datos span{
    display:flex;
    align-items:center;

    gap:7px;

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

    font-size:13px;
    font-weight:500;
}


.c9-hero-datos i{
    font-size:14px;
}


/* ============================================================
   ANIMACIÓN DEL CONTENIDO
============================================================ */

.c9-hero-slide .c9-hero-contenido-inner{
    opacity:0;

    transform:
        translate3d(
            0,
            35px,
            0
        );
}


.c9-hero-slide.activo .c9-hero-contenido-inner{
    animation:
        c9HeroContenidoEntrada
        .9s
        .35s
        ease
        forwards;
}


@keyframes c9HeroContenidoEntrada{

    0%{
        opacity:0;

        transform:
            translate3d(
                0,
                35px,
                0
            );
    }

    100%{
        opacity:1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


/* ============================================================
   ENTRADA ESCALONADA
============================================================ */

.c9-hero-slide .c9-hero-mini,
.c9-hero-slide h1,
.c9-hero-slide .c9-hero-ubicacion,
.c9-hero-slide .c9-hero-precio,
.c9-hero-slide .c9-hero-datos,
.c9-hero-slide .c9-hero-boton{
    opacity:0;

    transform:
        translateY(18px);
}


.c9-hero-slide.activo .c9-hero-mini{
    animation:
        c9HeroDato
        .65s
        .30s
        ease
        forwards;
}


.c9-hero-slide.activo h1{
    animation:
        c9HeroDato
        .7s
        .42s
        ease
        forwards;
}


.c9-hero-slide.activo .c9-hero-ubicacion{
    animation:
        c9HeroDato
        .7s
        .54s
        ease
        forwards;
}


.c9-hero-slide.activo .c9-hero-precio{
    animation:
        c9HeroDato
        .7s
        .64s
        ease
        forwards;
}


.c9-hero-slide.activo .c9-hero-datos{
    animation:
        c9HeroDato
        .7s
        .74s
        ease
        forwards;
}


.c9-hero-slide.activo .c9-hero-boton{
    animation:
        c9HeroDato
        .7s
        .84s
        ease
        forwards;
}


@keyframes c9HeroDato{

    from{
        opacity:0;

        transform:
            translateY(18px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   BOTÓN
============================================================ */

.c9-hero-boton{
    min-height:52px;

    padding:
        0
        27px;

    display:inline-flex;

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

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

    border-radius:4px;

    background:rgba(152,0,27,.92);

    color:#fff;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.c9-hero-boton:hover{
    background:#98001b;

    border-color:#98001b;

    transform:translateY(-2px);
}


/* ============================================================
   INDICADORES
============================================================ */

.c9-hero-indicadores{
    position:absolute;

    z-index:15;

    left:50%;
    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:8px;
}


.c9-hero-indicadores button{
    width:28px;
    height:3px;

    padding:0;

    border:0;

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

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.c9-hero-indicadores button.activo{
    width:46px;

    background:#fff;
}


/* ============================================================
   MÓVIL
============================================================ */

@media(max-width:750px){

    .c9-hero-slider{
        height:500px;
    }


    .c9-hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.66) 0%,
                rgba(0,0,0,.42) 100%
            );
    }


    .c9-hero-contenido{
        width:92%;

        align-items:flex-end;

        padding-bottom:75px;
    }


    .c9-hero-contenido-inner{
        max-width:100%;
    }


    .c9-hero-mini{
        margin-bottom:12px;

        font-size:10px;

        letter-spacing:2px;
    }


    .c9-hero-contenido h1{
        margin-bottom: 14px;
        font-size: 26px;
        line-height: .98;
        letter-spacing: -2px;
        font-weight: 500;
    }


    .c9-hero-contenido p{
        margin-bottom:22px;

        font-size:13px;
        line-height:1.6;
    }


    .c9-hero-boton{
        min-height:46px;

        padding:
            0
            21px;

        font-size:12px;
    }


    .c9-hero-indicadores{
        bottom:25px;
    }
    
    .c9-hero-ubicacion{
    margin-bottom:12px;

    font-size:12px;
}


.c9-hero-precio{
    margin-bottom:12px;

    font-size:22px;
}


.c9-hero-datos{
    margin-bottom:20px;

    gap:14px;
}


.c9-hero-datos span{
    font-size:11px;
}

}


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

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

    .c9-hero-slide,
    .c9-hero-slide img{
        animation:none !important;

        transition:none !important;
    }

}