/* ============================================================
   VERSIONES CARD BUSCAR
============================================================ */

.card-buscar-escritorio{
    display:block;
}

.card-buscar-movil{
    display:none;
}


/* ============================================================
   MOVIL - CONSERVAR CARD ORIGINAL
============================================================ */

@media (max-width:768px){

    .card-buscar-escritorio{
        display:none !important;
    }

    .card-buscar-movil{
        display:block !important;
    }

}

/* ============================================================
   CARD BUSCAR - SOLO ESCRITORIO
============================================================ */

@media (min-width:769px){

    /* LISTADO EN UNA SOLA COLUMNA */

    .c9-main .c9-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
    }


    /* ========================================================
       CARD HORIZONTAL
    ======================================================== */

    .card-buscar{
        position:relative;

        display:grid;
        grid-template-columns:260px minmax(0,1fr);

        width:100%;
        min-height:190px;

        overflow:hidden;

        background:#fff;

        border:1px solid #e5e5e5;
        border-radius:12px;

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

        transition:.2s;
    }

    .card-buscar:hover{
        transform:translateY(-2px);
        box-shadow:0 6px 18px rgba(0,0,0,.10);
    }


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

    .card-buscar > .buscar-imagen{
        position:relative;

        display:block;

        width:260px;
        height:190px;

        overflow:hidden;
    }

    .card-buscar > .buscar-imagen img{
        width:100%;
        height:100%;

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

        transition:.35s;
    }

    .card-buscar:hover > .buscar-imagen img{
        transform:scale(1.03);
    }

    .card-buscar > .buscar-imagen::after{
        display:none;
    }


    /* ========================================================
       FAVORITO
    ======================================================== */

    .card-buscar .btn-favorito{
        top:12px;
        left:12px;

        width:34px;
        height:34px;

        font-size:15px;

        z-index:50;
    }


    /* ========================================================
       ETIQUETAS SOBRE FOTO
    ======================================================== */

    .card-buscar .card-top{
        top:10px;
        left:10px;
        right:10px;
    }

    .card-buscar .card-top-right{
        gap:5px;
        padding-right:0;
        max-width:100%;
    }

    .card-buscar .prop-fotos,
    .card-buscar .prop-id{
        padding:5px 8px;

        font-size:9px;

        border-radius:20px;
    }


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

    .buscar-contenido{
        min-width:0;

        display:flex;
        justify-content:space-between;
        gap:20px;

        padding:18px 18px 15px;
    }

    .buscar-info{
        min-width:0;
        flex:1;
    }


    /* PRECIO */

    .buscar-precio{
        display:flex;
        align-items:center;
        gap:9px;

        margin-bottom:4px;
    }

    .buscar-precio strong{
        color:#171717;

        font-size:22px;
        font-weight:800;
        line-height:1.15;
    }

    .buscar-precio-anterior{
        color:#999;

        font-size:12px;

        text-decoration:line-through;
    }


    /* TITULO */

    .buscar-titulo{
        display:block;

        max-width:650px;

        margin-bottom:7px;

        color:#202020;

        font-size:15px;
        font-weight:700;
        line-height:1.35;

        text-decoration:none;
    }

    .buscar-titulo:hover{
        color:#8b0018;
    }


    /* UBICACION */

    .buscar-ubicacion{
        display:flex;
        align-items:center;
        gap:6px;

        margin-bottom:11px;

        color:#666;

        font-size:11px;
    }

    .buscar-ubicacion i{
        color:#8b0018;
    }


    /* CARACTERISTICAS */

    .buscar-caracteristicas{
        display:flex;
        align-items:center;
        flex-wrap:wrap;

        gap:7px 18px;

        margin-top:5px;
    }

    .buscar-caracteristicas span{
        display:inline-flex;
        align-items:center;
        gap:6px;

        color:#4f4f4f;

        font-size:11px;
        white-space:nowrap;
    }

    .buscar-caracteristicas i{
        color:#666;

        font-size:13px;
    }


    /* CODIGO */

    .buscar-codigo{
        margin-top:13px;

        color:#999;

        font-size:9px;
    }

    .buscar-codigo strong{
        color:#666;
    }


    /* ========================================================
       BOTONES DERECHA
    ======================================================== */

    .buscar-acciones{
        width:135px;
        flex:0 0 135px;

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

        gap:7px;
    }

    .buscar-btn{
        width:100%;
        min-height:34px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;

        padding:6px 10px;

        border-radius:18px;

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

        text-decoration:none;

        transition:.2s;
    }


    /* VER */

    .buscar-btn-detalle{
        border:1px solid #d9d9d9;

        background:#fff;
        color:#444;
    }

    .buscar-btn-detalle:hover{
        background:#f5f5f5;
    }


    /* WHATSAPP */

    .buscar-btn-whatsapp{
        border:1px solid #93e3bd;

        background:#edfff6;
        color:#087b46;
    }

    .buscar-btn-whatsapp:hover{
        background:#dcf9eb;
    }


    /* MAPA */

    .buscar-btn-mapa{
        border:1px solid #e0c4c9;

        background:#fff;
        color:#8b0018;
    }

    .buscar-btn-mapa:hover{
        background:#fff5f6;
    }

}