/* ============================================================
   CAMPO 9 INMOBILIARIA
   HERO NUEVO - INDEX2
============================================================ */


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

.c9-hero2{
    width:100%;
    height:700px;
    min-height:0;

    position:relative;

    display:flex;
    align-items:flex-end;

    background:#161616;

    font-family:'Poppins',sans-serif;

    overflow:visible;
}


/* ============================================================
   IMAGEN REAL DEL HERO
============================================================ */

.c9-hero2-imagen{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:0;

    background:#161616;
}

.c9-hero2-imagen img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    /*
       IMPORTANTE:
       NO agrandamos artificialmente la imagen.
       Solo dejamos que conserve su proporción.
    */

    object-position:center 52%;
}


/* ============================================================
   OSCURECIDO
============================================================ */

.c9-hero2-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.38) 28%,
            rgba(0,0,0,.14) 58%,
            rgba(0,0,0,.08) 100%
        );

    z-index:1;

    pointer-events:none;
}


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

.c9-hero2-contenido{
    width:88%;
    max-width:1380px;

    margin:58px auto;

    position:relative;

    z-index:2;

    padding:0 0 0;

    box-sizing:border-box;
}


/* ============================================================
   TEXTO
============================================================ */

.c9-hero2-texto{
    max-width:650px;

    padding-bottom:135px;
}

.c9-hero2-texto h1{
    margin:0;

    color:#ffffff;

    font-size:52px;
    line-height:1.04;

    font-weight:700;

    letter-spacing:-1.5px;

    text-shadow:
        0 3px 12px
        rgba(0,0,0,.30);
}

.c9-hero2-texto h1 span{
    color:#ffffff;
}

.c9-hero2-texto p{
    margin:20px 0 0;

    color:#ffffff;

    font-size:21px;
    line-height:1.55;

    font-weight:400;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.35);
}


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

.c9-buscador2-wrap{
    width:100%;

    position:absolute;

    left:0;
    bottom:-45px;

    z-index:5;
}


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

.c9-buscador2-tabs{
    display:flex;

    align-items:stretch;

    width:max-content;

    margin-left:0;
}

.c9-tab2{
    width:150px;
    height:52px;

    border:0;

    background:#252525;
    color:#ffffff;

    font-family:'Poppins',sans-serif;

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

    cursor:pointer;

    transition:.2s ease;
}

.c9-tab2:first-child{
    border-radius:8px 0 0 0;
}

.c9-tab2:last-child{
    border-radius:0 8px 0 0;
}

.c9-tab2.active{
    background:#a90019;
    color:#ffffff;
}

.c9-tab2:hover{
    background:#8f0016;
}


/* ============================================================
   FORMULARIO BUSCADOR
============================================================ */

.c9-buscador2{
    width:100%;

    min-height:105px;

    padding:18px 20px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        minmax(250px,1.55fr)
        minmax(150px,.8fr)
        minmax(150px,.8fr)
        minmax(150px,.8fr)
        150px;

    align-items:center;

    gap:0;

    background:#ffffff;

    border-radius:0 9px 9px 9px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.18);
}


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

.c9-buscador2-campo{
    min-width:0;
    min-height:64px;

    padding:5px 22px;

    box-sizing:border-box;

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

    border-right:1px solid #e8e8e8;
}

.c9-buscador2-campo label{
    margin:0 0 2px;

    color:#777777;

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

    font-weight:400;
}

.c9-buscador2-campo select{
    width:100%;

    padding:2px 25px 2px 0;

    border:0;
    outline:0;

    background-color:transparent;

    color:#222222;

    font-family:'Poppins',sans-serif;

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

    cursor:pointer;
}


/* ============================================================
   PALABRA CLAVE
============================================================ */

.c9-buscador2-palabra{
    position:relative;

    margin-right:12px;

    min-height:58px;

    padding:0;

    border:1px solid #e3e3e3;

    border-radius:7px;
}

.c9-buscador2-palabra input{
    width:100%;
    height:56px;

    padding:0 48px 0 16px;

    box-sizing:border-box;

    border:0;
    outline:0;

    background:transparent;

    color:#333333;

    font-family:'Poppins',sans-serif;

    font-size:13px;
}

.c9-buscador2-palabra input::placeholder{
    color:#8a8a8a;
}

.c9-buscador2-palabra i{
    position:absolute;

    right:17px;
    top:50%;

    transform:translateY(-50%);

    color:#111111;

    font-size:17px;

    pointer-events:none;
}


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

.c9-buscador2-boton{
    height:58px;

    margin-left:18px;

    border:0;

    border-radius:7px;

    background:#a90019;
    color:#ffffff;

    font-family:'Poppins',sans-serif;

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

    cursor:pointer;

    box-shadow:
        0 6px 16px
        rgba(169,0,25,.20);

    transition:.2s ease;
}

.c9-buscador2-boton:hover{
    background:#870014;

    transform:translateY(-1px);
}


/* ============================================================
   ESCRITORIO MEDIANO
============================================================ */

@media (max-width:1200px){

    .c9-hero2{
        height:470px;
    }

    .c9-hero2-contenido{
        width:92%;
    }

    .c9-hero2-texto h1{
        font-size:46px;
    }

    .c9-buscador2{
        grid-template-columns:
            minmax(220px,1.3fr)
            minmax(130px,.8fr)
            minmax(130px,.8fr)
            minmax(130px,.8fr)
            135px;
    }

    .c9-buscador2-campo{
        padding-left:15px;
        padding-right:15px;
    }

}


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

