/* ============================================================
   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:absolute;
    inset:0;

    display:flex;
    align-items:center;

    width:100%;

    padding-left:max(
        calc((100% - 1380px) / 2),
        24px
    );

    padding-right:24px;

    box-sizing:border-box;

    z-index:10;
}


.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-contenido-inner{
    opacity:1;
    visibility:visible;
    transform:none;
}


.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:1;
    visibility:visible;
    transform:none;
}


/* ============================================================
   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;
    }

}

/* ============================================================
   BUSCADOR DEL HERO
============================================================ */

.c9-hero-buscador-wrap{
    position:absolute;
    left:50%;
    bottom:22px;

    transform:translateX(-50%);

    width:88%;
    max-width:1380px;

    z-index:20;
}


.c9-hero-buscador{
    position:relative;

    width:100%;

    background:#fff;

    border-radius:4px;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.22);
}


/* ============================================================
   VENTA / ALQUILER
============================================================ */

.c9-hero-operaciones{
    position:absolute;

    left:0;
    bottom:100%;

    display:flex;

    z-index:2;
}


.c9-hero-operacion{
    min-width:105px;
    height:43px;

    padding:0 22px;

    border:0;

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

    color:#333;

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

    text-transform:uppercase;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.c9-hero-operacion:first-child{
    border-radius:4px 0 0 0;
}


.c9-hero-operacion:last-child{
    border-radius:0 4px 0 0;
}


.c9-hero-operacion:hover{
    background:#f2f2f2;
}


.c9-hero-operacion.activo{
    background:#a30000;
    color:#fff;
}


/* ============================================================
   CAMPOS
============================================================ */

.c9-hero-buscador-campos{
    display:grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr
        155px;

    align-items:stretch;

    min-height:76px;
}


.c9-hero-campo{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        11px
        20px;

    border-right:
        1px solid
        #e6e6e6;

    box-sizing:border-box;
}


.c9-hero-campo label{
    display:block;

    margin-bottom:5px;

    color:#777;

    font-size:10px;
    line-height:1.1;

    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;
}


/* ============================================================
   INPUT / SELECT
============================================================ */

.c9-hero-input-wrap,
.c9-hero-select-wrap{
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
}


.c9-hero-input-wrap > i,
.c9-hero-select-wrap > i{
    flex:0 0 auto;

    margin-right:10px;

    color:#a30000;

    font-size:15px;
}


.c9-hero-input-wrap input,
.c9-hero-select-wrap select{
    width:100%;
    height:30px;

    min-width:0;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:#222;

    font-family:inherit;

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


.c9-hero-input-wrap input::placeholder{
    color:#888;
    opacity:1;
}


.c9-hero-select-wrap select{
    cursor:pointer;
}


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

.c9-hero-campo-boton{
    display:flex;
    align-items:stretch;

    padding:0;
}


.c9-hero-boton-buscar{
    width:100%;

    border:0;

    border-radius:
        0
        4px
        4px
        0;

    background:#a30000;

    color:#fff;

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

    gap:9px;

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

    letter-spacing:.5px;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        background .2s ease;
}


.c9-hero-boton-buscar:hover{
    background:#870000;
}


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

   Los levantamos para que no queden detrás del buscador.
============================================================ */

.c9-hero-indicadores{
    bottom:125px;
}


/* ============================================================
   DEJAR ESPACIO PARA EL BUSCADOR EN EL CONTENIDO
============================================================ */

.c9-hero-contenido{
    padding-bottom:95px;
    box-sizing:border-box;
}


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

@media(max-width:900px){

    .c9-hero-buscador-wrap{
        width:92%;
        bottom:18px;
    }


    .c9-hero-buscador-campos{
        grid-template-columns:
            1.2fr
            1fr
            1fr
            125px;
    }


    .c9-hero-campo{
        padding:
            10px
            13px;
    }


    .c9-hero-boton-buscar span{
        display:none;
    }


    .c9-hero-indicadores{
        bottom:120px;
    }

}


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

@media(max-width:650px){

    /* ========================================================
       CONTENEDOR DEL BUSCADOR FLOTANTE
    ======================================================== */

    .c9-hero-buscador-wrap{
        position:fixed;

        left:18px;
        right:auto;
        bottom:18px;
        top:auto;

        width:58px;
        height:58px;

        margin:0;
        padding:0;

        transform:none;

        display:block !important;

        z-index:2147483000;

        pointer-events:none;
    }


    /* ========================================================
       BOTÓN FLOTANTE DE BÚSQUEDA
    ======================================================== */

    .c9-hero-buscador-abrir{
        position:absolute;

        left:0;
        bottom:0;

        width:58px;
        height:58px;

        margin:0;
        padding:0;

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

        border:0;
        border-radius:50%;

        background:#a30000;
        color:#ffffff;

        cursor:pointer;

        box-shadow:
            0 6px 18px
            rgba(0,0,0,.30);

        z-index:2147483003;

        pointer-events:auto;

        transition:
            transform .2s ease,
            background .2s ease;
    }


    .c9-hero-buscador-abrir i{
        margin:0;

        color:#ffffff;

        font-size:20px;
    }


    .c9-hero-buscador-abrir:active{
        transform:scale(.94);
    }


    /* ========================================================
       BUSCADOR CERRADO
    ======================================================== */

    .c9-hero-buscador-wrap:not(.abierto)
    .c9-hero-buscador{
        display:none !important;
    }


    /* ========================================================
       CONTENEDOR CUANDO ESTÁ ABIERTO
    ======================================================== */

    .c9-hero-buscador-wrap.abierto{
        left:18px;
        right:18px;

        bottom:18px;
        top:auto;

        width:auto;
        height:58px;

        pointer-events:none;
    }


    /* ========================================================
       TARJETA DEL BUSCADOR ABIERTA
    ======================================================== */

    .c9-hero-buscador-wrap.abierto
    .c9-hero-buscador{
        position:absolute;

        left:0;
        right:0;
        bottom:70px;

        width:100%;

        margin:0;
        padding:0;

        display:block !important;

        background:#ffffff;

        border-radius:12px;

        overflow:hidden;

        box-shadow:
            0 8px 28px
            rgba(0,0,0,.28);

        z-index:2147483001;

        pointer-events:auto;
    }


    /* ========================================================
       VENTA / ALQUILER
    ======================================================== */

    .c9-hero-operaciones{
        position:relative;

        left:auto;
        right:auto;
        bottom:auto;
        top:auto;

        display:flex;

        width:100%;

        margin:0;
        padding:0;
    }


    .c9-hero-operacion{
        flex:1;

        width:50%;
        min-width:0;
        height:44px;

        margin:0;
        padding:0;

        border:0;
        border-radius:0 !important;

        font-size:11px;
        font-weight:700;
    }


    /* ========================================================
       CAMPOS DEL BUSCADOR
    ======================================================== */

    .c9-hero-buscador-campos{
        display:flex !important;
        flex-direction:column;

        width:100%;

        min-height:0;

        margin:0;

        padding:12px;

        box-sizing:border-box;

        gap:9px;
    }


    .c9-hero-campo{
        width:100%;
        min-height:52px;

        margin:0;

        padding:
            6px
            12px;

        box-sizing:border-box;

        display:flex;
        flex-direction:column;
        justify-content:center;

        border:
            1px solid
            #e2e2e2;

        border-radius:7px;

        background:#ffffff;
    }


    .c9-hero-campo-q{
        width:100%;

        grid-column:auto;
    }


    /* ========================================================
       LABEL
    ======================================================== */

    .c9-hero-campo label{
        display:block;

        margin:
            0
            0
            4px;

        color:#777777;

        font-size:8px;
        line-height:1;

        font-weight:700;
    }


    /* ========================================================
       INPUT
    ======================================================== */

    .c9-hero-input-wrap{
        position:relative;

        display:flex;
        align-items:center;

        width:100%;
    }


    .c9-hero-input-wrap > i{
        flex:0 0 auto;

        margin-right:9px;

        color:#a30000;

        font-size:14px;
    }


    .c9-hero-input-wrap input{
        width:100%;
        height:30px;

        min-width:0;

        padding:0;

        border:0;
        outline:0;

        background:transparent;

        color:#222222;

        font-size:11px;
        font-weight:600;
    }


    /* ========================================================
       SELECT
    ======================================================== */

    .c9-hero-select-wrap{
        position:relative;

        display:flex;
        align-items:center;

        width:100%;
    }


    .c9-hero-select-wrap > i{
        flex:0 0 auto;

        margin-right:9px;

        color:#a30000;

        font-size:14px;
    }


    .c9-hero-select-wrap select{
        width:100%;
        height:30px;

        min-width:0;

        padding:0;

        border:0;
        outline:0;

        background:#ffffff;

        color:#222222;

        font-size:11px;
        font-weight:600;
    }


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

    .c9-hero-campo-boton{
        width:100%;
        min-height:46px;

        margin:0;
        padding:0;

        display:flex;

        border:0;

        grid-column:auto;
    }


    .c9-hero-boton-buscar{
        width:100%;
        min-height:46px;

        margin:0;
        padding:0;

        border:0;
        border-radius:7px;

        background:#a30000;
        color:#ffffff;

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

        gap:8px;

        font-size:11px;
        font-weight:800;
    }


    .c9-hero-boton-buscar span{
        display:inline;
    }


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

    .c9-hero-contenido{
        padding-bottom:0;

        box-sizing:border-box;
    }


    /* ========================================================
       INDICADORES DEL SLIDER
    ======================================================== */

    .c9-hero-indicadores{
        bottom:18px;
    }
    
    /* ========================================================
   AJUSTE CONTENIDO DEL HERO EN MÓVIL
======================================================== */

.c9-hero-contenido{
    display:flex;
    align-items:flex-end;

    padding:
        0
        18px
        42px;

    box-sizing:border-box;
}


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

    margin:0;
    padding:0;
}


/* TIPO: VENTA / ALQUILER */

.c9-hero-mini{
    margin-bottom:10px;
}


/* TÍTULO */

.c9-hero-contenido h1{
    margin:
        0
        0
        8px;

    line-height:1.05;
}


/* UBICACIÓN */

.c9-hero-ubicacion{
    margin-bottom:10px;
}


/* PRECIO */

.c9-hero-precio{
    margin-bottom:10px;
}


/* HABITACIONES / BAÑOS */

.c9-hero-datos{
    margin-bottom:14px;
}


/* BOTÓN VER PROPIEDAD */

.c9-hero-boton{
    margin:
        0
        0
        0;

    position:relative;

    bottom:auto;
}

}


/* ============================================================
   ESCRITORIO
   OCULTAR BOTÓN FLOTANTE
============================================================ */

@media(min-width:651px){

    .c9-hero-buscador-abrir{
        display:none !important;
    }

}