@media (max-width:900px){

    .c9-hero2{
        height:520px;

        align-items:flex-start;
    }

    .c9-hero2-imagen img{
        object-position:center center;
    }

    .c9-hero2-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.42) 0%,
                rgba(0,0,0,.26) 45%,
                rgba(0,0,0,.50) 100%
            );
    }

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

        padding-top:60px;
    }

    .c9-hero2-texto{
        max-width:540px;

        padding-bottom:0;
    }

    .c9-hero2-texto h1{
        font-size:42px;
    }

    .c9-hero2-texto p{
        font-size:18px;
    }

    .c9-buscador2-wrap{
        bottom:-185px;
    }

    .c9-buscador2{
        grid-template-columns:
            1fr
            1fr;

        gap:12px;

        padding:16px;

        border-radius:0 8px 8px 8px;
    }

    .c9-buscador2-palabra{
        grid-column:1 / -1;

        margin:0;
    }

    .c9-buscador2-campo{
        border:1px solid #e7e7e7;

        border-radius:6px;

        padding:8px 13px;
    }

    .c9-buscador2-boton{
        margin:0;

        height:58px;
    }

}


/* ============================================================
   CELULAR - DISEÑO INDEX2
============================================================ */

@media (max-width:600px){

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

    .c9-hero2{
        width:100%;

        height:235px;
        min-height:235px;

        position:relative;

        display:block;

        overflow:visible;
    }


    /* ========================================================
       FOTO
    ======================================================== */

    .c9-hero2-imagen{
        position:absolute;

        inset:0;

        width:100%;
        height:490px;

        overflow:hidden;

        z-index:0;
    }

    .c9-hero2-imagen::before{
        display:none;
    }

    .c9-hero2-imagen img{
        position:absolute;

        inset:0;

        width:100%;
        height:100%;

        display:block;

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

        z-index:0;
    }


    /* ========================================================
       OSCURECIDO
    ======================================================== */

    .c9-hero2-overlay{
        position:absolute;

        inset:0;

        height:235px;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.18) 0%,
                rgba(0,0,0,.38) 45%,
                rgba(0,0,0,.58) 100%
            );

        z-index:1;
    }


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

    .c9-hero2-contenido{
        position:relative;

        width:100%;
        height:235px;

        margin:0;

        padding:34px 14px 0;

        box-sizing:border-box;

        z-index:2;
    }


    /* ========================================================
       TÍTULO
    ======================================================== */

    .c9-hero2-texto{
        width:100%;
        max-width:none;

        margin:0;
        padding:0;

        text-align:center;
    }

    .c9-hero2-texto h1{
        margin:0;

        color:#ffffff;

        font-size:25px;
        line-height:1.04;

        font-weight:800;

        letter-spacing:-.6px;

        text-shadow:
            0 2px 8px
            rgba(0,0,0,.45);
    }

    .c9-hero2-texto p{
        display:block;

        margin:9px 0 0;

        color:#ffffff;

        font-size:11px;
        line-height:1.35;

        font-weight:400;
    }


    /* ========================================================
       BUSCADOR COMPLETO
    ======================================================== */

    .c9-buscador2-wrap{
        position:absolute;

        top:150px;
        bottom:auto;

        left:14px;
        right:14px;

        width:auto;

        z-index:10;
    }


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

    .c9-buscador2-tabs{
        width:100%;

        display:flex;

        margin:0;
    }

    .c9-tab2{
        width:50%;
        height:45px;

        margin:0;
        padding:0;

        border:0;

        border-radius:0;

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

    .c9-tab2:first-child{
        border-radius:7px 0 0 0;
    }

    .c9-tab2:last-child{
        border-radius:0 7px 0 0;
    }


    /* ========================================================
       CAJA BLANCA
    ======================================================== */

    .c9-buscador2{
        width:100%;

        min-height:0;

        display:flex;
        flex-direction:column;

        gap:7px;

        margin:0;

        padding:11px;

        box-sizing:border-box;

        background:#ffffff;

        border-radius:0 0 8px 8px;

        box-shadow:
            0 8px 22px
            rgba(0,0,0,.18);
    }


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

    .c9-buscador2-campo{
        width:100%;

        min-height:0;

        margin:0;

        padding:6px 10px;

        box-sizing:border-box;

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

        border:1px solid #e1e1e1;

        border-radius:5px;

        background:#ffffff;
    }


    /* ========================================================
       PALABRA CLAVE
    ======================================================== */

    .c9-buscador2-palabra{
        position:relative;

        height:43px;
        min-height:43px;

        padding:0;
    }

    .c9-buscador2-palabra input{
        width:100%;
        height:41px;

        padding:0 38px 0 10px;

        box-sizing:border-box;

        border:0;

        font-size:10px;
    }

    .c9-buscador2-palabra i{
        position:absolute;

        right:12px;
        top:50%;

        transform:translateY(-50%);

        font-size:15px;
    }


    /* ========================================================
       LABELS
    ======================================================== */

    .c9-buscador2-campo label{
        margin:0 0 1px;

        color:#777777;

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

        font-weight:400;
    }


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

    .c9-buscador2-campo select{
        width:100%;
        height:23px;

        margin:0;
        padding:0 20px 0 0;

        border:0;
        outline:0;

        color:#222222;

        background-color:#ffffff;

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


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

    .c9-buscador2-boton{
        width:100%;
        height:43px;

        margin:0;

        border:0;

        border-radius:5px;

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

}


/* ============================================================
   CELULARES PEQUEÑOS
============================================================ */

@media (max-width:380px){

    .c9-hero2-texto h1{
        font-size:27px;
    }

    .c9-hero2-texto p{
        font-size:13px;
    }

}